/*
 * Utilities for the admin panel's hand-written Blade views.
 *
 * The panel has no custom Filament theme, so it serves Filament's own prebuilt
 * CSS — which contains only the classes Filament's own components use. Any
 * Tailwind utility written in one of our views (the media library browser, the
 * Media Library page) therefore resolved to nothing, and those screens rendered
 * as unstyled markup: full-size icons, visible sr-only text, no grid.
 *
 * Rather than stand up a second Tailwind build for the panel — Filament v5 is on
 * Tailwind v4 while the public site builds on v3 — this defines just the
 * utilities those views actually use. Colours come from Filament's own custom
 * properties, so the panel's theme and dark mode are inherited rather than
 * duplicated.
 *
 * Everything is scoped under .efats-admin so it cannot leak into, or fight with,
 * Filament's own component styles. Add that class to the root of any custom view
 * that needs these utilities.
 *
 * If more custom views appear and this file starts sprawling, that is the signal
 * to do the real Filament theme instead.
 */

.efats-admin .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Layout */
.efats-admin .block { display: block; }
.efats-admin .flex { display: flex; }
.efats-admin .grid { display: grid; }
.efats-admin .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.efats-admin .items-center { align-items: center; }
.efats-admin .justify-center { justify-content: center; }
.efats-admin .gap-4 { gap: 1rem; }
.efats-admin .space-y-1 > * + * { margin-top: 0.25rem; }
.efats-admin .h-full { height: 100%; }
.efats-admin .w-full { width: 100%; }
.efats-admin .inset-0 { inset: 0; }
.efats-admin .z-50 { z-index: 50; }
.efats-admin .overflow-hidden { overflow: hidden; }
.efats-admin .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* Images inside a fixed-ratio tile must not overflow it. This is the one that
   let a document icon render at its natural size and swallow the modal. */
.efats-admin .object-contain { object-fit: contain; }
.efats-admin .h-10 { height: 2.5rem; }
.efats-admin .w-10 { width: 2.5rem; }
.efats-admin svg { flex-shrink: 0; }

/* Spacing */
.efats-admin .px-4 { padding-inline: 1rem; }
.efats-admin .px-6 { padding-inline: 1.5rem; }
.efats-admin .py-3 { padding-block: 0.75rem; }
.efats-admin .py-10 { padding-block: 2.5rem; }
.efats-admin .p-3 { padding: 0.75rem; }
.efats-admin .mt-4 { margin-top: 1rem; }
.efats-admin .mt-1 { margin-top: 0.25rem; }

/* Borders */
.efats-admin .border { border-width: 1px; border-style: solid; }
.efats-admin .border-2 { border-width: 2px; border-style: solid; }
.efats-admin .border-dashed { border-style: dashed; }
.efats-admin .rounded-lg { border-radius: 0.5rem; }
.efats-admin .rounded-xl { border-radius: 0.75rem; }
.efats-admin .border-gray-300 { border-color: var(--gray-300); }
.efats-admin .border-gray-200 { border-color: var(--gray-200); }
.efats-admin .border-primary-500 { border-color: var(--primary-500); }
.efats-admin .border-primary-600 { border-color: var(--primary-600); }

/* Surfaces */
.efats-admin .bg-white { background-color: #fff; }
.efats-admin .bg-gray-50 { background-color: var(--gray-50); }
.efats-admin .bg-primary-50 { background-color: var(--primary-50); }
.efats-admin .bg-primary-50\/90 { background-color: color-mix(in srgb, var(--primary-50) 90%, transparent); }

/* Text — no size below 1rem: the house rule is text-sm as the smallest. */
.efats-admin .text-sm { font-size: 1rem; line-height: 1.5; }
.efats-admin .text-base { font-size: 1.0625rem; line-height: 1.6; }
.efats-admin .font-medium { font-weight: 500; }
.efats-admin .font-semibold { font-weight: 600; }
.efats-admin .text-center { text-align: center; }
.efats-admin .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.efats-admin .text-gray-500 { color: var(--gray-500); }
.efats-admin .text-gray-600 { color: var(--gray-600); }
.efats-admin .text-gray-950 { color: var(--gray-950); }
.efats-admin .text-primary-600 { color: var(--primary-600); }
.efats-admin .text-primary-700 { color: var(--primary-700); }

/* Interaction */
.efats-admin .cursor-pointer { cursor: pointer; }
.efats-admin .transition {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 150ms;
}
.efats-admin .ring-offset-2 { --efats-ring-offset: 2px; }
.efats-admin .peer:focus-visible ~ .peer-focus-visible\:ring-2 {
    box-shadow: 0 0 0 var(--efats-ring-offset, 0px) var(--efats-ring-offset-color, #fff),
                0 0 0 calc(var(--efats-ring-offset, 0px) + 2px) var(--primary-600);
}
.efats-admin .ring-2 {
    box-shadow: 0 0 0 var(--efats-ring-offset, 0px) var(--efats-ring-offset-color, #fff),
                0 0 0 calc(var(--efats-ring-offset, 0px) + 2px) var(--efats-ring-color, var(--primary-600));
}
.efats-admin .ring-primary-600 { --efats-ring-color: var(--primary-600); }

/* Reduced motion: match the public site's promise. */
@media (prefers-reduced-motion: reduce) {
    .efats-admin .transition { transition-duration: 0.01ms; }
}

/* Wider screens */
@media (min-width: 40rem) {
    .efats-admin .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* Dark mode — Filament toggles a .dark class on the document element. */
.dark .efats-admin .bg-white { background-color: var(--gray-900); }
.dark .efats-admin .dark\:bg-gray-800 { background-color: var(--gray-800); }
.dark .efats-admin .dark\:bg-gray-900 { background-color: var(--gray-900); }
.dark .efats-admin .dark\:bg-primary-950 { background-color: var(--primary-950); }
.dark .efats-admin .dark\:bg-primary-950\/90 { background-color: color-mix(in srgb, var(--primary-950) 90%, transparent); }
.dark .efats-admin .dark\:border-gray-700 { border-color: var(--gray-700); }
.dark .efats-admin .dark\:border-gray-600 { border-color: var(--gray-600); }
.dark .efats-admin .dark\:text-gray-400 { color: var(--gray-400); }
.dark .efats-admin .dark\:text-gray-500 { color: var(--gray-500); }
.dark .efats-admin .dark\:text-white { color: #fff; }
.dark .efats-admin .dark\:text-primary-300 { color: var(--primary-300); }
.dark .efats-admin .dark\:text-primary-400 { color: var(--primary-400); }
.dark .efats-admin .dark\:ring-offset-gray-900 { --efats-ring-offset-color: var(--gray-900); }