/* =========================================================
   Styles/analytics.css - Ultimate F1 Data Dashboard
   ========================================================= */

/* Hero & Controls */
.analytics-hero {
  background: linear-gradient(135deg, #15151e 0%, #0a0a0f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--f1-red, #e10600);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.hero-text h1 { font-size: 2rem; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: 1px; color:#fff;}
.hero-text p { color: #888; margin: 6px 0 0; font-size: 0.95rem; }

.unified-controls {
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px; overflow: hidden;
  width: 100%; max-width: 450px;
}

.unified-controls select, .unified-controls button {
  background: transparent; border: none; color: #fff;
  padding: 14px 16px; font-size: 0.9rem; font-weight: 700;
  outline: none; margin: 0; border-radius: 0;
}

.unified-controls select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.unified-controls #seasonSelect { flex: 0 0 auto; padding-right: 12px; }
.unified-controls .divider { width: 1px; background: rgba(255,255,255,0.1); margin: 8px 0; }
.unified-controls #raceSelect { flex: 1 1 auto; width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.unified-controls #loadBtn { flex: 0 0 auto; background: var(--f1-red, #e10600); cursor: pointer; text-transform: uppercase; }

/* The Bento Dashboard Grid */
.bento-dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(min-content, auto);
  gap: 20px;
  margin-bottom: 40px;
}

.bento-card {
  background: #111115;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.fastest-card { grid-column: span 6; }
.winner-card { grid-column: span 6; }
.team-perf-card { grid-column: span 12; }
.movers-card { grid-column: span 6; }
.attrition-card { grid-column: span 6; }

/* Thematic Card Borders */
.card-purple { border-top: 4px solid #d896ff; }
.card-gold { border-top: 4px solid #d4af37; background: linear-gradient(180deg, rgba(212,175,55,0.05) 0%, #111115 100%); }
.card-wide { border-top: 4px solid #fff; }
.card-green { border-top: 4px solid #00ff88; }
.card-red { border-top: 4px solid #ff4444; }

/* Typography inside Cards */
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.card-header h3 { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin: 0; color: #fff; }
.subtitle { color: #888; font-size: 0.8rem; margin: 4px 0 0 0; }
.badge { background: rgba(216, 150, 255, 0.2); color: #d896ff; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }

/* Gold Themes for Winner Card */
.badge-gold { background: rgba(212, 175, 55, 0.2) !important; color: #d4af37 !important; }
.highlight-gold { color: #d4af37 !important; border: 1px solid rgba(212, 175, 55, 0.2); }

.stat-hero-text { font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 8px; text-transform: uppercase; }
.stat-row { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.stat-highlight { font-family: monospace; font-size: 1.1rem; font-weight: 700; color: #d896ff; background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 6px; }
.stat-sub { color: #aaa; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }

.text-white { color: #fff; }
.text-green { color: #00ff88; }
.text-red { color: #ff4444; }

/* Data Visualization: Team Points Bar Chart */
.chart-container { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.bar-row { display: flex; align-items: center; gap: 16px; }
.bar-label { width: 120px; flex-shrink: 0; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 12px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: #fff; border-radius: 6px; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-value { width: 40px; flex-shrink: 0; text-align: right; font-weight: 900; font-size: 1rem; color: #fff; }

/* Overtakes List */
.list-container { display: flex; flex-direction: column; gap: 10px; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); }
.li-info { flex: 1; min-width: 0; padding-right: 10px;}
.li-main { font-weight: 800; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.li-sub { font-size: 0.75rem; color: #888; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.delta-box { font-weight: 900; font-size: 1.1rem; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,0.3); flex-shrink: 0; text-align: center; min-width: 50px;}
.delta-box.up { color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.2); }
.delta-box.down { color: #ff4444; border: 1px solid rgba(255, 68, 68, 0.2); }

/* Attrition/Status Diagnostics */
.attrition-summary { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.attrition-stat { display: flex; flex-direction: column; align-items: flex-start; }
.attrition-stat .count { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.attrition-stat .label { font-size: 0.75rem; color: #888; text-transform: uppercase; font-weight: 700; margin-top: 6px; letter-spacing: 0.5px;}

.pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #ccc; }
.status-pill .badge-count { background: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; color: #fff; }

/* States */
.stat-loading { text-align: center; padding: 40px; color: #aaa; }
.no-data { text-align: center; padding: 40px; color: #ff4444; background: #111115; border-radius: 16px; border: 1px solid #222; }

/* Attrition Log Styles */
.text-muted { color: #555; }

.retirements-list { 
  display: flex; flex-direction: column; gap: 8px; 
  margin-top: 16px; max-height: 180px; 
  overflow-y: auto; padding-right: 6px; 
}

/* Custom Scrollbar for the Log */
.retirements-list::-webkit-scrollbar { width: 4px; }
.retirements-list::-webkit-scrollbar-track { background: transparent; }
.retirements-list::-webkit-scrollbar-thumb { background: rgba(255,68,68,0.3); border-radius: 4px; }

.ret-item { 
  display: flex; justify-content: space-between; align-items: center; 
  padding: 10px 12px; background: rgba(255,68,68,0.05); 
  border-left: 3px solid #ff4444; border-radius: 0 8px 8px 0; 
}

.ret-driver { font-weight: 800; font-size: 0.9rem; color: #fff; width: 35%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ret-reason { font-size: 0.75rem; color: #ff4444; text-transform: uppercase; font-weight: 800; background: rgba(255,68,68,0.1); padding: 4px 8px; border-radius: 4px; }
.ret-lap { font-size: 0.85rem; color: #aaa; font-family: monospace; font-weight: 700; text-align: right;}

/* Mobile View Scaling */
@media (max-width: 900px) {
  .fastest-card, .winner-card, .movers-card, .attrition-card { grid-column: span 12; }
  .bar-label { width: 90px; }
  .analytics-hero { flex-direction: column; align-items: flex-start; }
}