:root {
  color-scheme: light;
  --bg: #f6f3ed;
  --ink: #1c2520;
  --muted: #6e756f;
  --line: #ddd4c3;
  --panel: #fffdf8;
  --green: #236b4b;
  --green-soft: #e7f1ea;
  --gold: #b7822f;
  --gold-soft: #fff2d8;
  --red: #8e3f35;
  --shadow: 0 14px 42px rgba(54, 45, 31, 0.11);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(35, 107, 75, 0.12), transparent 38%),
    linear-gradient(315deg, rgba(183, 130, 47, 0.18), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell {
  width: min(100% - 32px, 1600px);
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 38px 0 24px;
}

.masthead-subtitle,
.panel-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { max-width: 920px; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 0.96; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }

.status {
  min-width: 126px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  padding: 10px 14px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.dashboard {
  display: grid;
  gap: 18px;
  padding-bottom: 40px;
}

.view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.view-tab {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 15px 18px;
}

.view-tab.active,
.view-tab:hover {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.view-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.view-section[hidden] { display: none; }

.panel,
.summary-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

.panel { padding: 18px; }

.overview-section .rosary-sessions-panel { grid-column: span 7; }
.overview-section .rosary-leaders-panel { grid-column: span 5; grid-row: span 2; }
.analytics-section > .section-heading,
.full-panel,
.summary-cards { grid-column: 1 / -1; }
.analytics-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.two-column > .panel { grid-column: span 6; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-heading span,
.sub {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}


.search-panel {
  grid-area: search;
  display: grid;
  grid-template-columns: 150px minmax(260px, 420px) 1fr;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.search-panel label {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 42px;
  text-transform: uppercase;
}
.search-combobox { position: relative; }
.search-combobox input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 11px 12px;
}
.search-combobox input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(35, 107, 75, 0.12);
}
.search-dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 6px;
}
.search-option {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 2px;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
}
.search-option:hover,
.search-option:focus {
  background: var(--green-soft);
  outline: none;
}
.search-option strong { font-weight: 950; }
.search-result {
  min-height: 42px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 12px;
}
.search-result strong { color: var(--green); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 8px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
td { font-weight: 700; }
.block { display: block; }

.leader-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leader-list.expanded {
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.leader-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff9ef;
}

.rank {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-weight: 900;
}

.name { min-width: 0; overflow-wrap: anywhere; font-weight: 900; }
.points { color: var(--gold); font-size: 1.1rem; font-weight: 950; white-space: nowrap; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.summary-card { min-height: 116px; padding: 16px; }
.summary-card span,
.summary-card small { display: block; color: var(--muted); font-weight: 750; }
.summary-card strong { display: block; margin: 10px 0; overflow-wrap: anywhere; color: var(--green); font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1; }

.combo-chart {
  min-height: 390px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff9ef;
  padding: 10px;
}

.combo-chart svg { min-width: 900px; width: 100%; height: 360px; display: block; }
.chart-axis { stroke: rgba(28, 37, 32, 0.38); stroke-width: 1; }
.chart-grid { stroke: rgba(110, 117, 111, 0.2); stroke-width: 1; }
.chart-text { fill: var(--muted); font-size: 12px; font-weight: 800; }
.chart-title-left { fill: var(--green); font-size: 12px; font-weight: 900; }
.chart-title-right { fill: var(--gold); font-size: 12px; font-weight: 900; }
.chart-bar { fill: var(--green); opacity: 0.86; cursor: pointer; }
.chart-bar:hover,
.chart-bar.active { opacity: 1; filter: drop-shadow(0 4px 8px rgba(35, 107, 75, 0.28)); }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--gold); stroke: white; stroke-width: 2; cursor: pointer; }
.chart-point:hover,
.chart-point.active { r: 6; }

.bar-chart { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bar-label { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.9rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--muted); font-size: 0.84rem; font-weight: 850; white-space: nowrap; }
.bar-track { height: 13px; overflow: hidden; border-radius: 999px; background: var(--green-soft); }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--gold)); }

.drilldown-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.drilldown-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  padding: 12px;
}

.drilldown-stat span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 850; text-transform: uppercase; }
.drilldown-stat strong { display: block; margin-top: 6px; color: var(--green); font-size: 1.35rem; }

.empty,
.error { color: var(--muted); font-weight: 750; }
.error { color: var(--red); }
.chart-empty { display: grid; min-height: 240px; place-items: center; border: 1px dashed var(--line); border-radius: 12px; background: #fff9ef; text-align: center; }

@media (max-width: 1200px) {
  .overview-section .rosary-sessions-panel,
  .overview-section .rosary-leaders-panel,
  .two-column > .panel { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .masthead { align-items: start; flex-direction: column; }
  .search-panel { grid-template-columns: 1fr; }
  .search-panel label { line-height: 1; }
  .view-tabs,
  .summary-cards { grid-template-columns: 1fr; }
  .drilldown-summary { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 20px, 1600px); }
  .panel { padding: 14px; }
  th, td { padding: 10px 6px; }
}

/* Layout refinements */
.masthead-copy { min-width: 0; }
.masthead-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mascot {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow);
}
.mini-mascot {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
}
.compact-heading { align-items: center; margin-bottom: 10px; }
.upcoming-panel { grid-column: 1 / -1; }
.upcoming-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--muted);
  font-weight: 850;
  padding: 14px;
}

.overview-section {
  align-items: stretch;
  grid-template-areas:
    "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
    "search search search search search search search search search search search search"
    "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders"
    "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders";
}
.overview-section .upcoming-panel { grid-area: upcoming; }
.overview-section .search-panel { grid-area: search; }
.overview-section .rosary-sessions-panel {
  grid-area: sessions;
  min-height: 560px;
}
.overview-section .rosary-leaders-panel {
  grid-area: leaders;
  grid-row: leaders;
}
.overview-section .rosary-leaders-panel .leader-list.expanded { max-height: 680px; }

.session-drilldown {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.session-drilldown-title {
  margin: 0;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.session-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.session-pill {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff9ef;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
}
.session-pill span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}
.session-pill.active,
.session-pill:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

@media (max-width: 1200px) {
  .overview-section {
    grid-template-areas:
      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
      "search search search search search search search search search search search search"
      "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders"
      "sessions sessions sessions sessions sessions sessions sessions leaders leaders leaders leaders leaders";
  }
}

@media (max-width: 920px) {
  .masthead-side { width: 100%; justify-content: space-between; }
  .overview-section { grid-template-areas:
    "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"
    "search search search search search search search search search search search search"
    "sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions sessions"
    "leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders leaders";
  }
}