/* ═══════════════════════════════════════════════════════════
   cmd-center.css  v1.0  — RUB385
   Dashboard command center: surfaces "what now?" in <2 seconds
   ═══════════════════════════════════════════════════════════
   SCOPE   : Purely additive. No layout changes.
   APPROACH: :has() + .cmd-* state classes on .dashboard-welcome
   LOADS   : After typography-clarity.css (highest priority)
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1. HERO FOCUS RIBBON — the "what needs attention NOW" band
   ══════════════════════════════════════════════════════════
   Already rendered by _renderWelcomeHero().
   We make it visually prominent and color-coded.            */

.dash-hero-focus {
  display            : flex;
  align-items        : center;
  flex-wrap          : wrap;
  gap                : 8px;
  padding            : 10px 20px 14px;
  border-top         : 1px solid var(--border-subtle);
  transition         : background 300ms ease, border-color 300ms ease;
  border-radius      : 0 0 10px 10px;
}

/* ── STATE: HIGH RISK ─────────────────────────────────── */
.dashboard-welcome.cmd-has-risk .dash-hero-focus,
.dash-hero-focus:has(.dash-focus-chip.high) {
  background   : rgba(239, 68, 68, 0.07);
  border-color : rgba(239, 68, 68, 0.22);
}

/* ── STATE: WARNING ───────────────────────────────────── */
.dashboard-welcome.cmd-has-warning .dash-hero-focus,
.dash-hero-focus:has(.dash-focus-chip.medium):not(:has(.dash-focus-chip.high)) {
  background   : rgba(245, 158, 11, 0.06);
  border-color : rgba(245, 158, 11, 0.18);
}

/* ── STATE: ALL CLEAR ─────────────────────────────────── */
.dashboard-welcome.cmd-all-clear .dash-hero-focus,
.dash-hero-focus:has(.dash-focus-ok) {
  background   : rgba(16, 185, 129, 0.05);
  border-color : rgba(16, 185, 129, 0.16);
}

/* ── Focus label ("דורשות תשומת לב:") ─────────────────── */
.dash-focus-label {
  font-size     : 0.6875rem;
  font-weight   : 700;
  letter-spacing: 0.03em;
  color         : var(--text-muted);
  flex-shrink   : 0;
}

/* ── HIGH severity chip — alarming, clearly clickable ──── */
.dash-focus-chip.high {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  padding        : 6px 13px 6px 10px;
  background     : rgba(239, 68, 68, 0.10);
  border         : 1px solid rgba(239, 68, 68, 0.28);
  border-radius  : 99px;
  font-size      : 0.8125rem;
  font-weight    : 650;
  color          : var(--ql-status-danger-text);
  cursor         : pointer;
  transition     : background 120ms, border-color 120ms, transform 120ms;
  white-space    : nowrap;
}
.dash-focus-chip.high:hover {
  background    : rgba(239, 68, 68, 0.16);
  border-color  : rgba(239, 68, 68, 0.40);
  transform     : translateX(-1px);        /* RTL nudge = feels clickable */
}
.dash-focus-chip.high .material-icons-round {
  font-size : 15px;
  color     : var(--ql-status-danger-dot);
  flex-shrink: 0;
}

/* ── MEDIUM severity chip — warning, softer ─────────────── */
.dash-focus-chip.medium {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  padding        : 5px 11px 5px 9px;
  background     : rgba(245, 158, 11, 0.09);
  border         : 1px solid rgba(245, 158, 11, 0.24);
  border-radius  : 99px;
  font-size      : 0.75rem;
  font-weight    : 600;
  color          : var(--ql-status-warning-text);
  cursor         : pointer;
  transition     : background 120ms;
  white-space    : nowrap;
}
.dash-focus-chip.medium .material-icons-round {
  font-size : 14px;
  color     : var(--ql-status-warning-dot);
}

/* ── ALL CLEAR chip — explicitly positive ─────────────── */
.dash-focus-ok {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 5px 13px 5px 10px;
  background     : rgba(16, 185, 129, 0.09);
  border         : 1px solid rgba(16, 185, 129, 0.22);
  border-radius  : 99px;
  font-size      : 0.8125rem;
  font-weight    : 650;
  color          : var(--ql-status-success-text);
}
.dash-focus-ok .material-icons-round {
  font-size : 16px;
  color     : var(--ql-status-success-dot);
}


/* ══════════════════════════════════════════════════════════
   2. EXEC KPI CARDS — danger/warning states pop harder
   The overdue-tasks card is the critical signal.           */

/* Danger stripe: taller and bolder than default (3px) */
.exec-kpi-card.exec-kpi-danger .exec-kpi-stripe {
  height : 4px;
}

/* Warning stripe: slightly taller */
.exec-kpi-card.exec-kpi-warning .exec-kpi-stripe {
  height : 3.5px;
}

