/* brain-dashboard.css — Customer MR Brain Dashboard Layer
   Spec A-001: Business Health Dashboard
   Zero hardcoded colors or spacing — all --mr-* tokens.
   Complements brain-cards.css (insight cards from PR-401).
*/

/* ==========================================================================
   GREETING CARD
   ========================================================================== */

.mr-brain-greeting-body {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-xs);
}

.mr-brain-greeting-title {
  font-size: var(--mr-font-heading);
  font-weight: var(--mr-weight-semibold);
  color: var(--mr-text);
  margin: 0;
  line-height: var(--mr-leading-tight);
}

.mr-brain-greeting-date {
  font-size: var(--mr-font-caption);
  font-weight: var(--mr-weight-regular);
  color: var(--mr-text-muted);
  margin: 0;
}

.mr-brain-sync {
  font-size: var(--mr-font-caption);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mr-space-xs);
}

.mr-brain-sync--online  { color: var(--mr-success); }
.mr-brain-sync--offline { color: var(--mr-text-muted); }
.mr-brain-sync--trial   { color: var(--mr-warning); }

/* ==========================================================================
   BUSINESS HEALTH CARD
   ========================================================================== */

.mr-brain-health-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--mr-space-sm) 0;    /* reduced from md → sm */
  gap: var(--mr-space-xs);
}

.mr-brain-health-score {
  font-size: 2.5rem;               /* reduced from 3rem — less dominant, cleaner */
  font-weight: var(--mr-weight-bold);
  color: var(--mr-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.mr-brain-health-label {
  font-size: var(--mr-font-body);
  font-weight: var(--mr-weight-semibold);
  color: var(--mr-text-secondary);
  margin: 0;
}

.mr-brain-health-trend {
  font-size: var(--mr-font-caption);
  color: var(--mr-text-muted);
  margin: 0;
}

.mr-brain-health-reason {
  font-size: var(--mr-font-caption);
  color: var(--mr-text-secondary);
  margin: var(--mr-space-sm) 0 0;
  max-width: 100%;
  word-break: break-word;
}

.mr-brain-health-partial {
  font-size: var(--mr-font-caption);
  color: var(--mr-text-muted);
  font-style: italic;
  margin: 0;
}

/* Getting Started / invalid score — not a failure state */
.mr-brain-health-score--getting-started {
  color: var(--mr-text-muted);
}

/* Partial score superscript asterisk (*) */
.mr-brain-health-score-partial-sup {
  font-size: 0.45em;
  vertical-align: super;
}

/* ==========================================================================
   MORNING BRIEF / TODAY'S FOCUS CARD
   ========================================================================== */

.mr-brain-brief-body {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-sm);
}

.mr-brain-brief-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mr-brain-brief-list li {
  font-size: var(--mr-font-body-sm);
  color: var(--mr-text-secondary);
  padding: var(--mr-space-xs) 0;
  border-bottom: 1px solid var(--mr-border);
  line-height: var(--mr-leading-normal);
}

.mr-brain-brief-list li:last-child {
  border-bottom: none;
}

.mr-brain-brief-footer {
  display: flex;
  gap: var(--mr-space-sm);
  flex-wrap: wrap;
  margin-top: var(--mr-space-xs);
}

/* Action row inside View Details / Recommended Actions section */
.mr-brain-brief-action-row {
  display: flex;
  gap: var(--mr-space-sm);   /* UX-007: was hardcoded 6px, now token */
  flex-wrap: wrap;
  margin-top: var(--mr-space-xs);  /* was hardcoded 4px */
}

.mr-brain-brief-empty {
  font-size: var(--mr-font-caption);
  color: var(--mr-text-muted);
  margin: 0;
  line-height: var(--mr-leading-normal);
}

/* First-action empty state — no-sales state, points to Billing */
.mr-brain-brief-empty--first-action {
  color: var(--mr-text-secondary);
  font-size: var(--mr-font-body-sm);
}

/* ==========================================================================
   TODAY'S PRIORITIES CARD
   ========================================================================== */

.mr-brain-priorities-body {
  display: flex;
  flex-direction: column;
}

.mr-brain-priority-row {
  display: flex;
  align-items: center;
  gap: var(--mr-space-sm);
  padding: var(--mr-space-sm) 0;
  border-bottom: 1px solid var(--mr-border);
}

.mr-brain-priority-row:last-child {
  border-bottom: none;
}

.mr-brain-priority-text {
  flex: 1;
  font-size: var(--mr-font-body-sm);
  color: var(--mr-text-secondary);
  margin: 0;
  line-height: var(--mr-leading-tight);
}

.mr-brain-priorities-empty {
  font-size: var(--mr-font-body-sm);
  color: var(--mr-success);
  margin: 0;
  padding: var(--mr-space-sm) 0;
  line-height: var(--mr-leading-normal);
}

/* ==========================================================================
   RESPONSIVE — 375px (iPhone SE) and below
   Above-the-fold requirement: Health + Brief + first Priority must all
   be visible without scrolling. Compact spacing achieves this.
   ========================================================================== */

@media (max-width: 480px) {
  .mr-brain-health-score {
    font-size: 2rem;               /* compact on mobile */
  }

  .mr-brain-health-body {
    padding: var(--mr-space-xs) 0; /* ultra-compact on small screens */
  }

  .mr-brain-priority-row {
    flex-wrap: wrap;
    gap: var(--mr-space-xs);
  }

  .mr-brain-brief-footer {
    gap: var(--mr-space-xs);
  }
}

@media (max-width: 375px) {
  .mr-brain-health-score {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   TABLET — 768px
   Brain Cards span full content column width.
   ========================================================================== */

@media (max-width: 768px) {
  /* UX-009 Req 4: full content column width on tablet */
  [data-brain-card] {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   OVERFLOW PROTECTION — prevents horizontal scroll at any viewport
   ========================================================================== */

.mr-brain-health-body,
.mr-brain-brief-body,
.mr-brain-priorities-body {
  overflow: hidden;     /* UX-009 Req 1: no horizontal overflow on Brain cards */
  max-width: 100%;
}

/* ==========================================================================
   DARK MODE — all colors via --mr-* tokens (auto via token system)
   No overrides needed — tokens handle dark mode.
   ========================================================================== */

/* ==========================================================================
   REDUCED MOTION — no animations in this component
   Brain dashboard cards are static — no animation to suppress.
   ========================================================================== */

/* ==========================================================================
   Business Health — Score Notes Panel (Why this score?)
   ========================================================================== */

.mr-brain-score-notes-panel {
  margin-top: var(--mr-space-sm);
  border-top: 1px solid var(--mr-border);
  padding-top: var(--mr-space-xs);
  width: 100%;
  text-align: left;
}

.mr-brain-score-notes-toggle {
  font-size: var(--mr-font-caption);
  font-weight: var(--mr-weight-semibold);
  color: var(--mr-primary);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--mr-space-xs);
  padding: var(--mr-space-xs) 0;
  user-select: none;
  transition: color var(--mr-transition);
}

.mr-brain-score-notes-toggle::-webkit-details-marker { display: none; }

.mr-brain-score-notes-toggle::before {
  content: '▶';
  font-size: 0.6em;
  transition: transform var(--mr-transition);
}

.mr-brain-score-notes-panel[open] > .mr-brain-score-notes-toggle::before {
  transform: rotate(90deg);
}

.mr-brain-score-notes-body {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-sm);
  padding: var(--mr-space-xs) 0;
}

.mr-brain-score-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-xs);  /* UX-006/007: token spacing, was hardcoded 2px */
}