/* HOI MOM Dash analytics — theme-aware BI-dashboard chrome.
   Values mirror hoiMom_v2_frontend_web/lib/design-tokens.json (the same
   source design_tokens.py loads for the Plotly figures) — :root here is
   DARK (this app's historical default), with [data-theme="light"]
   overriding exactly like app/design.css's [data-theme="dark"] does on the
   React side, just inverted. The attribute itself is set by
   assets/auth-bridge.js when the host React page hands over its live
   theme. */
:root {
  --bg: #0E0F22;
  --panel: #1A1B33;
  --sunken: #16182F;
  --line: #262744;
  --line-hover: #363869;
  --ink: #EAEAF5;
  --ink-2: #A0A0BC;
  --ink-3: #6E6E90;
  /* Theme-invariant (same value in both themes, per design-tokens.json's
     "shared" block) — no [data-theme="light"] override needed. */
  --accent: #7B8BE8;
  --brand: #5B50E6;
  /* Contrast-adjusted text tints — lighter in dark mode (pop on a dark
     badge bg), darker in light mode (readable on a light badge bg) —
     the same idea as app/design.css's -d suffixed tokens. */
  --ok-text: #4ADE80;
  --warn-text: #F5A623;
  --bad-text: #EF6E72;
  --accent-text: #9AA6F3;
}

[data-theme="light"] {
  --bg: #EEF0FB;
  --panel: #FFFFFF;
  --sunken: #F3F4FC;
  --line: #ECECF6;
  --line-hover: #DEDDEC;
  --ink: #2B2A4A;
  --ink-2: #6E6B86;
  --ink-3: #A2A0B6;
  --ok-text: #15803D;
  --warn-text: #B45309;
  --bad-text: #C53B40;
  --accent-text: #5B50E6;
}

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 15% 0%, rgba(123, 139, 232, 0.08), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, var(--panel) 0%, var(--bg) 60%);
}
.login-card {
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.login-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.login-sub {
  margin-top: 4px;
  margin-bottom: 22px;
  font-size: 12px;
  color: var(--ink-2);
}
.login-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
  outline: none;
}
.login-input:focus {
  border-color: var(--accent);
}
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--brand));
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(123, 139, 232, 0.6);
}
.login-error {
  margin-top: 10px;
  min-height: 16px;
  font-size: 11.5px;
  color: var(--bad-text);
}

/* ── Error state ───────────────────────────────────────────────────────── */

.err-box {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 28px;
}
.err-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bad-text);
}
.err-body {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* ── Dashboard shell ───────────────────────────────────────────────────── */

.dash-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 0;
}
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.hdr-org {
  font-size: 20px;
  font-weight: 800;
}
.hdr-sub {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.range-select {
  display: inline-flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
}
.range-label {
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.range-input:checked + .range-label,
.range-label:has(input:checked) {
  background: var(--accent);
  color: #fff;
}
.hdr-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hdr-btn:hover {
  border-color: var(--accent);
}
.hdr-btn-ghost {
  color: var(--ink-2);
}

/* ── KPI cards ─────────────────────────────────────────────────────────── */

.freshness-note {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-card {
  border-radius: 14px;
  padding: 16px 18px;
  color: #fff;
  min-height: 92px;
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
}
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
}
.kpi-icon {
  font-size: 14px;
  color: #fff;
  opacity: 0.7;
}
.kpi-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 2px;
}
.kpi-delta {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}

/* ── Section panels ────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.panel-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}
.section-panel {
  margin-bottom: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.section-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.55);
  border-color: var(--line-hover);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
}
.section-title-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.section-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.section-body {
  min-width: 0;
}
.col-gap > * + * {
  margin-top: 16px;
}
.col-gap > *:first-child {
  margin-top: 0;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.col-title,
.sub-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.sub-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sub-label-right {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: normal;
}

.row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.row-2col-9-15 {
  display: grid;
  grid-template-columns: 9fr 15fr;
  gap: 20px;
  align-items: start;
}
.row-funnel {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 20px;
  align-items: start;
}
.funnel-sidebar {
  display: flex;
  flex-direction: column;
}
.funnel-stat-block {
  padding-bottom: 12px;
}
.funnel-stat-block-divider {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.funnel-stat-label {
  font-size: 10.5px;
  color: var(--ink-3);
}
.funnel-stat-big {
  margin-top: 4px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.funnel-stat-bad {
  color: var(--bad-text);
}
.funnel-stat-mid {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.funnel-stat-sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.funnel-stat-sub-inline {
  font-size: 11px;
  color: var(--ink-3);
}
.row-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.row-meeting-activity {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: start;
}
.row-ai-brain {
  display: grid;
  grid-template-columns: 7fr 7fr 12fr;
  gap: 16px;
  align-items: start;
}
.row-2col-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
}

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-ok { background: rgba(34, 197, 94, 0.14); color: var(--ok-text); }
.badge-warn { background: rgba(245, 166, 35, 0.14); color: var(--warn-text); }
.badge-bad { background: rgba(239, 110, 114, 0.14); color: var(--bad-text); }
.badge-brand { background: rgba(123, 139, 232, 0.16); color: var(--accent-text); }
.badge-neutral { background: rgba(160, 160, 188, 0.14); color: var(--ink-2); }

/* ── Legend lines (donut legends) ──────────────────────────────────────── */

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 170px;
}
/* Matches React's LegendLine (components/ui/Donut.tsx) exactly — same dot
   size, gap, font-size, and value weight — so the same "component" reads
   identically whether rendered by Recharts' HTML or this app's. */
