/*
 * ui_harmony.css — HIMS Global UI Consistency Layer
 *
 * PURPOSE: Makes every page look consistent without touching any existing views.
 * HOW:     Maps the Tailwind classes already used across 600+ views to the
 *          design-system.css CSS variables. Same class names, unified output.
 *
 * RULES:
 *   - Never override design-system.css intentionally
 *   - Never use !important (except emoji normalization where required)
 *   - All colors reference CSS variables — dark mode is automatic
 *   - Zero JS dependencies
 *
 * LOAD ORDER: Listed after design-system in application.html.erb
 */

/* ============================================================
   SECTION 1 — PERFORMANCE FOUNDATIONS
   GPU-composited layers on the elements that repaint most often
   ============================================================ */

.card,
.overflow-hidden.rounded-2xl,
.overflow-hidden.rounded-xl {
  contain: layout style;
  will-change: auto;
}

/* Smooth scroll on the main content area */
.app-shell__main,
.main {
  scroll-behavior: smooth;
}

/* Prevent layout thrash on table rows during hover */
table.data tbody tr,
.min-w-full tbody tr {
  transform: translateZ(0);
}

/* ============================================================
   SECTION 2 — EMOJI CONSISTENCY
   Makes emoji render same size and baseline across Windows/Mac/Android
   ============================================================ */

.emoji,
[class*="btn"] .emoji,
button .emoji,
td .emoji,
th .emoji,
.badge .emoji,
.card-title .emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Inline emoji in buttons — keep them proportional */
.btn .emoji,
button.btn .emoji { font-size: 0.95em; }

/* Page title emoji — slightly larger */
.page-title .emoji,
h1 .emoji { font-size: 0.9em; vertical-align: -0.08em; }

/* Status badge emoji */
.badge .emoji { font-size: 0.85em; vertical-align: -0.05em; }

/* Raw emoji in text (no class) — apply to common HIMS clinical emoji */
/* 🩸🔬📋💳🧾✅⚙️📤🖨️👨‍⚕️🏥💊🎯🔴🟢🟡⚠️📊📈🗓️ */
.page-title,
.card-title,
.stat-label,
td,
th,
.btn,
.badge,
h1, h2, h3 {
  font-variant-emoji: text;
}

/* ============================================================
   SECTION 3 — TAILWIND COLOR → DESIGN SYSTEM VARIABLE MAP
   Most-used classes from audit (1000+ occurrences first)
   ============================================================ */

/* ── Text colors ── */
.text-slate-950,
.text-slate-900,
.text-gray-900    { color: var(--text); }

.text-slate-700,
.text-slate-600,
.text-gray-700,
.text-gray-600    { color: var(--text-2); }

.text-slate-500,
.text-slate-400,
.text-gray-500,
.text-gray-400    { color: var(--text-3); }

.text-slate-300,
.text-slate-200,
.text-gray-300    { color: var(--text-4); }

.text-slate-100,
.text-white       { color: var(--surface); }

.text-blue-700,
.text-blue-600    { color: var(--teal); }
.text-blue-300    { color: var(--teal-soft); }

.text-amber-700   { color: var(--amber); }
.text-amber-800   { color: var(--amber-ink); }

.text-red-700,
.text-rose-700    { color: var(--red); }
.text-rose-300,
.text-red-300     { color: var(--red-soft); }

.text-emerald-700,
.text-green-700   { color: var(--green); }

/* ── Background colors ── */
.bg-white         { background-color: var(--surface); }
.bg-slate-50,
.bg-gray-50       { background-color: var(--surface-2); }
.bg-slate-100,
.bg-gray-100      { background-color: var(--surface-3); }

.bg-slate-950,
.bg-slate-900,
.bg-slate-800     {
  background-color: var(--ink);
  color: rgba(230, 239, 255, 0.85);
}

