/* ============================================================
   Missing Tailwind utilities
   ------------------------------------------------------------
   `index-Bkwus6IE.css` is a pre-built, purged Tailwind bundle
   with no source in this repo. It was purged against a
   different tree, so a number of utility classes that the Razor
   markup actually uses were never emitted — they silently do
   nothing today (missing z-index on the mobile drawer, zero-size
   status dots, uncapped modal height, no height on the log
   console, absent spacing and colours).

   This sheet defines exactly those classes, with stock Tailwind
   v3 values, and nothing else. Load order:
     app.css → index-Bkwus6IE.css → utilities.css → theme.css

   When adding markup, check the class exists in one of the first
   three sheets; if not, add it here.
   ============================================================ */

/* ---- display / overflow / resize --------------------------- */
.inline-block { display: inline-block; }
.overflow-y-hidden { overflow-y: hidden; }
.resize-y { resize: vertical; }

/* ---- sizing ------------------------------------------------ */
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-24 { width: 6rem; }
.w-44 { width: 11rem; }
.w-80 { width: 20rem; }
.h-32 { height: 8rem; }
.max-w-xs { max-width: 20rem; }
.min-h-32 { min-height: 8rem; }
.min-h-full { min-height: 100%; }
.max-h-36 { max-height: 9rem; }
.max-h-\[85vh\] { max-height: 85vh; }
.h-\[calc\(100vh-400px\)\] { height: calc(100vh - 400px); }

/* ---- spacing ----------------------------------------------- */
.pt-2 { padding-top: 0.5rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-8 { padding-top: 2rem; }
.pr-7 { padding-right: 1.75rem; }
.pr-12 { padding-right: 3rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.ml-4 { margin-left: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* ---- typography -------------------------------------------- */
.leading-5 { line-height: 1.25rem; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }

/* ---- first-child variants ---------------------------------- */
.first\:border-t-0:first-child { border-top-width: 0; }
.first\:pt-0:first-child { padding-top: 0; }

/* ---- focus ring -------------------------------------------- */
.focus\:ring-1:focus { box-shadow: 0 0 0 1px hsl(var(--ring)); }

/* ---- colour: scrim ----------------------------------------- */
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }

/* ---- colour: solid status swatches ------------------------- */
.bg-green-500 { background-color: #22c55e; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-red-500 { background-color: #ef4444; }
.bg-yellow-500 { background-color: #eab308; }

/* ---- colour: greys ----------------------------------------- */
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.hover\:text-gray-700:hover { color: #374151; }
.group:hover .group-hover\:text-gray-400 { color: #9ca3af; }

/* ---- colour: amber / orange / red accents ------------------ */
.text-amber-700 { color: #b45309; }
.border-amber-200 { border-color: #fde68a; }
.bg-amber-50\/60 { background-color: rgb(255 251 235 / 0.6); }
.text-orange-600 { color: #ea580c; }
.bg-orange-50 { background-color: #fff7ed; }
.border-orange-200 { border-color: #fed7aa; }
.border-red-300 { border-color: #fca5a5; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.hover\:border-red-400:hover { border-color: #f87171; }

/* ---- colour: semantic tokens ------------------------------- */
.bg-muted\/40 { background-color: hsl(var(--muted) / 0.4); }
.hover\:text-destructive-foreground:hover { color: hsl(var(--destructive-foreground)); }

/* ---- responsive variants ----------------------------------- */
@media (min-width: 768px) {
    /* Previously only approximated by the bespoke `.hide-on-md`
       helper in app.css, which every call site had to remember. */
    .md\:hidden { display: none; }
    .md\:flex-col { flex-direction: column; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
}