:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#fbfcff;
  --line:#e7eaf3;

  --text:#0f172a;
  --muted:#64748b;

  --halo:#FAB400;
  --haloBlue:#16325B;

  /* Semantic colors */
  --good:#16a34a;   /* xanh */
  --warn:#f59e0b;   /* vàng */
  --bad:#ef4444;    /* đỏ */
  --info:#334155;   /* trung tính */

  --shadow: 0 10px 26px rgba(15,23,42,.08);
  --shadow2: 0 6px 16px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 380px at 12% 0%, rgba(250,180,0,.12), transparent 60%),
    radial-gradient(900px 380px at 85% 10%, rgba(22,50,91,.10), transparent 62%),
    var(--bg);
}

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,247,251,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  padding: 14px 14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.brand{display:flex;gap:10px;align-items:center}
.logoDot{
  width:14px;height:14px;border-radius:999px;
  background: var(--halo);
  box-shadow: 0 0 0 6px rgba(250,180,0,.20);
}
.kicker{font-size:12px;color:var(--muted);letter-spacing:.7px;font-weight:700}
.title{font-size:16px;font-weight:1100;margin-top:2px;color:var(--haloBlue)}

.topActions{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ===== Goal Big Display ===== */
.goalBig{
  position:relative;
  min-width: 260px;
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.goalBig .label{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.goalBig .big{
  margin-top:8px;
  font-size:38px;
  font-weight:1200;
  color:var(--haloBlue);
  line-height:1;
}
.goalBig .sub{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.goalBig .ghost{
  position:absolute;
  right:-18px;
  bottom:-30px;
  font-size:120px;
  font-weight:1200;
  color: rgba(22,50,91,.06);
  letter-spacing:-3px;
  user-select:none;
  pointer-events:none;
}

/* ===== Summary ===== */
.summary{display:flex;gap:10px;flex-wrap:wrap}
.sumItem{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:18px;
  padding:12px 12px 10px;
  min-width:150px;
  box-shadow: var(--shadow2);
}
.sumLabel{color:var(--muted);font-size:12px;font-weight:900}
.sumValue{font-size:20px;font-weight:1200;margin-top:6px;color:var(--haloBlue)}

.progress{
  margin-top:8px;
  height:10px;border-radius:999px;
  background: rgba(15,23,42,.06);
  overflow:hidden;
}
.bar{height:100%}

/* ===== Report Strip ===== */
.reportStrip{
  max-width:1180px;
  margin: 12px auto 0;
  padding: 0 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.reportCard{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
}
.reportCard.now{
  border-color: rgba(250,180,0,.40);
  background:
    radial-gradient(700px 220px at 18% 20%, rgba(250,180,0,.14), transparent 55%),
    var(--panel);
}

.rcTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.rcTitle{font-size:12px;color:var(--muted);letter-spacing:.8px;font-weight:1100}
.rcMonth{font-size:12px;color:var(--muted);font-weight:900}
.rcMain{padding:6px 0 10px}
.rcBig{font-size:28px;font-weight:1200;line-height:1.1;color:var(--haloBlue)}
.rcSub{margin-top:6px;color:var(--muted);font-size:12px}
.rcBar{
  margin-top:10px;
  height:12px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  overflow:hidden;
}
.rcFill{height:100%}
.rcFoot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:4px}
.rcHint{color:var(--muted);font-size:12px}

/* Pills */
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1100;
  border:1px solid var(--line);
  background:#ffffff;
}
.pillOk{background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); color:#166534}
.pillWarn{background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); color:#92400e}
.pillBad{background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); color:#991b1b}
.pillNo{background: rgba(100,116,139,.08); color:#334155}

/* ===== Report Summary line ===== */
.reportSummaryWrap{
  max-width:1180px;
  margin: 10px auto 0;
  padding: 0 14px;
}
.reportSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px dashed var(--line);
  border-radius:14px;
  background: var(--panel2);
}
.rsText{
  font-size:14px;
  color:var(--text);
  line-height:1.5;
  flex:1;
}
.rsText b{font-weight:1100;color:var(--haloBlue)}
.dotSep{margin:0 6px;color:var(--muted)}
.rsGood{color:var(--good);font-weight:1100}
.rsBad{color:var(--bad);font-weight:1100}

/* ===== Layout ===== */
.wrap{max-width:1180px;margin:0 auto;padding:16px 14px 40px}
.grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
  margin-top:12px;
}
.panel{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
}
.panelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.panelHead h2{margin:0;font-size:14px;font-weight:1200;color:var(--haloBlue)}
.mini{color:var(--muted);font-size:12px;font-weight:800}

/* Chart */
.chartBox{height:280px}
.legendHint{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px}
.dot.target{background: rgba(51,65,85,.45)}
.dot.result{background: rgba(22,163,74,.85)}
.dot.pace{background: rgba(245,158,11,.75)}

/* Inputs */
input, select, button{font: inherit}
input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel2);
  color:var(--text);
  outline:none;
}
input:disabled{background:#f2f4fa;color:#64748b}

/* Buttons (neutral) */
.btn{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  color: var(--text);
  cursor:pointer;
  font-weight:1100;
  box-shadow: var(--shadow2);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.btnDanger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color:#991b1b;
}

/* Icon buttons: always visible */
.iconRow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap; /* key: avoid hidden on mobile */
}
.iconBtn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow2);
  cursor:pointer;
  flex: 0 0 auto;
}
.iconBtn svg{width:18px;height:18px;opacity:.9}
.iconBtn:hover{transform: translateY(-1px)}
.iconBtn:active{transform: translateY(0px)}
.iconBtnDanger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

