react-dashboard/src/App.css

/* ── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gn:   #1a6b2f;
  --gnl:  #27ae60;
  --rd:   #c0392b;
  --bl:   #1565a0;
  --pu:   #6c3483;
  --saf:  #b86e00;
  --tl:   #0e7a6e;
  --mt:   #6b6b6b;
  --bd:   #e5ddd0;
  --bd2:  #c8bfb0;
  --sf:   #faf7f2;
  --sf2:  #fff8ee;
  --sf3:  #f0ead8;
  --tx:   #1a1a1a;
  --mono: 'DM Mono', monospace;
  --sans: 'Outfit', sans-serif;
  --serif:'DM Serif Display', serif;
}

html, body, #root { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--sf);
  color: var(--tx);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Loading screen ───────────────────────────────────────────────────── */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  background: var(--sf);
}
.loading-screen h2 { font-family: var(--serif); color: var(--gn); font-size: 22px; }
.loading-bar-wrap { width: 280px; height: 6px; background: var(--bd); border-radius: 3px; overflow: hidden; }
.loading-bar { height: 100%; background: var(--gn); border-radius: 3px; transition: width .3s ease; }
.loading-screen p { font-size: 11px; color: var(--mt); font-family: var(--mono); }

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.hdr-left { display: flex; align-items: center; gap: 12px; }
.hdr-right { display: flex; align-items: center; gap: 12px; }
.logo-d { height: 36px; width: auto; }
.logo-g { height: 32px; width: auto; border-radius: 50%; }
.hdr-brand-txt .brand { font-family: var(--serif); font-size: 17px; color: var(--gn); }
.hdr-brand-txt .sub   { font-size: 9px; color: var(--mt); font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.bdg { background: rgba(26,107,47,.1); color: var(--gn); border: 1px solid rgba(26,107,47,.2); border-radius: 12px; padding: 3px 10px; font-size: 10px; font-weight: 600; }
.hdr-stat { display: flex; flex-direction: column; align-items: flex-end; }
.hdr-stat .val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--gn); }
.hdr-stat .lbl { font-size: 8px; color: var(--mt); text-transform: uppercase; letter-spacing: .4px; }

/* ── Tab nav ──────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  overflow-x: auto;
  background: #fff;
  border-bottom: 2px solid var(--bd);
  padding: 0 16px;
  gap: 2px;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mt);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  font-family: var(--sans);
}
.tab-btn:hover { color: var(--gn); }
.tab-btn.active { color: var(--gn); border-bottom-color: var(--gn); font-weight: 600; }

/* ── Panel ────────────────────────────────────────────────────────────── */
.panel { padding: 20px; max-width: 1400px; margin: 0 auto; }
.stitle { font-family: var(--serif); font-size: 18px; color: var(--gn); margin-bottom: 6px; }
.sdesc  { font-size: 11px; color: var(--mt); line-height: 1.6; margin-bottom: 16px; }

/* ── Scorecard grid ───────────────────────────────────────────────────── */
.sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; }
.sc { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; }
.sc.g { border-left: 3px solid var(--gn); }
.sc.t { border-left: 3px solid var(--tl); }
.sc.b { border-left: 3px solid var(--bl); }
.sc.s { border-left: 3px solid var(--saf); }
.sc.p { border-left: 3px solid var(--pu); }
.sc.r { border-left: 3px solid var(--rd); }
.cl { font-size: 9px; color: var(--mt); text-transform: uppercase; letter-spacing: .5px; font-family: var(--mono); margin-bottom: 4px; }
.cv { font-size: 20px; font-weight: 700; font-family: var(--mono); margin-bottom: 2px; }
.cv.g { color: var(--gn); } .cv.t { color: var(--tl); }
.cv.b { color: var(--bl); } .cv.s { color: var(--saf); }
.cv.p { color: var(--pu); } .cv.r { color: var(--rd); }
.cs { font-size: 9px; color: var(--mt); }