/* Success stripe: clearly positive */
.exec-kpi-card.exec-kpi-success .exec-kpi-stripe {
  background : var(--ql-status-success-dot);
}

/* Danger card: deeper color tint on the body */
.exec-kpi-card.exec-kpi-danger .exec-kpi-body {
  background : rgba(239, 68, 68, 0.04);
}

/* Larger value number on danger/warning cards — the number IS the signal */
.exec-kpi-card.exec-kpi-danger .exec-kpi-value,
.exec-kpi-card.exec-kpi-warning .exec-kpi-value {
  font-size : 2.75rem;
}


/* ══════════════════════════════════════════════════════════
   3. RISK CARD — card header gets a red left accent
   when actual risk items are present (:has() check)       */

/* Card that contains risk items → red accent header stripe */
.card:has(.dash-risk-item) .card-header {
  border-right      : 3px solid var(--ql-status-danger-dot);
  padding-right     : calc(1.5rem - 3px);  /* compensate for border width */
}

/* When urgent-actions card has action items: amber header stripe */
.card:has(.dash-urgent-list > div:not(.dash-empty-mini)) .card-header {
  border-right  : 3px solid var(--ql-status-warning-dot);
  padding-right : calc(1.5rem - 3px);
}

/* ── Risk items: severity-based background ─────────────── */
.dash-risk-item {
  padding          : 8px 10px;
  border-radius    : var(--ql-radius-lg, 8px);
  margin-bottom    : 6px;
  transition       : background 120ms, transform 100ms;
}
.dash-risk-item:last-child { margin-bottom: 0; }

.dash-risk-item.dash-risk-high {
  background   : rgba(239, 68, 68, 0.055) !important;
  border-right : 3px solid var(--ql-status-danger-dot);
}
.dash-risk-item.dash-risk-high:hover {
  background   : rgba(239, 68, 68, 0.09) !important;
  transform    : translateX(-1px);
}

.dash-risk-item.dash-risk-medium {
  background   : rgba(245, 158, 11, 0.045) !important;
  border-right : 3px solid var(--ql-status-warning-dot);
}

/* Risk tags */
.dash-risk-tag.high {
  background   : var(--ql-status-danger-bg);
  color        : var(--ql-status-danger-text);
  border-color : color-mix(in srgb, var(--ql-status-danger-dot) 20%, transparent);
}
.dash-risk-tag.medium {
  background   : var(--ql-status-warning-bg);
  color        : var(--ql-status-warning-text);
  border-color : color-mix(in srgb, var(--ql-status-warning-dot) 20%, transparent);
}

/* ── Insight headers (group labels inside risk card) ───── */
.dash-insight-header {
  display       : flex;
  align-items   : center;
  gap           : 6px;
  padding       : 6px 0 5px;
  font-size     : 0.6875rem;
  font-weight   : 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top    : 8px;
}
.dash-insight-header:first-child { margin-top: 0; }

.dash-insight-header.dash-insight-risk { color: var(--ql-status-danger-text); }
.dash-insight-header.dash-insight-risk .material-icons-round {
  color     : var(--ql-status-danger-dot);
  font-size : 15px;
}

.dash-insight-header.dash-insight-deadline { color: var(--ql-status-warning-text); }
.dash-insight-header.dash-insight-deadline .material-icons-round {
  color     : var(--ql-status-warning-dot);
  font-size : 15px;
}

.dash-insight-header.dash-insight-slow { color: var(--ql-status-info-text); }

.dash-insight-count {
  margin-right   : auto;
  font-size      : 0.625rem;
  font-weight    : 700;
  padding        : 2px 7px;
  border-radius  : 99px;
  background     : var(--bg-sunken);
  color          : var(--text-muted);
  border         : 1px solid var(--border-subtle);
}


/* ══════════════════════════════════════════════════════════
   4. SCHEDULE — today's events stand out                   */

/* Header groups within schedule card */
.dash-schedule-header {
  display       : flex;
  align-items   : center;
  gap           : 6px;
  font-size     : 0.6875rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color         : var(--text-muted);
  margin-bottom : 6px;
  margin-top    : 10px;
}
.dash-schedule-header:first-child { margin-top: 0; }

.dash-schedule-count {
  margin-right  : auto;
  font-size     : 0.625rem;
  font-weight   : 700;
  padding       : 2px 7px;
  border-radius : 99px;
  background    : var(--bg-sunken);
  color         : var(--text-muted);
}

/* Today items: strong blue-right border, tinted background */
.dash-schedule-item.today {
  background    : color-mix(in srgb, var(--ql-status-info-dot) 5%, transparent) !important;
  border-right  : 3px solid color-mix(in srgb, var(--ql-status-info-dot) 55%, transparent) !important;
  padding-right : calc(var(--space-3, 0.75rem) - 3px);
  border-radius : var(--ql-radius-lg, 8px);
}


