/* ============================================================
   REPORT TAB — REPORT_TAB_V1 (2026-09-09)
   css/report.css

   Everything here is scoped under #tab-report. The dashboard shares
   one stylesheet space across nine tabs, so an unscoped `.panel` or
   `.badge` would reach into Checkin and Housekeeping.

   Reused from base.css rather than redefined: .stats-grid, .stat-card,
   .stat-number, .stat-label, .stat-bar, .stat-bar-fill, .filter-bar,
   .filter-group, .filter-label, .filter-select. .data-table is NOT
   available — it lives in analytics.css, which index.html does not load.
   ============================================================ */

/* ---- section rules ---- */
#tab-report .rp-secline {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px;
}
#tab-report .rp-sectitle {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--navy-700); white-space: nowrap;
}
#tab-report .rp-secnote { font-size: 0.74rem; color: var(--gray-500); }
#tab-report .rp-secrule { flex: 1; height: 1px; background: var(--gray-200); }

/* ---- stat card extras (base.css owns the rest) ---- */

/* STAT_CARD_BASELINE_V1 (2026-09-11) — pin the progress bar to the BOTTOM.
   `.stat-card` is a plain block in base.css, so content simply stacks:
   label -> number+sub -> bar. `.stat-top-row` is a flex row aligned on the
   BASELINE, so the moment a sub wraps to a second line that row grows and
   pushes the bar down IN THAT CARD ONLY. The grid makes every card the same
   height, but nothing anchored the bar, so it floated wherever the sub left it.
   Measured live before the fix: bars at 73.8px on one-line cards and 88.5px on
   two-line ones — and at the six-across width, FOUR different heights spanning
   44.6px.

   Shortening the offending labels was the obvious fix and is the wrong one: it
   holds only at today's width, in today's language. `102 of 242` wrapped with no
   <br> in it at all, purely because the sub gets ~45px beside the big number,
   and Japanese (大人191名) is wider still. Anchoring the bar removes the
   dependency on the sub's height instead of tuning around it. */
#tab-report .stat-card { display: flex; flex-direction: column; }
#tab-report .stat-bar  { margin-top: auto; }

#tab-report .stat-sub {
  font-size: 0.71rem; font-weight: 600; color: var(--gold-600);
  text-align: right; line-height: 1.3;
}
#tab-report .stat-top-row { gap: 6px; }

/* ---- panel ---- */
#tab-report .rp-panel {
  background: var(--white); border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 18px 20px 20px; margin-bottom: 26px;
}
#tab-report .rp-phead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
#tab-report .rp-ptitle {
  font-size: 0.95rem; font-weight: 700; color: var(--navy-800); letter-spacing: -0.01em;
}
#tab-report .rp-psub { font-size: 0.74rem; color: var(--gray-500); margin: 2px 0 0; }

#tab-report .rp-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 0.72rem; color: var(--gray-700);
}
#tab-report .rp-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#tab-report .rp-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

#tab-report .rp-chartbox { position: relative; height: 206px; margin-top: 14px; }
#tab-report .rp-divider { height: 1px; background: var(--gray-200); margin: 18px 0 4px; }

/* ---- week table (desktop) ---- */
#tab-report .rp-tablewrap { overflow-x: auto; }
#tab-report .rp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#tab-report .rp-table th {
  text-align: right; padding: 8px; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500);
  border-bottom: 1.5px solid var(--gray-200); white-space: nowrap; vertical-align: bottom;
}
#tab-report .rp-table th small {
  display: block; font-weight: 500; text-transform: none;
  letter-spacing: 0; font-size: 0.62rem; color: var(--gray-400);
}
#tab-report .rp-table th:first-child,
#tab-report .rp-table td:first-child { text-align: left; }
#tab-report .rp-table td {
  padding: 8px; text-align: right; border-bottom: 1px solid #eef1f5;
  font-variant-numeric: tabular-nums; color: var(--navy-800);
}
#tab-report .rp-table tbody tr:last-child td { border-bottom: none; }
#tab-report .rp-table tr.rp-today td { background: rgba(160,122,34,0.06); }
#tab-report .rp-table tr.rp-today td:first-child { box-shadow: inset 3px 0 0 var(--gold-600); }