/* ── Filter bar ───────────────────────────────────────────────────────── */
.fb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: flex-end; }
.fg { display: flex; flex-direction: column; gap: 4px; }
.fl { font-size: 10px; color: var(--mt); font-family: var(--mono); text-transform: uppercase; letter-spacing: .4px; }
.fg select, .fg input[type="number"] {
  font-size: 12px; padding: 6px 10px; border: 1px solid var(--bd2);
  border-radius: 7px; background: #fff; color: var(--tx);
  font-family: var(--sans); cursor: pointer;
  outline: none; transition: border-color .15s;
}
.fg select:focus, .fg input:focus { border-color: var(--gn); }

/* ── Table wrapper ────────────────────────────────────────────────────── */
.tw { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.ts { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--sf3); }
th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 600; color: var(--tx); border-bottom: 2px solid var(--bd); white-space: nowrap; cursor: pointer; }
th.vs-h { background: #fff3dc; color: var(--saf); }
th.va-h { background: #e8f4ff; color: var(--bl); }
tbody tr { border-bottom: 1px solid var(--bd); transition: background .1s; cursor: pointer; }
tbody tr:hover { background: rgba(26,107,47,.04); }
td { padding: 7px 11px; vertical-align: middle; white-space: nowrap; font-size: 11.5px; }

/* ── Channel badge ────────────────────────────────────────────────────── */
.chb { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; font-family: var(--mono); }
.chb.TT { background: rgba(26,107,47,.12); color: var(--gn); }
.chb.MT { background: rgba(21,101,160,.12); color: var(--bl); }

/* ── Elasticity classes ───────────────────────────────────────────────── */
.e-high { color: var(--rd); font-weight: 700; font-family: var(--mono); font-size: 11px; }
.e-med  { color: var(--saf); font-weight: 600; font-family: var(--mono); font-size: 11px; }
.e-low  { color: var(--gn); font-weight: 600; font-family: var(--mono); font-size: 11px; }
.e-pos  { color: var(--bl); font-weight: 600; font-family: var(--mono); font-size: 11px; }

/* ── Vol salience bar ─────────────────────────────────────────────────── */
.vs-cell { display: flex; align-items: center; gap: 5px; min-width: 80px; }
.vs-bar  { flex: 1; background: var(--sf3); border-radius: 3px; height: 6px; overflow: hidden; min-width: 40px; }
.vs-bar div { height: 100%; border-radius: 3px; }
.vs-num  { font-family: var(--mono); font-size: 9.5px; font-weight: 600; }

/* ── Anchor badge ─────────────────────────────────────────────────────── */
.anch-badge { display: inline-block; background: rgba(184,110,0,.12); color: var(--saf); border: 1px solid rgba(184,110,0,.25); border-radius: 8px; padding: 0 5px; font-size: 9px; font-weight: 600; margin-left: 3px; }

/* ── Detail panel (drawer) ────────────────────────────────────────────── */
.ovl { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ovl.open { opacity: 1; pointer-events: all; }
.dp { position: fixed; right: 0; top: 0; bottom: 0; width: 420px; max-width: 95vw; background: #fff; border-left: 1px solid var(--bd); z-index: 201; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; display: flex; flex-direction: column; }
.dp.open { transform: translateX(0); }
.dph { padding: 14px 16px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; background: var(--sf3); }
.dpg { font-size: 11px; font-weight: 700; color: var(--gn); font-family: var(--mono); }
.dpt { font-size: 13px; font-weight: 600; }
.dpc { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--mt); line-height: 1; }
.dpb { padding: 16px; flex: 1; overflow-y: auto; }

/* ── Simulation cards ─────────────────────────────────────────────────── */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.s-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.s-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bd); }
.s-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sn1 { background: var(--gn); } .sn2 { background: var(--bl); }
.sn3 { background: var(--saf); } .sn4 { background: var(--tl); }
.s-name { font-size: 13px; font-weight: 600; }
.ir { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--sf3); }