/* ===== Month Cards (optimized) ===== */
.monthCards{display:block}
.cardGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.mCard{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:18px;
  padding:12px;
  box-shadow: var(--shadow);
}

.mCard.isNow{
  outline: 2px solid rgba(250,180,0,.55);
  outline-offset: -2px;
}

/* status tint */
.mCard.ok{background: linear-gradient(0deg, rgba(22,163,74,.04), rgba(22,163,74,.04)), var(--panel)}
.mCard.warn{background: linear-gradient(0deg, rgba(245,158,11,.05), rgba(245,158,11,.05)), var(--panel)}
.mCard.bad{background: linear-gradient(0deg, rgba(239,68,68,.04), rgba(239,68,68,.04)), var(--panel)}

.mHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px
}
.mMonth{font-weight:1200;color:var(--haloBlue)}
.mBadge{font-size:12px;color:var(--muted);font-weight:1000}

/* KPIs */
.mKPIs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.mK{
  border:1px solid var(--line);
  background: var(--panel2);
  border-radius:14px;
  padding:10px
}
.mK .l{font-size:12px;color:var(--muted);font-weight:1000}
.mK .v{font-size:18px;font-weight:1200;color:var(--haloBlue);margin-top:4px}

/* Progress bar */
.mBar{
  height:12px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  overflow:hidden;
  margin-top:10px
}
.mFill{height:100%}

/* Entry row */
.mEntry{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}
.mEntry .field{
  flex: 1 1 180px;
  min-width: 180px;
}
.mEntry label{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:1000;
  margin-bottom:6px;
}
.mEntry .actions{
  flex: 0 0 auto;
}

/* Tips */
.tips{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.tipCard{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow2);
}
.tipTitle{font-weight:1200;margin-bottom:6px;color:var(--haloBlue)}
.tipText{color:var(--muted);font-size:12px;line-height:1.4}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .tips{grid-template-columns:1fr}
  .reportStrip{grid-template-columns:1fr}
}

@media (min-width: 860px){
  .cardGrid{grid-template-columns: 1fr 1fr}
}
@media (min-width: 1180px){
  .cardGrid{grid-template-columns: 1fr 1fr 1fr}
}

@media (max-width: 720px){
  .goalBig{
    width:100%;
    text-align:center;
    min-width: unset;
  }
  .goalBig .ghost{
    left:50%;
    right:auto;
    transform: translateX(-50%);
  }
  .reportSummary{
    flex-direction:column;
    align-items:flex-start;
  }
  .mKPIs{
    grid-template-columns: 1fr 1fr; /* vẫn đẹp */
  }
}

/* Report Mode button: neutral */
.btnReport{
  background:#fff;
}

/* Report Mode state */
html.reportMode .reportHide{
  display:none !important;
}

/* Khi report mode: tăng độ “presentation” */
html.reportMode .reportStrip{
  margin-top: 14px;
}
html.reportMode .reportCard{
  box-shadow: var(--shadow);
}
html.reportMode .reportSummary{
  border-style: solid;
  background: #fff;
}

/* Center goalBig trên mobile đã có, thêm chút cho report mode */
@media (max-width:720px){
  html.reportMode .topActions{
    width:100%;
  }
  html.reportMode .summary{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 720px){
  #btnReportMode{ display:none !important; }
}