/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - DISPLAY UTILITIES
 * ==========================================================================
 * 
 * Utility classes for display, visibility, and layout.
 * 
 * Depends on: _variables.css
 * ==========================================================================
 */

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.hidden {
   display: none !important;
}

.block {
   display: block !important;
}

.inline {
   display: inline !important;
}

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

.flex {
   display: flex !important;
}

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

.grid {
   display: grid !important;
}

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

.contents {
   display: contents !important;
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

.visible {
   visibility: visible !important;
}

.invisible {
   visibility: hidden !important;
}

/* Screen reader only */
.sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.not-sr-only {
   position: static !important;
   width: auto !important;
   height: auto !important;
   padding: 0 !important;
   margin: 0 !important;
   overflow: visible !important;
   clip: auto !important;
   white-space: normal !important;
}

/* ==========================================================================
   FLEXBOX UTILITIES
   ========================================================================== */

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

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

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

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

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

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

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

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

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

.flex-initial {
   flex: 0 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;
}

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

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

.justify-center {
   justify-content: center !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-end {
   align-items: flex-end !important;
}

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

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

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

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

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

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

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

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

/* Align Content */
.content-start {
   align-content: flex-start !important;
}

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

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

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

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

/* Order */
.order-first:not(.order-lg-2) {
   order: -9999 !important;
}

.order-last:not(.order-lg-1) {
   order: 9999 !important;
}

.order-none {
   order: 0 !important;
}

.order-1 {
   order: 1 !important;
}

.order-2 {
   order: 2 !important;
}

.order-3 {
   order: 3 !important;
}

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

/* Grid Template 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;
}

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

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

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

/* Grid Column Span */
.col-span-1 {
   grid-column: span 1 / span 1 !important;
}

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

.col-span-3 {
   grid-column: span 3 / span 3 !important;
}

.col-span-4 {
   grid-column: span 4 / span 4 !important;
}

.col-span-6 {
   grid-column: span 6 / span 6 !important;
}

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

/* ==========================================================================
   WIDTH/HEIGHT UTILITIES
   ========================================================================== */

/* Width */
.w-0 {
   width: 0 !important;
}

.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;
}

/* Percentage widths */
.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-none {
   max-width: none !important;
}

.max-w-full {
   max-width: 100% !important;
}

.max-w-screen {
   max-width: 100vw !important;
}

.max-w-xs {
   max-width: 320px !important;
}

.max-w-sm {
   max-width: 384px !important;
}

.max-w-md {
   max-width: 448px !important;
}

.max-w-lg {
   max-width: 512px !important;
}

.max-w-xl {
   max-width: 576px !important;
}

.max-w-2xl {
   max-width: 672px !important;
}

.max-w-3xl {
   max-width: 768px !important;
}

.max-w-4xl {
   max-width: 896px !important;
}

.max-w-5xl {
   max-width: 1024px !important;
}

.max-w-6xl {
   max-width: 1152px !important;
}

.max-w-7xl {
   max-width: 1280px !important;
}

/* Min Width */
.min-w-0 {
   min-width: 0 !important;
}

.min-w-full {
   min-width: 100% !important;
}

.min-w-fit {
   min-width: fit-content !important;
}

/* Height */
.h-0 {
   height: 0 !important;
}

.h-full {
   height: 100% !important;
}

.h-screen {
   height: 100vh !important;
}

.h-auto {
   height: auto !important;
}

.h-fit {
   height: fit-content !important;
}

.h-min {
   height: min-content !important;
}

.h-max {
   height: max-content !important;
}

/* Min/Max Height */
.min-h-0 {
   min-height: 0 !important;
}

.min-h-full {
   min-height: 100% !important;
}

.min-h-screen {
   min-height: 100vh !important;
}

.max-h-full {
   max-height: 100% !important;
}

.max-h-screen {
   max-height: 100vh !important;
}

/* Legacy width class */
.m-w-full {
   width: 100% !important;
}

/* ==========================================================================
   OVERFLOW UTILITIES
   ========================================================================== */

.overflow-auto {
   overflow: auto !important;
}

.overflow-hidden {
   overflow: hidden !important;
}

.overflow-visible {
   overflow: visible !important;
}

.overflow-scroll {
   overflow: scroll !important;
}

.overflow-x-auto {
   overflow-x: auto !important;
}

.overflow-x-hidden {
   overflow-x: hidden !important;
}

.overflow-y-auto {
   overflow-y: auto !important;
}

.overflow-y-hidden {
   overflow-y: hidden !important;
}

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

.static {
   position: static !important;
}

.fixed {
   position: fixed !important;
}

.absolute {
   position: absolute !important;
}

.relative {
   position: relative !important;
}

.sticky {
   position: sticky !important;
}

/* Position coordinates */
.inset-0 {
   top: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   left: 0 !important;
}

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

.top-0 {
   top: 0 !important;
}

.top-auto {
   top: auto !important;
}

.right-0 {
   right: 0 !important;
}

.right-auto {
   right: auto !important;
}

.bottom-0 {
   bottom: 0 !important;
}

.bottom-auto {
   bottom: auto !important;
}

.left-0 {
   left: 0 !important;
}

.left-auto {
   left: auto !important;
}

/* ==========================================================================
   Z-INDEX UTILITIES
   ========================================================================== */

.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;
}

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