/* ══════════════════════════════════════════════════════════
   5. DE-EMPHASIZE: analytics sections are secondary info   */

/* KPI sparkline section: slightly subdued — it's supplementary */
.dashboard-stats {
  opacity    : 0.91;
  transition : opacity 200ms;
}
.dashboard-stats:hover { opacity: 1; }

/* Stage bar chart and status donut: clearly secondary */
.card:has(.dash-status-donut) {
  opacity    : 0.88;
  transition : opacity 200ms;
}
.card:has(.dash-status-donut):hover { opacity: 1; }

/* Activity feed: tertiary — "log", not "action" */
.dash-activity-section > .card {
  opacity    : 0.88;
  transition : opacity 200ms;
}
.dash-activity-section > .card:hover { opacity: 1; }

/* Pipeline empty-stage cards: clearly inactive */
.dash-pipe-card.dash-pipe-empty { opacity: 0.50 !important; }


/* ══════════════════════════════════════════════════════════
   6. HEALTH GAUGE — clearer percentage display             */

.dash-health-gauge {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  padding        : 12px 0 10px;
  margin-bottom  : 12px;
}

.dash-health-pct {
  font-size            : 2.25rem;
  font-weight          : 800;
  line-height          : 1;
  letter-spacing       : -0.035em;
  font-feature-settings: 'tnum' 1;
}

/* Color tokens — already computed by JS as .success/.warning/.danger */
.dash-health-pct.success { color: var(--ql-status-success-dot); }
.dash-health-pct.warning { color: var(--ql-status-warning-dot); }
.dash-health-pct.danger  { color: var(--ql-status-danger-dot);  }

.dash-health-label {
  font-size     : 0.625rem;
  font-weight   : 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color         : var(--text-muted);
  margin-top    : 4px;
}

/* 2×2 grid for the 4 health stats */
.dash-health-grid {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : 8px;
  width                : 100%;
}

.dash-health-stat {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 3px;
  padding       : 10px 8px;
  background    : var(--bg-sunken);
  border-radius : var(--ql-radius-lg, 8px);
  border        : 1px solid var(--border-subtle);
  text-align    : center;
}

.dash-health-stat-value {
  font-size            : 1.375rem;
  font-weight          : 750;
  letter-spacing       : -0.025em;
  font-feature-settings: 'tnum' 1;
  color                : var(--text-primary);
  line-height          : 1;
}

