/* ============================================================================
   leap-supplement.css — utilities the prebuilt Tailwind does not ship.
   ============================================================================

   LEAP loads a PREBUILT `tailwind.min.css`. There is no compiler in the build,
   so a utility class that is not already in that file renders as **nothing** —
   silently. No console error, no visual cue, just an element with no styling
   that looks approximately fine on a busy page and completely wrong on a
   sparse one.

   The amber family is the reason this file exists. Every optional / upgrade
   affordance on the CUSTOMER-FACING rental page is styled with
   `bg-amber-50`, `border-amber-200/300`, `text-amber-700/800` and
   `focus:ring-amber-500` — and not one of them is in the prebuilt CSS. The
   "Optional" pill, the upgrade section tint, the checkbox focus ring and the
   "+$4,000" price were all rendering as unstyled default text on the page we
   ask customers to make a buying decision on.

   Values are Tailwind's own (v3 default palette), so anything added here is
   indistinguishable from the real utility if the CSS is ever rebuilt properly.

   Load order matters: this file comes AFTER tailwind.min.css in base.html, so
   these definitions win only where Tailwind has none.

   Before adding a class to a template, grep this file AND tailwind.min.css.
   `tests/test_rental_math.py` fails the build if a rental template uses a
   class that exists in neither.
   ============================================================================ */

/* ── Amber ───────────────────────────────────────────────────────────────
   Optional line items, upgrade sections, "needs attention" states. */
