/* ============================================================================
   CLARIFY DASHBOARD STYLE  —  reference-faithful, soft / rounded / green-forward
   Style LAYER. Composes on top of drillable-dashboard structure.
   Namespace: every class is prefixed `clf-` so it never collides with
   drillable-dashboard (.kpi/.tabs/.rail/etc.) or sga-brand classes.
   Light/white only. Single source of truth — do not fork per dashboard.
   ============================================================================ */

:root {
  /* --- surfaces --- */
  --clf-page-bg:        #f0f1f3;   /* soft gray page, never pure white */
  --clf-card:           #ffffff;
  --clf-card-2:         #f8f9fb;   /* nested / inset panel */
  --clf-border:         #eef0f3;   /* hairline */
  --clf-border-2:       #e3e6ea;   /* slightly stronger divider */

  /* --- text --- */
  --clf-text:           #1a1d21;   /* near-black, not pure */
  --clf-muted:          #6b7280;
  --clf-faint:          #9ca3af;

  /* --- primary accent (green-forward, reference-faithful) --- */
  --clf-primary:        #16a34a;
  --clf-primary-600:    #15803d;
  --clf-primary-soft:   #dcfce7;

  /* --- chart accents --- */
  --clf-chart:          #8b5cf6;   /* violet line */
  --clf-chart-soft:     rgba(139,92,246,.14);
  --clf-chart-2:        #6366f1;   /* indigo */
  --clf-compare:        #cbd5e1;   /* gray comparison line */

  /* --- status semantics (universal: good / watch / critical) --- */
  --clf-good:           #16a34a;
  --clf-good-bg:        #dcfce7;
  --clf-watch:          #f59e0b;
  --clf-watch-bg:       #fef3c7;
  --clf-critical:       #ef4444;
  --clf-critical-bg:    #fee2e2;
  --clf-info:           #3b82f6;
  --clf-info-bg:        #dbeafe;

  /* --- shape & depth (the "soft" signature) --- */
  --clf-radius:         18px;      /* card radius */
  --clf-radius-sm:      12px;      /* inner elements */
  --clf-radius-pill:    999px;
  --clf-pad:            22px;
  --clf-gap:            16px;
  --clf-shadow:         0 1px 3px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.18);
  --clf-shadow-hover:   0 2px 6px rgba(16,24,40,.06), 0 18px 40px -16px rgba(16,24,40,.24);

  /* --- type --- */
  --clf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --clf-num:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