.dash-health-stat-label {
  font-size  : 0.6875rem;
  color      : var(--text-muted);
  line-height: 1.3;
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════
   7. PRIMARY ACTION — first quick-action button is the lead */

/* "עסקה חדשה" is the first quick-action — make it stand out */
.quick-actions .quick-action-btn:first-child {
  background    : rgba(255, 255, 255, 0.15) !important;
  border-color  : rgba(255, 255, 255, 0.24) !important;
  font-weight   : 700;
}


/* ══════════════════════════════════════════════════════════
   8. EMPTY MINI STATES — green icon = all good signal      */

.dash-empty-mini {
  display     : flex;
  align-items : center;
  gap         : 8px;
  padding     : 12px 4px;
  font-size   : 0.8125rem;
  color       : var(--text-tertiary);
  line-height : 1.35;
}
.dash-empty-mini .material-icons-round {
  font-size  : 16px;
  color      : var(--ql-status-success-dot);  /* green = good news */
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   9. PIPELINE CARD — active stages more prominent          */

/* Count number: larger on non-empty cards */
.dash-pipe-card:not(.dash-pipe-empty) .dash-pipe-count {
  font-size  : 1.625rem;
  font-weight: 800;
}


/* ══════════════════════════════════════════════════════════
   10. DARK MODE ADJUSTMENTS
   ══════════════════════════════════════════════════════════ */

[data-mode="dark"] .dash-focus-chip.high,
[data-mode="black"] .dash-focus-chip.high {
  background   : rgba(239, 68, 68, 0.14);
  border-color : rgba(239, 68, 68, 0.32);
  color        : #fca5a5;
}
[data-mode="dark"] .dash-focus-chip.high .material-icons-round,
[data-mode="black"] .dash-focus-chip.high .material-icons-round {
  color: #f87171;
}

[data-mode="dark"] .dash-focus-chip.medium,
[data-mode="black"] .dash-focus-chip.medium {
  background   : rgba(245, 158, 11, 0.12);
  border-color : rgba(245, 158, 11, 0.26);
  color        : #fcd34d;
}

[data-mode="dark"] .dash-focus-ok,
[data-mode="black"] .dash-focus-ok {
  background   : rgba(16, 185, 129, 0.12);
  border-color : rgba(16, 185, 129, 0.24);
  color        : #6ee7b7;
}
[data-mode="dark"] .dash-focus-ok .material-icons-round,
[data-mode="black"] .dash-focus-ok .material-icons-round {
  color: #34d399;
}

/* Dark: hero focus ribbon state colors */
[data-mode="dark"] .dashboard-welcome.cmd-has-risk .dash-hero-focus,
[data-mode="black"] .dashboard-welcome.cmd-has-risk .dash-hero-focus,
[data-mode="dark"] .dash-hero-focus:has(.dash-focus-chip.high),
[data-mode="black"] .dash-hero-focus:has(.dash-focus-chip.high) {
  background   : rgba(239, 68, 68, 0.09);
  border-color : rgba(239, 68, 68, 0.20);
}

[data-mode="dark"] .dashboard-welcome.cmd-has-warning .dash-hero-focus,
[data-mode="black"] .dashboard-welcome.cmd-has-warning .dash-hero-focus {
  background   : rgba(245, 158, 11, 0.08);
  border-color : rgba(245, 158, 11, 0.16);
}

[data-mode="dark"] .dashboard-welcome.cmd-all-clear .dash-hero-focus,
[data-mode="black"] .dashboard-welcome.cmd-all-clear .dash-hero-focus,
[data-mode="dark"] .dash-hero-focus:has(.dash-focus-ok),
[data-mode="black"] .dash-hero-focus:has(.dash-focus-ok) {
  background   : rgba(16, 185, 129, 0.07);
  border-color : rgba(16, 185, 129, 0.16);
}

/* Dark: risk item backgrounds */
[data-mode="dark"] .dash-risk-item.dash-risk-high,
[data-mode="black"] .dash-risk-item.dash-risk-high {
  background: rgba(239, 68, 68, 0.09) !important;
}
[data-mode="dark"] .dash-risk-item.dash-risk-medium,
[data-mode="black"] .dash-risk-item.dash-risk-medium {
  background: rgba(245, 158, 11, 0.07) !important;
}

/* Dark: health stats */
[data-mode="dark"] .dash-health-stat,
[data-mode="black"] .dash-health-stat {
  background   : rgba(255, 255, 255, 0.04);
  border-color : rgba(255, 255, 255, 0.06);
}

/* Dark: card header risk accent on dark borders */
[data-mode="dark"] .card:has(.dash-risk-item) .card-header,
[data-mode="black"] .card:has(.dash-risk-item) .card-header {
  border-right-color: color-mix(in srgb, var(--ql-status-danger-dot) 75%, transparent);
}
[data-mode="dark"] .card:has(.dash-urgent-list > div:not(.dash-empty-mini)) .card-header,
[data-mode="black"] .card:has(.dash-urgent-list > div:not(.dash-empty-mini)) .card-header {
  border-right-color: color-mix(in srgb, var(--ql-status-warning-dot) 65%, transparent);
}

/* Dark: exec danger card body tint */
[data-mode="dark"] .exec-kpi-card.exec-kpi-danger .exec-kpi-body,
[data-mode="black"] .exec-kpi-card.exec-kpi-danger .exec-kpi-body {
  background: rgba(239, 68, 68, 0.07);
}

/* Dark: de-emphasis restores fully on mobile (opacity is subtle on dark already) */
[data-mode="dark"] .dashboard-stats,
[data-mode="black"] .dashboard-stats,
[data-mode="dark"] .card:has(.dash-status-donut),
[data-mode="black"] .card:has(.dash-status-donut),
[data-mode="dark"] .dash-activity-section > .card,
[data-mode="black"] .dash-activity-section > .card {
  opacity: 0.94;  /* less aggressive de-emphasis in dark mode */
}


/* ══════════════════════════════════════════════════════════
   11. RESPONSIVE — mobile simplifications
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .dash-hero-focus {
    padding: 10px 16px 12px;
  }

  .dash-focus-chip.high {
    font-size : 0.75rem;
    padding   : 5px 10px 5px 8px;
  }

  /* Mobile: full opacity (screen real estate is scarce) */
  .dashboard-stats,
  .card:has(.dash-status-donut),
  .dash-activity-section > .card,
  [data-mode="dark"] .dashboard-stats,
  [data-mode="black"] .dashboard-stats {
    opacity: 1 !important;
  }

  /* Mobile: health grid as 4-column row */
  .dash-health-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .dash-health-stat {
    padding: 8px 4px;
  }

  .dash-health-stat-value {
    font-size: 1.125rem;
  }

  .dash-health-stat-label {
    font-size: 0.5625rem;
  }
}


/* ══════════════════════════════════════════════════════════
   12. REDUCED MOTION — no animation rules added, nothing
       to suppress here. Transition durations are already
       within the 120–300ms safe range.
   ══════════════════════════════════════════════════════════ */