/* ============================================================================
   RadiCare UI — design tokens + base components
   Extracted and normalised from the BIA reporting tool (static/bia/index.html),
   the reference look for RadiCare dashboards.

   Usage: paste into a page <style>, or <link> it. Pair with the Inter font:
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   All classes are prefixed `rc-` so they never clash with a page's existing CSS.
   ============================================================================ */

:root {
  /* ── Accent: forest green (use SPARINGLY — one accent, mostly neutrals) ── */
  --rc-accent:        #166534;
  --rc-accent-dark:   #14532d;   /* hover / gradient end */
  --rc-accent-bright: #16a34a;
  --rc-accent-tint:   #f0fdf4;   /* pale green surface for active/selected */
  --rc-accent-tint-2: #dcfce7;
  --rc-accent-border: #bbf7d0;
  --rc-ring:          rgba(22,101,52,0.10);   /* focus ring */
  --rc-accent-shadow: rgba(22,101,52,0.25);
  --rc-live:          #22c55e;                /* pulsing "live" dot */

  /* ── Ink (text) ── */
  --rc-ink:    #0f172a;   /* headings / strong values */
  --rc-body:   #475569;   /* body copy */
  --rc-muted:  #64748b;   /* form labels */
  --rc-faint:  #94a3b8;   /* placeholders, sub-text, micro-labels */

  /* ── Lines & surfaces ── */
  --rc-border:     #e2e8f0;   /* default border */
  --rc-border-hov: #cbd5e1;   /* hover border */
  --rc-divider:    #f1f5f9;   /* faint internal divider */
  --rc-surface:    #ffffff;   /* card background */
  --rc-inset:      #f8fafc;   /* input / inset background */
  --rc-page:       #f4f6fb;   /* page background */

  /* ── Status ── */
  --rc-success: #166534; --rc-success-bg: #f0fdf4; --rc-success-bd: #bbf7d0;
  --rc-error:   #b91c1c; --rc-error-bg:   #fef2f2; --rc-error-bd:   #fecaca;
  --rc-info:    #475569; --rc-info-bg:    #f8fafc; --rc-info-bd:    #e2e8f0;

  /* ── Radius ── */
  --rc-r-card:  20px;
  --rc-r-panel: 14px;
  --rc-r-input: 10px;
  --rc-r-tile:  12px;
  --rc-r-pill:  999px;

  /* ── Shadow (soft, layered) ── */
  --rc-shadow:        0 1px 3px rgba(0,0,0,0.04);
  --rc-shadow-md:     0 4px 20px rgba(0,0,0,0.08);
  --rc-shadow-accent: 0 8px 32px rgba(22,101,52,0.28);

  --rc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Page background: faint diagonal hatch (green glows removed) ──────────── */
.rc-bg {
  background-color: var(--rc-page);
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 22px,
        rgba(15,23,42,0.06) 22px, rgba(15,23,42,0.06) 23px);
  color: var(--rc-ink);
  font-family: var(--rc-font);
  -webkit-font-smoothing: antialiased;
}

/* ── Sticky translucent header ────────────────────────────────────────────── */
.rc-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rc-border);
  height: 60px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.rc-card {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-r-card);
  box-shadow: var(--rc-shadow);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.rc-card--hover:hover {
  border-color: var(--rc-border-hov);
  box-shadow: var(--rc-shadow-md);
  transform: translateY(-2px);
}

/* ── Micro-label (the signature uppercase eyebrow) ────────────────────────── */
.rc-eyebrow {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--rc-faint);
}

/* ── Icon tile (rounded square, pale-green, green stroke icon inside) ─────── */
.rc-icon-tile {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--rc-accent-tint);
  border-radius: var(--rc-r-tile);
  display: flex; align-items: center; justify-content: center;
}
.rc-icon-tile svg { width: 22px; height: 22px; stroke: var(--rc-accent); stroke-width: 1.75; }

/* ── Featured stat (green gradient hero number) ───────────────────────────── */
.rc-stat-featured {
  background: linear-gradient(145deg, var(--rc-accent) 0%, var(--rc-accent-dark) 100%);
  border-radius: var(--rc-r-card);
  padding: 32px 28px; color: #fff;
  box-shadow: var(--rc-shadow-accent);
  position: relative; overflow: hidden;
}
.rc-stat-featured .rc-eyebrow { color: rgba(255,255,255,0.55); }
.rc-stat-featured .rc-stat-value { font-size: 4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rc-btn {
  padding: 12px 24px; font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--rc-r-input); border: 1px solid transparent;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease;
}
.rc-btn svg { width: 16px; height: 16px; }
.rc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.rc-btn--primary {
  background: var(--rc-accent); color: #fff; border-color: var(--rc-accent);
  box-shadow: 0 1px 3px var(--rc-accent-shadow);
}
.rc-btn--primary:hover {
  background: var(--rc-accent-dark); border-color: var(--rc-accent-dark);
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(22,101,52,0.35);
}
.rc-btn--primary:active { transform: translateY(0); box-shadow: none; }

.rc-btn--secondary {
  background: #fff; color: var(--rc-body); border-color: var(--rc-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rc-btn--secondary:hover {
  border-color: var(--rc-accent); color: var(--rc-accent); background: var(--rc-accent-tint);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,101,52,0.10);
}

/* Cautionary / destructive action — muted, never a saturated red fill. */
.rc-btn--danger { background: #fff; color: var(--rc-error); border-color: var(--rc-error-bd); }
.rc-btn--danger:hover { background: var(--rc-error-bg); border-color: #ef4444; transform: translateY(-1px); }

/* ── Inputs & selects (inset → white + green ring on focus) ───────────────── */
.rc-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--rc-muted); margin-bottom: 8px; }
.rc-input, .rc-select {
  width: 100%; padding: 13px 16px; font-size: 0.9375rem; font-family: inherit;
  color: var(--rc-ink); background: var(--rc-inset);
  border: 1px solid var(--rc-border); border-radius: var(--rc-r-input);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.rc-input:hover, .rc-select:hover { border-color: var(--rc-border-hov); background: var(--rc-divider); }
.rc-input:focus, .rc-select:focus {
  outline: none; border-color: var(--rc-accent); background: #fff;
  box-shadow: 0 0 0 3px var(--rc-ring);
}
.rc-input::placeholder { color: var(--rc-faint); }
.rc-hint { font-size: 0.75rem; color: var(--rc-faint); margin-top: 6px; }
.rc-select {
  appearance: none; cursor: pointer; background-repeat: no-repeat; background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Pill badge ───────────────────────────────────────────────────────────── */
.rc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--rc-r-pill);
  font-size: 0.8125rem; font-weight: 600;
  background: var(--rc-accent-tint); color: var(--rc-accent); border: 1px solid var(--rc-accent-border);
}
.rc-badge .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rc-live); }
.rc-badge--live .rc-dot { animation: rc-pulse 2s infinite; }
@keyframes rc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Quiet status indicator (dot + label) ─────────────────────────────────── */
.rc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--rc-body); white-space: nowrap; }
.rc-status .rc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ── Status PILL (preferred for table status) — label-bearing, light tint ──── */
/* Evidence-based (NN/g, IBM Carbon, GOV.UK, Atlassian, Polaris): a status
   always carries a TEXT LABEL (colour is never the only signal), uses a light
   background + dark text so it never reads as a button (GOV.UK), and a fresh
   "open/new" item is NEUTRAL/BLUE — amber means in-progress / attention, never
   "new". Pair with the status palette in SKILL.md. */
.rc-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }

/* ── Inline status message ────────────────────────────────────────────────── */
.rc-msg { padding: 12px 16px; border-radius: var(--rc-r-input); font-size: 0.8125rem; border: 1px solid transparent; }
.rc-msg--info    { background: var(--rc-info-bg);    color: var(--rc-info);    border-color: var(--rc-info-bd); }
.rc-msg--success { background: var(--rc-success-bg); color: var(--rc-success); border-color: var(--rc-success-bd); }
.rc-msg--error   { background: var(--rc-error-bg);   color: var(--rc-error);   border-color: var(--rc-error-bd); }

/* ── "Selected / active" language: green tint + green left-border + green text ─ */
.rc-selectable { border-left: 2px solid transparent; transition: all 0.15s ease; }
.rc-selectable.is-selected { background: var(--rc-accent-tint); color: var(--rc-accent); border-left-color: var(--rc-accent); font-weight: 500; }

/* ── Compact + form helpers (filter bars, table actions) ──────────────────── */
.rc-btn--sm { padding: 7px 14px; font-size: 0.8125rem; border-radius: 8px; }
.rc-input--sm, .rc-select--sm { padding: 9px 12px; font-size: 0.875rem; }
.rc-field { display: flex; flex-direction: column; }
.rc-field-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rc-faint); margin-bottom: 6px;
}
.rc-filterbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--rc-inset); border: 1px solid var(--rc-border);
  border-radius: var(--rc-r-panel); padding: 14px 16px;
}
/* Quiet text action for table rows (e.g. "View") */
.rc-row-action { padding: 3px 8px; border: none; background: none; color: var(--rc-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.rc-row-action:hover { color: var(--rc-ink); text-decoration: underline; }