#tab-report .rp-daycell { display: flex; flex-direction: column; line-height: 1.25; }
#tab-report .rp-daycell b { font-weight: 700; font-size: 0.82rem; }
#tab-report .rp-daycell span { font-size: 0.66rem; color: var(--gray-500); }
#tab-report .rp-strong { font-weight: 700; }
#tab-report .rp-dim { color: var(--gray-400); }

#tab-report .rp-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 0.66rem; font-weight: 700; white-space: nowrap;
}
#tab-report .rp-b-heavy  { background: var(--error-bg);   color: var(--error-fg); }
#tab-report .rp-b-normal { background: var(--gray-100);   color: var(--gray-700); }
#tab-report .rp-b-light  { background: var(--success-bg); color: var(--success-fg); }

#tab-report .rp-meter { display: flex; align-items: center; justify-content: flex-end; }
#tab-report .rp-meter-track {
  width: 70px; height: 6px; border-radius: 3px;
  background: var(--gray-200); overflow: hidden; flex-shrink: 0;
}
#tab-report .rp-meter-fill { height: 100%; border-radius: 3px; }

/* ---- guest mix ---- */
#tab-report .rp-row {
  display: grid; gap: 16px; margin-bottom: 26px;
  grid-template-columns: 1.15fr 1fr;
}
#tab-report .rp-row .rp-panel { margin-bottom: 0; }

#tab-report .rp-mixgrid {
  display: grid; grid-template-columns: 168px 1fr; gap: 20px;
  align-items: center; margin-top: 14px;
}
#tab-report .rp-donutwrap { position: relative; width: 168px; height: 168px; }
#tab-report .rp-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
#tab-report .rp-donut-center b {
  font-size: 1.5rem; font-weight: 700; color: var(--navy-800);
  line-height: 1; font-variant-numeric: tabular-nums;
}
#tab-report .rp-donut-center span {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-500); margin-top: 3px;
}
#tab-report .rp-mixlist { display: flex; flex-direction: column; }
#tab-report .rp-mixrow {
  display: grid; grid-template-columns: 12px 1fr auto 42px; gap: 10px;
  align-items: center; font-size: 0.82rem; padding: 6px 0;
  border-bottom: 1px solid #f2f4f7;
}
#tab-report .rp-mixrow:last-child { border-bottom: none; }
#tab-report .rp-mixrow .rp-n { font-variant-numeric: tabular-nums; font-weight: 700; }
#tab-report .rp-mixrow .rp-p {
  font-variant-numeric: tabular-nums; color: var(--gray-500);
  font-size: 0.73rem; text-align: right;
}
#tab-report .rp-mixrow.rp-muted .rp-name { color: var(--gray-500); }
#tab-report .rp-mixrow .rp-name small {
  display: block; font-size: 0.66rem; color: var(--gray-400); line-height: 1.3;
}

#tab-report .rp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#tab-report .rp-langchip {
  display: flex; align-items: baseline; gap: 7px; background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 9px; padding: 7px 11px;
}
#tab-report .rp-langchip b {
  font-size: 0.96rem; font-weight: 700; color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
#tab-report .rp-langchip span { font-size: 0.7rem; color: var(--gray-500); font-weight: 600; }

#tab-report .rp-factrow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px;
}
#tab-report .rp-fact { background: var(--gray-50); border-radius: 9px; padding: 10px 12px; }
#tab-report .rp-fact b {
  display: block; font-size: 1.05rem; font-weight: 700; color: var(--navy-800);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
#tab-report .rp-fact span {
  font-size: 0.65rem; color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600;
}

/* ---- notes ---- */
#tab-report .rp-note {
  display: flex; gap: 10px; align-items: flex-start; background: var(--info-bg);
  border-radius: 9px; padding: 10px 13px; font-size: 0.76rem;
  color: var(--info-fg); line-height: 1.5; margin-top: 14px;
}
#tab-report .rp-note.rp-plain { background: var(--gray-50); color: var(--gray-700); }
#tab-report .rp-note svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; stroke-width: 2.2;
}