/* Component z-index */
.z-dropdown {
   z-index: var(--z-dropdown) !important;
}

.z-sticky {
   z-index: var(--z-sticky) !important;
}

.z-fixed {
   z-index: var(--z-fixed) !important;
}

.z-modal {
   z-index: var(--z-modal) !important;
}

.z-popover {
   z-index: var(--z-popover) !important;
}

.z-tooltip {
   z-index: var(--z-tooltip) !important;
}

/* ==========================================================================
   BACKGROUND UTILITIES
   ========================================================================== */

.bg-transparent {
   background-color: transparent !important;
}

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

.bg-black {
   background-color: var(--gray-950) !important;
}

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

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

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

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

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

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

/* Grayscale backgrounds */
.bg-gray-50 {
   background-color: var(--gray-50) !important;
}

.bg-gray-100 {
   background-color: var(--gray-100) !important;
}

.bg-gray-150 {
   background-color: var(--gray-150) !important;
}

.bg-gray-200 {
   background-color: var(--gray-200) !important;
}

.bg-gray-300 {
   background-color: var(--gray-300) !important;
}

.bg-gray-400 {
   background-color: var(--gray-400) !important;
}

.bg-gray-500 {
   background-color: var(--gray-500) !important;
}

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

.border-0 {
   border-width: 0 !important;
}

.border {
   border-width: var(--border-width) !important;
   border-style: solid;
   border-color: var(--border-color);
}

.border-2 {
   border-width: var(--border-width-2) !important;
   border-style: solid;
   border-color: var(--border-color);
}

.border-t {
   border-top-width: var(--border-width) !important;
   border-top-style: solid;
   border-top-color: var(--border-color);
}

.border-r {
   border-right-width: var(--border-width) !important;
   border-right-style: solid;
   border-right-color: var(--border-color);
}

.border-b {
   border-bottom-width: var(--border-width) !important;
   border-bottom-style: solid;
   border-bottom-color: var(--border-color);
}

.border-l {
   border-left-width: var(--border-width) !important;
   border-left-style: solid;
   border-left-color: var(--border-color);
}

/* Border colors */
.border-transparent {
   border-color: transparent !important;
}

.border-primary {
   border-color: var(--color-primary) !important;
}

.border-gray-100 {
   border-color: var(--gray-100) !important;
}

.border-gray-150 {
   border-color: var(--gray-150) !important;
}

.border-gray-200 {
   border-color: var(--gray-200) !important;
}

.border-gray-300 {
   border-color: var(--gray-300) !important;
}

/* Border radius */
.rounded-none {
   border-radius: 0 !important;
}

.rounded-sm {
   border-radius: var(--radius-sm) !important;
}

.rounded {
   border-radius: var(--radius-md) !important;
}

.rounded-md {
   border-radius: var(--radius-md) !important;
}

.rounded-lg {
   border-radius: var(--radius-lg) !important;
}

.rounded-xl {
   border-radius: var(--radius-xl) !important;
}

.rounded-2xl {
   border-radius: var(--radius-2xl) !important;
}

.rounded-full {
   border-radius: var(--radius-full) !important;
}

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

.shadow-none {
   box-shadow: var(--shadow-none) !important;
}

.shadow-xs {
   box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
   box-shadow: var(--shadow-sm) !important;
}

.shadow {
   box-shadow: var(--shadow-md) !important;
}

.shadow-md {
   box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
   box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
   box-shadow: var(--shadow-xl) !important;
}

.shadow-2xl {
   box-shadow: var(--shadow-2xl) !important;
}

/* ==========================================================================
   OPACITY UTILITIES
   ========================================================================== */

.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;
}

/* ==========================================================================
   CURSOR UTILITIES
   ========================================================================== */

.cursor-auto {
   cursor: auto !important;
}

.cursor-default {
   cursor: default !important;
}

.cursor-pointer {
   cursor: pointer !important;
}

.cursor-wait {
   cursor: wait !important;
}

.cursor-text {
   cursor: text !important;
}

.cursor-move {
   cursor: move !important;
}

.cursor-not-allowed {
   cursor: not-allowed !important;
}

/* Legacy cursor class */
.verimus-cursor-pointer {
   cursor: pointer !important;
}

/* ==========================================================================
   POINTER EVENTS UTILITIES
   ========================================================================== */

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

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

/* ==========================================================================
   USER SELECT UTILITIES
   ========================================================================== */

.select-none {
   user-select: none !important;
}

.select-text {
   user-select: text !important;
}

.select-all {
   user-select: all !important;
}

.select-auto {
   user-select: auto !important;
}

/* ==========================================================================
   IMAGE UTILITIES
   ========================================================================== */

.img-contain {
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important;
}

.img-cover {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
}

.img-preview {
   display: none !important;
}

/* ==========================================================================
   PROGRESS BAR UTILITIES
   ========================================================================== */

.progress-sm {
   height: 8px !important;
}

.progress-xs {
   height: 4px !important;
}

/* ==========================================================================
   STICKY UTILITIES
   ========================================================================== */

.sticky-top-100 {
   position: sticky !important;
   top: 100px !important;
}

/* ==========================================================================
   TABLE COLUMN WIDTH UTILITIES
   ========================================================================== */

.col-w-40 {
   width: 40px !important;
}

.col-w-50 {
   width: 50px !important;
}

.col-w-60 {
   width: 60px !important;
}

.col-w-80 {
   width: 80px !important;
}

.col-w-100 {
   width: 100px !important;
}

.col-w-120 {
   width: 120px !important;
}

.col-w-150 {
   width: 150px !important;
}

.col-w-200 {
   width: 200px !important;
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.text-nowrap {
   white-space: nowrap !important;
}

.text-wrap {
   white-space: normal !important;
}

.break-all {
   word-break: break-all !important;
}

.break-words {
   word-break: break-word !important;
}

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

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

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

.tracking-widest {
   letter-spacing: 0.1em !important;
}

.tracking-otp {
   letter-spacing: 8px !important;
}

/* ==========================================================================
   COLOR UTILITIES (ICON COLORS)
   ========================================================================== */

.text-primary-brand {
   color: var(--color-primary) !important;
}

.text-success-icon {
   color: var(--success) !important;
}

.text-muted-icon {
   color: var(--grayscale-500) !important;
}

/* ==========================================================================
   RESPONSIVE DISPLAY
   ========================================================================== */

@media (max-width: 767px) {
   .sm\:hidden {
      display: none !important;
   }

   .sm\:block {
      display: block !important;
   }

   .sm\:flex {
      display: flex !important;
   }

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

@media (min-width: 768px) {
   .md\:hidden {
      display: none !important;
   }

   .md\:block {
      display: block !important;
   }

   .md\:flex {
      display: flex !important;
   }

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

   .md\:grid {
      display: grid !important;
   }

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

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

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

@media (min-width: 1024px) {
   .lg\:hidden {
      display: none !important;
   }

   .lg\:block {
      display: block !important;
   }

   .lg\:flex {
      display: flex !important;
   }

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

   .lg\:grid {
      display: grid !important;
   }

   .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;
   }
}

@media (min-width: 1280px) {
   .xl\:hidden {
      display: none !important;
   }

   .xl\:block {
      display: block !important;
   }

   .xl\:flex {
      display: flex !important;
   }

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

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