/*
 * Service / Agency — logo-inspired azure.
 * Explicit component colors only: no filters, asset recoloring or DOM scanning.
 * Retail retains its existing declarations. Keep status names/icons unchanged.
 * Loaded after page CSS, and usable by static renderers without JavaScript.
 */
html[data-mode="service"],
html[data-mode="service"] body:not(.mode-retail),
body[data-business-mode="service"],
body.mode-services,
[data-mode="service"]:not(.mode-retail) {
  --service-blue: #0875B5;
  --service-blue-hover: #075985;
  --service-blue-ink: #064B73;
  --service-blue-light: #E0F2FE;
  --service-blue-border: #BAE0F7;
  --service-blue-soft: rgba(8,117,181,.10);
  --service-blue-ring: rgba(8,117,181,.20);
  --accent-primary: #0875B5;
  --accent-secondary: #075985;
  --accent-glow: #38A4D6;
  --accent-soft: rgba(8,117,181,.10);
  --accent-gradient: linear-gradient(135deg,#0875B5 0%,#075985 100%);
  --accent-gradient-glow: linear-gradient(135deg,#0875B5 0%,#075985 80%,#086DA8 100%);
  --accent-radial: radial-gradient(ellipse at top left,rgba(8,117,181,.15),transparent 70%);
  /* Legacy pages have independent variable vocabularies. */
  --primary: #0875B5 !important;
  --primary-dark: #075985 !important;
  --primary-light: #E0F2FE !important;
  --primary-ink: #FFFFFF !important;
  --warning: #0875B5 !important;
  --warning-light: #E0F2FE !important;
  --warm: #0875B5;
  --orange: #0875B5;
  --accent: #0875B5 !important;
  --accent-hover: #075985 !important;
  --message-user: #E0F2FE !important;
  --ring: rgba(8,117,181,.20) !important;
  --support-accent: #0875B5 !important;
  --ga4: #0875B5;
}

/* These pages use primary-light as a white-text gradient endpoint, not a tint. */
html[data-mode="service"] body.service-mode:has(.goal-card) {
  --primary-light: #075985 !important;
}
html[data-mode="service"] :is(.goal-card,.quarter-label,.plan-cta .icon) {
  background: var(--accent-gradient) !important;
}

/* Background blooms, including legacy body-based light/dark selectors. */
html[data-mode="service"]:not([data-theme="dark"]) body:not(.mode-retail) {
  background: radial-gradient(ellipse at 80% 0%,rgba(8,117,181,.13),transparent 60%),
    radial-gradient(ellipse at 20% 100%,rgba(56,164,214,.09),transparent 50%),#FAFAFA !important;
  background-attachment: fixed !important;
}
html[data-mode="service"][data-theme="dark"] body {
  background: radial-gradient(ellipse at 15% 20%,rgba(8,117,181,.20),transparent 45%),
    radial-gradient(ellipse at 85% 70%,rgba(56,164,214,.12),transparent 45%),#0D0D0F !important;
  background-attachment: fixed !important;
}
html[data-mode="service"] .dashboard-hero-bg {
  background: radial-gradient(ellipse 80% 60% at 10% 0%,rgba(8,117,181,.25),transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 5%,rgba(56,164,214,.17),transparent 70%) !important;
}
[data-mode="service"].app-sidebar .sidebar-link.active {
  background: #E0F2FE;
  border-left-color: #0875B5;
  color: #064B73;
}
html[data-mode="service"][data-theme="dark"] .app-sidebar .sidebar-link.active {
  background: #E0F2FE;
  color: #064B73 !important;
}
html[data-mode="service"][data-theme="dark"] .app-sidebar .sidebar-link.active :is(span,svg) {
  color: #064B73 !important;
}
html[data-mode="service"][data-theme="dark"] :is(.tab.active,.inbox-tab-btn.active,.settings-arrow) {
  color: #7DD3FC !important;
}
html[data-mode="service"] :is(.ocb-send,.ocb-msg.user .ocb-bubble) {
  background: #0875B5 !important;
  color: #FFFFFF !important;
}
html[data-mode="service"] .ocb-send-mini { background: #0875B5 !important; color: #FFFFFF !important; }
html[data-mode="service"] :is(button,a,input,textarea,select):focus-visible {
  outline: 2px solid #0875B5;
  outline-offset: 3px;
}
html[data-mode="service"] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) {
  accent-color: #0875B5;
}

/* Pale status pairs: semantics are still conveyed by existing labels/icons. */
html[data-mode="service"] :is(
  .tag.medium,.tag.effort-medium,.tag.timeframe,.tag.pending,.tag.review,
  .badge.pending,.badge-open,.badge-rising,.status-review,.status-at_risk,
  .status-badge.attention,.status-badge.pending,.status-badge.skipped,.status-badge.unknown,
  .status-badge.medium,.status-pill.needs-decision,.status-in-progress,.priority-medium,
  .initiative-status.in-progress,.initiative-confidence.medium,.risk-medium,.rec-delay,
  .impact-pill.medium,.cohort-cell.medium,.risk-level-badge.medium,.segment-badge.medium,
  .segment-Medium,.priority.medium,.recommendation-badge.refresh,.log-status.skipped,
  .fatigue-badge.medium,.channel-slack,.mode-tag.locked,.mb-badge.important,
  .meta-chip.platform,.meta-chip.diff-medium,.inbox-tab-btn.active .tab-count,
  .integration-beta,.event-source.ga4,.platform-badge.ga4
) {
  background: #E0F2FE !important;
  color: #064B73 !important;
}
html[data-mode="service"] :is(.role-analyst,.role-member,.mode-pill-operator,.demo-badge) {
  background: #E0F2FE !important; color: #064B73 !important;
}
html[data-mode="service"] :is(.key-warning,.no-access,.mode-lock-info) {
  background: #E0F2FE !important; border-color: #BAE0F7 !important; color: #064B73 !important;
}
html[data-mode="service"] .no-access-text { color: #064B73; }
html[data-mode="service"] .log-icon { background: #E0F2FE; }
html[data-mode="service"] .grace-banner {
  background: linear-gradient(135deg,#0875B5,#075985); color: #FFFFFF;
}
html[data-mode="service"] :is(.demo-banner,body.service-mode .demo-banner) {
  background: linear-gradient(135deg,#E0F2FE,#BAE0F7);
  border-color: #0875B5; color: #064B73;
}
html[data-mode="service"] :is(.demo-banner .btn,.demo-banner button,.demo-banner a) {
  color: #064B73;
}
html[data-mode="service"] :is(.option-item:hover,.decision-chip:hover) {
  background: #E0F2FE;
}
html[data-mode="service"] .recommendation-card.medium { border-left-color: #0875B5; }
html[data-mode="service"] .stat-card .value.warning { color: #0875B5; }
html[data-mode="service"] :is(.nav-links a:hover,.nav-links a.active,.tab.active) {
  color: #0875B5 !important; border-color: #0875B5 !important;
}
html[data-mode="service"] .mode-option[data-mode="services"].active {
  background: #E0F2FE !important; border-color: #0875B5 !important;
}
html[data-mode="service"] .btn-primary:hover { background: #075985 !important; }
html[data-mode="service"] :is(.int-btn-primary:hover,.connect-btn:hover,.btn.primary:hover) {
  background: #075985;
}
html[data-mode="service"] .vision-column-content.editable:hover { background: #F0F9FF; }
html[data-mode="service"] .retail-friendly-tooltip {
  background: #E0F2FE !important; border-color: #0875B5 !important; color: #064B73 !important;
}
html[data-mode="service"] :is(
  .warning-banner,.notice,.recommendation-modify,.planner-guide,.timeline-guide,
  .inbox-guide,.low-confidence-guidance
) {
  background: #E0F2FE !important;
  border-color: #BAE0F7 !important;
  color: #064B73 !important;
}
html[data-mode="service"] .inbox-guide {
  box-shadow: 0 4px 16px rgba(8,117,181,.20);
}
html[data-mode="service"] :is(
  .warning-banner svg,.confidence-level.medium,.churn-prob.medium,
  .guide-icon,.guide-content,.guide-content strong,.timeline-guide-icon,
  .timeline-guide-content,.timeline-guide-content strong,.inbox-guide-icon,
  .inbox-guide-text,.inbox-guide-text strong,.mb-watch .ttl svg,
  .status-badge.attention,.client-item .status-badge.attention
) { color: #064B73 !important; }
html[data-mode="service"] :is(
  .confidence-dot.medium,.dot-low,.fatigue-fill.medium,.limit-fill.medium,
  .guide-dismiss,.timeline-guide-dismiss,.inbox-guide-dismiss,.btn-amber,
  .post-eyebrow,.lib-filter.active,.mode-badge,.logo-dot
) { background: #0875B5 !important; }
html[data-mode="service"] :is(
  .guide-dismiss,.timeline-guide-dismiss,.inbox-guide-dismiss,.btn-amber,.lib-filter.active
) { color: #FFFFFF !important; border-color: #0875B5 !important; }
html[data-mode="service"] :is(
  .guide-dismiss,.timeline-guide-dismiss,.inbox-guide-dismiss,.btn-amber
):hover { background: #075985 !important; }
html[data-mode="service"] .priority-rank {
  background: #0875B5;
  box-shadow: 0 2px 8px rgba(8,117,181,.25);
}
html[data-mode="service"] :is(.activity-type.system,.planned-mode.reminder) {
  background: #E0F2FE; color: #064B73;
}
html[data-mode="service"] .settings-icon.workspace {
  background: linear-gradient(135deg,#E0F2FE,#BAE0F7); color: #064B73;
}
html[data-mode="service"] :is(.client-card,.client-item):hover {
  box-shadow: 0 4px 12px rgba(8,117,181,.15);
}

/* Inbox: pale bubbles retain dark ink; saturated controls use white ink. */
html[data-mode="service"] :is(.inbox-tab-btn.active,.lib-btn-outline:hover) {
  color: #0875B5 !important; border-color: #0875B5 !important;
}
html[data-mode="service"] .lib-type-badge.script {
  background: #E0F2FE; color: #064B73;
}
html[data-mode="service"] .lib-empty-icon {
  background: #E0F2FE; color: #0875B5;
}
html[data-mode="service"] body.inbox-dark .lib-filter.active {
  background: #0875B5; border-color: #0875B5; color: #FFFFFF;
}
html[data-mode="service"] :is(.inbox-toast a,.trends-toast a) { color: #7DD3FC !important; }

/* Trends has page-local rules after the shared head. */
html[data-mode="service"] :is(.briefing-card,.briefing) {
  background: linear-gradient(135deg,#0875B5,#075985) !important;
  box-shadow: 0 10px 30px rgba(8,117,181,.18);
}
html[data-mode="service"] :is(.btn-outline:hover,.section-flame,.section-heading .icon,
  .benchmark h2 .icon,.trend-card-icon,.trends-loading-note .pulse-dot) {
  color: #0875B5;
  border-color: #0875B5;
}
html[data-mode="service"] .trend-card-icon { background: #E0F2FE; }
html[data-mode="service"] :is(.trend-card:hover,.idea-card:hover,.btn-amber:hover) {
  box-shadow: 0 8px 24px rgba(8,117,181,.12);
}
html[data-mode="service"] .btn-amber { box-shadow: 0 1px 2px rgba(8,117,181,.25); }
html[data-mode="service"] .btn-on-amber { color: #064B73; }
html[data-mode="service"] .post-today-card {
  background: rgba(8,117,181,.06) !important;
  border-left-color: #0875B5;
  box-shadow: 0 4px 14px rgba(8,117,181,.06);
}
html[data-mode="service"] :is(.post-hook,.script-block.hook-block) { border-left-color: #0875B5; }
html[data-mode="service"] :is(.post-hook-label,.script-label) { color: #064B73; }
html[data-mode="service"] .script-loading .loader-ring {
  border-color: rgba(8,117,181,.18); border-top-color: #0875B5;
}
html[data-mode="service"] .trends-loading-note .pulse-dot {
  background: #0875B5; box-shadow: 0 0 0 0 rgba(8,117,181,.5);
}

/* Shared notices generated by frontend helpers. */
html[data-mode="service"] :is(.demo-toast,.upgrade-modal-icon,.ai-coach-card) {
  background: linear-gradient(135deg,#E0F2FE,#BAE0F7);
  border-color: #0875B5;
  color: #064B73;
  box-shadow: 0 10px 40px rgba(8,117,181,.16);
}
html[data-mode="service"] :is(.demo-toast-title,.demo-toast-message,.demo-toast-close,
  .ai-coach-label,.ai-coach-message,.ai-coach-dismiss) {
  color: #064B73;
}

/* Service option identity remains azure even while viewing Retail settings. */
.mode-card[data-mode="services"] .mode-color,
.mode-option[data-mode="services"] .mode-color { background: #0875B5 !important; }
.mode-card[data-mode="services"].selected,
body.mode-services .mode-card.selected,
body.mode-services .checkbox-pill.selected {
  background: #E0F2FE !important; border-color: #0875B5 !important;
}
body.mode-services { --primary: #0875B5 !important; --ring: rgba(8,117,181,.20) !important; }
body.mode-services .checkbox-pill.selected { color: #064B73 !important; }
body.mode-services .diag-dot {
  background: #0875B5;
  box-shadow: 0 0 0 4px rgba(8,117,181,.12);
}
.mode-option[data-mode="services"] input { accent-color: #0875B5 !important; }
.mode-option[data-mode="services"] .mode-active-badge { background: #0875B5 !important; color: #FFFFFF !important; }
.mode-option[data-mode="retail"] input { accent-color: #A855F7 !important; }
.mode-card[data-mode="services"].selected .mode-check { background: #0875B5; color: #FFFFFF; }

/* Legacy shared dashboard; none of these rules apply in Retail mode. */
html[data-mode="service"] :is(
  .ai-coach-welcome,.ai-coach-tip,.retail-hub-icon,.retail-quick-action,.brief-risky,
  .brief-action-btn.action,.brief-response-btn.monitor,.vision-board,.ws-icon.demo,
  .ws-icon-inline.demo,.role-badge.read_only,.forecast-card-icon.churn,
  .conf-badge.medium,.predictive-card-icon.cac,.predictive-alert,
  .predictive-alert.warning,.setup-checklist-check.pending,.goal-card-status.at_risk,
  .retail-modal-hint
) {
  background: #E0F2FE !important;
  border-color: #BAE0F7 !important;
  color: #064B73 !important;
}
html[data-mode="service"] :is(
  .ai-coach-avatar,.ai-coach-label,.ai-coach-message,.ai-coach-tip strong,
  .ai-coach-dismiss,.retail-quick-action-icon,.retail-quick-action-hint,
  .brief-risky .brief-section-title,.brief-risky .brief-section-content,
  .vision-board-title,.vision-board-edit,.vision-column-content.placeholder,
  .vision-column.right-now .vision-column-label,.vision-column.right-now .vision-column-content,
  .vision-form-field label,.vision-form-hint
) { color: #064B73 !important; }
html[data-mode="service"] :is(
  .ai-coach-action,.brief-risky .brief-section-icon,.vision-board-title::before,
  .goals-preview-item-status.at_risk,.retail-nav-item.active
) { background: #0875B5 !important; color: #FFFFFF !important; border-color: #0875B5 !important; }
html[data-mode="service"] .ai-coach-action:hover { background: #075985 !important; }
html[data-mode="service"] :is(
  .retail-nav,.retail-nav-item:hover,.brief-insight-item,.vision-board-edit,
  .vision-column,.vision-form-field,.vision-form-field textarea
) { border-color: #BAE0F7; }
html[data-mode="service"] :is(
  .retail-nav,.retail-nav-item:hover,.vision-form-field textarea,.vision-board-edit:hover
) { background: #F0F9FF; }
html[data-mode="service"] :is(
  .retail-quick-action:hover,.vision-board-edit,.vision-board-edit:hover,.vision-column:hover,
  .vision-column.right-now
) { box-shadow: 0 4px 16px rgba(8,117,181,.15); border-color: #0875B5; }
html[data-mode="service"] :is(.vision-form-field.hero,.vision-column.right-now) { border-color: #0875B5; }
html[data-mode="service"] :is(.brief-action-btn.action:hover,.brief-response-btn.monitor:hover) { background: #BAE0F7; }
html[data-mode="service"] :is(
  .vision-form-field textarea:focus,.retail-modal-input:focus,.retail-modal-select:focus,
  .retail-modal-textarea:focus
) { border-color: #0875B5; box-shadow: 0 0 0 3px rgba(8,117,181,.15); }