/**
 * Core Utilities & Design Tokens
 * Lightweight, zero-runtime replacement for Tailwind Play CDN
 */

/* Figma Shadows */
.shadow-figma {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08) !important;
}

.shadow-figma-md,
.hover\:shadow-figma-md:hover {
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
}

.shadow-figma-lg {
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06) !important;
}

/* Border Radius */
.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

/* Borders */
.border-slate-200\/80 {
    border-color: rgba(226, 232, 240, 0.8) !important;
}

.border-indigo-100 {
    border-color: #e0e7ff !important;
}

.bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}


/* Display */
.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.grid {
    display: grid !important;
}

.block {
    display: block !important;
}

.hidden {
    display: none !important;
}

/* Flex utilities */
.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.items-end {
    align-items: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.flex-col {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Gap */
.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.25rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

/* Grid columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

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

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row !important;
    }

    .md\:items-center {
        align-items: center !important;
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

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

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
}

/* Transitions */
.transition-all {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Gradients */
.bg-gradient-to-r.from-slate-900.via-indigo-950.to-slate-900,
.bg-gradient-to-r.from-indigo-900.via-indigo-800.to-slate-900 {
    background: linear-gradient(to right, #0f172a, #1e1b4b, #0f172a) !important;
}

.bg-gradient-to-br.from-indigo-50.to-violet-50 {
    background: linear-gradient(to bottom right, #eef2ff, #f5f3ff) !important;
}

.bg-gradient-to-br.from-purple-500\/10.via-indigo-500\/10.to-violet-500\/5 {
    background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.1), rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05)) !important;
}

.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops, var(--primary), #8b5cf6)) !important;
}

.from-indigo-600 {
    --tw-gradient-from: var(--primary);
    --tw-gradient-stops: var(--primary), var(--primary-strong);
}

.to-violet-500 {
    --tw-gradient-to: #8b5cf6;
}

.to-violet-600 {
    --tw-gradient-to: #7c3aed;
}

.from-slate-950 {
    --tw-gradient-from: #020617;
}


/* Padding shortcuts */
.p-5 {
    padding: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

/* Width/Height utilities */
.w-10 {
    width: 2.5rem !important;
}

.h-10 {
    height: 2.5rem !important;
}

.w-8 {
    width: 2rem !important;
}

.h-8 {
    height: 2rem !important;
}

/* Text size utilities */
.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.text-base {
    font-size: 1rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
}

.text-3xl {
    font-size: 1.875rem !important;
}

/* Font weight utilities */
.font-bold {
    font-weight: 700 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

/* Text decoration */
.text-decoration-none {
    text-decoration: none !important;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden !important;
}

/* Position */
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .bg-white {
    background-color: var(--surface, #1e293b) !important;
}

[data-theme="dark"] .border-slate-200\/80 {
    border-color: rgba(51, 65, 85, 0.7) !important;
}

[data-theme="dark"] .shadow-figma,
[data-theme="dark"] .shadow-figma-md,
[data-theme="dark"] .shadow-figma-lg {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode text colors */
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700 {
    color: var(--text) !important;
}

[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 {
    color: var(--muted) !important;
}

/* ==========================================================================
   Badge Colors & Indent / Ticket Labels (High Contrast)
   ========================================================================== */
/* Amber - Pending Indent */
.bg-amber-50 {
    background-color: #fffbeb !important;
    color: #92400e !important;
}

.text-amber-800 {
    color: #92400e !important;
}

.border-amber-300 {
    border-color: #fcd34d !important;
}

.bg-amber-100 {
    background-color: #fef3c7 !important;
    color: #78350f !important;
}

/* Emerald - Approved Indent */
.bg-emerald-50 {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
}

.text-emerald-800 {
    color: #065f46 !important;
}

.border-emerald-300 {
    border-color: #6ee7b7 !important;
}

/* Rose - Rejected Indent */
.bg-rose-50 {
    background-color: #fff1f2 !important;
    color: #9f1239 !important;
}

.text-rose-800 {
    color: #9f1239 !important;
}

.border-rose-300 {
    border-color: #fda4af !important;
}

/* Blue - On Hold Indent */
.bg-blue-50 {
    background-color: #eff6ff !important;
    color: #1e40af !important;
}

.text-blue-800 {
    color: #1e40af !important;
}

.border-blue-300 {
    border-color: #93c5fd !important;
}

/* Indigo - Assigned Agent & Badges */
.bg-indigo-50 {
    background-color: #eef2ff !important;
    color: #3730a3 !important;
}

.text-indigo-600 {
    color: #4f46e5 !important;
}

.text-indigo-700 {
    color: #4338ca !important;
}

.text-indigo-800 {
    color: #3730a3 !important;
}

.border-indigo-100 {
    border-color: #e0e7ff !important;
}

/* Purple - Requisitions & Badges */
.bg-purple-50 {
    background-color: #faf5ff !important;
}

.bg-purple-100 {
    background-color: #f3e8ff !important;
}

.bg-purple-500 {
    background-color: #a855f7 !important;
    color: #ffffff !important;
}

.bg-purple-600 {
    background-color: #9333ea !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(147, 51, 234, 0.25);
}

.bg-purple-700 {
    background-color: #7e22ce !important;
    color: #ffffff !important;
}

.text-purple-600 {
    color: #9333ea !important;
}

.text-purple-700 {
    color: #7e22ce !important;
}

.text-purple-800 {
    color: #6b21a8 !important;
}

.text-purple-900 {
    color: #581c87 !important;
}

.border-purple-200 {
    border-color: #e9d5ff !important;
}

.border-purple-300 {
    border-color: #d8b4fe !important;
}

/* Cyan - Operational Indent & Badges */
.bg-cyan-50 {
    background-color: #ecfeff !important;
}

.bg-cyan-100 {
    background-color: #cffafe !important;
}

.text-cyan-700 {
    color: #0e7490 !important;
}

.text-cyan-800 {
    color: #155e75 !important;
}

.border-cyan-200 {
    border-color: #a5f3fc !important;
}

/* Slate backgrounds and borders */
.bg-slate-50 {
    background-color: #f8fafc !important;
}

.bg-slate-100 {
    background-color: #f1f5f9 !important;
}

.border-slate-100 {
    border-color: #f1f5f9 !important;
}

.border-slate-200 {
    border-color: #e2e8f0 !important;
}

.border-slate-300 {
    border-color: #cbd5e1 !important;
}

.border-slate-700 {
    border-color: #334155 !important;
}

.border-slate-700\/60 {
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* Slate Text Colors (Light mode baseline) */
.text-slate-900 {
    color: #0f172a !important;
}

.text-slate-800 {
    color: #1e293b !important;
}

.text-slate-700 {
    color: #334155 !important;
}

.text-slate-600 {
    color: #475569 !important;
}

.text-slate-500 {
    color: #64748b !important;
}

.text-slate-400 {
    color: #94a3b8 !important;
}

.text-slate-300 {
    color: #cbd5e1 !important;
}

/* Fractional Spacing Clean Fallbacks (Mapping to standard harmonious units) */
.p-1\.5 {
    padding: 0.5rem !important;
}

.p-2\.5 {
    padding: 0.75rem !important;
}

.p-3\.5 {
    padding: 1rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.py-3\.5 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}

.px-1\.5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-2\.5 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.px-3\.5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.mb-1\.5 {
    margin-bottom: 0.5rem !important;
}

.mb-2\.5 {
    margin-bottom: 0.75rem !important;
}

.mb-3\.5 {
    margin-bottom: 1rem !important;
}

.mt-1\.5 {
    margin-top: 0.5rem !important;
}

.mt-2\.5 {
    margin-top: 0.75rem !important;
}

.mt-3\.5 {
    margin-top: 1rem !important;
}

.me-1\.5 {
    margin-right: 0.5rem !important;
}

.ms-1\.5 {
    margin-left: 0.5rem !important;
}

.gap-1\.5 {
    gap: 0.5rem !important;
}

.gap-2\.5 {
    gap: 0.625rem !important;
}

.gap-3\.5 {
    gap: 0.875rem !important;
}

/* Dark mode overrides for status badges */
[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fde047 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .text-amber-800 {
    color: #fde047 !important;
}

[data-theme="dark"] .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .text-emerald-800 {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.15) !important;
    color: #fda4af !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

[data-theme="dark"] .text-rose-800 {
    color: #fda4af !important;
}

[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
}

[data-theme="dark"] .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #c7d2fe !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100,
[data-bs-theme="dark"] .bg-purple-50,
[data-bs-theme="dark"] .bg-purple-100,
.dark .bg-purple-50,
.dark .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.15) !important;
    color: #e9d5ff !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
}

[data-theme="dark"] .bg-purple-600,
[data-bs-theme="dark"] .bg-purple-600,
.dark .bg-purple-600 {
    background-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.45) !important;
}

[data-theme="dark"] .bg-purple-500,
[data-bs-theme="dark"] .bg-purple-500,
.dark .bg-purple-500 {
    background-color: #c084fc !important;
    color: #1e1b4b !important;
}

[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-900,
[data-bs-theme="dark"] .text-purple-600,
[data-bs-theme="dark"] .text-purple-700,
[data-bs-theme="dark"] .text-purple-800,
[data-bs-theme="dark"] .text-purple-900,
.dark .text-purple-600,
.dark .text-purple-700,
.dark .text-purple-800,
.dark .text-purple-900 {
    color: #e9d5ff !important;
}

[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-purple-300,
[data-bs-theme="dark"] .border-purple-200,
[data-bs-theme="dark"] .border-purple-300,
.dark .border-purple-200,
.dark .border-purple-300 {
    border-color: rgba(168, 85, 247, 0.35) !important;
}

[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-800 {
    color: #a5b4fc !important;
}


[data-theme="dark"] .from-purple-50,
.dark .from-purple-50 {
    --tw-gradient-from: rgba(168, 85, 247, 0.12) !important;
}

[data-theme="dark"] .to-indigo-50,
.dark .to-indigo-50 {
    --tw-gradient-to: rgba(99, 102, 241, 0.12) !important;
}

[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 {
    background-color: var(--surface-hover, #243044) !important;
}

[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 {
    border-color: var(--border, #334155) !important;
}

/* Sizing & Shape Utilities */
.w-2 {
    width: 0.5rem !important;
}

.h-2 {
    height: 0.5rem !important;
}

.w-4 {
    width: 1rem !important;
}

.h-4 {
    height: 1rem !important;
}

.w-6 {
    width: 1.5rem !important;
}

.h-6 {
    height: 1.5rem !important;
}

.w-7 {
    width: 1.75rem !important;
}

.h-7 {
    height: 1.75rem !important;
}

.w-8 {
    width: 2rem !important;
}

.h-8 {
    height: 2rem !important;
}

.w-9 {
    width: 2.25rem !important;
}

.h-9 {
    height: 2.25rem !important;
}

.w-10 {
    width: 2.5rem !important;
}

.h-10 {
    height: 2.5rem !important;
}

.w-12 {
    width: 3rem !important;
}

.h-12 {
    height: 3rem !important;
}

.w-13 {
    width: 3.25rem !important;
}

.h-13 {
    height: 3.25rem !important;
}

.w-14 {
    width: 3.5rem !important;
}

.h-14 {
    height: 3.5rem !important;
}

.w-16 {
    width: 4rem !important;
}

.h-16 {
    height: 4rem !important;
}

.w-48 {
    width: 12rem !important;
}

.h-48 {
    height: 12rem !important;
}

.w-72 {
    width: 18rem !important;
}

.h-72 {
    height: 18rem !important;
}

.w-80 {
    width: 20rem !important;
}

.h-80 {
    height: 20rem !important;
}

.w-20px {
    width: 20px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.rounded-3xl {
    border-radius: 1.5rem !important;
}

.rounded-md {
    border-radius: 0.375rem !important;
}

.rounded-start-xl {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.rounded-end-xl {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.rounded-start-pill {
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

.rounded-end-pill {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

/* Extended Typography & Sizing */
.font-mono {
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important;
}

.font-sans {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.fw-black {
    font-weight: 900 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.line-clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

.tracking-wide {
    letter-spacing: 0.025em !important;
}

.tracking-wider {
    letter-spacing: 0.05em !important;
}

.leading-none {
    line-height: 1 !important;
}

.leading-tight {
    line-height: 1.25 !important;
}

.leading-relaxed {
    line-height: 1.625 !important;
}

.text-2xs {
    font-size: 0.6875rem !important;
    line-height: 1rem !important;
}

.text-3xs {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
}

.text-\[9px\] {
    font-size: 9px !important;
    line-height: 12px !important;
}

.text-\[10px\] {
    font-size: 10px !important;
    line-height: 14px !important;
}

.text-\[11px\] {
    font-size: 11px !important;
    line-height: 15px !important;
}

.text-\[12px\] {
    font-size: 12px !important;
    line-height: 16px !important;
}

.text-\[13px\] {
    font-size: 13px !important;
    line-height: 18px !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

/* Extended Shadows */
.shadow-3xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

.shadow-2xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-xs {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-soft {
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 1px 4px -1px rgba(0, 0, 0, 0.04) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Borders & Dividers */
.border-b {
    border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important;
}

.border-t {
    border-top: 1px solid var(--border-subtle, #e2e8f0) !important;
}

.border-dashed {
    border-style: dashed !important;
}

.divide-y>*+* {
    border-top: 1px solid var(--border-subtle, #e2e8f0) !important;
}

/* Spacing & Flexbox Flow */
.space-y-2>*+* {
    margin-top: 0.5rem !important;
}

.space-y-3>*+* {
    margin-top: 0.75rem !important;
}

.space-y-4>*+* {
    margin-top: 1rem !important;
}

.space-y-5>*+* {
    margin-top: 1.25rem !important;
}

.gap-y-1 {
    row-gap: 0.25rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.pt-6 {
    padding-top: 1.5rem !important;
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.mb-10 {
    margin-bottom: 2.5rem !important;
}

.mt-8 {
    margin-top: 2rem !important;
}

.pl-11 {
    padding-left: 2.75rem !important;
}

.pr-11 {
    padding-right: 2.75rem !important;
}

.pr-4 {
    padding-right: 1rem !important;
}

/* Min/Max Dimensions & Layout */
.min-h-screen {
    min-height: 100vh !important;
}

.min-w-0 {
    min-width: 0 !important;
}

.min-w-\[240px\] {
    min-width: 240px !important;
}

.max-w-xs {
    max-width: 20rem !important;
}

.max-w-md {
    max-width: 28rem !important;
}

.max-w-lg {
    max-width: 32rem !important;
}

.max-w-xl {
    max-width: 36rem !important;
}

.max-w-5xl {
    max-width: 64rem !important;
}

.max-w-7xl {
    max-width: 80rem !important;
}

.max-w-8xl {
    max-width: 88rem !important;
}

.max-w-9xl {
    max-width: 96rem !important;
}

.max-w-10xl {
    max-width: 110rem !important;
}

/* Offsets */
.left-4 {
    left: 1rem !important;
}

.right-3\.5 {
    right: 0.875rem !important;
}

.right-32 {
    right: 8rem !important;
}

.-top-10 {
    top: -2.5rem !important;
}

.-top-16 {
    top: -4rem !important;
}

.-bottom-10 {
    bottom: -2.5rem !important;
}

.-bottom-16 {
    bottom: -4rem !important;
}

.-left-16 {
    left: -4rem !important;
}

.-right-10 {
    right: -2.5rem !important;
}

.-right-16 {
    right: -4rem !important;
}

/* Interactive & Micro-Animations */
.cursor-pointer {
    cursor: pointer !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

.transition-colors {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.transition-transform {
    transition: transform 0.15s ease-in-out !important;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.blur-2xl {
    filter: blur(24px) !important;
}

.blur-3xl {
    filter: blur(48px) !important;
}

.z-10 {
    z-index: 10 !important;
}

.opacity-40 {
    opacity: 0.4 !important;
}

.opacity-60 {
    opacity: 0.6 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hover-lift:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12) !important;
}

.hover-shadow-md {
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.hover-shadow-md:hover {
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-1px) !important;
}

.hover\:bg-danger-subtle:hover {
    background-color: var(--bs-danger-bg-subtle, rgba(239, 68, 68, 0.12)) !important;
}

.hover\:bg-rose-50:hover {
    background-color: #fff1f2 !important;
}


/* Color & Background Extensions */
.text-indigo-200 {
    color: #c7d2fe !important;
}

.text-indigo-300 {
    color: #a5b4fc !important;
}

.text-indigo-900 {
    color: #312e81 !important;
}

.text-emerald-400 {
    color: #34d399 !important;
}

.text-teal-600 {
    color: #0d9488 !important;
}

.text-cyan-800 {
    color: #155e75 !important;
}

.text-amber-500 {
    color: #f59e0b !important;
}

.text-rose-500 {
    color: #f43f5e !important;
}

.text-purple-500 {
    color: #a855f7 !important;
}

.text-sky-500 {
    color: #0ea5e9 !important;
}

.text-slate-100 {
    color: #f1f5f9 !important;
}

.text-slate-200 {
    color: #e2e8f0 !important;
}

.text-violet-300 {
    color: #c4b5fd !important;
}

.text-violet-600 {
    color: #7c3aed !important;
}

.bg-slate-900 {
    background-color: #0f172a !important;
}

.bg-slate-900\/80 {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

.bg-slate-950 {
    background-color: #020617 !important;
}

.bg-emerald-400 {
    background-color: #34d399 !important;
}

.bg-emerald-500 {
    background-color: #10b981 !important;
}

.bg-teal-50 {
    background-color: #f0fdf4 !important;
}

.bg-purple-subtle {
    background-color: rgba(147, 51, 234, 0.12) !important;
    color: #7e22ce !important;
}

.bg-danger-soft {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

.bg-success-soft {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

.bg-warning-soft {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}

.bg-primary-soft {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.btn-primary-soft {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary-border) !important;
}

.btn-primary-soft:hover {
    background-color: var(--primary-glow) !important;
    color: var(--primary-strong) !important;
}

.border-amber-200 {
    border-color: #fde68a !important;
}

.border-emerald-100 {
    border-color: #d1fae5 !important;
}

.border-emerald-200 {
    border-color: #a7f3d0 !important;
}

.border-purple-100 {
    border-color: #f3e8ff !important;
}

.border-rose-200 {
    border-color: #fecdd3 !important;
}

.border-violet-100 {
    border-color: #ede9fe !important;
}

.border-cyan-200 {
    border-color: #a5f3fc !important;
}

.border-indigo-subtle {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.bg-opacity-15 {
    --bs-bg-opacity: 0.15;
}

.bg-opacity-20 {
    --bs-bg-opacity: 0.2;
}

.bg-opacity-30 {
    --bs-bg-opacity: 0.3;
}

.border-opacity-30 {
    --bs-border-opacity: 0.3;
}

.avatar-circle-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-soft, #e0e7ff);
    color: var(--primary-strong, #4338ca);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-source {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
}

/* Dark mode overrides for extended utilities */
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-t,
[data-theme="dark"] .divide-y>*+* {
    border-color: var(--border, #334155) !important;
}

[data-theme="dark"] .shadow-3xs,
[data-theme="dark"] .shadow-2xs,
[data-theme="dark"] .shadow-xs,
[data-theme="dark"] .shadow-soft {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .bg-teal-50 {
    background-color: rgba(13, 148, 136, 0.15) !important;
}

[data-theme="dark"] .text-teal-600 {
    color: #2dd4bf !important;
}

[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-emerald-200,
[data-theme="dark"] .border-purple-100,
[data-theme="dark"] .border-rose-200,
[data-theme="dark"] .border-violet-100,
[data-theme="dark"] .border-cyan-200 {
    border-color: var(--border, #334155) !important;
}