.bg-blue-600,
.bg-blue-700      { background-color: var(--teal); color: #fff; }
.bg-blue-500      { background-color: var(--teal-2); color: #fff; }
.bg-blue-50,
.bg-blue-950      { background-color: var(--teal-soft); }

.bg-amber-50      { background-color: var(--amber-soft); }
.bg-amber-500,
.bg-amber-600     { background-color: var(--amber); color: #fff; }
.bg-amber-950     { background-color: var(--amber-soft); }

.bg-red-50,
.bg-rose-50       { background-color: var(--red-soft); }
.bg-rose-950      { background-color: var(--red-soft); }

.bg-emerald-50,
.bg-green-50      { background-color: var(--green-soft); }
.bg-emerald-950   { background-color: var(--green-soft); }

/* ── Border colors ── */
.border-slate-200,
.border-gray-200,
.border-gray-100  { border-color: var(--border); }

.border-slate-800,
.border-slate-700,
.border-gray-300  { border-color: var(--border-strong); }

.border-slate-300 { border-color: var(--border-strong); }

.border-blue-500,
.border-blue-600  { border-color: var(--teal); }

.border-red-200,
.border-rose-200  { border-color: var(--red-soft); }

/* ── Dark mode overrides for Tailwind dark: classes ── */
/* These are already inlined in views as dark:bg-slate-950 etc.
   We normalise them so they use design system dark values */
[data-theme="dark"] .dark\:bg-slate-950,
[data-theme="dark"] .dark\:bg-slate-900 {
  background-color: var(--surface);
}
[data-theme="dark"] .dark\:bg-slate-800 {
  background-color: var(--surface-2);
}
[data-theme="dark"] .dark\:text-white {
  color: var(--text);
}
[data-theme="dark"] .dark\:text-slate-400,
[data-theme="dark"] .dark\:text-slate-300 {
  color: var(--text-3);
}
[data-theme="dark"] .dark\:border-slate-800,
[data-theme="dark"] .dark\:border-slate-700 {
  border-color: var(--border);
}

/* ============================================================
   SECTION 4 — TYPOGRAPHY NORMALISATION
   Unify font-weight and size classes so every screen reads the same
   ============================================================ */

.font-black,
.font-extrabold,
.font-bold        { font-weight: 600; }    /* cap at 600 — 700/900 look heavy */
.font-semibold    { font-weight: 500; }
.font-medium      { font-weight: 500; }

.text-2xl         { font-size: 22px; line-height: 1.3; }
.text-xl          { font-size: 18px; line-height: 1.35; }
.text-lg          { font-size: 16px; line-height: 1.4; }
.text-base        { font-size: 14px; line-height: 1.5; }
.text-sm          { font-size: 13px; line-height: 1.5; }
.text-xs          { font-size: 11px; line-height: 1.45; }

/* Tracking (letter-spacing) — harmonise the multiple tracking values used */
.tracking-widest,
.tracking-\[0\.18em\],
.tracking-\[0\.16em\],
.tracking-wide    { letter-spacing: 0.07em; }   /* same as table.data th */

/* ============================================================
   SECTION 5 — LAYOUT & SPACING NORMALISATION
   Round border-radius values to match design system tokens
   ============================================================ */

.rounded-2xl      { border-radius: var(--radius-lg); }   /* 12px */
.rounded-xl       { border-radius: var(--radius); }       /* 8px  */
.rounded-lg       { border-radius: var(--radius-sm); }    /* 6px  */
.rounded-md       { border-radius: var(--radius-sm); }    /* 6px  */
.rounded-full     { border-radius: 9999px; }

/* Shadow normalisation */
.shadow-sm        { box-shadow: var(--shadow-sm); }
.shadow,
.shadow-md        { box-shadow: var(--shadow-md); }
.shadow-lg        { box-shadow: var(--shadow-lg); }

/* ============================================================
   SECTION 6 — COMPONENT PATCHES
   Fix specific pages that use non-standard layout patterns
   ============================================================ */

/* Billing page: dark internal sidebar — make it match the app shell */
.billing-sidebar,
aside.bg-slate-900.w-56,
.w-56.bg-slate-900 {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: rgba(230, 239, 255, 0.8);
  border-right: 1px solid rgba(255,255,255,0.06);
}

/* Lab/radiology status chips — standardise inline bg+text combos */
.bg-yellow-100.text-yellow-800,
.bg-orange-100.text-orange-800 {
  background-color: var(--amber-soft);
  color: var(--amber-ink);
  border-radius: var(--radius-sm);
}

.bg-blue-100.text-blue-800 {
  background-color: var(--blue-soft);
  color: var(--blue);
  border-radius: var(--radius-sm);
}

.bg-green-100.text-green-800,
.bg-emerald-100.text-emerald-700 {
  background-color: var(--green-soft);
  color: var(--green);
  border-radius: var(--radius-sm);
}

.bg-red-100.text-red-800,
.bg-rose-100.text-rose-700 {
  background-color: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius-sm);
}

/* Inline "badge" spans that hardcode colors (lab show page pattern) */
.inline-block.px-3.py-2.rounded-lg,
.inline-block.px-3.py-2.rounded-xl {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* Tailwind "flex items-center gap-2" button pattern → match .btn feel */
a.inline-flex.items-center.gap-2.rounded-xl.bg-blue-600,
a.inline-flex.items-center.gap-2.rounded-xl.bg-blue-700,
button.inline-flex.items-center.gap-2.rounded-xl.bg-blue-600 {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--teal);
  color: #fff;
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  transition: background 0.08s, border-color 0.08s;
  text-decoration: none;
}

a.inline-flex.items-center.gap-2.rounded-xl.bg-blue-600:hover,
button.inline-flex.items-center.gap-2.rounded-xl.bg-blue-600:hover {
  background-color: var(--teal-2);
  border-color: var(--teal-2);
}

/* Amber primary buttons (used in billings) */
a.rounded-lg.bg-amber-500,
button.rounded-lg.bg-amber-500,
a.bg-amber-500.px-4,
button.bg-amber-500.px-4 {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--teal);   /* unify amber buttons to teal */
  color: #fff;
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  transition: background 0.08s;
}

/* ============================================================
   SECTION 7 — TABLE CONSISTENCY
   Many pages use Tailwind table markup instead of table.data
   ============================================================ */

/* Any full-width table inside overflow-x-auto gets data-table treatment */
.overflow-x-auto table,
.overflow-auto table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.overflow-x-auto table thead,
.overflow-auto table thead {
  background-color: var(--surface-2);
}

.overflow-x-auto table thead th,
.overflow-auto table thead th {
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.overflow-x-auto table tbody td,
.overflow-auto table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-2);
}