/* ── Simulation inputs ────────────────────────────────────────────────── */
.sim-f { margin-bottom: 12px; }
.sim-lbl { font-size: 11px; font-weight: 600; color: var(--mt); margin-bottom: 4px; }
.sim-f input { width: 120px; padding: 7px 10px; border: 1px solid var(--bd2); border-radius: 7px; font-size: 13px; font-family: var(--mono); }
.comp-section { background: var(--sf3); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.comp-sec-ttl { font-size: 10px; font-weight: 700; color: var(--mt); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.comp-lbl { font-size: 11px; flex: 1; }
.comp-inp { width: 80px; padding: 5px 8px; border: 1px solid var(--bd2); border-radius: 6px; font-size: 12px; font-family: var(--mono); }

/* ── GI (Price Gradient) ──────────────────────────────────────────────── */
.gi-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.gi-kpi { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; }
.gi-kpi-lbl { font-size: 9px; color: var(--mt); text-transform: uppercase; letter-spacing: .5px; font-family: var(--mono); margin-bottom: 6px; }
.gi-kpi-val { font-family: var(--mono); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.gi-kpi-sub { font-size: 9.5px; color: var(--mt); }
.gi-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.gi-tbl th { padding: 8px 10px; background: var(--sf3); border-bottom: 2px solid var(--bd); font-size: 10px; font-weight: 600; text-align: left; white-space: nowrap; }
.gi-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.gi-row-changed { background: #fffbf0; }
.gi-mrp-up { color: var(--rd); font-weight: 600; }
.gi-mrp-dn { color: var(--gn); font-weight: 600; }
.gi-delta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.gi-delta-up { background: rgba(192,57,43,.1); color: var(--rd); }
.gi-delta-dn { background: rgba(26,107,47,.1); color: var(--gn); }
.gi-rg { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; font-family: var(--mono); }
.gi-rg-good { background: rgba(26,107,47,.1); color: var(--gn); }
.gi-rg-bad  { background: rgba(192,57,43,.1); color: var(--rd); }
.gi-rg-neu  { background: var(--sf3); color: var(--mt); }
.gi-flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 9px; font-size: 10.5px; line-height: 1.6; }
.gi-flag-ok   { background: rgba(26,107,47,.07); border: 1px solid rgba(26,107,47,.2); }
.gi-flag-warn { background: rgba(184,110,0,.07); border: 1px solid rgba(184,110,0,.2); }
.gi-flag-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Growth decomp chart area ─────────────────────────────────────────── */
.gd-chart-outer { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.gd-chart-inner { overflow-y: auto; }
.gd-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--bd); }
.gd-lg { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--mt); }
.gd-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.neg-row { background: rgba(192,57,43,.03); }

/* ── PPA ──────────────────────────────────────────────────────────────── */
.ppa-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.ppa-btn { padding: 6px 16px; border: 1px solid var(--bd2); border-radius: 20px; background: #fff; font-size: 12px; cursor: pointer; font-family: var(--sans); color: var(--mt); transition: all .15s; }
.ppa-btn.active { background: var(--gn); color: #fff; border-color: var(--gn); }

/* ── Recommendation cards ─────────────────────────────────────────────── */
.recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rec-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); cursor: pointer; transition: box-shadow .15s; }
.rec-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.rec-card-hdr { padding: 12px 14px; border-bottom: 1px solid var(--bd); }
.rec-card-body { padding: 12px 14px; }
.rec-score { display: flex; gap: 3px; }
.rec-score-dot { width: 8px; height: 8px; border-radius: 50%; }
.rec-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.rec-tab-btn { padding: 5px 14px; border: 1px solid var(--bd2); border-radius: 14px; background: #fff; font-size: 11px; cursor: pointer; font-family: var(--sans); color: var(--mt); transition: all .15s; }
.rec-tab-btn.active { background: var(--gn); color: #fff; border-color: var(--gn); }

/* ── Brand interaction ────────────────────────────────────────────────── */
.vtm-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.vtm-card-header { padding: 12px 14px; border-bottom: 1px solid var(--bd); background: var(--sf3); }
.vtm-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.vtm-tbl th { padding: 7px 10px; background: var(--sf3); border-bottom: 1px solid var(--bd); font-size: 10px; font-weight: 600; text-align: left; }
.vtm-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--bd); vertical-align: middle; }

/* ── Methodology cards ────────────────────────────────────────────────── */
.mcard { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.mttl  { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ── Utility ──────────────────────────────────────────────────────────── */
.no-data { padding: 36px; text-align: center; color: var(--mt); font-size: 13px; }
.chart-wrap { position: relative; }

/* ── Spinner animation (used by UploadModal) ─────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }