/* =========================================================
   Dashboard: Clock, Dawn Ring, Next Routine, Stats
   ========================================================= */

.dashboard{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
@media (max-width:980px){ .dashboard{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dashboard{ grid-template-columns:1fr; } }

.dash-card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
  animation:fadeSlideUp .5s ease both;
}
.dash-label{
  font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text-3); font-weight:600; margin-bottom:8px;
}

/* Clock */
.dash-clock .clock{
  font-family:var(--font-mono); font-size:32px; font-weight:600;
  color:var(--accent-gold); letter-spacing:1px;
}
.dash-clock .date{ font-size:12px; color:var(--text-2); margin-top:4px; }

/* Dawn Ring — signature element */
.dash-ring{ align-items:center; justify-content:center; }
.ring-wrap{ position:relative; width:140px; height:140px; }
.dawn-ring{ width:140px; height:140px; transform:rotate(-90deg); }
.ring-track{
  fill:none; stroke:var(--bg-3); stroke-width:10;
}
.ring-progress{
  fill:none; stroke:url(#dawnGradient); stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:377; /* 2*pi*60 */
  stroke-dashoffset:377;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 6px rgba(232,176,84,.45));
}
.ring-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-percent{ font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--text-1); }
.ring-sub{ font-size:10px; color:var(--text-3); margin-top:2px; text-align:center; }

/* Next Routine */
.next-routine{ display:flex; flex-direction:column; gap:6px; justify-content:center; flex:1; }
.next-title{ font-size:18px; font-weight:700; color:var(--text-1); }
.next-countdown{
  font-family:var(--font-mono); font-size:20px; color:var(--accent-teal); font-weight:600;
}

/* Stats */
.dash-stats .stat-row{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.stat-pill{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  padding:6px 10px; border-radius:8px;
}
.stat-pill i{ font-size:11px; width:16px; text-align:center; }
.stat-pill.done{ background:rgba(79,209,197,.12); color:var(--accent-teal); }
.stat-pill.pending{ background:rgba(232,176,84,.12); color:var(--accent-gold); }
.stat-pill.missed{ background:rgba(232,99,111,.12); color:var(--accent-rose); }

@keyframes fadeSlideUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- Statistics panel (charts) ---- */
.stats-panel{ margin-top:36px; }
.stats-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap:20px;
}
@media (max-width:980px){ .stats-grid{ grid-template-columns:1fr; } }

.stat-box{
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-1);
}
.stat-box h3{ font-size:13px; color:var(--text-2); font-weight:600; margin-bottom:12px; }
.stat-box canvas{ max-width:100%; }

.heatmap-box .heatmap{
  display:grid; grid-template-columns: repeat(10, 1fr); gap:5px;
}
.heat-cell{
  aspect-ratio:1; border-radius:4px; background:var(--bg-3);
  transition:transform var(--transition-fast);
}
.heat-cell:hover{ transform:scale(1.15); }
.heat-cell[data-level="1"]{ background:rgba(79,209,197,.25); }
.heat-cell[data-level="2"]{ background:rgba(79,209,197,.5); }
.heat-cell[data-level="3"]{ background:rgba(79,209,197,.75); }
.heat-cell[data-level="4"]{ background:var(--accent-teal); }

/* ---- History Panel ---- */
.history-panel{ margin-top:36px; }
.history-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.history-list li{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-1); border:1px solid var(--border);
  padding:10px 16px; border-radius:var(--radius-sm);
  font-size:13.5px;
}
.history-list li i{ width:16px; text-align:center; }
.history-list li.ok i{ color:var(--accent-teal); }
.history-list li.miss i{ color:var(--accent-rose); }
.history-list .h-time{ color:var(--text-3); margin-left:auto; font-family:var(--font-mono); font-size:12px; }