.legend-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.legend-label {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}

/* ── Month-nav calendar (Prev/Next, one month at a time) ──────────────── */

.month-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.month-nav-label {
  min-width: 110px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.month-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11px;
  cursor: pointer;
}
.month-nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--ink);
}
.month-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Mini stat cards ───────────────────────────────────────────────────── */

.mini-stat {
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--sunken);
  border: 1px solid var(--line);
}
.mini-stat-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.mini-stat-label {
  font-size: 10.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.mini-stat-ok .mini-stat-value { color: var(--ok-text); }
.mini-stat-warn .mini-stat-value { color: var(--warn-text); }
.mini-stat-bad .mini-stat-value { color: var(--bad-text); }
.mini-stat-brand .mini-stat-value { color: var(--accent-text); }

/* ── Progress bar (completion rate) ───────────────────────────────────── */

.progress-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.progress-label {
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
}
.progress-value {
  color: var(--ink);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #0d9488);
  transition: width 0.4s ease;
}

/* ── Callouts (AI engine / most-active user) ──────────────────────────── */

.callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* The text wrapper (title + subtitle) is a flex child with no class of its
   own — without min-width:0 a long subtitle ("Configured AI Engine For This
   Workspace") refuses to shrink below its own unbroken width, so the whole
   .callout box overflows its grid column and visually bleeds into the next
   one instead of wrapping. */
.callout > div:last-child {
  min-width: 0;
  flex: 1;
}
.callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(123, 139, 232, 0.16);
  color: var(--accent-text);
  font-size: 13px;
  flex-shrink: 0;
}
.callout-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
}
.callout-sub {
  font-size: 10.5px;
  color: var(--ink-2);
  margin-top: 1px;
  overflow-wrap: break-word;
}

/* ── List rows (today's meetings / project / team / user lists) ──────── */

.list-block {
  display: flex;
  flex-direction: column;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.list-row:last-child {
  border-bottom: none;
}
a.row-link {
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
a.row-link:hover {
  background: rgba(123, 139, 232, 0.08);
}
a.row-link:hover .list-title {
  color: var(--accent-text);
}
.avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: #0E0F22; /* always-dark text for contrast on a saturated circle (TONE_CYCLE) — NOT the page background, so intentionally not var(--bg) */
  flex-shrink: 0;
}
.list-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-2);
  font-size: 10.5px;
  flex-shrink: 0;
  width: 64px;
}
.list-title {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-sub {
  color: var(--ink-3);
  font-size: 10.5px;
  flex-shrink: 0;
}

/* ── Subscription / plan card ──────────────────────────────────────────── */

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.plan-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.plan-box {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.plan-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
}
.plan-value-sm {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-2);
  font-size: 11.5px;
}

@media (max-width: 980px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .row-2col,
  .row-3col,
  .row-ai-brain,
  .row-meeting-activity,
  .row-2col-9-15,
  .row-funnel {
    grid-template-columns: 1fr;
  }
}