/* ═══════════════════════════════════════════════════════════════
   INSIGHTS POLISH — Premium card redesign
   Overrides inline CSS from med-nav.js and med-labs-chart.js
   ═══════════════════════════════════════════════════════════════ */

/* ── Stats Row: 100% cards ── */
.mn-stats-row {
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.mn-stat-card {
  background: linear-gradient(160deg, rgba(20,28,45,0.95), rgba(14,20,34,0.98)) !important;
  border: 1px solid rgba(127,157,209,0.1) !important;
  border-radius: 18px !important;
  padding: 18px 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.025) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  overflow: hidden;
}
.mn-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.2), transparent);
}
.mn-stat-card:hover {
  border-color: rgba(96,165,250,0.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.mn-stat-val {
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}
.mn-stat-lbl {
  font-size: 0.72rem !important;
  color: rgba(148,163,184,0.5) !important;
  margin-top: 6px !important;
  letter-spacing: 0.02em;
}

/* ── MLC Sections: Category cards (LIPIDS, etc) ── */
.mlc-section {
  border: 1px solid rgba(127,157,209,0.08) !important;
  border-radius: 20px !important;
  padding: 14px 14px 14px !important;
  background:
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--mlc-sec,#6ec1ff) 8%, transparent), transparent 50%),
    linear-gradient(165deg, rgba(18,25,40,0.94), rgba(12,17,28,0.98)) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  transition: all 0.3s !important;
}
.mlc-section:hover {
  border-color: rgba(127,157,209,0.14) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.mlc-section::before {
  height: 2px !important;
  opacity: 0.6 !important;
  border-radius: 20px 20px 0 0;
}

.mlc-section-title {
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: rgba(200,210,228,0.85) !important;
}
.mlc-section-count {
  font-size: 0.62rem !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* ── Individual Lab Cards ── */
.mlc-card {
  background: linear-gradient(160deg, rgba(25,32,50,0.9), rgba(18,24,38,0.95)) !important;
  border: 1px solid rgba(127,157,209,0.06) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.015) !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  overflow: hidden;
}
.mlc-card:hover {
  border-color: rgba(127,157,209,0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Card top row: name + badge */
.mlc-card-head {
  margin-bottom: 6px !important;
  gap: 8px !important;
}
.mlc-card-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(220,230,245,0.9) !important;
  letter-spacing: -0.01em;
}
.mlc-card-badge {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.03em;
}
.mlc-card-badge.normal {
  background: rgba(34,197,94,0.1) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34,197,94,0.15) !important;
}
.mlc-card-badge.high, .mlc-card-badge.low {
  background: rgba(245,158,11,0.1) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245,158,11,0.15) !important;
}

/* Value display */
.mlc-card-val {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
  letter-spacing: -0.03em !important;
  color: #f5f5f7 !important;
}
.mlc-card-unit {
  font-size: 0.65rem !important;
  color: rgba(148,163,184,0.4) !important;
  margin-left: 3px;
}

/* Mini chart */
.mlc-mini-chart {
  margin: 6px 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
}

/* Bottom stats: latest, trend, range */
.mlc-card-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
  font-size: 0.62rem !important;
  color: rgba(148,163,184,0.45) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.mlc-card-foot strong {
  color: rgba(200,210,225,0.7) !important;
  font-weight: 700 !important;
}

/* Trend colors */
.mlc-trend-up { color: #f87171 !important; }
.mlc-trend-down { color: #4ade80 !important; }
.mlc-trend-flat { color: rgba(148,163,184,0.5) !important; }

/* ── Card grid: better spacing ── */
.mlc-card-row {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

/* ── Today's Medications top card ── */
.mn-today-body .today-ring-card,
.mn-today-body > div:first-child {
  border-radius: 20px !important;
  overflow: hidden;
}

/* ── Slot bars (Morning/Bedtime) ── */
.mn-slot-bar, [class*="mn-slot"] {
  border-radius: 14px !important;
  transition: all 0.25s !important;
}

/* ── AI button premium ── */
.mn-insights-body > .btn-ai-meds {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(40,74,145,0.92), rgba(28,53,109,0.96)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.mn-insights-body > .btn-ai-meds:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Print button premium ── */
.mn-insights-body > #mdr-print-btn {
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* ── Adherence & Dose log panels ── */
.mn-insights-body > #med-adherence-panel,
.mn-insights-body > #med-dose-log-panel {
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* ── Health Intelligence panel ── */
.med-health-intel-panel,
.med-hi-head {
  border-radius: 18px !important;
}
.med-hi-list > div {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  transition: background 0.2s !important;
}
.med-hi-list > div:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ── Side Effects panel ── */
#mse-wrap {
  border-radius: 20px !important;
}

/* ── Body Map wrapper ── */
.mn-bodymap-wrap {
  border-radius: 20px !important;
}

/* ── MLC Header polish ── */
.mlc-header {
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid rgba(127,157,209,0.06) !important;
}
.mlc-title {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.mlc-sub {
  font-size: 0.68rem !important;
}
.mlc-summary {
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 0.66rem !important;
}

/* ── Timing panel ── */
#med-timing-panel {
  border-radius: 20px !important;
}

/* ── Tab navigation polish ── */
.mn-nav {
  background: linear-gradient(180deg, rgba(13,19,32,0.96), rgba(13,19,32,0.92)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mn-btn {
  border-radius: 6px 6px 0 0 !important;
  transition: all 0.2s !important;
}
.mn-btn:hover {
  background: rgba(255,255,255,0.03) !important;
}
.mn-btn.active {
  background: rgba(96,165,250,0.05) !important;
}

/* ── Insights body spacing ── */
.mn-insights-body {
  gap: 14px 16px !important;
  padding: 18px !important;
}

/* ── Responsive refinements ── */
@media (max-width: 1100px) {
  .mlc-card-row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .mn-insights-body {
    padding: 12px !important;
    gap: 10px !important;
  }
  .mn-stats-row {
    gap: 8px !important;
  }
  .mn-stat-val {
    font-size: 1.5rem !important;
  }
  .mlc-card-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Light theme ── */
[data-theme="light"] .mn-stat-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(248,250,252,0.95)) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
[data-theme="light"] .mlc-section {
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(248,250,252,0.96)) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .mlc-card {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .mlc-card-name { color: #1e293b !important; }
[data-theme="light"] .mlc-card-val { color: #0f172a !important; }