/* ═══════════════════════════════════════════════════════
   TATA MOTORS — Corporate Modern Design System
   Tailwind handles 95% of styling. This file handles
   animations, custom components, and overrides.
   ═══════════════════════════════════════════════════════ */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── NAV LINKS ─────────────────────────────────────── */
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; font-size: 14px; font-weight: 500;
  color: #64748b; cursor: pointer;
  transition: all 0.2s ease; text-decoration: none;
  border-left: 4px solid transparent;
}
.nav-link:hover { background: #f8fafc; color: #3b82f6; }
.nav-link.active {
  background: #eff6ff; color: #1d4ed8; font-weight: 600;
  border-left-color: #1d4ed8;
}

/* ── CARDS ──────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.kpi-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: fadeUp 0.5s ease both;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,60,117,0.08);
}
.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.20s; }
.kpi-card:nth-child(5) { animation-delay: 0.25s; }

.kpi-card-accent {
  background: #1e3a5f;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0,60,117,0.2);
  position: relative; overflow: hidden;
  animation: fadeUp 0.5s ease 0.25s both;
}

.kpi-label {
  font-size: 12px; font-weight: 500;
  color: #94a3b8; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpi-value {
  font-size: 24px; font-weight: 600;
  color: #191c1e; margin-top: 4px;
  letter-spacing: -0.01em;
}
.kpi-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 2px;
}
.kpi-badge.positive { background: #ecfdf5; color: #059669; }
.kpi-badge.negative { background: #fef2f2; color: #dc2626; }
.kpi-badge.neutral  { background: #f8fafc; color: #94a3b8; }

/* ── DATA TABLE ────────────────────────────────────── */
.data-table { border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 11px; font-weight: 600;
  color: #94a3b8; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td {
  padding: 12px 16px; font-size: 13px;
  border-bottom: 1px solid #f8fafc; color: #334155;
}
.data-table tbody tr:hover { background: #f8fafc; }

/* ── MODEL CARDS ───────────────────────────────────── */
.model-card {
  background: #ffffff; border: 1px solid #f1f5f9;
  border-radius: 12px; padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}
.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,60,117,0.08);
  border-color: #bfdbfe;
}
.model-tag {
  font-size: 10px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px;
}
.tag-ev     { background: #ecfdf5; color: #059669; }
.tag-hybrid { background: #eff6ff; color: #2563eb; }
.tag-petrol { background: #fffbeb; color: #d97706; }
.tag-diesel { background: #fef2f2; color: #dc2626; }

/* ── SLIDER ────────────────────────────────────────── */
.wi-slider {
  -webkit-appearance: none; width: 100%;
  background: transparent;
}
.wi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px; width: 18px; border-radius: 50%;
  background: #003c75; cursor: pointer; margin-top: -7px;
  box-shadow: 0 2px 6px rgba(0,60,117,0.3);
  transition: transform 0.15s ease;
}
.wi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.wi-slider::-webkit-slider-runnable-track {
  width: 100%; height: 4px; cursor: pointer;
  background: linear-gradient(90deg, #a7c8ff, #e2e8f0);
  border-radius: 2px;
}
.wi-slider:focus { outline: none; }
.wi-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0,83,158,0.15);
}

/* ── TIME TOGGLE ───────────────────────────────────── */
.tt-btn { color: #94a3b8; cursor: pointer; transition: all 0.2s; }
.tt-btn.active { background: #ffffff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ── RISK CARDS ────────────────────────────────────── */
.risk-card {
  border-radius: 12px; padding: 24px;
  border-left: 4px solid; transition: all 0.2s ease;
}
.risk-card:hover { transform: translateY(-2px); }
.risk-high   { background: #fef2f2; border-color: #ef4444; }
.risk-medium { background: #fffbeb; border-color: #f59e0b; }
.risk-low    { background: #ecfdf5; border-color: #10b981; }

/* ── CUSTOM SHADOW (Stitch) ───────────────────────── */
.custom-shadow { box-shadow: 0px 4px 20px rgba(0,0,0,0.05); }

/* ── TOP MARKETS BAR ───────────────────────────────── */
.market-row { display: flex; flex-direction: column; gap: 8px; }
.market-row .bar-bg {
  width: 100%; height: 8px; background: #f1f5f9;
  border-radius: 999px; overflow: hidden;
}
.market-row .bar-fill {
  height: 100%; background: #1d4ed8; border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ── ANIMATIONS ────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── SECTION VISIBILITY ────────────────────────────── */
.page-section { display: none; }
.page-section.active { display: block; animation: fadeUp 0.4s ease; }