@keenmate/pure-admin-core 2.3.1 → 2.3.2

package/src/scss/utilities.scss

@@ -1,741 +1,741 @@
-// Pure Admin Visual - Utility Classes
-// Spacing utilities similar to Bootstrap/Tailwind
-// Based on rem units: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5
-
-@use './variables' as *;
-
-// Spacing scale
-$spacers: (
-  0: 0,
-  1: 0.25rem,  // 4px
-  2: 0.5rem,   // 8px
-  3: 0.75rem,  // 12px
-  4: 1rem,     // 16px
-  5: 1.25rem,  // 20px
-  6: 1.5rem,   // 24px
-  8: 2rem,     // 32px
-  10: 2.5rem,  // 40px
-  12: 3rem,    // 48px
-  16: 4rem,    // 64px
-  20: 5rem     // 80px
-);
-
-// Margin utilities
-@each $name, $value in $spacers {
-  // All sides
-  .m-#{$name} {
-    margin: #{$value} !important;
-  }
-
-  // Top
-  .mt-#{$name} {
-    margin-top: #{$value} !important;
-  }
-
-  // Right
-  .mr-#{$name} {
-    margin-right: #{$value} !important;
-  }
-
-  // Bottom
-  .mb-#{$name} {
-    margin-bottom: #{$value} !important;
-  }
-
-  // Left
-  .ml-#{$name} {
-    margin-left: #{$value} !important;
-  }
-
-  // X-axis (left + right)
-  .mx-#{$name} {
-    margin-left: #{$value} !important;
-    margin-right: #{$value} !important;
-  }
-
-  // Y-axis (top + bottom)
-  .my-#{$name} {
-    margin-top: #{$value} !important;
-    margin-bottom: #{$value} !important;
-  }
-}
-
-// Padding utilities
-@each $name, $value in $spacers {
-  // All sides
-  .p-#{$name} {
-    padding: #{$value} !important;
-  }
-
-  // Top
-  .pt-#{$name} {
-    padding-top: #{$value} !important;
-  }
-
-  // Right
-  .pr-#{$name} {
-    padding-right: #{$value} !important;
-  }
-
-  // Bottom
-  .pb-#{$name} {
-    padding-bottom: #{$value} !important;
-  }
-
-  // Left
-  .pl-#{$name} {
-    padding-left: #{$value} !important;
-  }
-
-  // X-axis (left + right)
-  .px-#{$name} {
-    padding-left: #{$value} !important;
-    padding-right: #{$value} !important;
-  }
-
-  // Y-axis (top + bottom)
-  .py-#{$name} {
-    padding-top: #{$value} !important;
-    padding-bottom: #{$value} !important;
-  }
-}
-
-// Auto margin utilities
-.m-auto {
-  margin: auto !important;
-}
-
-.mt-auto {
-  margin-top: auto !important;
-}
-
-.mr-auto {
-  margin-right: auto !important;
-}
-
-.mb-auto {
-  margin-bottom: auto !important;
-}
-
-.ml-auto {
-  margin-left: auto !important;
-}
-
-.mx-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-.my-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-
-// Semantic margin utilities (using spacing variables)
-@each $name, $value in $semantic-spacers {
-  .m-#{$name} { margin: #{$value} !important; }
-  .mt-#{$name} { margin-top: #{$value} !important; }
-  .mr-#{$name} { margin-right: #{$value} !important; }
-  .mb-#{$name} { margin-bottom: #{$value} !important; }
-  .ml-#{$name} { margin-left: #{$value} !important; }
-  .mx-#{$name} { margin-left: #{$value} !important; margin-right: #{$value} !important; }
-  .my-#{$name} { margin-top: #{$value} !important; margin-bottom: #{$value} !important; }
-}
-
-// Semantic padding utilities (using spacing variables)
-@each $name, $value in $semantic-spacers {
-  .p-#{$name} { padding: #{$value} !important; }
-  .pt-#{$name} { padding-top: #{$value} !important; }
-  .pr-#{$name} { padding-right: #{$value} !important; }
-  .pb-#{$name} { padding-bottom: #{$value} !important; }
-  .pl-#{$name} { padding-left: #{$value} !important; }
-  .px-#{$name} { padding-left: #{$value} !important; padding-right: #{$value} !important; }
-  .py-#{$name} { padding-top: #{$value} !important; padding-bottom: #{$value} !important; }
-}
-
-// Display utilities
-.d-none {
-  display: none !important;
-}
-
-.d-inline {
-  display: inline !important;
-}
-
-.d-inline-block {
-  display: inline-block !important;
-}
-
-.d-block {
-  display: block !important;
-}
-
-.d-flex {
-  display: flex !important;
-}
-
-.d-inline-flex {
-  display: inline-flex !important;
-}
-
-// Flexbox utilities
-.flex-row {
-  flex-direction: row !important;
-}
-
-.flex-column {
-  flex-direction: column !important;
-}
-
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-
-.flex-nowrap {
-  flex-wrap: nowrap !important;
-}
-
-.justify-content-start {
-  justify-content: flex-start !important;
-}
-
-.justify-content-end {
-  justify-content: flex-end !important;
-}
-
-.justify-content-center {
-  justify-content: center !important;
-}
-
-.justify-content-between {
-  justify-content: space-between !important;
-}
-
-.justify-content-around {
-  justify-content: space-around !important;
-}
-
-.align-items-start {
-  align-items: flex-start !important;
-}
-
-.align-items-end {
-  align-items: flex-end !important;
-}
-
-.align-items-center {
-  align-items: center !important;
-}
-
-.align-items-baseline {
-  align-items: baseline !important;
-}
-
-.align-items-stretch {
-  align-items: stretch !important;
-}
-
-.flex-fill {
-  flex: 1 1 auto !important;
-}
-
-.flex-grow-0 {
-  flex-grow: 0 !important;
-}
-
-.flex-grow-1 {
-  flex-grow: 1 !important;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0 !important;
-}
-
-.flex-shrink-1 {
-  flex-shrink: 1 !important;
-}
-
-// Text utilities
-.text-center {
-  text-align: center !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-truncate {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
-
-// Width utilities (5% increments)
-.w-5 { width: 5% !important; }
-.w-10 { width: 10% !important; }
-.w-15 { width: 15% !important; }
-.w-20 { width: 20% !important; }
-.w-25 { width: 25% !important; }
-.w-30 { width: 30% !important; }
-.w-35 { width: 35% !important; }
-.w-40 { width: 40% !important; }
-.w-45 { width: 45% !important; }
-.w-50 { width: 50% !important; }
-.w-55 { width: 55% !important; }
-.w-60 { width: 60% !important; }
-.w-65 { width: 65% !important; }
-.w-70 { width: 70% !important; }
-.w-75 { width: 75% !important; }
-.w-80 { width: 80% !important; }
-.w-85 { width: 85% !important; }
-.w-90 { width: 90% !important; }
-.w-95 { width: 95% !important; }
-.w-100 { width: 100% !important; }
-.w-auto { width: auto !important; }
-
-// Width utilities (fractions) - matches grid naming
-.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; }
-
-// Min-width utilities
-.mw-25 { min-width: 25% !important; }
-.mw-50 { min-width: 50% !important; }
-.mw-75 { min-width: 75% !important; }
-.mw-100 { min-width: 100% !important; }
-.mw-auto { min-width: auto !important; }
-.mw-1-2 { min-width: 50% !important; }
-.mw-1-3 { min-width: 33.333333% !important; }
-.mw-2-3 { min-width: 66.666667% !important; }
-.mw-1-4 { min-width: 25% !important; }
-.mw-3-4 { min-width: 75% !important; }
-
-// Fixed width utilities (min-width + width locked)
-.w-25-fixed { min-width: 25% !important; width: 25% !important; }
-.w-50-fixed { min-width: 50% !important; width: 50% !important; }
-.w-75-fixed { min-width: 75% !important; width: 75% !important; }
-.w-100-fixed { min-width: 100% !important; width: 100% !important; }
-.w-1-2-fixed { min-width: 50% !important; width: 50% !important; }
-.w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
-.w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
-.w-1-4-fixed { min-width: 25% !important; width: 25% !important; }
-.w-3-4-fixed { min-width: 75% !important; width: 75% !important; }
-
-// Height utilities
-.h-25 {
-  height: 25% !important;
-}
-
-.h-50 {
-  height: 50% !important;
-}
-
-.h-75 {
-  height: 75% !important;
-}
-
-.h-100 {
-  height: 100% !important;
-}
-
-.h-auto {
-  height: auto !important;
-}
-
-// Height utilities (fractions)
-.h-1-2 { height: 50% !important; }
-.h-1-3 { height: 33.333333% !important; }
-.h-2-3 { height: 66.666667% !important; }
-.h-1-4 { height: 25% !important; }
-.h-3-4 { height: 75% !important; }
-
-// ============================================================================
-// REM-BASED SIZING UTILITIES
-// Use 'r' suffix to distinguish from percentage-based utilities
-// Values: 1-10, 15, 20, 25, 30, 35, 40, 45, 50 (rem)
-// ============================================================================
-
-// Width (rem)
-.wr-1 { width: 1rem !important; }
-.wr-2 { width: 2rem !important; }
-.wr-3 { width: 3rem !important; }
-.wr-4 { width: 4rem !important; }
-.wr-5 { width: 5rem !important; }
-.wr-6 { width: 6rem !important; }
-.wr-7 { width: 7rem !important; }
-.wr-8 { width: 8rem !important; }
-.wr-9 { width: 9rem !important; }
-.wr-10 { width: 10rem !important; }
-.wr-15 { width: 15rem !important; }
-.wr-20 { width: 20rem !important; }
-.wr-25 { width: 25rem !important; }
-.wr-30 { width: 30rem !important; }
-.wr-35 { width: 35rem !important; }
-.wr-40 { width: 40rem !important; }
-.wr-45 { width: 45rem !important; }
-.wr-50 { width: 50rem !important; }
-
-// Min-width (rem)
-.minwr-1 { min-width: 1rem !important; }
-.minwr-2 { min-width: 2rem !important; }
-.minwr-3 { min-width: 3rem !important; }
-.minwr-4 { min-width: 4rem !important; }
-.minwr-5 { min-width: 5rem !important; }
-.minwr-6 { min-width: 6rem !important; }
-.minwr-7 { min-width: 7rem !important; }
-.minwr-8 { min-width: 8rem !important; }
-.minwr-9 { min-width: 9rem !important; }
-.minwr-10 { min-width: 10rem !important; }
-.minwr-15 { min-width: 15rem !important; }
-.minwr-20 { min-width: 20rem !important; }
-.minwr-25 { min-width: 25rem !important; }
-.minwr-30 { min-width: 30rem !important; }
-.minwr-35 { min-width: 35rem !important; }
-.minwr-40 { min-width: 40rem !important; }
-.minwr-45 { min-width: 45rem !important; }
-.minwr-50 { min-width: 50rem !important; }
-
-// Max-width (rem)
-.maxwr-1 { max-width: 1rem !important; }
-.maxwr-2 { max-width: 2rem !important; }
-.maxwr-3 { max-width: 3rem !important; }
-.maxwr-4 { max-width: 4rem !important; }
-.maxwr-5 { max-width: 5rem !important; }
-.maxwr-6 { max-width: 6rem !important; }
-.maxwr-7 { max-width: 7rem !important; }
-.maxwr-8 { max-width: 8rem !important; }
-.maxwr-9 { max-width: 9rem !important; }
-.maxwr-10 { max-width: 10rem !important; }
-.maxwr-15 { max-width: 15rem !important; }
-.maxwr-20 { max-width: 20rem !important; }
-.maxwr-25 { max-width: 25rem !important; }
-.maxwr-30 { max-width: 30rem !important; }
-.maxwr-35 { max-width: 35rem !important; }
-.maxwr-40 { max-width: 40rem !important; }
-.maxwr-45 { max-width: 45rem !important; }
-.maxwr-50 { max-width: 50rem !important; }
-
-// Height (rem)
-.hr-1 { height: 1rem !important; }
-.hr-2 { height: 2rem !important; }
-.hr-3 { height: 3rem !important; }
-.hr-4 { height: 4rem !important; }
-.hr-5 { height: 5rem !important; }
-.hr-6 { height: 6rem !important; }
-.hr-7 { height: 7rem !important; }
-.hr-8 { height: 8rem !important; }
-.hr-9 { height: 9rem !important; }
-.hr-10 { height: 10rem !important; }
-.hr-15 { height: 15rem !important; }
-.hr-20 { height: 20rem !important; }
-.hr-25 { height: 25rem !important; }
-.hr-30 { height: 30rem !important; }
-.hr-35 { height: 35rem !important; }
-.hr-40 { height: 40rem !important; }
-.hr-45 { height: 45rem !important; }
-.hr-50 { height: 50rem !important; }
-
-// Min-height (rem)
-.minhr-1 { min-height: 1rem !important; }
-.minhr-2 { min-height: 2rem !important; }
-.minhr-3 { min-height: 3rem !important; }
-.minhr-4 { min-height: 4rem !important; }
-.minhr-5 { min-height: 5rem !important; }
-.minhr-6 { min-height: 6rem !important; }
-.minhr-7 { min-height: 7rem !important; }
-.minhr-8 { min-height: 8rem !important; }
-.minhr-9 { min-height: 9rem !important; }
-.minhr-10 { min-height: 10rem !important; }
-.minhr-15 { min-height: 15rem !important; }
-.minhr-20 { min-height: 20rem !important; }
-.minhr-25 { min-height: 25rem !important; }
-.minhr-30 { min-height: 30rem !important; }
-.minhr-35 { min-height: 35rem !important; }
-.minhr-40 { min-height: 40rem !important; }
-.minhr-45 { min-height: 45rem !important; }
-.minhr-50 { min-height: 50rem !important; }
-.minhr-60 { min-height: 60rem !important; }
-.minhr-70 { min-height: 70rem !important; }
-.minhr-80 { min-height: 80rem !important; }
-.minhr-90 { min-height: 90rem !important; }
-.minhr-100 { min-height: 100rem !important; }
-
-// Max-height (rem)
-.maxhr-1 { max-height: 1rem !important; }
-.maxhr-2 { max-height: 2rem !important; }
-.maxhr-3 { max-height: 3rem !important; }
-.maxhr-4 { max-height: 4rem !important; }
-.maxhr-5 { max-height: 5rem !important; }
-.maxhr-6 { max-height: 6rem !important; }
-.maxhr-7 { max-height: 7rem !important; }
-.maxhr-8 { max-height: 8rem !important; }
-.maxhr-9 { max-height: 9rem !important; }
-.maxhr-10 { max-height: 10rem !important; }
-.maxhr-15 { max-height: 15rem !important; }
-.maxhr-20 { max-height: 20rem !important; }
-.maxhr-25 { max-height: 25rem !important; }
-.maxhr-30 { max-height: 30rem !important; }
-.maxhr-35 { max-height: 35rem !important; }
-.maxhr-40 { max-height: 40rem !important; }
-.maxhr-45 { max-height: 45rem !important; }
-.maxhr-50 { max-height: 50rem !important; }
-
-// ============================================================================
-// PERCENTAGE-BASED MIN/MAX UTILITIES
-// Extends existing w-* and h-* utilities with min/max variants
-// ============================================================================
-
-// Min-width (percentage) - 5% increments
-.minw-5 { min-width: 5% !important; }
-.minw-10 { min-width: 10% !important; }
-.minw-15 { min-width: 15% !important; }
-.minw-20 { min-width: 20% !important; }
-.minw-25 { min-width: 25% !important; }
-.minw-30 { min-width: 30% !important; }
-.minw-35 { min-width: 35% !important; }
-.minw-40 { min-width: 40% !important; }
-.minw-45 { min-width: 45% !important; }
-.minw-50 { min-width: 50% !important; }
-.minw-55 { min-width: 55% !important; }
-.minw-60 { min-width: 60% !important; }
-.minw-65 { min-width: 65% !important; }
-.minw-70 { min-width: 70% !important; }
-.minw-75 { min-width: 75% !important; }
-.minw-80 { min-width: 80% !important; }
-.minw-85 { min-width: 85% !important; }
-.minw-90 { min-width: 90% !important; }
-.minw-95 { min-width: 95% !important; }
-.minw-100 { min-width: 100% !important; }
-.minw-1-3 { min-width: 33.333333% !important; }
-.minw-2-3 { min-width: 66.666667% !important; }
-
-// Max-width (percentage) - 5% increments
-.maxw-5 { max-width: 5% !important; }
-.maxw-10 { max-width: 10% !important; }
-.maxw-15 { max-width: 15% !important; }
-.maxw-20 { max-width: 20% !important; }
-.maxw-25 { max-width: 25% !important; }
-.maxw-30 { max-width: 30% !important; }
-.maxw-35 { max-width: 35% !important; }
-.maxw-40 { max-width: 40% !important; }
-.maxw-45 { max-width: 45% !important; }
-.maxw-50 { max-width: 50% !important; }
-.maxw-55 { max-width: 55% !important; }
-.maxw-60 { max-width: 60% !important; }
-.maxw-65 { max-width: 65% !important; }
-.maxw-70 { max-width: 70% !important; }
-.maxw-75 { max-width: 75% !important; }
-.maxw-80 { max-width: 80% !important; }
-.maxw-85 { max-width: 85% !important; }
-.maxw-90 { max-width: 90% !important; }
-.maxw-95 { max-width: 95% !important; }
-.maxw-100 { max-width: 100% !important; }
-.maxw-1-2 { max-width: 50% !important; }
-.maxw-1-3 { max-width: 33.333333% !important; }
-.maxw-2-3 { max-width: 66.666667% !important; }
-.maxw-1-4 { max-width: 25% !important; }
-.maxw-3-4 { max-width: 75% !important; }
-
-// Min-height (percentage)
-.minh-5 { min-height: 5% !important; }
-.minh-10 { min-height: 10% !important; }
-.minh-15 { min-height: 15% !important; }
-.minh-20 { min-height: 20% !important; }
-.minh-25 { min-height: 25% !important; }
-.minh-30 { min-height: 30% !important; }
-.minh-35 { min-height: 35% !important; }
-.minh-40 { min-height: 40% !important; }
-.minh-45 { min-height: 45% !important; }
-.minh-50 { min-height: 50% !important; }
-.minh-55 { min-height: 55% !important; }
-.minh-60 { min-height: 60% !important; }
-.minh-65 { min-height: 65% !important; }
-.minh-70 { min-height: 70% !important; }
-.minh-75 { min-height: 75% !important; }
-.minh-80 { min-height: 80% !important; }
-.minh-85 { min-height: 85% !important; }
-.minh-90 { min-height: 90% !important; }
-.minh-95 { min-height: 95% !important; }
-.minh-100 { min-height: 100% !important; }
-.minh-1-2 { min-height: 50% !important; }
-.minh-1-3 { min-height: 33.333333% !important; }
-.minh-2-3 { min-height: 66.666667% !important; }
-.minh-1-4 { min-height: 25% !important; }
-.minh-3-4 { min-height: 75% !important; }
-
-// Max-height (percentage)
-.maxh-5 { max-height: 5% !important; }
-.maxh-10 { max-height: 10% !important; }
-.maxh-15 { max-height: 15% !important; }
-.maxh-20 { max-height: 20% !important; }
-.maxh-25 { max-height: 25% !important; }
-.maxh-30 { max-height: 30% !important; }
-.maxh-35 { max-height: 35% !important; }
-.maxh-40 { max-height: 40% !important; }
-.maxh-45 { max-height: 45% !important; }
-.maxh-50 { max-height: 50% !important; }
-.maxh-55 { max-height: 55% !important; }
-.maxh-60 { max-height: 60% !important; }
-.maxh-65 { max-height: 65% !important; }
-.maxh-70 { max-height: 70% !important; }
-.maxh-75 { max-height: 75% !important; }
-.maxh-80 { max-height: 80% !important; }
-.maxh-85 { max-height: 85% !important; }
-.maxh-90 { max-height: 90% !important; }
-.maxh-95 { max-height: 95% !important; }
-.maxh-100 { max-height: 100% !important; }
-.maxh-1-2 { max-height: 50% !important; }
-.maxh-1-3 { max-height: 33.333333% !important; }
-.maxh-2-3 { max-height: 66.666667% !important; }
-.maxh-1-4 { max-height: 25% !important; }
-.maxh-3-4 { max-height: 75% !important; }
-
-// Position utilities
-.position-static {
-  position: static !important;
-}
-
-.position-relative {
-  position: relative !important;
-}
-
-.position-absolute {
-  position: absolute !important;
-}
-
-.position-fixed {
-  position: fixed !important;
-}
-
-.position-sticky {
-  position: sticky !important;
-}
-
-// Border utilities
-.border {
-  border: 1px solid var(--border-color) !important;
-}
-
-.border-top {
-  border-top: 1px solid var(--border-color) !important;
-}
-
-.border-right {
-  border-right: 1px solid var(--border-color) !important;
-}
-
-.border-bottom {
-  border-bottom: 1px solid var(--border-color) !important;
-}
-
-.border-left {
-  border-left: 1px solid var(--border-color) !important;
-}
-
-.border-0 {
-  border: 0 !important;
-}
-
-.border-top-0 {
-  border-top: 0 !important;
-}
-
-.border-right-0 {
-  border-right: 0 !important;
-}
-
-.border-bottom-0 {
-  border-bottom: 0 !important;
-}
-
-.border-left-0 {
-  border-left: 0 !important;
-}
-
-// Border style utilities
-.border-solid { border-style: solid !important; }
-.border-dashed { border-style: dashed !important; }
-.border-dotted { border-style: dotted !important; }
-.border-none { border-style: none !important; }
-
-// Text color utilities (semantic colors)
-.text-primary { color: var(--pa-accent) !important; }
-.text-success { color: var(--pa-success-text) !important; }
-.text-danger { color: var(--pa-danger-text) !important; }
-.text-warning { color: var(--pa-warning-text) !important; }
-.text-info { color: var(--pa-info-text) !important; }
-
-// Text color utilities (theme custom colors 1-9)
-.text-color-1 { color: var(--pa-color-1) !important; }
-.text-color-2 { color: var(--pa-color-2) !important; }
-.text-color-3 { color: var(--pa-color-3) !important; }
-.text-color-4 { color: var(--pa-color-4) !important; }
-.text-color-5 { color: var(--pa-color-5) !important; }
-.text-color-6 { color: var(--pa-color-6) !important; }
-.text-color-7 { color: var(--pa-color-7) !important; }
-.text-color-8 { color: var(--pa-color-8) !important; }
-.text-color-9 { color: var(--pa-color-9) !important; }
-
-// Rounded utilities
-.rounded {
-  border-radius: var(--border-radius) !important;
-}
-
-.rounded-lg {
-  border-radius: var(--border-radius-lg) !important;
-}
-
-.rounded-circle {
-  border-radius: 50% !important;
-}
-
-.rounded-0 {
-  border-radius: 0 !important;
-}
-
-.rounded-top {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
-}
-
-.rounded-bottom {
-  border-bottom-left-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
-}
-
-.rounded-left {
-  border-top-left-radius: var(--border-radius) !important;
-  border-bottom-left-radius: var(--border-radius) !important;
-}
-
-.rounded-right {
-  border-top-right-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
-}
-
-// Shadow utilities
-.shadow-none {
-  box-shadow: none !important;
-}
-
-.shadow-sm {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
-}
-
-.shadow {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-}
-
-.shadow-lg {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
-}
-
-// ============================================================================
-// Container queries
-// ============================================================================
-
-.pa-cq {
-  container-type: inline-size;
+// Pure Admin Visual - Utility Classes
+// Spacing utilities similar to Bootstrap/Tailwind
+// Based on rem units: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5
+
+@use './variables' as *;
+
+// Spacing scale
+$spacers: (
+  0: 0,
+  1: 0.25rem,  // 4px
+  2: 0.5rem,   // 8px
+  3: 0.75rem,  // 12px
+  4: 1rem,     // 16px
+  5: 1.25rem,  // 20px
+  6: 1.5rem,   // 24px
+  8: 2rem,     // 32px
+  10: 2.5rem,  // 40px
+  12: 3rem,    // 48px
+  16: 4rem,    // 64px
+  20: 5rem     // 80px
+);
+
+// Margin utilities
+@each $name, $value in $spacers {
+  // All sides
+  .m-#{$name} {
+    margin: #{$value} !important;
+  }
+
+  // Top
+  .mt-#{$name} {
+    margin-top: #{$value} !important;
+  }
+
+  // Right
+  .mr-#{$name} {
+    margin-right: #{$value} !important;
+  }
+
+  // Bottom
+  .mb-#{$name} {
+    margin-bottom: #{$value} !important;
+  }
+
+  // Left
+  .ml-#{$name} {
+    margin-left: #{$value} !important;
+  }
+
+  // X-axis (left + right)
+  .mx-#{$name} {
+    margin-left: #{$value} !important;
+    margin-right: #{$value} !important;
+  }
+
+  // Y-axis (top + bottom)
+  .my-#{$name} {
+    margin-top: #{$value} !important;
+    margin-bottom: #{$value} !important;
+  }
+}
+
+// Padding utilities
+@each $name, $value in $spacers {
+  // All sides
+  .p-#{$name} {
+    padding: #{$value} !important;
+  }
+
+  // Top
+  .pt-#{$name} {
+    padding-top: #{$value} !important;
+  }
+
+  // Right
+  .pr-#{$name} {
+    padding-right: #{$value} !important;
+  }
+
+  // Bottom
+  .pb-#{$name} {
+    padding-bottom: #{$value} !important;
+  }
+
+  // Left
+  .pl-#{$name} {
+    padding-left: #{$value} !important;
+  }
+
+  // X-axis (left + right)
+  .px-#{$name} {
+    padding-left: #{$value} !important;
+    padding-right: #{$value} !important;
+  }
+
+  // Y-axis (top + bottom)
+  .py-#{$name} {
+    padding-top: #{$value} !important;
+    padding-bottom: #{$value} !important;
+  }
+}
+
+// Auto margin utilities
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+// Semantic margin utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .m-#{$name} { margin: #{$value} !important; }
+  .mt-#{$name} { margin-top: #{$value} !important; }
+  .mr-#{$name} { margin-right: #{$value} !important; }
+  .mb-#{$name} { margin-bottom: #{$value} !important; }
+  .ml-#{$name} { margin-left: #{$value} !important; }
+  .mx-#{$name} { margin-left: #{$value} !important; margin-right: #{$value} !important; }
+  .my-#{$name} { margin-top: #{$value} !important; margin-bottom: #{$value} !important; }
+}
+
+// Semantic padding utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .p-#{$name} { padding: #{$value} !important; }
+  .pt-#{$name} { padding-top: #{$value} !important; }
+  .pr-#{$name} { padding-right: #{$value} !important; }
+  .pb-#{$name} { padding-bottom: #{$value} !important; }
+  .pl-#{$name} { padding-left: #{$value} !important; }
+  .px-#{$name} { padding-left: #{$value} !important; padding-right: #{$value} !important; }
+  .py-#{$name} { padding-top: #{$value} !important; padding-bottom: #{$value} !important; }
+}
+
+// Display utilities
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+// Flexbox utilities
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+// Text utilities
+.text-center {
+  text-align: center !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+// Width utilities (5% increments)
+.w-5 { width: 5% !important; }
+.w-10 { width: 10% !important; }
+.w-15 { width: 15% !important; }
+.w-20 { width: 20% !important; }
+.w-25 { width: 25% !important; }
+.w-30 { width: 30% !important; }
+.w-35 { width: 35% !important; }
+.w-40 { width: 40% !important; }
+.w-45 { width: 45% !important; }
+.w-50 { width: 50% !important; }
+.w-55 { width: 55% !important; }
+.w-60 { width: 60% !important; }
+.w-65 { width: 65% !important; }
+.w-70 { width: 70% !important; }
+.w-75 { width: 75% !important; }
+.w-80 { width: 80% !important; }
+.w-85 { width: 85% !important; }
+.w-90 { width: 90% !important; }
+.w-95 { width: 95% !important; }
+.w-100 { width: 100% !important; }
+.w-auto { width: auto !important; }
+
+// Width utilities (fractions) - matches grid naming
+.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; }
+
+// Min-width utilities
+.mw-25 { min-width: 25% !important; }
+.mw-50 { min-width: 50% !important; }
+.mw-75 { min-width: 75% !important; }
+.mw-100 { min-width: 100% !important; }
+.mw-auto { min-width: auto !important; }
+.mw-1-2 { min-width: 50% !important; }
+.mw-1-3 { min-width: 33.333333% !important; }
+.mw-2-3 { min-width: 66.666667% !important; }
+.mw-1-4 { min-width: 25% !important; }
+.mw-3-4 { min-width: 75% !important; }
+
+// Fixed width utilities (min-width + width locked)
+.w-25-fixed { min-width: 25% !important; width: 25% !important; }
+.w-50-fixed { min-width: 50% !important; width: 50% !important; }
+.w-75-fixed { min-width: 75% !important; width: 75% !important; }
+.w-100-fixed { min-width: 100% !important; width: 100% !important; }
+.w-1-2-fixed { min-width: 50% !important; width: 50% !important; }
+.w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
+.w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
+.w-1-4-fixed { min-width: 25% !important; width: 25% !important; }
+.w-3-4-fixed { min-width: 75% !important; width: 75% !important; }
+
+// Height utilities
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+// Height utilities (fractions)
+.h-1-2 { height: 50% !important; }
+.h-1-3 { height: 33.333333% !important; }
+.h-2-3 { height: 66.666667% !important; }
+.h-1-4 { height: 25% !important; }
+.h-3-4 { height: 75% !important; }
+
+// ============================================================================
+// REM-BASED SIZING UTILITIES
+// Use 'r' suffix to distinguish from percentage-based utilities
+// Values: 1-10, 15, 20, 25, 30, 35, 40, 45, 50 (rem)
+// ============================================================================
+
+// Width (rem)
+.wr-1 { width: 1rem !important; }
+.wr-2 { width: 2rem !important; }
+.wr-3 { width: 3rem !important; }
+.wr-4 { width: 4rem !important; }
+.wr-5 { width: 5rem !important; }
+.wr-6 { width: 6rem !important; }
+.wr-7 { width: 7rem !important; }
+.wr-8 { width: 8rem !important; }
+.wr-9 { width: 9rem !important; }
+.wr-10 { width: 10rem !important; }
+.wr-15 { width: 15rem !important; }
+.wr-20 { width: 20rem !important; }
+.wr-25 { width: 25rem !important; }
+.wr-30 { width: 30rem !important; }
+.wr-35 { width: 35rem !important; }
+.wr-40 { width: 40rem !important; }
+.wr-45 { width: 45rem !important; }
+.wr-50 { width: 50rem !important; }
+
+// Min-width (rem)
+.minwr-1 { min-width: 1rem !important; }
+.minwr-2 { min-width: 2rem !important; }
+.minwr-3 { min-width: 3rem !important; }
+.minwr-4 { min-width: 4rem !important; }
+.minwr-5 { min-width: 5rem !important; }
+.minwr-6 { min-width: 6rem !important; }
+.minwr-7 { min-width: 7rem !important; }
+.minwr-8 { min-width: 8rem !important; }
+.minwr-9 { min-width: 9rem !important; }
+.minwr-10 { min-width: 10rem !important; }
+.minwr-15 { min-width: 15rem !important; }
+.minwr-20 { min-width: 20rem !important; }
+.minwr-25 { min-width: 25rem !important; }
+.minwr-30 { min-width: 30rem !important; }
+.minwr-35 { min-width: 35rem !important; }
+.minwr-40 { min-width: 40rem !important; }
+.minwr-45 { min-width: 45rem !important; }
+.minwr-50 { min-width: 50rem !important; }
+
+// Max-width (rem)
+.maxwr-1 { max-width: 1rem !important; }
+.maxwr-2 { max-width: 2rem !important; }
+.maxwr-3 { max-width: 3rem !important; }
+.maxwr-4 { max-width: 4rem !important; }
+.maxwr-5 { max-width: 5rem !important; }
+.maxwr-6 { max-width: 6rem !important; }
+.maxwr-7 { max-width: 7rem !important; }
+.maxwr-8 { max-width: 8rem !important; }
+.maxwr-9 { max-width: 9rem !important; }
+.maxwr-10 { max-width: 10rem !important; }
+.maxwr-15 { max-width: 15rem !important; }
+.maxwr-20 { max-width: 20rem !important; }
+.maxwr-25 { max-width: 25rem !important; }
+.maxwr-30 { max-width: 30rem !important; }
+.maxwr-35 { max-width: 35rem !important; }
+.maxwr-40 { max-width: 40rem !important; }
+.maxwr-45 { max-width: 45rem !important; }
+.maxwr-50 { max-width: 50rem !important; }
+
+// Height (rem)
+.hr-1 { height: 1rem !important; }
+.hr-2 { height: 2rem !important; }
+.hr-3 { height: 3rem !important; }
+.hr-4 { height: 4rem !important; }
+.hr-5 { height: 5rem !important; }
+.hr-6 { height: 6rem !important; }
+.hr-7 { height: 7rem !important; }
+.hr-8 { height: 8rem !important; }
+.hr-9 { height: 9rem !important; }
+.hr-10 { height: 10rem !important; }
+.hr-15 { height: 15rem !important; }
+.hr-20 { height: 20rem !important; }
+.hr-25 { height: 25rem !important; }
+.hr-30 { height: 30rem !important; }
+.hr-35 { height: 35rem !important; }
+.hr-40 { height: 40rem !important; }
+.hr-45 { height: 45rem !important; }
+.hr-50 { height: 50rem !important; }
+
+// Min-height (rem)
+.minhr-1 { min-height: 1rem !important; }
+.minhr-2 { min-height: 2rem !important; }
+.minhr-3 { min-height: 3rem !important; }
+.minhr-4 { min-height: 4rem !important; }
+.minhr-5 { min-height: 5rem !important; }
+.minhr-6 { min-height: 6rem !important; }
+.minhr-7 { min-height: 7rem !important; }
+.minhr-8 { min-height: 8rem !important; }
+.minhr-9 { min-height: 9rem !important; }
+.minhr-10 { min-height: 10rem !important; }
+.minhr-15 { min-height: 15rem !important; }
+.minhr-20 { min-height: 20rem !important; }
+.minhr-25 { min-height: 25rem !important; }
+.minhr-30 { min-height: 30rem !important; }
+.minhr-35 { min-height: 35rem !important; }
+.minhr-40 { min-height: 40rem !important; }
+.minhr-45 { min-height: 45rem !important; }
+.minhr-50 { min-height: 50rem !important; }
+.minhr-60 { min-height: 60rem !important; }
+.minhr-70 { min-height: 70rem !important; }
+.minhr-80 { min-height: 80rem !important; }
+.minhr-90 { min-height: 90rem !important; }
+.minhr-100 { min-height: 100rem !important; }
+
+// Max-height (rem)
+.maxhr-1 { max-height: 1rem !important; }
+.maxhr-2 { max-height: 2rem !important; }
+.maxhr-3 { max-height: 3rem !important; }
+.maxhr-4 { max-height: 4rem !important; }
+.maxhr-5 { max-height: 5rem !important; }
+.maxhr-6 { max-height: 6rem !important; }
+.maxhr-7 { max-height: 7rem !important; }
+.maxhr-8 { max-height: 8rem !important; }
+.maxhr-9 { max-height: 9rem !important; }
+.maxhr-10 { max-height: 10rem !important; }
+.maxhr-15 { max-height: 15rem !important; }
+.maxhr-20 { max-height: 20rem !important; }
+.maxhr-25 { max-height: 25rem !important; }
+.maxhr-30 { max-height: 30rem !important; }
+.maxhr-35 { max-height: 35rem !important; }
+.maxhr-40 { max-height: 40rem !important; }
+.maxhr-45 { max-height: 45rem !important; }
+.maxhr-50 { max-height: 50rem !important; }
+
+// ============================================================================
+// PERCENTAGE-BASED MIN/MAX UTILITIES
+// Extends existing w-* and h-* utilities with min/max variants
+// ============================================================================
+
+// Min-width (percentage) - 5% increments
+.minw-5 { min-width: 5% !important; }
+.minw-10 { min-width: 10% !important; }
+.minw-15 { min-width: 15% !important; }
+.minw-20 { min-width: 20% !important; }
+.minw-25 { min-width: 25% !important; }
+.minw-30 { min-width: 30% !important; }
+.minw-35 { min-width: 35% !important; }
+.minw-40 { min-width: 40% !important; }
+.minw-45 { min-width: 45% !important; }
+.minw-50 { min-width: 50% !important; }
+.minw-55 { min-width: 55% !important; }
+.minw-60 { min-width: 60% !important; }
+.minw-65 { min-width: 65% !important; }
+.minw-70 { min-width: 70% !important; }
+.minw-75 { min-width: 75% !important; }
+.minw-80 { min-width: 80% !important; }
+.minw-85 { min-width: 85% !important; }
+.minw-90 { min-width: 90% !important; }
+.minw-95 { min-width: 95% !important; }
+.minw-100 { min-width: 100% !important; }
+.minw-1-3 { min-width: 33.333333% !important; }
+.minw-2-3 { min-width: 66.666667% !important; }
+
+// Max-width (percentage) - 5% increments
+.maxw-5 { max-width: 5% !important; }
+.maxw-10 { max-width: 10% !important; }
+.maxw-15 { max-width: 15% !important; }
+.maxw-20 { max-width: 20% !important; }
+.maxw-25 { max-width: 25% !important; }
+.maxw-30 { max-width: 30% !important; }
+.maxw-35 { max-width: 35% !important; }
+.maxw-40 { max-width: 40% !important; }
+.maxw-45 { max-width: 45% !important; }
+.maxw-50 { max-width: 50% !important; }
+.maxw-55 { max-width: 55% !important; }
+.maxw-60 { max-width: 60% !important; }
+.maxw-65 { max-width: 65% !important; }
+.maxw-70 { max-width: 70% !important; }
+.maxw-75 { max-width: 75% !important; }
+.maxw-80 { max-width: 80% !important; }
+.maxw-85 { max-width: 85% !important; }
+.maxw-90 { max-width: 90% !important; }
+.maxw-95 { max-width: 95% !important; }
+.maxw-100 { max-width: 100% !important; }
+.maxw-1-2 { max-width: 50% !important; }
+.maxw-1-3 { max-width: 33.333333% !important; }
+.maxw-2-3 { max-width: 66.666667% !important; }
+.maxw-1-4 { max-width: 25% !important; }
+.maxw-3-4 { max-width: 75% !important; }
+
+// Min-height (percentage)
+.minh-5 { min-height: 5% !important; }
+.minh-10 { min-height: 10% !important; }
+.minh-15 { min-height: 15% !important; }
+.minh-20 { min-height: 20% !important; }
+.minh-25 { min-height: 25% !important; }
+.minh-30 { min-height: 30% !important; }
+.minh-35 { min-height: 35% !important; }
+.minh-40 { min-height: 40% !important; }
+.minh-45 { min-height: 45% !important; }
+.minh-50 { min-height: 50% !important; }
+.minh-55 { min-height: 55% !important; }
+.minh-60 { min-height: 60% !important; }
+.minh-65 { min-height: 65% !important; }
+.minh-70 { min-height: 70% !important; }
+.minh-75 { min-height: 75% !important; }
+.minh-80 { min-height: 80% !important; }
+.minh-85 { min-height: 85% !important; }
+.minh-90 { min-height: 90% !important; }
+.minh-95 { min-height: 95% !important; }
+.minh-100 { min-height: 100% !important; }
+.minh-1-2 { min-height: 50% !important; }
+.minh-1-3 { min-height: 33.333333% !important; }
+.minh-2-3 { min-height: 66.666667% !important; }
+.minh-1-4 { min-height: 25% !important; }
+.minh-3-4 { min-height: 75% !important; }
+
+// Max-height (percentage)
+.maxh-5 { max-height: 5% !important; }
+.maxh-10 { max-height: 10% !important; }
+.maxh-15 { max-height: 15% !important; }
+.maxh-20 { max-height: 20% !important; }
+.maxh-25 { max-height: 25% !important; }
+.maxh-30 { max-height: 30% !important; }
+.maxh-35 { max-height: 35% !important; }
+.maxh-40 { max-height: 40% !important; }
+.maxh-45 { max-height: 45% !important; }
+.maxh-50 { max-height: 50% !important; }
+.maxh-55 { max-height: 55% !important; }
+.maxh-60 { max-height: 60% !important; }
+.maxh-65 { max-height: 65% !important; }
+.maxh-70 { max-height: 70% !important; }
+.maxh-75 { max-height: 75% !important; }
+.maxh-80 { max-height: 80% !important; }
+.maxh-85 { max-height: 85% !important; }
+.maxh-90 { max-height: 90% !important; }
+.maxh-95 { max-height: 95% !important; }
+.maxh-100 { max-height: 100% !important; }
+.maxh-1-2 { max-height: 50% !important; }
+.maxh-1-3 { max-height: 33.333333% !important; }
+.maxh-2-3 { max-height: 66.666667% !important; }
+.maxh-1-4 { max-height: 25% !important; }
+.maxh-3-4 { max-height: 75% !important; }
+
+// Position utilities
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+// Border utilities
+.border {
+  border: 1px solid var(--border-color) !important;
+}
+
+.border-top {
+  border-top: 1px solid var(--border-color) !important;
+}
+
+.border-right {
+  border-right: 1px solid var(--border-color) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+.border-left {
+  border-left: 1px solid var(--border-color) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-right-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-left-0 {
+  border-left: 0 !important;
+}
+
+// Border style utilities
+.border-solid { border-style: solid !important; }
+.border-dashed { border-style: dashed !important; }
+.border-dotted { border-style: dotted !important; }
+.border-none { border-style: none !important; }
+
+// Text color utilities (semantic colors)
+.text-primary { color: var(--pa-accent) !important; }
+.text-success { color: var(--pa-success-text) !important; }
+.text-danger { color: var(--pa-danger-text) !important; }
+.text-warning { color: var(--pa-warning-text) !important; }
+.text-info { color: var(--pa-info-text) !important; }
+
+// Text color utilities (theme custom colors 1-9)
+.text-color-1 { color: var(--pa-color-1) !important; }
+.text-color-2 { color: var(--pa-color-2) !important; }
+.text-color-3 { color: var(--pa-color-3) !important; }
+.text-color-4 { color: var(--pa-color-4) !important; }
+.text-color-5 { color: var(--pa-color-5) !important; }
+.text-color-6 { color: var(--pa-color-6) !important; }
+.text-color-7 { color: var(--pa-color-7) !important; }
+.text-color-8 { color: var(--pa-color-8) !important; }
+.text-color-9 { color: var(--pa-color-9) !important; }
+
+// Rounded utilities
+.rounded {
+  border-radius: var(--border-radius) !important;
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-top {
+  border-top-left-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--border-radius) !important;
+}
+
+.rounded-bottom {
+  border-bottom-left-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.rounded-left {
+  border-top-left-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--border-radius) !important;
+}
+
+.rounded-right {
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+// Shadow utilities
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+// ============================================================================
+// Container queries
+// ============================================================================
+
+.pa-cq {
+  container-type: inline-size;
 }