/* Projection presentation; data calculations and interaction contracts stay intact. */
body[data-page="projection"] {
  --projection-ink: #18283f;
  --projection-muted: #617087;
  --projection-line: #e5eaf0;
  --projection-accent: #12376e;
  background: #f6f8fb;
  color: var(--projection-ink);
}
body[data-page="projection"] .app-shell { padding: 28px; gap: 28px; }
body[data-page="projection"] .content { min-width: 0; max-width: 1680px; margin-inline: auto; gap: 32px; }
body[data-page="projection"] .projection-hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(360px, 480px);
  align-items: center;
  min-height: 0;
  padding: 8px 0 24px; border: 0; border-bottom: 1px solid var(--projection-line);
  border-radius: 0; background: transparent; box-shadow: none; gap: 20px;
}
body[data-page="projection"] .projection-hero::before,
body[data-page="projection"] .projection-hero::after { content: none; }
body[data-page="projection"] .hero h1 {
  margin: 0; font-weight: 700;
  color: var(--projection-ink); font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  line-height: 1.15; letter-spacing: -0.035em;
}
body[data-page="projection"] .hero p { color: var(--projection-muted); line-height: 1.6; max-width: 700px; }
body[data-page="projection"] .projection-filter-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
}
body[data-page="projection"] .projection-filter-field {
  min-width: 0; padding: 0; border: 0;
  border-radius: 12px; background: transparent; box-shadow: none;
}
body[data-page="projection"] .projection-panel {
  min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; overflow: visible;
}
body[data-page="projection"] .projection-panel::before,
body[data-page="projection"] .projection-panel::after { content: none; }
body[data-page="projection"] .section-heading { padding-bottom: 0; border-bottom: 0; }
body[data-page="projection"] .section-heading h3 { color: var(--projection-ink); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.025em; }
body[data-page="projection"] .eyebrow { padding-left: 0; color: var(--projection-muted); font-size: 0.68rem; letter-spacing: 0.06em; }
body[data-page="projection"] .eyebrow::before { content: none; }
body[data-page="projection"] .projection-workspace { min-width: 0; gap: 24px; }
body[data-page="projection"] .projection-executive-grid { gap: 12px; }
body[data-page="projection"] .projection-executive-card {
  min-width: 0; padding: 24px; border: 1px solid var(--projection-line);
  border-radius: 16px; background: #ffffff; box-shadow: 0 2px 6px #18283f03;
}
body[data-page="projection"] .projection-executive-card.projection { background: #edf2fa; border-color: #d8e2f0; }
body[data-page="projection"] .projection-executive-card span { color: #536581; letter-spacing: 0; text-transform: none; }
body[data-page="projection"] .projection-executive-card strong {
  color: var(--projection-ink); font-size: clamp(1.35rem, 1.8vw, 2rem);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  white-space: normal; overflow-wrap: anywhere;
}
body[data-page="projection"] .projection-executive-card p { color: #536581; line-height: 1.5; }
body[data-page="projection"] .projection-executive-icon { border-radius: 12px; box-shadow: none; }
body[data-page="projection"] .projection-list-year {
  min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 20px;
}
body[data-page="projection"] .projection-list-month {
  min-width: 0; border: 1px solid var(--projection-line); border-radius: 16px; background: #ffffff;
  box-shadow: 0 2px 6px #18283f03; gap: 20px; overflow: hidden;
}
body[data-page="projection"] .projection-list-year-head { padding: 0; background: transparent; flex-wrap: wrap; }
body[data-page="projection"] .projection-list-month-head {
  border-radius: 0; border-bottom: 1px solid var(--projection-line); background: #ffffff; padding: 24px;
  color: var(--projection-ink); flex-wrap: wrap;
}
body[data-page="projection"] .projection-list-year-head :is(h3, strong),
body[data-page="projection"] .projection-list-month-head :is(h3, h4, strong) { color: var(--projection-ink); letter-spacing: -0.025em; }
body[data-page="projection"] .projection-list-section { min-width: 0; margin: 0 24px; padding: 0; border: 0; border-radius: 12px; background: #ffffff; }
body[data-page="projection"] .projection-list-section-head { background: transparent; padding: 0 0 14px; border-radius: 0; }
body[data-page="projection"] .projection-list-section-head :is(h3, h4, strong) { color: #19335d; }
body[data-page="projection"] .projection-table-wrap {
  max-width: 100%; border: 1px solid var(--projection-line); border-radius: 12px; scrollbar-width: thin; scrollbar-color: #bac8de #f5f7fb;
}
body[data-page="projection"] .projection-table { font-variant-numeric: tabular-nums; }
body[data-page="projection"] .projection-table thead th {
  background: #f8fafc; color: var(--projection-muted); padding: 14px 12px;
  border-bottom-color: var(--projection-line); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.03em;
}
body[data-page="projection"] .projection-table tbody td { padding: 14px 12px; color: var(--projection-ink); border-bottom-color: #edf1f7; font-weight: 500; }
body[data-page="projection"] .projection-table-row.branch td { background: #f0f4fa; font-weight: 600; }
body[data-page="projection"] .projection-table-row.agent td { background: #ffffff; }
body[data-page="projection"] .projection-table-row.total td { background: #e9eff8; color: var(--projection-accent); font-weight: 700; }
body[data-page="projection"] .projection-table-row:hover td { box-shadow: inset 0 0 0 999px #315fce06; }
body[data-page="projection"] .projection-row-badge { border-radius: 7px; }
body[data-page="projection"] .projection-visibility-button {
  min-height: 40px; padding: 10px 14px; border-radius: 8px;
  border-color: var(--projection-line); background: #ffffff; color: var(--projection-ink); box-shadow: none;
}
body[data-page="projection"] .projection-visibility-button:hover { transform: none; background: #edf3ff; }
body[data-page="projection"] .projection-visibility-button.active { background: #edf2fa; border-color: #c9d6e9; color: var(--projection-accent); }
body[data-page="projection"] .projection-excel-button { background: #12376e; border-color: #12376e; color: #ffffff; }
body[data-page="projection"] .projection-excel-button:hover { background: #194780; border-color: #194780; color: #ffffff; }
body[data-page="projection"] .projection-total-strip {
  max-width: 1680px; margin-inline: auto;
  grid-template-columns: minmax(140px, 0.9fr) minmax(140px, 1fr) minmax(100px, 0.75fr) minmax(170px, 1.3fr) minmax(100px, 0.75fr) minmax(190px, 1.4fr);
  padding: 16px; gap: 8px;
  border: 1px solid #213f6d; border-radius: 16px;
  background: #12376e;
  box-shadow: 0 8px 24px #18283f20;
}
body[data-page="projection"] .projection-total-strip > div {
  min-width: 0; min-height: 0; padding: 8px 16px; border-left-color: #ffffff1f;
}
body[data-page="projection"] .projection-total-strip span { color: #d4deed; font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
body[data-page="projection"] .projection-total-strip strong {
  margin-top: 8px; color: #ffffff; font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em; overflow-wrap: anywhere;
}
body[data-page="projection"] .projection-total-strip p { margin-top: 6px; color: #c3d0e5; font-size: 0.72rem; font-weight: 400; line-height: 1.5; }
body[data-page="projection"] .projection-total-strip .projection-total-brand { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding-left: 0; }
body[data-page="projection"] .projection-total-brand > span { width: 40px; height: 40px; border: 1px solid #ffffff1f; border-radius: 10px; background: #ffffff08; }
body[data-page="projection"] .projection-total-brand > span img { width: 28px; height: 28px; }
body[data-page="projection"] .projection-total-brand strong { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
body[data-page="projection"] .projection-total-strip > div:last-child { padding: 12px 16px; border: 1px solid #ffffff1a; border-radius: 10px; background: #ffffff0a; }
body[data-page="projection"] .projection-empty-state,
body[data-page="projection"] .projection-notice-panel { border-radius: 12px; border-color: var(--projection-line); background: #ffffff; box-shadow: none; }
body[data-page="projection"] :is(button, a, input):focus-visible { outline: 3px solid #3979f6; outline-offset: 3px; }
body[data-page="projection"] .sidebar :is(button, a, summary):focus-visible { outline-color: #a4c5ff; }

body[data-page="projection"] .projection-hero-mark {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: #eaf0ff; color: #315fce;
}
body[data-page="projection"] .projection-hero-mark svg { width: 26px; height: 26px; }
body[data-page="projection"] .projection-hero-copy { min-width: 0; }
body[data-page="projection"] .sidebar.projection-sidebar { border: 1px solid #21324d; border-radius: 16px; background: #122039; box-shadow: none; }
body[data-page="projection"] .sidebar .nav-link { font-weight: 500; box-shadow: none; }
body[data-page="projection"] .sidebar .nav-link.active { border-color: #ffffff1a; background: #ffffff12; box-shadow: inset 3px 0 0 #91b3ff; }
body[data-page="projection"] .projection-executive-card { display: block; }
body[data-page="projection"] .projection-executive-card strong { overflow: visible; }
body[data-page="projection"] .projection-executive-card span { font-weight: 500; }
body[data-page="projection"] .projection-executive-card p { font-size: 0.8rem; font-weight: 500; }
body[data-page="projection"] .projection-executive-icon { display: none; }
body[data-page="projection"] .projection-executive-card.projection strong { color: var(--projection-accent); }
body[data-page="projection"] .projection-month-tools { margin: 0; padding: 0 24px; gap: 10px; flex-wrap: wrap; }
body[data-page="projection"] .projection-list-section:last-child { margin-bottom: 24px; }
body[data-page="projection"] .projection-list-section-head h5 { margin: 0; color: var(--projection-ink); font-size: 1rem; font-weight: 650; }
body[data-page="projection"] .projection-list-month-head h4 { font-size: 1.15rem; font-weight: 650; }
body[data-page="projection"] .projection-list-month-head p { color: var(--projection-muted); font-size: 0.82rem; }
body[data-page="projection"] .projection-list-section.pinned-summary { background: #ffffff; border: 0; }
body[data-page="projection"] .projection-table :is(th, td):first-child {
  position: sticky; left: 0; min-width: 320px; width: 320px;
}
body[data-page="projection"] .projection-table thead th:first-child { z-index: 3; box-shadow: 1px 0 0 var(--projection-line); }
body[data-page="projection"] .projection-table tbody td:first-child { z-index: 1; box-shadow: 1px 0 0 var(--projection-line); }
body[data-page="projection"] .projection-table-row.branch td:first-child { box-shadow: inset 3px 0 0 #12376e, 1px 0 0 var(--projection-line); }
body[data-page="projection"] .projection-table-row.total td:first-child { box-shadow: inset 3px 0 0 #12376e, 1px 0 0 var(--projection-line); }
body[data-page="projection"] .projection-table-row .projection-table-label strong { color: var(--projection-ink); font-size: 0.83rem; font-weight: 600; letter-spacing: 0; }
body[data-page="projection"] .projection-row-badge.branch { background: #edf2fa; color: var(--projection-accent); }
body[data-page="projection"] .projection-row-badge.agent { background: #f0f3f8; color: var(--projection-muted); }
body[data-page="projection"] .projection-row-badge.total { background: #12376e; color: #ffffff; }
body[data-page="projection"] .projection-branch-toggle { border-radius: 7px; border-color: var(--projection-line); background: #ffffff; box-shadow: none; }
body[data-page="projection"] .projection-visibility-button:focus-visible,
body[data-page="projection"] .projection-branch-toggle:focus-visible { outline: 3px solid #3979f6; outline-offset: 3px; }
body[data-page="projection"] .projection-list-warning { margin: 0 24px 24px; padding: 20px; border: 1px solid #eadfc3; border-radius: 12px; background: #fffbf1; }
body[data-page="projection"] .projection-notice-badge { border-radius: 7px; background: #fff4d9; color: #805b16; box-shadow: none; }
body[data-page="projection"] #projectionLoadingOverlay .analysis-loading-card { border-radius: 16px; border-color: var(--projection-line); }
@media (max-width: 900px) {
  body[data-page="projection"] .app-shell { padding: 16px; gap: 24px; }
}
@media (max-width: 1100px) {
  body[data-page="projection"] .projection-total-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="projection"] .projection-hero { grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
  body[data-page="projection"] .projection-filter-bar { grid-column: 1 / -1; max-width: 640px; }
  body[data-page="projection"] .projection-executive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body[data-page="projection"] .projection-total-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 12px; }
  body[data-page="projection"] .projection-total-strip > div { padding: 10px 0 0; border-left: 0; border-top-color: #ffffff1f; }
  body[data-page="projection"] .projection-total-strip .projection-total-brand { grid-column: 1 / -1; padding: 0; border-top: 0; }
  body[data-page="projection"] .projection-total-strip > div:last-child { grid-column: 1 / -1; }
  body[data-page="projection"] .projection-hero { padding: 18px 0; }
  body[data-page="projection"] .projection-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  body[data-page="projection"] .projection-filter-field { width: 100%; }
  body[data-page="projection"] .projection-panel { padding: 0; }
  body[data-page="projection"] .projection-list-month-head { padding: 18px; }
  body[data-page="projection"] .projection-month-tools { padding-inline: 18px; }
  body[data-page="projection"] .projection-list-section { margin-inline: 18px; }
  body[data-page="projection"] .projection-list-section:last-child { margin-bottom: 18px; }
  body[data-page="projection"] .projection-table :is(th, td):first-child { position: static; }
  body[data-page="projection"] .projection-list-warning { margin: 0 18px 18px; }
  body[data-page="projection"] .projection-executive-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="projection"] .projection-month-tools { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="projection"] .content *,
  body[data-page="projection"] .content *::before,
  body[data-page="projection"] .content *::after { transition: none !important; animation: none !important; }
}