.clf-root {
  background: var(--clf-page-bg);
  color: var(--clf-text);
  font-family: var(--clf-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.clf-root *, .clf-root *::before, .clf-root *::after { box-sizing: border-box; }
.clf-num { font-family: var(--clf-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- card ---- */
.clf-card {
  background: var(--clf-card);
  border: 1px solid var(--clf-border);
  border-radius: var(--clf-radius);
  padding: var(--clf-pad);
  box-shadow: var(--clf-shadow);
}
.clf-card--flat { box-shadow: none; }
.clf-card--inset { background: var(--clf-card-2); box-shadow: none; }
.clf-card-title {
  font-size: 15px; font-weight: 600; color: var(--clf-text); margin: 0 0 14px;
}
.clf-card-sub { font-size: 13px; color: var(--clf-muted); margin: 2px 0 0; }

/* generic responsive grid helper */
.clf-grid { display: grid; gap: var(--clf-gap); }
.clf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.clf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.clf-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .clf-grid--4 { grid-template-columns: repeat(2,1fr); } .clf-grid--3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px)  { .clf-grid--2, .clf-grid--3, .clf-grid--4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ status pill -- */
.clf-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 11px; border-radius: var(--clf-radius-pill);
  background: var(--clf-card-2); color: var(--clf-muted); white-space: nowrap;
}
.clf-pill--good     { background: var(--clf-good-bg);     color: var(--clf-good); }
.clf-pill--watch    { background: var(--clf-watch-bg);    color: #b45309; }
.clf-pill--critical { background: var(--clf-critical-bg); color: var(--clf-critical); }
.clf-pill--info     { background: var(--clf-info-bg);     color: #1d4ed8; }
.clf-pill .clf-dot  { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------ delta chip --- */
/* footer chip on KPI cards: green +515 / red -$40 */
.clf-delta {
  display: block; text-align: center; width: 100%;
  font-family: var(--clf-num); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700;
  padding: 11px; border-radius: var(--clf-radius-sm); margin-top: 14px;
}
.clf-delta--pos { background: var(--clf-good-bg);     color: var(--clf-good); }
.clf-delta--neg { background: var(--clf-critical-bg); color: var(--clf-critical); }
.clf-delta--flat{ background: var(--clf-card-2);      color: var(--clf-muted); }

/* YoY inline arrow */
.clf-yoy { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.clf-yoy--up   { color: var(--clf-good); }
.clf-yoy--down { color: var(--clf-critical); }

/* ------------------------------------------------------------ KPI w/ target */
.clf-kpi {
  background: var(--clf-card); border: 1px solid var(--clf-border);
  border-radius: var(--clf-radius); padding: 20px var(--clf-pad);
  box-shadow: var(--clf-shadow); display: flex; flex-direction: column;
}
.clf-kpi-head { display: flex; align-items: center; justify-content: center; min-height: 22px; }
.clf-kpi-label { font-size: 14px; font-weight: 600; color: var(--clf-text); text-align: center; }
.clf-kpi-value {
  font-family: var(--clf-num); font-variant-numeric: tabular-nums;
  font-size: 38px; font-weight: 700; line-height: 1.05; text-align: center;
  letter-spacing: -.02em; margin: 8px 0 6px;
}
.clf-kpi-status { text-align: center; margin-bottom: 12px; }
.clf-kpi-status .clf-statustext { font-size: 13px; font-weight: 600; }
.clf-kpi-status .clf-statustext--good     { color: var(--clf-good); }
.clf-kpi-status .clf-statustext--watch    { color: #b45309; }
.clf-kpi-status .clf-statustext--critical { color: var(--clf-critical); }
.clf-kpi-target {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--clf-muted); padding-bottom: 14px;
  border-bottom: 1px solid var(--clf-border);
}
.clf-kpi-target svg { width: 13px; height: 13px; opacity: .7; }
.clf-kpi-rows { padding-top: 12px; }
.clf-kpi-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--clf-muted); padding: 3px 0;
}
.clf-kpi-row .clf-rowval { font-family: var(--clf-num); font-variant-numeric: tabular-nums; color: var(--clf-text); font-weight: 600; }

/* ---------------------------------------------------------- segmented btn -- */
.clf-segment {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--clf-card-2); border: 1px solid var(--clf-border-2);
  border-radius: var(--clf-radius-sm);
}
.clf-segment button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--clf-font); font-size: 13px; font-weight: 600; color: var(--clf-muted);
  padding: 7px 18px; border-radius: 9px; transition: background .15s, color .15s, box-shadow .15s;
}
.clf-segment button.is-active { background: var(--clf-card); color: var(--clf-text); box-shadow: 0 1px 2px rgba(16,24,40,.08); }

/* --------------------------------------------------------- progress (2-seg) */
/* purple fill + lighter "remaining" segment, like Total Production bar */
.clf-progress {
  position: relative; height: 14px; border-radius: var(--clf-radius-pill);
  background: var(--clf-watch-bg); overflow: hidden;
}
.clf-progress__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--clf-value, 0%);
  background: linear-gradient(90deg, var(--clf-chart-2), var(--clf-chart));
  border-radius: var(--clf-radius-pill);
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.clf-progress--good .clf-progress__fill { background: linear-gradient(90deg, var(--clf-primary-600), var(--clf-primary)); }
.clf-progress-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--clf-muted); }

/* ----------------------------------------------------- ranking bar (R→G) --- */
/* segmented red→amber→yellow→green track with a position marker + "6/11" */
.clf-rank { display: flex; align-items: center; gap: 12px; }
.clf-rank__track {
  position: relative; flex: 1; height: 10px; border-radius: var(--clf-radius-pill);
  background: linear-gradient(90deg,
    #ef4444 0%, #ef4444 22%,
    #f59e0b 22%, #f59e0b 48%,
    #facc15 48%, #facc15 72%,
    #16a34a 72%, #16a34a 100%);
}
.clf-rank__marker {
  position: absolute; top: 50%; left: var(--clf-pos, 50%);
  width: 4px; height: 18px; background: var(--clf-text);
  border-radius: 2px; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--clf-card);
}
.clf-rank__label { font-family: var(--clf-num); font-size: 13px; font-weight: 700; color: var(--clf-text); white-space: nowrap; }

