/*
 * CloudUI responsive utilities polyfill
 *
 * CloudUI ships with a prebuilt Tailwind CSS (cloudui.css) whose JIT scanner
 * only includes literal class names from pre-existing templates. Many
 * responsive variants (sm:*, md:*, lg:*) used in custom page templates are
 * missing from that build and would silently fail.
 *
 * This file polyfills the missing utility classes so that custom templates
 * can use standard Tailwind breakpoint syntax without needing a rebuild.
 *
 * Breakpoints follow Tailwind defaults: sm=640px, md=768px, lg=1024px.
 */

/* ---------- Base (all widths) ---------- */
.flex-nowrap { flex-wrap: nowrap; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }

/* ---------- sm: (>=640px) ---------- */
@media (min-width: 640px) {
    .sm\:flex-wrap { flex-wrap: wrap; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:gap-1 { gap: 0.25rem; }
    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:gap-4 { gap: 1rem; }
    .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .sm\:w-auto { width: auto; }
    .sm\:w-6 { width: 1.5rem; }
    .sm\:h-6 { height: 1.5rem; }
    .sm\:w-12 { width: 3rem; }
    .sm\:h-12 { height: 3rem; }
    .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .sm\:table-header-group { display: table-header-group; }
}

/* ---------- md: (>=768px) ---------- */
@media (min-width: 768px) {
    .md\:table-cell { display: table-cell; }
}

/* ---------- lg: (>=1024px) ---------- */
@media (min-width: 1024px) {
    .lg\:table-cell { display: table-cell; }
    .lg\:flex-shrink-0 { flex-shrink: 0; }
    .lg\:mx-0 { margin-left: 0; margin-right: 0; }
}