/* =====================================================================
 * css/patran-utils.css — utilities the Tailwind build does not contain.
 * ---------------------------------------------------------------------
 * css/tailwind.min.css is a JIT build of Tailwind v2.2.19: it contains the
 * classes the source used AT BUILD TIME and nothing else. So it has
 * bg-emerald-600 but not bg-emerald-100; amber-500 but not amber-300; no
 * cyan or sky at any shade; no `active:` variant; and none of the arbitrary
 * values added to the source since (min-h-[44px] and friends — though the
 * ones that existed then, like z-[9999], ARE present).
 *
 * A class the build lacks does nothing at all — no error, no warning, just
 * an unstyled element.
 *
 * `node tools/audit-classes.mjs` lists every class the app writes that has
 * no rule anywhere. This file closes the gap for the ones we use, keeping
 * the authored class names exactly as they are so no markup had to change.
 *
 * Run the audit after adding UI. If it reports something new, either
 * switch to a class the build has, or add it here.
 * ===================================================================== */

/* ── palette gaps ─────────────────────────────────────────────────── */
.bg-emerald-50   { background-color: #ecfdf5; }
.bg-emerald-100  { background-color: #d1fae5; }
.text-emerald-600{ color: #059669; }   /* action-coloured chevrons */
.text-emerald-800{ color: #065f46; }
.border-emerald-300 { border-color: #6ee7b7; }

.bg-cyan-50      { background-color: #ecfeff; }
.text-cyan-800   { color: #155e75; }
.text-cyan-900   { color: #164e63; }
.border-cyan-200 { border-color: #a5f3fc; }

.bg-sky-50       { background-color: #f0f9ff; }
.border-sky-200  { border-color: #bae6fd; }

.border-amber-300{ border-color: #fcd34d; }

/* ── variants the build omits ─────────────────────────────────────── */
/* Emerald hovers: the build has bg-emerald-600 but not its hover: variant,
   because nothing hovered emerald when the JIT snapshot was taken. Caught by
   tools/audit-classes.mjs the moment the primary-action colour changed —
   without it these buttons would simply have stopped responding to hover,
   silently. */
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-emerald-700:hover { background-color: #047857; }
.active\:bg-gray-50:active      { background-color: #f9fafb; }
.active\:bg-emerald-700:active  { background-color: #047857; }
.disabled\:opacity-50:disabled  { opacity: .5; }
.focus\:ring-emerald-500:focus  { --tw-ring-color: #10b981; box-shadow: 0 0 0 2px #10b981; }
.last\:pb-0:last-child          { padding-bottom: 0; }

/* ── arbitrary values (Tailwind 3 syntax, used as touch targets) ──── */
/* 44px is the minimum comfortable touch target; 48px is the one we use
   for primary actions. Keeping the bracket class names means the intent
   stays readable in the markup. */
.min-h-\[1rem\]     { min-height: 1rem; }
.min-h-\[1\.25rem\] { min-height: 1.25rem; }
.min-h-\[44px\]     { min-height: 44px; }
.min-h-\[48px\]     { min-height: 48px; }
.min-h-\[56px\]     { min-height: 56px; }
.min-h-\[80px\]     { min-height: 80px; }
.min-h-\[88px\]     { min-height: 88px; }
.h-\[44px\]         { height: 44px; }

/* NOTE: space-y-*, space-x-* and divide-y are NOT here. They ARE in the
   Tailwind build — as `.space-y-4>:not([hidden])~:not([hidden])`. An earlier
   check missed them by looking for the class name followed by `{`, and
   redefining them here as `> * + *` would have quietly changed their
   semantics for every screen that uses them. */