.overflow-x-auto table tbody tr:last-child td,
.overflow-auto table tbody tr:last-child td {
  border-bottom: none;
}

.overflow-x-auto table tbody tr:hover td,
.overflow-auto table tbody tr:hover td {
  background-color: var(--surface-2);
}

/* ============================================================
   SECTION 8 — CARD WRAPPERS (Tailwind pattern → design system feel)
   ============================================================ */

/* The most common Tailwind card pattern in the app */
.overflow-hidden.rounded-2xl.border.bg-white,
.overflow-hidden.rounded-xl.border.bg-white {
  background-color: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Card header row */
.border-b.border-slate-200.px-6.py-4,
.border-b.border-slate-200.px-4.py-3 {
  border-bottom-color: var(--border);
  background-color: var(--surface);
}

[data-theme="dark"] .overflow-hidden.rounded-2xl.border.bg-white,
[data-theme="dark"] .overflow-hidden.rounded-xl.border.bg-white {
  background-color: var(--surface);
  border-color: var(--border);
}

/* ============================================================
   SECTION 9 — FORM CONSISTENCY
   Patient form and admission form use Tailwind inputs
   Restyle them to match .form-input without changing the HTML
   ============================================================ */

/* h-12 w-full rounded-xl border — the patient/admission form input pattern */
input.h-12.w-full.rounded-xl,
input.h-12.w-full.rounded-xl.border,
select.h-12.w-full.rounded-xl,
textarea.w-full.rounded-xl {
  height: auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.08s;
  box-shadow: none;
}

input.h-12.w-full.rounded-xl:focus,
select.h-12.w-full.rounded-xl:focus,
textarea.w-full.rounded-xl:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Label style: "mb-2 block text-xs font-semibold uppercase tracking-[0.16em]" */
label.mb-2.block.text-xs,
.mb-2.block.text-xs.font-semibold.uppercase {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

/* ============================================================
   SECTION 10 — HEADING NORMALISATION
   Unify page titles used with Tailwind classes vs .page-title
   ============================================================ */

h1.text-lg.font-bold,
h1.text-xl.font-bold,
h1.text-2xl.font-bold,
h1.text-2xl.font-semibold,
h1.page-title {
  font-size: var(--eu-font-page, 20px);
  font-weight: var(--eu-font-page-weight, 700);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

h2.text-base.font-semibold,
h2.text-lg.font-semibold,
h2.text-lg.font-bold {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* ============================================================
   SECTION 11 — STAT / KPI CARD CONSISTENCY
   Dashboard and module dashboards use different stat card markup
   ============================================================ */

/* Tailwind stat value pattern */
.text-2xl.font-bold.text-slate-900,
.text-3xl.font-bold.text-slate-900,
.text-2xl.font-semibold {
  font-size: var(--eu-font-kpi, 22px);
  font-weight: var(--eu-font-kpi-weight, 700);
  letter-spacing: -0.02em;
  font-family: 'Courier New', monospace;
  color: var(--text);
}

/* ============================================================
   SECTION 12 — RECEPTIONIST PAYMENT SCREEN
   100% inline styles — patch the wrapping divs we CAN select
   ============================================================ */

/* max-width container used by collect_payment */
div[style*="max-width: 600px"][style*="margin: 0 auto"] > div[style*="background: #fff"],
div[style*="max-width:600px"] > div[style*="background:#fff"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Amount due box — gradient background patch */
div[style*="linear-gradient"][style*="dbeafe"] {
  background: var(--teal-soft) !important;
  border-color: var(--border) !important;
}

/* ============================================================
   SECTION 13 — RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .text-2xl { font-size: 18px; }
  .text-xl  { font-size: 16px; }
  .text-lg  { font-size: 14px; }

  .overflow-x-auto table thead th,
  .overflow-auto table thead th {
    padding: 8px 12px;
  }

  .overflow-x-auto table tbody td,
  .overflow-auto table tbody td {
    padding: 10px 12px;
  }
}

/* ============================================================
   SECTION 14 — DARK MODE: Tailwind dark: class normalisation
   Tailwind writes dark:X as a class that only activates when
   the .dark class is on <html>. Our app uses data-theme="dark".
   These selectors bridge the gap.
   ============================================================ */

[data-theme="dark"] .dark\:bg-slate-950 { background-color: var(--surface); }
[data-theme="dark"] .dark\:bg-slate-900 { background-color: var(--surface-2); }
[data-theme="dark"] .dark\:bg-slate-800 { background-color: var(--surface-3); }
[data-theme="dark"] .dark\:bg-blue-950  { background-color: var(--teal-soft); }
[data-theme="dark"] .dark\:bg-blue-500  { background-color: var(--teal); }
[data-theme="dark"] .dark\:bg-amber-950 { background-color: var(--amber-soft); }
[data-theme="dark"] .dark\:bg-rose-950  { background-color: var(--red-soft); }
[data-theme="dark"] .dark\:bg-emerald-950 { background-color: var(--green-soft); }

[data-theme="dark"] .dark\:text-white        { color: var(--text); }
[data-theme="dark"] .dark\:text-slate-100    { color: var(--text); }
[data-theme="dark"] .dark\:text-slate-200    { color: var(--text-2); }
[data-theme="dark"] .dark\:text-slate-300    { color: var(--text-2); }
[data-theme="dark"] .dark\:text-slate-400    { color: var(--text-3); }
[data-theme="dark"] .dark\:text-slate-500    { color: var(--text-4); }
[data-theme="dark"] .dark\:text-blue-300     { color: var(--teal-soft); }
[data-theme="dark"] .dark\:text-blue-400     { color: var(--teal); }
[data-theme="dark"] .dark\:text-amber-300    { color: var(--amber-soft); }
[data-theme="dark"] .dark\:text-rose-300     { color: var(--red-soft); }
[data-theme="dark"] .dark\:text-emerald-300  { color: var(--green-soft); }

[data-theme="dark"] .dark\:border-slate-800  { border-color: var(--border); }
[data-theme="dark"] .dark\:border-slate-700  { border-color: var(--border-strong); }
[data-theme="dark"] .dark\:hover\:bg-slate-900:hover { background-color: var(--surface-2); }
[data-theme="dark"] .dark\:hover\:bg-slate-800:hover { background-color: var(--surface-3); }

/* ============================================================
   END OF ui_harmony.css
   ============================================================ */