/* ---- day cards: the mobile form of the week table ----
   Both the table and the cards are rendered; the media query below picks one.
   A 10-column table cannot survive 390px, and sideways scrolling is how staff
   miss the heavy day. Toggling in CSS rather than on a resize listener means
   rotating the phone can never leave the tab showing neither. */
#tab-report .rp-daycards { display: none; }
#tab-report .rp-daycard {
  background: var(--white); border-radius: 11px; padding: 12px 13px;
  margin-bottom: 9px; box-shadow: var(--shadow-sm);
  border-left: 3px solid transparent;
}
#tab-report .rp-daycard.rp-today {
  border-left-color: var(--gold-600); background: #fffdf7;
}
#tab-report .rp-dc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 9px;
}
#tab-report .rp-dc-head b { font-size: 0.87rem; font-weight: 700; color: var(--navy-800); }
#tab-report .rp-dc-head b span {
  font-weight: 500; color: var(--gray-500); font-size: 0.7rem; margin-left: 5px;
}
#tab-report .rp-dc-inout { display: flex; gap: 8px; margin-bottom: 9px; }
#tab-report .rp-io {
  flex: 1; border-radius: 8px; padding: 7px 9px;
  display: flex; align-items: baseline; gap: 6px;
}
#tab-report .rp-io b {
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
#tab-report .rp-io span { font-size: 0.63rem; font-weight: 600; }
#tab-report .rp-io.rp-in  { background: rgba(0,114,178,0.10); color: #0072B2; }
#tab-report .rp-io.rp-out { background: rgba(230,159,0,0.16); color: #8a5f00; }
#tab-report .rp-dc-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 9px;
}
#tab-report .rp-cell { background: var(--gray-50); border-radius: 7px; padding: 6px 8px; }
#tab-report .rp-cell b {
  display: block; font-size: 0.92rem; font-weight: 700; color: var(--navy-800);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
#tab-report .rp-cell span {
  font-size: 0.57rem; color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.03em; font-weight: 600;
}
#tab-report .rp-cell.rp-hi { background: var(--error-bg); }
#tab-report .rp-cell.rp-hi b { color: var(--error-fg); }
#tab-report .rp-cell.rp-hi span { color: var(--error-fg); opacity: 0.75; }
#tab-report .rp-dc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.68rem; color: var(--gray-500);
  border-top: 1px solid #eef1f5; padding-top: 8px;
}
#tab-report .rp-dc-foot b { color: var(--navy-800); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- empty / loading ---- */
#tab-report .rp-empty {
  text-align: center; padding: 40px 20px; color: var(--gray-500); font-size: 0.86rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  #tab-report .rp-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  #tab-report .rp-mixgrid { grid-template-columns: 1fr; justify-items: center; }
  #tab-report .rp-mixlist { width: 100%; }
}
@media (max-width: 768px) {
  #tab-report .rp-tablewrap { display: none; }
  #tab-report .rp-daycards  { display: block; }
  #tab-report .rp-divider   { margin: 16px 0 12px; }
  #tab-report .rp-panel     { padding: 14px 13px 16px; border-radius: 11px; }
  #tab-report .rp-chartbox  { height: 176px; }
  #tab-report .rp-factrow   { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
  #tab-report .rp-fact      { padding: 8px 9px; }
  #tab-report .rp-secline   { flex-wrap: wrap; gap: 4px 10px; }
  #tab-report .rp-secrule   { display: none; }
}
@media (max-width: 520px) {
  /* Two-up stat cards. base.css uses auto-fit minmax(130px), which at 390px
     gives two columns already — pinned here so a longer JP label cannot
     collapse it to one. */
  #tab-report .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  #tab-report .stat-card  { padding: 11px 12px; }
  #tab-report .stat-number { font-size: 1.4rem; }
  #tab-report .stat-sub   { font-size: 0.62rem; }
  /* Rooms to clean spans the row: it is the number a cleaner opens the tab for. */
  #tab-report .stat-card.rp-wide { grid-column: 1 / -1; }
  #tab-report .stat-card.rp-wide .stat-number { font-size: 1.6rem; }
}