/* Autopilot Ads — comprehensive utilities to backfill the JIT-compiled Metronic bundle.
   Loaded AFTER styles.css. Uses Metronic's CSS variables (--card, --background, etc.)
   which are defined as full colors so plain var() references work. */

/* ==================== Layout / sizing ==================== */
.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-\[85\%\] { max-width: 85%; }
.max-w-\[90\%\] { max-width: 90%; }

.min-w-\[240px\] { min-width: 240px; }
.min-w-\[200px\] { min-width: 200px; }
.min-h-full   { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

.w-72   { width: 18rem; }
.w-56   { width: 14rem; }
.w-44   { width: 11rem; }
.w-20   { width: 5rem; }
.w-8    { width: 2rem; }
.w-9    { width: 2.25rem; }

.size-2    { width: 0.5rem; height: 0.5rem; }
.size-6    { width: 1.5rem; height: 1.5rem; }
.size-8    { width: 2rem; height: 2rem; }
.size-9    { width: 2.25rem; height: 2.25rem; }
.size-10   { width: 2.5rem; height: 2.5rem; }

/* ==================== Surface / card ==================== */
/* Metronic defines --card as var(--color-white) → resolves to a real color. */
.bg-card { background-color: var(--card); }
.text-card-foreground { color: var(--card-foreground); }

.bg-background\/80 { background-color: color-mix(in oklab, var(--background) 80%, transparent); }
.bg-background\/95 { background-color: color-mix(in oklab, var(--background) 95%, transparent); }

.bg-muted\/30 { background-color: color-mix(in oklab, var(--muted) 30%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.bg-muted\/50 { background-color: color-mix(in oklab, var(--muted) 50%, transparent); }
.bg-muted\/60 { background-color: color-mix(in oklab, var(--muted) 60%, transparent); }

/* ==================== Primary tints ==================== */
.bg-primary\/5  { background-color: color-mix(in oklab, var(--primary)  5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.text-primary-foreground { color: var(--primary-foreground); }

/* ==================== Destructive ==================== */
.text-destructive       { color: var(--destructive); }
.bg-destructive         { background-color: var(--destructive); }
.bg-destructive\/5      { background-color: color-mix(in oklab, var(--destructive)  5%, transparent); }
.bg-destructive\/10     { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.border-destructive\/40 { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

/* ==================== Status colors ==================== */
.bg-green-500       { background-color: oklch(72.3% 0.219 149.579); }
.bg-green-500\/10   { background-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 10%, transparent); }
.text-green-500     { color: oklch(72.3% 0.219 149.579); }
.text-green-600     { color: oklch(62.7% 0.194 149.214); }

.bg-amber-500\/5    { background-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 5%, transparent); }
.border-amber-500\/40 { border-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 40%, transparent); }

/* ==================== Spacing ==================== */
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }

.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-10   { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-20   { padding-top: 5rem; padding-bottom: 5rem; }

/* ==================== Borders ==================== */
.border-dashed { border-style: dashed; }
.border-input  { border-color: var(--input); }
.rounded-md    { border-radius: 0.375rem; }
.rounded-lg    { border-radius: 0.5rem; }
.rounded-xl    { border-radius: 0.75rem; }
.rounded-full  { border-radius: 9999px; }

/* ==================== Shadows ==================== */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* ==================== Numbers / typography ==================== */
.tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.tracking-wide       { letter-spacing: 0.025em; }

/* ==================== Backdrop ==================== */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }

/* ==================== Sticky / position ==================== */
.sticky { position: sticky; }
.top-0  { top: 0; }
.z-10   { z-index: 10; }

/* ==================== Tables — make rows readable without per-row styling ==================== */
table th, table td { vertical-align: middle; }
.kt-container-fluid { width: 100%; margin-left: auto; margin-right: auto; }

/* ==================== Focus ring fallback ==================== */
.focus\:ring-2:focus       { box-shadow: 0 0 0 2px var(--primary); }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.focus\:outline-none:focus { outline: none; }

/* ==================== Misc ==================== */
.cursor-not-allowed { cursor: not-allowed; }
.cursor-pointer     { cursor: pointer; }
.transition-colors  { transition-property: color, background-color, border-color; transition-duration: 150ms; }