.bg-amber-50      { background-color: #fffbeb; }
.bg-amber-200     { background-color: #fde68a; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.text-amber-700   { color: #b45309; }
.text-amber-800   { color: #92400e; }
.text-amber-900   { color: #78350f; }
/* Hover state for the amber "needs attention" banners — the held-contacts
   callout on the leads list. Without it the banner is not visibly a link. */
.hover\:bg-amber-100:hover     { background-color: #fef3c7; }
.hover\:border-amber-300:hover { border-color: #fcd34d; }
.focus\:ring-amber-500:focus {
    --tw-ring-color: #f59e0b;
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

/* ── Emerald ─────────────────────────────────────────────────────────────
   The "WEB" origin badge on the rentals list, and active/out statuses. */
.bg-emerald-600     { background-color: #059669; }
.border-emerald-600 { border-color: #059669; }
.text-emerald-800   { color: #065f46; }

/* ── Divide ──────────────────────────────────────────────────────────────
   `divide-y` is used by roughly 130 templates across the app and has never
   been present. Every one of those lists has been running without its row
   separators. */
.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 1px;
    border-bottom-width: 0;
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb; }

/* ── Spacing and type ────────────────────────────────────────────────────── */
.tracking-wide  { letter-spacing: 0.025em; }
.align-middle   { vertical-align: middle; }
.opacity-70     { opacity: 0.7; }
.text-\[10px\]  { font-size: 10px; line-height: 14px; }
.gap-1\.5       { gap: 0.375rem; }
.mb-5           { margin-bottom: 1.25rem; }
.my-1           { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2           { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.-mt-0\.5       { margin-top: -0.125rem; }
.-mx-8          { margin-left: -2rem; margin-right: -2rem; }
.px-8           { padding-left: 2rem; padding-right: 2rem; }
.bg-gray-700    { background-color: #374151; }
.last\:mb-0:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .md\:gap-6 { gap: 1.5rem; }
    .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.5rem;
    }
}

/* ── Added for the resources admin (v220) ────────────────────────────────
   Confirmed absent from tailwind.min.css by tests/test_resources.py, which
   fails the build if a resource template uses a class that exists nowhere. */
.w-2\.5      { width: 0.625rem; }
.h-2\.5      { height: 0.625rem; }
.h-9         { height: 2.25rem; }
.ml-9        { margin-left: 2.25rem; }
.mx-1        { margin-left: 0.25rem; margin-right: 0.25rem; }
.self-start  { align-self: flex-start; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.col-span-7  { grid-column: span 7 / span 7; }
.max-h-44 { max-height: 11rem; }
.bg-sky-100   { background-color: #e0f2fe; }
.text-sky-600 { color: #0284c7; }

/* ── Added for the resource timeline and the expanded pipeline board (v221) */
.px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; }
@media (min-width: 1280px) {
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Added for the bills module (v227) ───────────────────────────────────
   Every one of these was confirmed absent from tailwind.min.css before being
   added. `tests/test_bills.py` fails the build if a bills template uses a
   class that exists in neither file, so this list cannot silently rot.

   `bg-black/50` is the one worth calling out: it is the backdrop behind every
   in-page modal in this module. Without it the modal renders with a fully
   transparent backdrop — the dialog floats over live, still-clickable content
   and looks like a rendering bug rather than a dialog. */
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }

/* Amber — only what the rental block above does not already define. The
   review window highlights a missing amount or due date with an amber input
   border, and 400 is the only weight in that family still absent. */
.border-amber-400 { border-color: #fbbf24; }

/* A hairline divider inside an already-bordered card, where gray-100 is too
   heavy — used between the rows of each aging bucket. */
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #f9fafb; }

/* ── Tailwind v3 flex names the prebuilt v2-era file never had ───────────
   `shrink-0` is Tailwind v3's rename of v2's `flex-shrink-0`. The prebuilt
   CSS carries the OLD name only, and 96 templates across LEAP use the new
   one — every icon marked `shrink-0` next to a long label has been squashing
   this whole time. It never errors and never looks broken enough to report,
   which is exactly why it lasted.

   Defined here rather than rewritten across 96 files: one rule fixes every
   existing use and every future one. */
.shrink-0 { flex-shrink: 0; }
.shrink   { flex-shrink: 1; }
.grow-0   { flex-grow: 0; }
.grow     { flex-grow: 1; }

/* ── Added for the rental start form (v228) ──────────────────────────────
   All six confirmed absent from tailwind.min.css. `list-none` is the one that
   matters visually: without it a <summary> keeps the browser's default
   disclosure triangle AND shows the custom chevron, so the section header has
   two arrows pointing different ways. */
.h-px        { height: 1px; }
.list-none   { list-style-type: none; }
.mb-1\.5     { margin-bottom: 0.375rem; }
.pb-6        { padding-bottom: 1.5rem; }
.pr-3        { padding-right: 0.75rem; }
.pt-1        { padding-top: 0.25rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
/* Safari and Chrome need the pseudo-element killed as well as list-style. */
summary.list-none::-webkit-details-marker { display: none; }

/* ── Added for the trickle campaign builder (v228) ───────────────────────
   Both confirmed absent. `pr-16` leaves room for the "minutes" suffix sitting
   inside the delay input; without it the text overlaps the number. */
.pl-3  { padding-left: 0.75rem; }
.pr-16 { padding-right: 4rem; }

/* ── Added for the leads filter modal (v248) ─────────────────────────────
   `border-blue-300` is absent — the prebuilt CSS ships blue 200, 400, 500 and
   600 but not 300. It is the border of the Filters button once a filter is
   on, sitting against `bg-blue-50`; 400 is too strong beside that tint and
   200 is invisible against it, which is exactly the "filter left on from
   yesterday" state this button exists to make obvious. */
.border-blue-300 { border-color: #93c5fd; }

/* ── Added for the leads kanban + linked-record chips (v249) ─────────────
   All four confirmed absent from tailwind.min.css before being written here.

   `py-0.5` is the chip's vertical padding. `py-1` is double it, which turns a
   row of five chips into two rows on a 288px kanban card and pushes the
   staleness badge off the bottom.

   `max-w-chip` is a named width rather than an arbitrary-value class
   (`max-w-[7.5rem]`), because the prebuilt CSS has no JIT pass — an
   arbitrary-value class is simply not in the file, so the chip would not
   truncate and a long estimate number would stretch the card.

   `ring-drop` is the drop target highlight while a card is being dragged.
   `ring-blue-400` is absent (500 is present, but against `bg-blue-50` it
   reads as a selected state rather than a target). Written as a ring colour
   var so `ring-2` composes with it the normal way.

   `min-h-drop` gives an EMPTY column a body to drop onto. Without a height a
   column with no cards is zero pixels tall, so the one action the board
   exists for — moving the first lead into "Working" — has no target. */
.py-0\.5    { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.max-w-chip { max-width: 7.5rem; }
.ring-drop  { --tw-ring-color: #60a5fa; }
.min-h-drop { min-height: 6rem; }

/* ── Added for the shared reason picker (v251) ───────────────────────────
   All three confirmed absent from tailwind.min.css before being written.

   `accent-blue-600` colours the native radio itself. Without it the dot is
   the OS default — grey on some Windows themes — so the chosen row is
   distinguishable only by its tinted background, and the tint is the thing
   that is hard to see on a projector or a cheap monitor. The picker replaces
   a required field; "which one did I pick" must never be a guess.

   `max-h-reasons` + `overflow-y-auto` keep an eight-option list inside a
   modal on a laptop. Without a cap the list grows past the viewport and the
   Dismiss button goes off-screen with no way to scroll to it — the modal is
   `items-center` on a fixed overlay, so the overflow is clipped at BOTH ends.

   `mt-0\.5` aligns the radio with the first line of its label. `mt-1` is
   double and sits the dot visibly below the text baseline on the two-line
   options. */
.accent-blue-600 { accent-color: #2563eb; }
.max-h-reasons   { max-height: 17rem; }
.mt-0\.5         { margin-top: 0.125rem; }