/* css/past-weather.css
   Past Weather - Premium distinct style
*/

/* Variables */
:root{
  --bg:#f2f6fa;
  --card:#ffffff;
  --muted:#60708a;
  --text:#0e2540;
  --accent:#1f7be6;
  --glass: rgba(255,255,255,0.7);
  --glass-border: rgba(31,123,230,0.08);
  --radius:14px;
  --shadow: 0 10px 30px rgba(18,38,65,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Wrapper */
.pw-wrapper { background:var(--bg); padding:34px 18px; min-height:100vh; }
.pw-container { max-width:1180px; margin:0 auto; }

/* Hero */
.pw-hero { text-align:center; margin-bottom:18px; }
.pw-hero h1 { margin:0; font-size:28px; color:var(--text); }
.pw-lead { margin:6px 0 0; color:var(--muted); }

/* Controls */
.pw-controls { margin:18px 0 22px; }
.pw-row { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.pw-col { flex:1 1 260px; min-width:180px; display:flex; flex-direction:column; }
label { font-weight:700; margin-bottom:6px; font-size:13px; color:var(--muted); }
select, input[type="date"] { padding:10px 12px; border-radius:10px; border:1px solid rgba(16,36,59,0.06); background:#fff; font-size:14px; }
.pw-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }

/* Buttons */
.pw-btn { padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; border:none; width: 120px; font-size: 17px; }
.pw-btn-primary { background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(31,123,230,0.12); }
.pw-btn-outline { background:transparent; border:1px solid var(--glass-border); color:var(--text); }

/* Empty */
.pw-empty { padding:28px; text-align:center; color:var(--muted); background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,0.04); }

/* Summary section */
.pw-summary { display:flex; gap:20px; margin-top:20px; align-items:flex-start; flex-wrap:wrap; }
.pw-summary-left { flex:1 1 420px; min-width:260px; }
.pw-summary-left h2 { margin:0; font-size:20px; color:var(--text); }
.pw-meta { color:var(--muted); margin-top:6px; display:flex; gap:10px; align-items:center; font-size:13px; }
.pw-dot{ color:var(--muted); margin:0 6px; }

/* Cards cluster */
.pw-cards { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.pw-card { background:var(--card); border-radius:12px; padding:12px 14px; min-width:120px; border:1px solid var(--glass-border); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.pw-card-top { font-size:12px; color:var(--muted); font-weight:700; }
.pw-card-body { font-size:20px; font-weight:800; color:var(--text); }

/* Trends */
.pw-trends { margin-top:20px; }
.pw-trend-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:10px; }
.pw-trend { background:#fff; border-radius:12px; padding:10px; border:1px solid rgba(0,0,0,0.04); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.pw-trend-title { font-size:13px; color:var(--muted); font-weight:700; }
.pw-sparkline { width:100%; height:40px; display:block; }

/* Table */
.pw-table { margin-top:22px; }
.pw-table-wrap { overflow:auto; border-radius:12px; border:1px solid rgba(0,0,0,0.04); background:#fff; box-shadow:var(--shadow); }
#pw-data-table { width:100%; border-collapse:collapse; min-width:1000px; }
#pw-data-table th, #pw-data-table td { padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.04); text-align:left; font-size:14px; color:var(--text); }
#pw-data-table thead th { background:#f7fafc; color:var(--muted); font-weight:700; position:sticky; top:0; z-index:2; }

/* Responsive */
@media (max-width:900px) {
  .pw-row { flex-direction:column; align-items:stretch; }
  .pw-cards { width:100%; }
  .pw-summary { flex-direction:column; gap:12px; }
  #pw-data-table { min-width:800px; }
}

/* print */
@media print {
  .pw-controls, .pw-btn, .pw-actions, .pw-trends { display:none !important; }
  body { background:#fff; }
}