/* ============================================================
   McDonald's Rain Map
   Brand chrome: đỏ/vàng/trắng McDonald's. Data mưa = thang xanh tuần tự.
   ============================================================ */
:root {
  --mcd-red: #DA291C;
  --mcd-red-dark: #A81B10;
  --mcd-yellow: #FFC72C;
  --ink: #1F1B17;
  --muted: #77706644;
  --muted-txt: #756E63;
  --line: #E9E3D8;
  --surface: #FAF7F2;
  --card: #FFFFFF;
  --card-2: #F1ECE2;

  --rain-0: #C6C2B8;
  --rain-1: #9FC4E8;
  --rain-2: #5B97D6;
  --rain-3: #2E6DB4;
  --rain-4: #1A4179;

  --shadow-sm: 0 1px 2px rgba(31,27,23,.05);
  --shadow: 0 2px 4px rgba(31,27,23,.06), 0 8px 24px rgba(31,27,23,.08);
  --radius: 14px;
  --sidebar-w: 404px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:#F3EFE7; --muted-txt:#A79F92; --line:#332E27;
    --surface:#141210; --card:#1E1B17; --card-2:#272119;
    --rain-0:#514C43; --rain-1:#345A82; --rain-2:#3E7CBE; --rain-3:#5F9BD6; --rain-4:#A2C6EC;
  }
}
:root[data-theme="light"]{--ink:#1F1B17;--muted-txt:#756E63;--line:#E9E3D8;--surface:#FAF7F2;--card:#FFF;--card-2:#F1ECE2;--rain-0:#C6C2B8;--rain-1:#9FC4E8;--rain-2:#5B97D6;--rain-3:#2E6DB4;--rain-4:#1A4179;}
:root[data-theme="dark"]{--ink:#F3EFE7;--muted-txt:#A79F92;--line:#332E27;--surface:#141210;--card:#1E1B17;--card-2:#272119;--rain-0:#514C43;--rain-1:#345A82;--rain-2:#3E7CBE;--rain-3:#5F9BD6;--rain-4:#A2C6EC;}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }

#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; overflow: hidden; }

/* ---------- Sidebar ---------- */
#sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }

#brand { display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: #fff; background: var(--mcd-red); flex: 0 0 auto; }
#brand img { border-radius: 9px; display: block; flex: 0 0 auto; }
.brand-txt { min-width: 0; }
#brand h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
#brand p { margin: 2px 0 0; font-size: 12px; font-weight: 600; opacity: .92; }
#source-badge { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: rgba(255,255,255,.2); color: #fff; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

.section-eyebrow { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted-txt); }

/* Day selector — 7 cột đều nhau, không tràn */
#days-wrap { padding: 14px 18px 12px; flex: 0 0 auto; }
#days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 8px; }
.day-chip { border: 1px solid var(--line); background: var(--card); color: var(--muted-txt); border-radius: 10px;
  padding: 7px 2px; cursor: pointer; display: grid; gap: 2px; justify-items: center; line-height: 1; transition: transform .1s, border-color .1s, background .1s; }
.day-chip b { font-size: 12px; font-weight: 800; color: var(--ink); }
.day-chip small { font-size: 10px; font-weight: 600; opacity: .85; }
.day-chip:hover { border-color: var(--mcd-yellow); }
.day-chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.day-chip[aria-selected="true"] b, .day-chip[aria-selected="true"] small { color: var(--surface); }

/* Stat cards */
#stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0 18px 14px; flex: 0 0 auto; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px 12px;
  box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; }
.stat::before { content:""; position:absolute; top:13px; left:0; width:4px; height:16px; border-radius:0 3px 3px 0; }
.stat[data-region="bac"]::before { background: var(--mcd-red); }
.stat[data-region="nam"]::before { background: var(--mcd-yellow); }
.stat-label { font-size: 13px; font-weight: 800; color: var(--ink); }
.stat-hint { font-size: 10.5px; font-weight: 600; color: var(--muted-txt); margin-top: 1px; }
.stat-figure { display: flex; align-items: baseline; gap: 2px; margin: 8px 0 0; }
.stat-figure strong { font-size: 34px; font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; }
.stat-den { font-size: 15px; font-weight: 700; color: var(--muted-txt); font-variant-numeric: tabular-nums; }
.stat-cap { font-size: 11px; font-weight: 600; color: var(--muted-txt); margin-top: 3px; }
.stat-break { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.chip b { font-weight: 900; font-variant-numeric: tabular-nums; margin-left: 1px; }
.chip-vua { color: var(--rain-2); background: color-mix(in srgb, var(--rain-2) 14%, transparent); border-color: color-mix(in srgb, var(--rain-2) 30%, transparent); }
.chip-to { color: var(--rain-3); background: color-mix(in srgb, var(--rain-3) 15%, transparent); border-color: color-mix(in srgb, var(--rain-3) 34%, transparent); }
.chip-to[data-none="true"] { color: var(--muted-txt); background: var(--card-2); border-color: var(--line); }

/* List */
#list-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 18px 8px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-txt);
  border-top: 1px solid var(--line); flex: 0 0 auto; }
#store-list { list-style: none; margin: 0; padding: 2px 10px 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.store { display: grid; grid-template-columns: 24px 1fr 92px; align-items: center; gap: 9px; padding: 9px 8px;
  border-radius: 11px; cursor: pointer; border: 1px solid transparent; }
.store:hover { background: var(--card-2); }
.store.active { background: var(--card); border-color: var(--mcd-yellow); box-shadow: var(--shadow); }
.store-rank { font-size: 12px; font-weight: 700; color: var(--muted-txt); text-align: center; font-variant-numeric: tabular-nums; }
.store-main { min-width: 0; }
.store-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-meta { font-size: 11px; color: var(--muted-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.region-tag { font-weight: 800; }
.region-tag.bac { color: var(--mcd-red); }
.region-tag.nam { color: #B8860B; }
.deal-badge { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .3px; color: var(--mcd-red-dark);
  background: var(--mcd-yellow); padding: 1px 5px; border-radius: 4px; text-transform: uppercase; vertical-align: 1px; }
.store-rain { text-align: right; display: grid; gap: 5px; justify-items: end; }
.rain-mm { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.rain-mm small { font-size: 10px; font-weight: 600; color: var(--muted-txt); }
.rain-bar { width: 84px; height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.rain-bar i { display: block; height: 100%; border-radius: 3px; }

/* Legend */
#legend { padding: 9px 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 12px; flex: 0 0 auto; }
.leg { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-txt); font-weight: 600; }
.leg b { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Map */
#map { height: 100%; background: #EAE7E1; z-index: 0; }
.maplibregl-map { font-family: var(--font); }
.maplibregl-popup-content { font-family: var(--font); padding: 11px 13px; border-radius: 12px; box-shadow: var(--shadow); }
.maplibregl-popup-close-button { font-size: 16px; color: var(--muted-txt); padding: 2px 6px; }
.pop-name { font-weight: 800; font-size: 13.5px; color: #1F1B17; }
.pop-meta { color: #756E63; font-size: 11px; margin: 2px 0 6px; }
.pop-rain { font-size: 13px; font-weight: 700; }
.pop-deal { margin-top: 5px; font-weight: 800; }

#status-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--surface);
  padding: 9px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow); z-index: 999; }

/* Responsive */
@media (max-width: 920px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; }
  #map { order: -1; }
  #sidebar { border-right: none; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }