/**
 * Digiclose Utility Classes
 *
 * Provides Tailwind-compatible utility classes using CSS variables.
 * This allows existing templates to work without modification while
 * ensuring consistency with the design system.
 *
 * Based on: dashboard-design.zip (Final Design System)
 * CSS Variables: public/css/vars.css
 *
 * Categories:
 * - Flexbox utilities
 * - Spacing utilities (padding/margin)
 * - Typography utilities
 * - Color utilities (text/background)
 * - Border & shadow utilities
 * - Sizing utilities
 *
 * Updated: 2025-01-08
 */

/* ===========================================
   FLEXBOX UTILITIES
   Tailwind → Bootstrap compatible
   =========================================== */

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

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

.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

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

/* Flex Direction */
.flex-row {
    flex-direction: row !important;
}

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

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

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

/* Justify Content */
.justify-start {
    justify-content: flex-start !important;
}

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

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

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

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

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

/* Align Items */
.items-start {
    align-items: flex-start !important;
}

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

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

.items-baseline {
    align-items: baseline !important;
}

.items-stretch {
    align-items: stretch !important;
}

/* Align Self */
.self-start {
    align-self: flex-start !important;
}

.self-center {
    align-self: center !important;
}

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

/* Flex Grow/Shrink */
.flex-1 {
    flex: 1 1 0% !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

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

.grow {
    flex-grow: 1 !important;
}

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

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

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

/* Gap (Tailwind style) */
.gap-0 { gap: 0 !important; }
.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; }
.gap-8 { gap: 2rem !important; }
.gap-10 { gap: 2.5rem !important; }
.gap-12 { gap: 3rem !important; }
.gap-16 { gap: 4rem !important; }

/* ===========================================
   SPACING UTILITIES
   Extended padding/margin beyond Bootstrap
   =========================================== */

/* Padding - Extended values */
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.p-12 { padding: 3rem !important; }
.p-16 { padding: 4rem !important; }

.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-16 { padding-left: 4rem !important; padding-right: 4rem !important; }

.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

/* Margin - Extended values */
.m-6 { margin: 1.5rem !important; }
.m-8 { margin: 2rem !important; }
.m-10 { margin: 2.5rem !important; }
.m-12 { margin: 3rem !important; }
.m-16 { margin: 4rem !important; }

.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }

.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }

.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }

.ml-6 { margin-left: 1.5rem !important; }
.ml-8 { margin-left: 2rem !important; }
.ml-10 { margin-left: 2.5rem !important; }

.mr-6 { margin-right: 1.5rem !important; }
.mr-8 { margin-right: 2rem !important; }
.mr-10 { margin-right: 2.5rem !important; }

/* ===========================================
   TYPOGRAPHY UTILITIES
   Font weight aliases (Tailwind style)
   =========================================== */

.font-thin { font-weight: 100 !important; }
.font-extralight { font-weight: 200 !important; }
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* Legacy w-* weight aliases (found in templates) */
.w-light { font-weight: 300 !important; }
.w-normal { font-weight: 400 !important; }
.w-medium { font-weight: 500 !important; }
.w-semibold { font-weight: 600 !important; }
.w-bold { font-weight: 700 !important; }

/* Text alignment (Tailwind aliases) */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Line height */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }

/* Letter spacing */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* ===========================================
   COLOR UTILITIES
   Using CSS variables from vars.css
   =========================================== */

/* Text colors - Semantic */
.text-foreground { color: var(--theme-foreground) !important; }
.text-subtle-foreground { color: var(--theme-subtle-foreground) !important; }
.text-muted-foreground { color: var(--theme-muted-foreground, var(--theme-subtle-foreground)) !important; }
.text-placeholder { color: var(--theme-placeholder-color) !important; }

/* Text colors - Gray scale (Tailwind style) */
.text-gray-50 { color: #fafafa !important; }
.text-gray-100 { color: #f4f4f5 !important; }
.text-gray-200 { color: #e4e4e7 !important; }
.text-gray-300 { color: #d4d4d8 !important; }
.text-gray-400 { color: #a1a1aa !important; }
.text-gray-500 { color: #71717a !important; }
.text-gray-600 { color: #52525b !important; }
.text-gray-700 { color: #3f3f46 !important; }
.text-gray-800 { color: #27272a !important; }
.text-gray-900 { color: #18181b !important; }

/* Text colors - Semantic status */
.text-accent { color: var(--theme-accent) !important; }
.text-destructive { color: var(--theme-accent) !important; }

/* Background colors - Semantic */
.bg-background { background-color: var(--theme-background) !important; }
.bg-background-secondary { background-color: var(--theme-background-secondary-bg) !important; }
.bg-surface { background-color: var(--theme-background-secondary-bg) !important; }
.bg-surface-dark { background-color: var(--theme-tertiary-bg) !important; }
.bg-background-dark { background-color: var(--theme-tertiary-bg) !important; }
.bg-subtle { background-color: var(--theme-subtle-background) !important; }
.bg-muted { background-color: var(--theme-subtle-background) !important; }
.bg-card { background-color: var(--theme-background-secondary-bg) !important; }
.bg-input { background-color: var(--theme-input-bg) !important; }
.bg-accent { background-color: var(--theme-accent) !important; }
.bg-destructive { background-color: var(--theme-accent) !important; }

/* Background colors - Gray scale (Tailwind style) */
.bg-gray-50 { background-color: #fafafa !important; }
.bg-gray-100 { background-color: #f4f4f5 !important; }
.bg-gray-200 { background-color: #e4e4e7 !important; }
.bg-gray-300 { background-color: #d4d4d8 !important; }
.bg-gray-400 { background-color: #a1a1aa !important; }
.bg-gray-500 { background-color: #71717a !important; }
.bg-gray-600 { background-color: #52525b !important; }
.bg-gray-700 { background-color: #3f3f46 !important; }
.bg-gray-800 { background-color: #27272a !important; }
.bg-gray-900 { background-color: #18181b !important; }

/* ===========================================
   BORDER UTILITIES
   =========================================== */

/* Border color */
.border-border { border-color: var(--theme-border-color) !important; }
.border-border-dark { border-color: var(--theme-border-color-strong) !important; }
.border-muted { border-color: var(--theme-border-color) !important; }
.border-accent { border-color: var(--theme-accent) !important; }
.border-destructive { border-color: var(--theme-accent) !important; }

/* Border color - Gray scale */
.border-gray-200 { border-color: #e4e4e7 !important; }
.border-gray-300 { border-color: #d4d4d8 !important; }
.border-gray-400 { border-color: #a1a1aa !important; }
.border-gray-500 { border-color: #71717a !important; }
.border-gray-600 { border-color: #52525b !important; }
.border-gray-700 { border-color: #3f3f46 !important; }

/* Border width */
.border-0 { border-width: 0 !important; }
.border { border-width: 1px !important; border-style: solid !important; }
.border-2 { border-width: 2px !important; border-style: solid !important; }
.border-4 { border-width: 4px !important; border-style: solid !important; }

.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-r { border-right-width: 1px !important; border-right-style: solid !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-l { border-left-width: 1px !important; border-left-style: solid !important; }

.border-t-0 { border-top-width: 0 !important; }
.border-r-0 { border-right-width: 0 !important; }
.border-b-0 { border-bottom-width: 0 !important; }
.border-l-0 { border-left-width: 0 !important; }

/* Border radius (Tailwind style) */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-2xl { border-radius: var(--border-radius-2xl) !important; }
.rounded-3xl { border-radius: var(--border-radius-3xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }

/* ===========================================
   SHADOW UTILITIES
   =========================================== */

.shadow-none { box-shadow: var(--box-shadow-none) !important; }
.shadow-sm { box-shadow: var(--box-shadow-sm) !important; }
.shadow { box-shadow: var(--box-shadow) !important; }
.shadow-md { box-shadow: var(--box-shadow-md) !important; }
.shadow-lg { box-shadow: var(--box-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--box-shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--box-shadow-2xl) !important; }
.shadow-inner { box-shadow: var(--box-shadow-inner) !important; }

/* Custom shadow (found in templates) */
.shadow-glow {
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.3) !important;
}

/* ===========================================
   SIZING UTILITIES
   =========================================== */

/* Width */
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-auto { width: auto !important; }
.w-fit { width: fit-content !important; }
.w-min { width: min-content !important; }
.w-max { width: max-content !important; }

.w-1 { width: 0.25rem !important; }
.w-2 { width: 0.5rem !important; }
.w-3 { width: 0.75rem !important; }
.w-4 { width: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.w-8 { width: 2rem !important; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.w-16 { width: 4rem !important; }
.w-20 { width: 5rem !important; }
.w-24 { width: 6rem !important; }
.w-32 { width: 8rem !important; }
.w-40 { width: 10rem !important; }
.w-48 { width: 12rem !important; }
.w-56 { width: 14rem !important; }
.w-64 { width: 16rem !important; }

/* Width fractions */
.w-1\/2 { width: 50% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-2\/3 { width: 66.666667% !important; }
.w-1\/4 { width: 25% !important; }
.w-3\/4 { width: 75% !important; }

/* Max width */
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Height */
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-auto { height: auto !important; }
.h-fit { height: fit-content !important; }

.h-1 { height: 0.25rem !important; }
.h-2 { height: 0.5rem !important; }
.h-3 { height: 0.75rem !important; }
.h-4 { height: 1rem !important; }
.h-5 { height: 1.25rem !important; }
.h-6 { height: 1.5rem !important; }
.h-8 { height: 2rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }
.h-16 { height: 4rem !important; }
.h-20 { height: 5rem !important; }
.h-24 { height: 6rem !important; }

/* Min height */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }

/* Custom height (found in templates) */
.h-huge { height: 400px !important; }

/* ===========================================
   POSITION UTILITIES
   =========================================== */

.static { position: static !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Inset */
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-x-0 { left: 0 !important; right: 0 !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }

.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

/* ===========================================
   OTHER UTILITIES
   =========================================== */

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-wait { cursor: wait !important; }
.cursor-move { cursor: move !important; }

/* Pointer events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* User select */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }
.select-auto { user-select: auto !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Object fit */
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

/* Whitespace */
.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* Word break */
.break-normal { word-break: normal !important; overflow-wrap: normal !important; }
.break-words { overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }

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

/* ===========================================
   TRANSITION UTILITIES
   =========================================== */

.transition-none { transition: none !important; }
.transition-all { transition: all 0.15s ease !important; }
.transition { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, stroke 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important; }
.transition-colors { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, stroke 0.15s ease !important; }
.transition-opacity { transition: opacity 0.15s ease !important; }
.transition-shadow { transition: box-shadow 0.15s ease !important; }
.transition-transform { transition: transform 0.15s ease !important; }

.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }

/* ===========================================
   TRANSFORM UTILITIES
   =========================================== */

.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }

.rotate-0 { transform: rotate(0deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }

/* ===========================================
   DARK MODE ADJUSTMENTS
   =========================================== */

.dark .text-gray-50 { color: #18181b !important; }
.dark .text-gray-100 { color: #27272a !important; }
.dark .text-gray-200 { color: #3f3f46 !important; }
.dark .text-gray-300 { color: #52525b !important; }
.dark .text-gray-400 { color: #71717a !important; }
.dark .text-gray-500 { color: #a1a1aa !important; }
.dark .text-gray-600 { color: #d4d4d8 !important; }
.dark .text-gray-700 { color: #e4e4e7 !important; }
.dark .text-gray-800 { color: #f4f4f5 !important; }
.dark .text-gray-900 { color: #fafafa !important; }

.dark .bg-gray-50 { background-color: #18181b !important; }
.dark .bg-gray-100 { background-color: #27272a !important; }
.dark .bg-gray-200 { background-color: #3f3f46 !important; }
.dark .bg-gray-300 { background-color: #52525b !important; }
.dark .bg-gray-400 { background-color: #71717a !important; }
.dark .bg-gray-500 { background-color: #a1a1aa !important; }
.dark .bg-gray-600 { background-color: #d4d4d8 !important; }
.dark .bg-gray-700 { background-color: #e4e4e7 !important; }
.dark .bg-gray-800 { background-color: #f4f4f5 !important; }
.dark .bg-gray-900 { background-color: #fafafa !important; }

.dark .border-gray-200 { border-color: #3f3f46 !important; }
.dark .border-gray-300 { border-color: #52525b !important; }
.dark .border-gray-400 { border-color: #71717a !important; }
.dark .border-gray-500 { border-color: #a1a1aa !important; }
.dark .border-gray-600 { border-color: #d4d4d8 !important; }
.dark .border-gray-700 { border-color: #e4e4e7 !important; }