/* ============================================================
   ZamZam — Solo Leveling Insights styling
   - INSIGHTS (top advice cards)
   - TRENDS (last 30D vs prior 30D)
   - WEEKLY (7-day cells)
   - GOALS (progress bars)
   ============================================================ */

/* -------- INSIGHTS cards -------- */
#insightsMount {
  display: grid;
  gap: 10px;
  padding: 12px 14px 16px;
}
.ins-card {
  background: rgba(0, 8, 20, 0.65);
  border: 1px solid rgba(0, 246, 255, 0.18);
  padding: 12px 14px;
  position: relative;
  clip-path: polygon(
    0 0, calc(100% - 10px) 0, 100% 10px,
    100% 100%, 10px 100%, 0 calc(100% - 10px)
  );
  transition: transform 0.15s, box-shadow 0.15s;
}
.ins-card:hover { transform: translateX(2px); }
.ins-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ins-ico {
  font-size: 16px;
  filter: drop-shadow(0 0 6px var(--sys-cyan-glow));
}
.ins-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sys-cyan);
  text-shadow: 0 0 5px var(--sys-cyan-glow);
}
.ins-body {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sys-text);
  letter-spacing: 0.01em;
}

/* Variant: urgent (red, pulse) */
.ins-card.ins-urgent {
  background: linear-gradient(90deg, rgba(255,51,102,0.12), rgba(0,8,20,0.7));
  border-color: var(--sys-danger);
  box-shadow: 0 0 16px rgba(255,51,102,0.35);
  animation: ins-urgent-pulse 1.6s ease-in-out infinite;
}
.ins-card.ins-urgent .ins-title { color: var(--sys-danger); text-shadow: 0 0 6px rgba(255,51,102,0.6); }
.ins-card.ins-urgent .ins-ico { filter: drop-shadow(0 0 6px rgba(255,51,102,0.8)); }
@keyframes ins-urgent-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,51,102,0.35); }
  50%      { box-shadow: 0 0 26px rgba(255,51,102,0.7); }
}

