/* ============================================================
   Tailwind utility shim
   wwwroot/css/tailwind.css is a committed build artifact that is
   out of date: several utilities used by the views were never
   compiled into it (responsive grids, some spacing, focus states…).
   This file defines exactly those, with Tailwind's own values, in
   the same "utilities" layer so specificity/ordering match.
   Once `npm run css:build` is run again this file is redundant
   (but harmless) and can be deleted.
   ============================================================ */
@layer utilities {
    .z-10 { z-index: 10; }
    .top-2 { top: 0.5rem; }
    .top-3 { top: 0.75rem; }
    .right-2 { right: 0.5rem; }
    .right-3 { right: 0.75rem; }

    .mt-5 { margin-top: 1.25rem; }
    .mt-8 { margin-top: 2rem; }
    .mb-5 { margin-bottom: 1.25rem; }
    .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
    .ml-2 { margin-left: 0.5rem; }

    .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
    .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .pt-6 { padding-top: 1.5rem; }
    .pb-3 { padding-bottom: 0.75rem; }

    .gap-1\.5 { gap: 0.375rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-5 { gap: 1.25rem; }
    .space-y-2 > :not(:last-child) { margin-bottom: 0.5rem; }
    .space-y-12 > :not(:last-child) { margin-bottom: 3rem; }

    .h-3\.5 { height: 0.875rem; }
    .w-3\.5 { width: 0.875rem; }
    .h-40 { height: 10rem; }
    .max-w-2xl { max-width: 42rem; }
    .max-w-\[100px\] { max-width: 100px; }

    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .font-extrabold { font-weight: 800; }
    .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .tracking-wider { letter-spacing: 0.05em; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .border-2 { border-style: solid; border-width: 2px; }

    .text-gray-300 { color: #d1d5db; }
    .text-green-600 { color: #16a34a; }
    .text-orange-500 { color: #f97316; }
    .text-orange-600 { color: #ea580c; }
    .text-red-600 { color: #dc2626; }
    .text-yellow-600 { color: #ca8a04; }
    .text-purple-700 { color: #7e22ce; }

    .hover\:underline:hover { text-decoration-line: underline; }
    .hover\:scale-\[1\.02\]:hover { scale: 1.02; }
    .group:hover .group-hover\:scale-\[1\.03\] { scale: 1.03; }
    .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
    .focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(52, 211, 153, 0.45)); }
    .disabled\:opacity-50:disabled { opacity: 0.5; }

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

    @media (min-width: 48rem) {
        .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .md\:flex-row { flex-direction: row; }
        .md\:flex-col { flex-direction: column; }
        .md\:items-center { align-items: center; }
        .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    }

    @media (min-width: 64rem) {
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
}