/* ============================================================
   dashboard.css — Stat cards, setup bar, trend chart, sessions
   ============================================================ */

/* ---- Stat cards grid ---- */
.sg  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }

.sc2 {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 7px;
  cursor: default; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.4);
  transition: border-color .2s, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.sc2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 30%, rgba(235,83,158,.2) 65%, transparent 100%);
}
.sc2:hover {
  border-color: rgba(235,83,158,.22);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(235,83,158,.08),
    0 12px 40px rgba(0,0,0,.45),
    0 0 48px rgba(235,83,158,.05);
}
.sc2:hover .sv { color: var(--gold); text-shadow: 0 0 32px rgba(235,83,158,.35) }

.sl  { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3) }
.sv  { font-family: "Syne", sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -2px; line-height: 1; transition: color .2s, text-shadow .2s }
.sv span { font-size: 13px; font-weight: 400; color: var(--t2); letter-spacing: 0 }
.sd  { font-size: 11px }
.up  { color: var(--gn) }
.ne  { color: var(--t2) }

/* ---- Active setup bar ---- */
.bar {
  background: var(--bg2);
  border: 1px solid rgba(235,83,158,.18);
  border-radius: 14px; padding: 12px 18px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
  box-shadow: inset 0 1px 0 rgba(235,83,158,.07), 0 4px 20px rgba(0,0,0,.35), 0 0 40px rgba(235,83,158,.03);
}
.bl  { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--t3); margin-bottom: 3px }
.bv  { font-size: 13px; font-weight: 500 }
.bv.ok { color: var(--gn) }

/* ---- Sessions list ---- */
.shr { display: grid; grid-template-columns: 1fr 70px 70px 90px; padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--t3) }
.srw { display: grid; grid-template-columns: 1fr 70px 70px 90px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.04); align-items: center; transition: background .15s }
.srw:last-child { border-bottom: none }
.srw:hover { background: rgba(235,83,158,.03) }
.sn  { font-size: 13px; font-weight: 500 }
.sm  { font-size: 11px; color: var(--t2); margin-top: 2px }
.ss  { font-family: "Syne", sans-serif; font-size: 14px; font-weight: 700; text-align: right }
.snum{ font-family: "Syne", sans-serif; font-size: 13px; font-weight: 700; text-align: center; color: var(--t2) }

/* ---- Weather card ---- */
.wx-inner   { position:relative; z-index:1; padding:20px 24px; display:flex; flex-direction:column; gap:16px }
.wx-top     { display:flex; align-items:center; gap:16px }
.wx-icon    { font-size:52px; line-height:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); flex-shrink:0 }
.wx-tempblock { flex:1; min-width:0 }
.wx-temprow { display:flex; align-items:baseline; gap:5px }
.wx-temp    { font-family:"Syne",sans-serif; font-size:48px; font-weight:800; line-height:1; letter-spacing:-2px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25) }
.wx-unit    { font-size:20px; font-weight:500; color:rgba(255,255,255,.65) }
.wx-desc    { font-size:13px; font-weight:500; color:rgba(255,255,255,.85); margin-top:2px; text-transform:capitalize }
.wx-loc     { font-size:11px; color:rgba(255,255,255,.5); margin-top:3px }
.wx-advice-row  { background:rgba(0,0,0,.2); border-radius:10px; padding:11px 16px; border:1px solid rgba(255,255,255,.1) }
.wx-advice-text { font-size:12px; color:rgba(255,255,255,.85); line-height:1.4 }
.wx-badge       { display:inline-block; font-size:11px; font-weight:700; padding:3px 12px; border-radius:20px; flex-shrink:0; white-space:nowrap }
.wx-stats   { display:flex; align-items:center; gap:0; background:rgba(0,0,0,.2); border-radius:10px; padding:10px 16px }
.wx-stat    { flex:1; display:flex; flex-direction:column; gap:3px }
.wx-sep     { width:1px; height:32px; background:rgba(255,255,255,.1); margin:0 16px; flex-shrink:0 }
.wx-label   { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.5) }
.wx-stat-val{ display:flex; align-items:baseline; gap:4px }
.wx-stat-num{ font-family:"Syne",sans-serif; font-size:20px; font-weight:700; color:#fff; line-height:1 }
.wx-stat-unit { font-size:11px; color:rgba(255,255,255,.55) }
.wx-stat-sub  { font-size:13px; font-weight:600; color:rgba(255,255,255,.8) }
.wx-stat-desc { font-size:11px; color:rgba(255,255,255,.45) }

/* ---- Mobile overrides ---- */
@media (max-width: 768px) {
  .sg  { grid-template-columns: 1fr 1fr }
  .bar { grid-template-columns: 1fr 1fr; gap: 8px }
  #db-split-row { grid-template-columns: 1fr !important }
  .shr, .srw { grid-template-columns: 1fr 55px 70px }
  .shr > div:nth-child(2), .srw > div:nth-child(2) { display: none }
}
@media (max-width: 420px) { .sg { grid-template-columns: 1fr } }