/* Variant: fix (warning) */
.ins-card.ins-fix {
  background: linear-gradient(90deg, rgba(255,170,40,0.10), rgba(0,8,20,0.7));
  border-color: #ffaa28;
  box-shadow: 0 0 12px rgba(255,170,40,0.3);
}
.ins-card.ins-fix .ins-title { color: #ffaa28; text-shadow: 0 0 6px rgba(255,170,40,0.5); }
.ins-card.ins-fix .ins-ico { filter: drop-shadow(0 0 6px rgba(255,170,40,0.8)); }

/* Variant: pattern (insight, blue) */
.ins-card.ins-pattern {
  border-color: var(--sys-cyan-dim);
}

/* Variant: win (green) */
.ins-card.ins-win {
  background: linear-gradient(90deg, rgba(0,255,163,0.12), rgba(0,8,20,0.7));
  border-color: var(--sys-success);
  box-shadow: 0 0 14px rgba(0,255,163,0.35);
}
.ins-card.ins-win .ins-title { color: var(--sys-success); text-shadow: 0 0 6px rgba(0,255,163,0.5); }
.ins-card.ins-win .ins-ico { filter: drop-shadow(0 0 6px rgba(0,255,163,0.8)); }

/* Variant: level-up (purple) */
.ins-card.ins-level-up {
  background: linear-gradient(90deg, rgba(157,62,255,0.16), rgba(0,8,20,0.7));
  border-color: var(--sys-purple);
  box-shadow: 0 0 14px var(--sys-purple-glow);
}
.ins-card.ins-level-up .ins-title { color: #c69eff; text-shadow: 0 0 6px var(--sys-purple-glow); }
.ins-card.ins-level-up .ins-ico { filter: drop-shadow(0 0 6px var(--sys-purple-glow)); }

.ins-empty {
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sys-text-muted);
  text-transform: uppercase;
  padding: 30px 12px;
  opacity: 0.7;
}

/* -------- TRENDS rows -------- */
#trendsMount {
  padding: 8px 14px 14px;
  font-family: 'Orbitron', monospace;
}
.trend-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--sys-cyan);
  text-shadow: 0 0 4px var(--sys-cyan-glow);
  text-transform: uppercase;
  padding: 6px 0 10px;
  opacity: 0.85;
}
.trend-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px 70px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(0,246,255,0.06);
}
.trend-row:last-child { border-bottom: none; }
.trend-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sys-text);
  text-shadow: 0 0 4px rgba(0,246,255,0.2);
}
.trend-bar {
  position: relative;
  display: block;
  height: 8px;
  background: rgba(0,246,255,0.08);
  border: 1px solid var(--sys-cyan-dim);
  overflow: hidden;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.trend-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sys-cyan), #00b4ff);
  box-shadow: 0 0 8px var(--sys-cyan-glow);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trend-fill.purple { background: linear-gradient(90deg, var(--sys-purple), #c69eff); box-shadow: 0 0 8px var(--sys-purple-glow); }
.trend-fill.gold   { background: linear-gradient(90deg, #ffd700, #ffaa28);            box-shadow: 0 0 8px rgba(255,215,0,0.5); }
.trend-val {
  font-size: 12px;
  font-weight: 800;
  color: var(--sys-cyan);
  text-shadow: 0 0 4px var(--sys-cyan-glow);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.trend-delta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.trend-delta.up      { color: var(--sys-success); text-shadow: 0 0 4px rgba(0,255,163,0.4); }
.trend-delta.down    { color: var(--sys-danger);  text-shadow: 0 0 4px rgba(255,51,102,0.4); }
.trend-delta.neutral { color: var(--sys-text-muted); }

/* -------- WEEKLY rows -------- */
#weeklyMount {
  padding: 8px 14px 14px;
  font-family: 'Orbitron', monospace;
}
.wk-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--sys-cyan);
  text-shadow: 0 0 4px var(--sys-cyan-glow);
  text-transform: uppercase;
  padding: 6px 0 10px;
  opacity: 0.85;
}
.wk-row {
  display: grid;
  grid-template-columns: 80px auto 50px 60px 50px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,246,255,0.06);
  font-size: 11px;
}
.wk-row:last-child { border-bottom: none; }
.wk-key {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sys-text);
}
.wk-cells {
  display: inline-flex;
  gap: 3px;
}
.wk-c {
  display: inline-block;
  width: 12px; height: 12px;
  background: rgba(0,246,255,0.08);
  border: 1px solid rgba(0,246,255,0.14);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.wk-c.done   { background: var(--sys-cyan); border-color: var(--sys-cyan); box-shadow: 0 0 6px var(--sys-cyan-glow); }
.wk-c.missed { background: rgba(255,51,102,0.6); border-color: var(--sys-danger); box-shadow: 0 0 5px rgba(255,51,102,0.6); }
.wk-vs {
  font-weight: 800;
  color: var(--sys-cyan);
  text-shadow: 0 0 4px var(--sys-cyan-glow);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wk-prev {
  color: var(--sys-text-muted);
  font-weight: 600;
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wk-delta {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 10px;
}
.wk-delta.up      { color: var(--sys-success); }
.wk-delta.down    { color: var(--sys-danger); }
.wk-delta.neutral { color: var(--sys-text-muted); }

/* -------- GOALS rows -------- */
#goalsMount {
  padding: 8px 14px 14px;
  display: grid;
  gap: 10px;
}
.goal-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 8, 20, 0.55);
  border: 1px solid rgba(0, 246, 255, 0.12);
  clip-path: polygon(
    0 0, calc(100% - 8px) 0, 100% 8px,
    100% 100%, 8px 100%, 0 calc(100% - 8px)
  );
}
.goal-icon {
  font-size: 22px;
  text-align: center;
  filter: drop-shadow(0 0 6px var(--sys-cyan-glow));
}
.goal-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.goal-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sys-cyan);
  text-shadow: 0 0 4px var(--sys-cyan-glow);
}
.goal-track {
  height: 6px;
  background: rgba(0,246,255,0.08);
  border: 1px solid var(--sys-cyan-dim);
  overflow: hidden;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sys-cyan), #00b4ff);
  box-shadow: 0 0 6px var(--sys-cyan-glow);
  transition: width 0.6s ease;
}
.goal-val {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 5px var(--sys-cyan-glow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.goal-row.goal-gold   { border-color: #ffd700; box-shadow: 0 0 14px rgba(255,215,0,0.25); }
.goal-row.goal-gold .goal-icon  { filter: drop-shadow(0 0 6px rgba(255,215,0,0.7)); }
.goal-row.goal-gold .goal-label { color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,0.5); }
.goal-row.goal-gold .goal-fill  { background: linear-gradient(90deg, #ffd700, #ffaa28); box-shadow: 0 0 6px rgba(255,215,0,0.5); }
.goal-row.goal-purple { border-color: var(--sys-purple); box-shadow: 0 0 14px var(--sys-purple-glow); }
.goal-row.goal-purple .goal-icon  { filter: drop-shadow(0 0 6px var(--sys-purple-glow)); }
.goal-row.goal-purple .goal-label { color: #c69eff; text-shadow: 0 0 4px var(--sys-purple-glow); }
.goal-row.goal-purple .goal-fill  { background: linear-gradient(90deg, var(--sys-purple), #c69eff); box-shadow: 0 0 6px var(--sys-purple-glow); }

/* -------- Mobile responsiveness -------- */
@media (max-width: 600px) {
  /* INSIGHTS: tighter padding + smaller text */
  #insightsMount { padding: 8px 10px 12px; gap: 8px; }
  .ins-card { padding: 10px 12px; }
  .ins-title { font-size: 9.5px; letter-spacing: 0.12em; }
  .ins-body { font-size: 12px; line-height: 1.4; }
  .ins-ico { font-size: 14px; }

  /* TRENDS: tighter columns */
  #trendsMount { padding: 6px 10px 12px; }
  .trend-head { font-size: 9px; letter-spacing: 0.16em; padding: 4px 0 8px; }
  .trend-row { grid-template-columns: 64px 1fr 48px 56px; gap: 6px; padding: 6px 0; }
  .trend-key { font-size: 9.5px; letter-spacing: 0.08em; }
  .trend-val { font-size: 11px; }
  .trend-delta { font-size: 9px; letter-spacing: 0.04em; }
  .trend-bar { height: 6px; }

  /* WEEKLY: hide redundant "vs X/7" column on phone, compact */
  #weeklyMount { padding: 6px 10px 12px; }
  .wk-head { font-size: 9px; letter-spacing: 0.16em; padding: 4px 0 8px; }
  .wk-row {
    grid-template-columns: 60px auto 38px 40px;
    gap: 5px;
    font-size: 9.5px;
    padding: 5px 0;
  }
  .wk-row .wk-prev { display: none; }
  .wk-c { width: 11px; height: 11px; }

  /* GOALS: tighter, allow value wrap */
  #goalsMount { padding: 6px 10px 12px; gap: 8px; }
  .goal-row { padding: 8px 10px; gap: 10px; grid-template-columns: 24px 1fr auto; }
  .goal-icon { font-size: 18px; }
  .goal-label { font-size: 9px; letter-spacing: 0.14em; }
  .goal-val { font-size: 10px; }
  .goal-track { height: 5px; }

  .ins-empty { font-size: 9.5px; padding: 22px 10px; }
}

/* Tiny phones — even tighter */
@media (max-width: 380px) {
  .trend-row { grid-template-columns: 56px 1fr 42px 50px; gap: 4px; }
  .wk-row { grid-template-columns: 50px auto 32px 36px; gap: 4px; }
  .wk-c { width: 9px; height: 9px; }
  .goal-row { grid-template-columns: 22px 1fr auto; gap: 8px; padding: 7px 9px; }
  .goal-val { font-size: 9.5px; }
  .ins-title { font-size: 9px; }
  .ins-body { font-size: 11.5px; }
}