.analytics-dashboard { min-height: 100vh; }
.analytics-header { align-items: flex-end; }
.analytics-header .eyebrow { margin-bottom: 6px; }
.analytics-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.analytics-content { display: grid; gap: 22px; }
.analytics-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(20, 15, 13, .96);
}
.analytics-toolbar h2, .analytics-panel h2 { margin: 0; }
.analytics-toolbar label { min-width: 180px; }
.analytics-toolbar-copy {
  max-width: 52rem;
  margin: 8px 0 0;
  color: var(--muted);
  font: 500 .8rem/1.45 ui-sans-serif, system-ui, sans-serif;
}
.analytics-status {
  min-height: 1.4em;
  margin: -8px 2px -4px;
  color: var(--muted);
  font: 600 .84rem/1.4 ui-sans-serif, system-ui, sans-serif;
}
.analytics-status.is-error { color: var(--danger); }
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.analytics-metrics article {
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(41, 29, 23, .92), rgba(24, 18, 15, .96));
}
.analytics-metrics span, .funnel-list span, .breakdown-list span {
  color: var(--muted);
  font: 700 .84rem/1.3 ui-sans-serif, system-ui, sans-serif;
}
.analytics-metrics strong {
  display: block;
  margin-top: 12px;
  color: var(--gold-light);
  font-size: clamp(1.55rem, 3vw, 2rem);
}
.analytics-metrics small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 500 .72rem/1.35 ui-sans-serif, system-ui, sans-serif;
}
.analytics-grid-two, .analytics-grid-three { display: grid; gap: 22px; }
.analytics-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(20, 15, 13, .96);
}
.analytics-panel-heading { padding: 20px 20px 16px; border-bottom: 1px solid rgba(215, 154, 59, .16); }
.analytics-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.analytics-table-wrap table { min-width: 420px; }
.analytics-table-wrap td:last-child, .analytics-table-wrap th:last-child { text-align: right; }
.analytics-table-wrap td { padding-block: 13px; }
.funnel-list, .breakdown-list { display: grid; gap: 1px; background: rgba(215, 154, 59, .13); }
.funnel-list div, .breakdown-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 15px 20px;
  background: #171210;
}
.funnel-list strong, .breakdown-list strong { color: var(--gold-light); font-size: 1.35rem; }
.funnel-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel-list.compact div { display: grid; align-content: center; gap: 5px; }
.analytics-community-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.analytics-community-summary div {
  display: grid;
  align-content: center;
  gap: 5px;
}
.analytics-empty { color: var(--muted); font-style: italic; }

@media (max-width: 1000px) {
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid-two, .analytics-grid-three { grid-template-columns: 1fr; }
  .analytics-community-summary { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .analytics-header { align-items: flex-start; }
  .analytics-header-actions { width: 100%; justify-content: flex-start; }
  .analytics-toolbar { align-items: stretch; flex-direction: column; }
  .analytics-toolbar label { min-width: 0; }
  .analytics-metrics { grid-template-columns: 1fr 1fr; }
  .analytics-content { gap: 16px; }
  .analytics-grid-two, .analytics-grid-three { gap: 16px; }
}

@media (max-width: 480px) {
  .analytics-header-actions .button { flex: 1 1 auto; }
  .analytics-metrics { grid-template-columns: 1fr; }
  .funnel-list.compact { grid-template-columns: 1fr; }
  .analytics-toolbar, .analytics-panel-heading, .analytics-metrics article { padding-inline: 16px; }
}


/* Sales timeline and readable explanations for privacy-safe metrics. */
.analytics-panel-help, .analytics-sales-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font: 500 .8rem/1.5 ui-sans-serif, system-ui, sans-serif;
}
.analytics-panel-help a { color: var(--gold-light); }
.analytics-sales-trend-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.analytics-sales-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.analytics-sales-summary span {
  display: grid; gap: 4px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--muted); font: 500 .78rem ui-sans-serif, system-ui, sans-serif;
}
.analytics-sales-summary strong { color: var(--gold-light); font-size: 1.15rem; }
.analytics-sales-chart-wrap { overflow-x: auto; padding: 4px 16px 12px; }
.analytics-sales-chart { display: block; width: 100%; min-width: 610px; height: auto; }
.analytics-sales-grid { stroke: rgba(244,234,215,.12); stroke-width: 1; }
.analytics-sales-axis, .analytics-sales-empty {
  fill: var(--muted); font: 12px ui-sans-serif, system-ui, sans-serif;
}
.analytics-sales-line { stroke: var(--gold-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.analytics-sales-dot { fill: var(--gold-light); stroke: var(--gold-light); }
.analytics-sales-dot:focus { stroke-width: 4; outline: none; }
@media (max-width: 720px) {
  .analytics-sales-trend-heading { display: grid; }
  .analytics-sales-summary { justify-content: flex-start; }
}


/* Customer and loyalty analytics use the existing owner dashboard visual system. */
.analytics-loyalty { display: grid; gap: 16px; }
.analytics-loyalty-intro { padding: 4px 2px; }
.analytics-loyalty-intro h2 { margin: 4px 0 8px; }
.analytics-loyalty-intro > p:last-child {
  margin: 0; color: var(--muted);
  font: 500 .86rem/1.55 ui-sans-serif, system-ui, sans-serif;
}
.analytics-loyalty .analytics-panel-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.analytics-loyalty .analytics-panel-heading h3 { margin: 2px 0 0; font-size: 1.25rem; }
.analytics-panel-link {
  flex-shrink: 0; font: 600 .82rem/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--gold-light); text-underline-offset: 3px;
}
.analytics-loyalty-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(215, 154, 59, .13);
}
.analytics-loyalty-metrics > div {
  display: grid; align-content: start; gap: 8px; min-height: 96px;
  background: #171210; padding: 19px 20px;
}
.analytics-loyalty-metrics span, .analytics-loyalty-topics span {
  color: var(--muted);
  font: 600 .79rem/1.4 ui-sans-serif, system-ui, sans-serif;
}
.analytics-loyalty-metrics strong, .analytics-loyalty-topics strong {
  color: var(--gold-light); font-size: clamp(1.4rem, 2.8vw, 1.7rem);
}
.analytics-loyalty-metrics > .analytics-loyalty-full { grid-column: 1 / -1; }
.analytics-loyalty-subpanel { border-top: 1px solid var(--line); padding: 20px; }
.analytics-loyalty-subpanel h4 { margin: 0 0 8px; font-size: 1rem; }
.analytics-loyalty-subpanel > p {
  margin: 0 0 12px; color: var(--muted);
  font: 500 .78rem/1.55 ui-sans-serif, system-ui, sans-serif;
}
.analytics-loyalty-subpanel .analytics-table-wrap { margin-inline: -20px; }
.analytics-loyalty-subpanel table { min-width: 420px; }
.analytics-loyalty-topics { display: grid; gap: 1px; background: rgba(215,154,59,.13); }
.analytics-loyalty-topics > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #171210;
}
.analytics-loyalty-topics strong { font-size: 1.15rem; }
@media (max-width: 480px) {
  .analytics-loyalty-metrics > div { padding: 15px; min-height: 90px; }
  .analytics-loyalty .analytics-panel-heading { flex-wrap: wrap; }
}