*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f2f7;
  color: #1a1d2e;
  min-height: 100vh;
}

.wrap { max-width: 1440px; margin: 0 auto; padding: 28px 24px; }

/* ── Header ───────────────────────────────────────────── */
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.header-left h1 { font-size: 22px; font-weight: 700; }
.header-left p { font-size: 13px; color: #7c8598; margin-top: 3px; }
.header-right { font-size: 12px; color: #9ca3af; text-align: right; padding-top: 4px; }

/* ── Tab nav ──────────────────────────────────────────── */
.tab-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tab-btn {
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: 9px; padding: 8px 14px;
  font-size: 13px; color: #4b5563; cursor: pointer;
  transition: all .15s;
}
.tab-btn:hover { border-color: #6366f1; color: #6366f1; }
.tab-btn.active { background: #1a1d2e; border-color: #1a1d2e; color: #fff; }

/* ── Period control blocks ───────────────────────────── */
.period-controls { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.period-block {
  background: #fff; border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  flex: 1; min-width: 340px;
}
.period-block.report { border-top: 3px solid #6366f1; }
.period-block.compare { border-top: 3px solid #f59e0b; }
.period-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9ca3af; margin-bottom: 10px;
}
.period-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.period-row input[type=date] {
  border: 1.5px solid #e5e7eb; border-radius: 9px; padding: 7px 10px;
  font-size: 13px; color: #1a1d2e;
}
.preset-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn-preset {
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; color: #4b5563; cursor: pointer;
  transition: all .15s;
}
.report .btn-preset.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.compare .btn-preset.active { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-preset:hover { border-color: #9ca3af; }

.btn-apply {
  border: none; border-radius: 9px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
  margin-left: auto; transition: opacity .15s;
}
.report .btn-apply { background: #6366f1; }
.compare .btn-apply { background: #f59e0b; }
.btn-apply:disabled { opacity: .4; cursor: default; }

.applied-label { font-size: 11px; color: #9ca3af; margin-top: 8px; font-style: italic; }

/* ── Tables ───────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.section-block {
  background: #fff; border-radius: 14px; padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07); margin-bottom: 18px;
  overflow-x: auto;
}
.section-title { font-size: 13px; font-weight: 700; color: #1a1d2e; margin-bottom: 4px; }
.section-note { font-size: 12px; color: #9ca3af; margin-bottom: 12px; }

table.data-table { border-collapse: collapse; width: 100%; font-size: 12.5px; white-space: nowrap; }
table.data-table th {
  text-align: center; padding: 6px 10px; color: #7c8598;
  font-weight: 600; border-bottom: 2px solid #f0f2f7; font-size: 11px;
  border-right: 1px solid #eef0f4;
}
table.data-table th:first-child, table.data-table td:first-child { text-align: left; }
table.data-table th:last-child, table.data-table td:last-child { border-right: none; }
table.data-table td { text-align: center; padding: 6px 10px; border-bottom: 1px solid #f6f7fa; border-right: 1px solid #eef0f4; color: #1a1d2e; }

/* Zebra striping: every other row starting with the 2nd */
table.data-table tbody tr:nth-child(even) td { background: #f6f7fa; }

/* Total row/column: a bit darker, still black text */
table.data-table tr.total-row td { font-weight: 700; border-top: 2px solid #d1d5db; background: #e3e6ec; }
table.data-table tbody tr.total-row:nth-child(even) td { background: #e3e6ec; }
table.data-table td.col-total, table.data-table th.col-total { background: #e3e6ec; font-weight: 700; }
table.data-table tr.total-row td.col-total { background: #d8dbe2; }

table.data-table tr.orange-flag td:first-child { color: #b45309; font-weight: 600; }

.delta { font-size: 11px; font-weight: 600; }
.delta.good { color: #10b981; }
.delta.bad { color: #ef4444; }
.delta.neutral { color: #9ca3af; }