/* ----------------------------------------------------------- mini-stat card */
/* e.g. Fluoride 57% ▲21.5% + ranking */
.clf-stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.clf-stat-name { font-size: 16px; font-weight: 600; }
.clf-stat-pct  { font-family: var(--clf-num); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.clf-stat-sub  { font-size: 12px; color: var(--clf-muted); margin: 4px 0 16px; }

/* ----------------------------------------------------------- gauge holder -- */
/* canvas gauge rendered by clarify-charts.js clarifyGauge(); center label here */
.clf-gauge { position: relative; width: 150px; height: 150px; }
.clf-gauge canvas { width: 100%; height: 100%; }
.clf-gauge__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.clf-gauge__pct  { font-family: var(--clf-num); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.clf-gauge__word { font-size: 13px; color: var(--clf-muted); margin-top: 3px; }
/* gauge legend strip: Strong 24 / Watch 6 / Critical 2 */
.clf-gauge-legend { display: flex; gap: 22px; align-items: center; }
.clf-gauge-legend__item { display: flex; flex-direction: column; gap: 6px; min-width: 88px; }
.clf-gauge-legend__bar { height: 6px; border-radius: 3px; }
.clf-gauge-legend__txt { font-size: 12px; color: var(--clf-muted); }
.clf-gauge-legend__txt b { color: var(--clf-text); font-family: var(--clf-num); }

/* ----------------------------------------------------------------- avatar -- */
.clf-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--clf-card-2); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--clf-muted);
}

/* ----------------------------------------------------- chart card wrapper -- */
/* fixed-height parent so Chart.js maintainAspectRatio:false canvases behave
   (see feedback_chartjs_canvas_wrapper) */
.clf-chart-wrap { position: relative; height: 300px; }
.clf-chart-wrap--sm { height: 220px; }
.clf-chart-wrap--lg { height: 420px; }

/* --------------------------------------------------------- schedule grid --- */
.clf-schedule {
  border: 1px solid var(--clf-border); border-radius: var(--clf-radius);
  overflow: hidden; background: var(--clf-card); box-shadow: var(--clf-shadow);
}
.clf-sched-head { display: grid; border-bottom: 1px solid var(--clf-border); }
.clf-sched-provider {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 8px; border-left: 1px solid var(--clf-border); text-align: center;
}
.clf-sched-provider:first-child { border-left: 0; }
.clf-sched-provider__name { font-size: 13px; font-weight: 600; }
.clf-sched-provider__role { font-size: 11px; color: var(--clf-faint); }
.clf-sched-row { display: grid; border-bottom: 1px solid var(--clf-border); }
.clf-sched-row:last-child { border-bottom: 0; }
.clf-sched-time {
  font-size: 12px; color: var(--clf-faint); padding: 14px 12px;
  display: flex; align-items: flex-start;
}
.clf-sched-cell { border-left: 1px solid var(--clf-border); padding: 8px; min-height: 64px; }
.clf-appt {
  border-radius: 10px; padding: 9px 11px; font-size: 12px; height: 100%;
  border: 1.5px solid transparent;
}
.clf-appt__name { font-weight: 600; color: var(--clf-text); }
.clf-appt__status { font-size: 11px; margin-top: 2px; }
.clf-appt--confirmed   { background: #f0fdf4; border-color: #bbf7d0; }
.clf-appt--confirmed   .clf-appt__status { color: var(--clf-good); }
.clf-appt--canceled    { background: var(--clf-critical-bg); border-color: #fecaca; }
.clf-appt--canceled    .clf-appt__status { color: var(--clf-critical); }
.clf-appt--unavailable {
  background: var(--clf-card-2); color: var(--clf-faint);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.clf-appt--add {
  border: 1.5px dashed var(--clf-border-2); color: var(--clf-info);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; font-size: 11px; background: transparent;
}
.clf-appt--add:hover { background: var(--clf-info-bg); }

/* --------------------------------------------------------- opportunity tile */
/* small icon tile: "X-Ray Due / 57 patients / Potential $8,500" */
.clf-opp { display: flex; gap: 14px; align-items: flex-start; }
.clf-opp__icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--clf-info-bg); color: #1d4ed8;
}
.clf-opp__title { font-size: 13px; color: var(--clf-muted); }
.clf-opp__big   { font-family: var(--clf-num); font-size: 22px; font-weight: 700; margin: 2px 0; }
.clf-opp__sub   { font-size: 12px; color: var(--clf-faint); }

/* --------------------------------------------------------- entrance anim --- */
@media (prefers-reduced-motion: no-preference) {
  .clf-fade-up { opacity: 0; transform: translateY(8px); animation: clfUp .5s ease-out forwards; }
  .clf-fade-up:nth-child(2){ animation-delay:.06s } .clf-fade-up:nth-child(3){ animation-delay:.12s }
  .clf-fade-up:nth-child(4){ animation-delay:.18s } .clf-fade-up:nth-child(5){ animation-delay:.24s }
  @keyframes clfUp { to { opacity: 1; transform: none; } }
}