/* FLO demo canon — the ONE place every demo takes a meaning's colour from.
   Every value here is read from the real app or Abigail Brand Services' real
   settings (production, read-only, 22 Oct 2026). A demo never types these hex
   values itself; it uses the variables and classes below. The upload check
   (tools/check-demos.py) refuses a demo that does. */
:root {
  /* Appointment status (AppointmentStatusConfig, Abigail) */
  --st-scheduled: #22C55E; --st-pending: #66b3ff; --st-inprogress: #8B5CF6;
  --st-completed: #b1dd8c; --st-late: #e32400; --st-cancelled: #475569;
  --st-assigned: #60A5FA; --st-enroute: #6366F1; --st-paused: #F59E0B;
  --st-reschedule: #e942a5; --st-unscheduled: #f97316; --st-unassigned: #e11d48;
  --st-lockout: #df1679; --st-noshow: #9f1239; --st-failedqa: #cf0000;
  --st-tentative: #F59E0B; --st-brief: #10b981;
  /* Dirt / clutter levels (WorkOrderAssessment: 1-4 success-light, 5-6 warning-light, 7-8 warning, 9-10 danger-light) */
  --lv1-bg: #f0fdf4; --lv1-line: #16a34a; --lv1-ink: #15803d;
  --lv2-bg: #fffbeb; --lv2-line: #d97706; --lv2-ink: #b45309;
  --lv3-bg: #d97706; --lv3-line: #b45309; --lv3-ink: #ffffff;
  --lv4-bg: #fef2f2; --lv4-line: #dc2626; --lv4-ink: #dc2626;
  /* Empowered Pay levels */
  --pay1: #f59e0b; --pay2: #f97316; --pay3: #ef4444;
  /* Team (department) colours — app defaults, Abigail has no override */
  --team-hr: #f43f5e; --team-sales: #3b82f6;
  /* team defaults (app/lib/definitions/teams.ts TEAM_COLORS → team-color-hex.ts) */
  --team-scheduling: #10b981; --team-finance: #f59e0b;
  /* (named dept- so the upload check does not treat the slate grey every demo uses for text as owned) */
  --dept-operations: #64748b; --dept-support: #8b5cf6; --dept-marketing: #06b6d4; --dept-management: #6366f1;
  /* the website's Avada pink (awb-color4) — used where a section has no team */
  --brand-pink: #ee488a; --brand-pink-hover: #be3a6e; /* Avada primary button: button_gradient_top_color(_hover) */
}

/* Appointment status badge — StatusBadge: solid fill, white lettering (inkFor
   gives white for every Abigail status fill), 4px corners, faint border. */
.fs { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 4px; padding: 2px 7px; min-height: 20px;
      font-size: 11px; font-weight: 700; line-height: 1; color: #fff; border: 1px solid rgba(0,0,0,.08); background: var(--c, #94A3B8);
      transition: background .45s ease; }
.fs.scheduled { --c: var(--st-scheduled); } .fs.pending { --c: var(--st-pending); } .fs.inprogress { --c: var(--st-inprogress); }
.fs.completed { --c: var(--st-completed); } .fs.late { --c: var(--st-late); } .fs.cancelled, .fs.skipped { --c: var(--st-cancelled); }
.fs.assigned { --c: var(--st-assigned); } .fs.enroute { --c: var(--st-enroute); } .fs.paused { --c: var(--st-paused); }
.fs.reschedule { --c: var(--st-reschedule); } .fs.unscheduled { --c: var(--st-unscheduled); } .fs.unassigned { --c: var(--st-unassigned); }
.fs.lockout { --c: var(--st-lockout); } .fs.noshow { --c: var(--st-noshow); } .fs.failedqa { --c: var(--st-failedqa); }
.fs.tentative { --c: var(--st-tentative); } .fs.brief { --c: var(--st-brief); }

/* A visit / plan block on a calendar: pale tint of its status, a stripe and the
   name. Set the status with the same words: .fv.pending, .fv.scheduled ... */
.fv { --c: var(--st-pending); position: relative; border-radius: 5px; overflow: hidden;
      background: color-mix(in srgb, var(--c) 16%, #fff); padding: 3px 6px 3px 9px; }
.fv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.fv.scheduled { --c: var(--st-scheduled); } .fv.pending { --c: var(--st-pending); } .fv.inprogress { --c: var(--st-inprogress); }
.fv.completed { --c: var(--st-completed); } .fv.cancelled { --c: var(--st-cancelled); } .fv.reschedule { --c: var(--st-reschedule); }
.fv.unscheduled { --c: var(--st-unscheduled); } .fv.assigned { --c: var(--st-assigned); } .fv.late { --c: var(--st-late); }

/* Dirt / clutter level box: add .lv1..lv4 to the chosen box. */
.lv1 { background: var(--lv1-bg); border-color: var(--lv1-line); color: var(--lv1-ink); }
.lv2 { background: var(--lv2-bg); border-color: var(--lv2-line); color: var(--lv2-ink); }
.lv3 { background: var(--lv3-bg); border-color: var(--lv3-line); color: var(--lv3-ink); }
.lv4 { background: var(--lv4-bg); border-color: var(--lv4-line); color: var(--lv4-ink); }

/* Work-order status (RecordStatusBadge — light tints, not appointment colours) */
.fw { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 700; border: 1px solid; }
.fw.notstarted, .fw.closed, .fw.cancelled { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.fw.scheduled { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.fw.inprogress, .fw.onhold { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.fw.completed { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

/* Lead sources (LeadSource, Abigail) */
:root {
  --src-website: #3b82f6; --src-googleads: #10b981; --src-referral: #8b5cf6; --src-facebook: #3b82f6;
  --src-yelp: #f59e0b; --src-instagram: #e11d48; --src-linkedin: #0ea5e9; --src-other: #96d35f;
  --src-email: #e392fe; --src-church: #ffa57d; --src-walkin: #b18cfe;
  /* Lead pipeline stages (PipelineStageConfig, Abigail) */
  --lead-new: #96d35f; --lead-contacted: #3b82f6; --lead-qualified: #0ea5e9; --lead-quoted: #f59e0b;
  --lead-won: #10b981; --lead-lost: #ef4444;
  /* Open to Close stages (PipelineStageConfig O2C_*, Abigail) */
  --o2c-open: #84cc16; --o2c-contacting: #c4b5fd; --o2c-feedback: #f59e0b; --o2c-upsell: #ee488a;
  --o2c-won: #22c55e; --o2c-lost: #ef4444; --o2c-noresponse: #94a3b8; --o2c-closed: #cbd5e1;
}

/* Backlog chips (status-dictionary chip configs) */
:root { --chip-callout: #F59E0B; /* CALL_OUT_SICK "Call Out" — bg-amber-500 */ }
.fs.callout { --c: var(--chip-callout); }