/* ============================================= */
/* SSBCore Utility Classes                       */
/* Based on Design Tokens from ssbcore.css       */
/* Version: 1.0 | Date: 2026-01-12               */
/* ============================================= */

/* ============================================= */
/* TEXT COLORS                                   */
/* ============================================= */

/* Primary palette */
.text-primary-dark { color: var(--ssbcore-primary-dark) !important; }
.text-primary { color: var(--ssbcore-primary) !important; }
.text-primary-light { color: var(--ssbcore-primary-light) !important; }

/* Secondary palette */
.text-secondary-dark { color: var(--ssbcore-secondary-dark) !important; }
.text-secondary { color: var(--ssbcore-secondary) !important; }
.text-secondary-light { color: var(--ssbcore-secondary-light) !important; }

/* Semantic text colors */
.text-body { color: var(--ssbcore-text-primary) !important; }
.text-muted { color: var(--ssbcore-text-secondary) !important; }
.text-disabled { color: var(--ssbcore-text-disabled) !important; }
.text-hint { color: var(--ssbcore-text-hint) !important; }

/* Status text colors */
.text-success { color: var(--ssbcore-success) !important; }
.text-success-light { color: var(--ssbcore-success-light) !important; }
.text-warning { color: var(--ssbcore-warning) !important; }
.text-warning-light { color: var(--ssbcore-warning-light) !important; }
.text-error { color: var(--ssbcore-error) !important; }
.text-error-light { color: var(--ssbcore-error-light) !important; }
.text-info { color: var(--ssbcore-info) !important; }
.text-info-light { color: var(--ssbcore-info-light) !important; }

/* Special text colors */
.text-white { color: #FFFFFF !important; }
.text-on-primary { color: #FFFFFF !important; }
.text-on-dark { color: rgba(255,255,255,0.9) !important; }
.text-on-dark-muted { color: rgba(255,255,255,0.7) !important; }
.text-on-dark-disabled { color: rgba(255,255,255,0.5) !important; }

/* Dark mode text adjustments */
.mud-theme-dark .text-body { color: rgba(255,255,255,0.87) !important; }
.mud-theme-dark .text-muted { color: rgba(255,255,255,0.6) !important; }
.mud-theme-dark .text-disabled { color: rgba(255,255,255,0.38) !important; }
.mud-theme-dark .text-hint { color: rgba(255,255,255,0.38) !important; }

/* ============================================= */
/* BACKGROUND COLORS                             */
/* ============================================= */

/* Primary backgrounds */
.bg-primary-dark { background-color: var(--ssbcore-primary-dark) !important; }
.bg-primary { background-color: var(--ssbcore-primary) !important; }
.bg-primary-light { background-color: var(--ssbcore-primary-light) !important; }
.bg-primary-lightest { background-color: var(--ssbcore-primary-lightest) !important; }

/* Secondary backgrounds */
.bg-secondary-dark { background-color: var(--ssbcore-secondary-dark) !important; }
.bg-secondary { background-color: var(--ssbcore-secondary) !important; }
.bg-secondary-light { background-color: var(--ssbcore-secondary-light) !important; }
.bg-secondary-lightest { background-color: var(--ssbcore-secondary-lightest) !important; }

/* Surface backgrounds */
.bg-base { background-color: var(--ssbcore-bg) !important; }
.bg-surface { background-color: var(--ssbcore-surface) !important; }
.bg-paper { background-color: var(--ssbcore-paper) !important; }

/* Status backgrounds */
.bg-success { background-color: var(--ssbcore-success-bg) !important; }
.bg-warning { background-color: var(--ssbcore-warning-bg) !important; }
.bg-error { background-color: var(--ssbcore-error-bg) !important; }
.bg-info { background-color: var(--ssbcore-info-bg) !important; }

/* Special backgrounds */
.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-overlay-light { background-color: rgba(255,255,255,0.1) !important; }
.bg-overlay-medium { background-color: rgba(255,255,255,0.2) !important; }
.bg-overlay-dark { background-color: rgba(0,0,0,0.1) !important; }

/* Dark mode background adjustments */
.mud-theme-dark .bg-base { background-color: var(--ssbcore-dark-bg) !important; }
.mud-theme-dark .bg-surface { background-color: var(--ssbcore-dark-surface) !important; }
.mud-theme-dark .bg-paper { background-color: var(--ssbcore-dark-paper) !important; }

/* ============================================= */
/* BORDER COLORS                                 */
/* ============================================= */

.border-dark { border-color: var(--ssbcore-border-dark) !important; }
.border-default { border-color: var(--ssbcore-border) !important; }
.border-light { border-color: var(--ssbcore-border-light) !important; }
.border-primary { border-color: var(--ssbcore-primary) !important; }
.border-secondary { border-color: var(--ssbcore-secondary) !important; }
.border-success { border-color: var(--ssbcore-success) !important; }
.border-warning { border-color: var(--ssbcore-warning) !important; }
.border-error { border-color: var(--ssbcore-error) !important; }
.border-info { border-color: var(--ssbcore-info) !important; }
.border-transparent { border-color: transparent !important; }
.border-white { border-color: #FFFFFF !important; }
.border-white-20 { border-color: rgba(255,255,255,0.2) !important; }
.border-white-50 { border-color: rgba(255,255,255,0.5) !important; }

/* Dark mode border adjustments */
.mud-theme-dark .border-default { border-color: var(--ssbcore-dark-border) !important; }
.mud-theme-dark .border-light { border-color: var(--ssbcore-dark-border-light) !important; }

/* ============================================= */
/* SPACING - PADDING                             */
/* ============================================= */

/* All sides padding */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--ssbcore-spacing-xs) !important; }
.p-sm { padding: var(--ssbcore-spacing-sm) !important; }
.p-md { padding: var(--ssbcore-spacing-md) !important; }
.p-lg { padding: var(--ssbcore-spacing-lg) !important; }
.p-xl { padding: var(--ssbcore-spacing-xl) !important; }
.p-xxl { padding: var(--ssbcore-spacing-xxl) !important; }

/* Horizontal padding (left + right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--ssbcore-spacing-xs) !important; padding-right: var(--ssbcore-spacing-xs) !important; }
.px-sm { padding-left: var(--ssbcore-spacing-sm) !important; padding-right: var(--ssbcore-spacing-sm) !important; }
.px-md { padding-left: var(--ssbcore-spacing-md) !important; padding-right: var(--ssbcore-spacing-md) !important; }
.px-lg { padding-left: var(--ssbcore-spacing-lg) !important; padding-right: var(--ssbcore-spacing-lg) !important; }
.px-xl { padding-left: var(--ssbcore-spacing-xl) !important; padding-right: var(--ssbcore-spacing-xl) !important; }
.px-xxl { padding-left: var(--ssbcore-spacing-xxl) !important; padding-right: var(--ssbcore-spacing-xxl) !important; }

/* Vertical padding (top + bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--ssbcore-spacing-xs) !important; padding-bottom: var(--ssbcore-spacing-xs) !important; }
.py-sm { padding-top: var(--ssbcore-spacing-sm) !important; padding-bottom: var(--ssbcore-spacing-sm) !important; }
.py-md { padding-top: var(--ssbcore-spacing-md) !important; padding-bottom: var(--ssbcore-spacing-md) !important; }
.py-lg { padding-top: var(--ssbcore-spacing-lg) !important; padding-bottom: var(--ssbcore-spacing-lg) !important; }
.py-xl { padding-top: var(--ssbcore-spacing-xl) !important; padding-bottom: var(--ssbcore-spacing-xl) !important; }
.py-xxl { padding-top: var(--ssbcore-spacing-xxl) !important; padding-bottom: var(--ssbcore-spacing-xxl) !important; }

/* Top padding */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--ssbcore-spacing-xs) !important; }
.pt-sm { padding-top: var(--ssbcore-spacing-sm) !important; }
.pt-md { padding-top: var(--ssbcore-spacing-md) !important; }
.pt-lg { padding-top: var(--ssbcore-spacing-lg) !important; }
.pt-xl { padding-top: var(--ssbcore-spacing-xl) !important; }
.pt-xxl { padding-top: var(--ssbcore-spacing-xxl) !important; }

/* Right padding */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--ssbcore-spacing-xs) !important; }
.pr-sm { padding-right: var(--ssbcore-spacing-sm) !important; }
.pr-md { padding-right: var(--ssbcore-spacing-md) !important; }
.pr-lg { padding-right: var(--ssbcore-spacing-lg) !important; }
.pr-xl { padding-right: var(--ssbcore-spacing-xl) !important; }
.pr-xxl { padding-right: var(--ssbcore-spacing-xxl) !important; }

/* Bottom padding */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--ssbcore-spacing-xs) !important; }
.pb-sm { padding-bottom: var(--ssbcore-spacing-sm) !important; }
.pb-md { padding-bottom: var(--ssbcore-spacing-md) !important; }
.pb-lg { padding-bottom: var(--ssbcore-spacing-lg) !important; }
.pb-xl { padding-bottom: var(--ssbcore-spacing-xl) !important; }
.pb-xxl { padding-bottom: var(--ssbcore-spacing-xxl) !important; }

/* Left padding */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--ssbcore-spacing-xs) !important; }
.pl-sm { padding-left: var(--ssbcore-spacing-sm) !important; }
.pl-md { padding-left: var(--ssbcore-spacing-md) !important; }
.pl-lg { padding-left: var(--ssbcore-spacing-lg) !important; }
.pl-xl { padding-left: var(--ssbcore-spacing-xl) !important; }
.pl-xxl { padding-left: var(--ssbcore-spacing-xxl) !important; }

/* ============================================= */
/* SPACING - MARGIN                              */
/* ============================================= */

/* All sides margin */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.m-xs { margin: var(--ssbcore-spacing-xs) !important; }
.m-sm { margin: var(--ssbcore-spacing-sm) !important; }
.m-md { margin: var(--ssbcore-spacing-md) !important; }
.m-lg { margin: var(--ssbcore-spacing-lg) !important; }
.m-xl { margin: var(--ssbcore-spacing-xl) !important; }
.m-xxl { margin: var(--ssbcore-spacing-xxl) !important; }

/* Horizontal margin (left + right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-xs { margin-left: var(--ssbcore-spacing-xs) !important; margin-right: var(--ssbcore-spacing-xs) !important; }
.mx-sm { margin-left: var(--ssbcore-spacing-sm) !important; margin-right: var(--ssbcore-spacing-sm) !important; }
.mx-md { margin-left: var(--ssbcore-spacing-md) !important; margin-right: var(--ssbcore-spacing-md) !important; }
.mx-lg { margin-left: var(--ssbcore-spacing-lg) !important; margin-right: var(--ssbcore-spacing-lg) !important; }
.mx-xl { margin-left: var(--ssbcore-spacing-xl) !important; margin-right: var(--ssbcore-spacing-xl) !important; }
.mx-xxl { margin-left: var(--ssbcore-spacing-xxl) !important; margin-right: var(--ssbcore-spacing-xxl) !important; }

/* Vertical margin (top + bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-xs { margin-top: var(--ssbcore-spacing-xs) !important; margin-bottom: var(--ssbcore-spacing-xs) !important; }
.my-sm { margin-top: var(--ssbcore-spacing-sm) !important; margin-bottom: var(--ssbcore-spacing-sm) !important; }
.my-md { margin-top: var(--ssbcore-spacing-md) !important; margin-bottom: var(--ssbcore-spacing-md) !important; }
.my-lg { margin-top: var(--ssbcore-spacing-lg) !important; margin-bottom: var(--ssbcore-spacing-lg) !important; }
.my-xl { margin-top: var(--ssbcore-spacing-xl) !important; margin-bottom: var(--ssbcore-spacing-xl) !important; }
.my-xxl { margin-top: var(--ssbcore-spacing-xxl) !important; margin-bottom: var(--ssbcore-spacing-xxl) !important; }

/* Top margin */
.mt-0 { margin-top: 0 !important; }
.mt-auto { margin-top: auto !important; }
.mt-xs { margin-top: var(--ssbcore-spacing-xs) !important; }
.mt-sm { margin-top: var(--ssbcore-spacing-sm) !important; }
.mt-md { margin-top: var(--ssbcore-spacing-md) !important; }
.mt-lg { margin-top: var(--ssbcore-spacing-lg) !important; }
.mt-xl { margin-top: var(--ssbcore-spacing-xl) !important; }
.mt-xxl { margin-top: var(--ssbcore-spacing-xxl) !important; }

/* Right margin */
.mr-0 { margin-right: 0 !important; }
.mr-auto { margin-right: auto !important; }
.mr-xs { margin-right: var(--ssbcore-spacing-xs) !important; }
.mr-sm { margin-right: var(--ssbcore-spacing-sm) !important; }
.mr-md { margin-right: var(--ssbcore-spacing-md) !important; }
.mr-lg { margin-right: var(--ssbcore-spacing-lg) !important; }
.mr-xl { margin-right: var(--ssbcore-spacing-xl) !important; }
.mr-xxl { margin-right: var(--ssbcore-spacing-xxl) !important; }

/* Bottom margin */
.mb-0 { margin-bottom: 0 !important; }
.mb-auto { margin-bottom: auto !important; }
.mb-xs { margin-bottom: var(--ssbcore-spacing-xs) !important; }
.mb-sm { margin-bottom: var(--ssbcore-spacing-sm) !important; }
.mb-md { margin-bottom: var(--ssbcore-spacing-md) !important; }
.mb-lg { margin-bottom: var(--ssbcore-spacing-lg) !important; }
.mb-xl { margin-bottom: var(--ssbcore-spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--ssbcore-spacing-xxl) !important; }

/* Left margin */
.ml-0 { margin-left: 0 !important; }
.ml-auto { margin-left: auto !important; }
.ml-xs { margin-left: var(--ssbcore-spacing-xs) !important; }
.ml-sm { margin-left: var(--ssbcore-spacing-sm) !important; }
.ml-md { margin-left: var(--ssbcore-spacing-md) !important; }
.ml-lg { margin-left: var(--ssbcore-spacing-lg) !important; }
.ml-xl { margin-left: var(--ssbcore-spacing-xl) !important; }
.ml-xxl { margin-left: var(--ssbcore-spacing-xxl) !important; }

/* ============================================= */
/* GAP (for flexbox/grid)                        */
/* ============================================= */

.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--ssbcore-spacing-xs) !important; }
.gap-sm { gap: var(--ssbcore-spacing-sm) !important; }
.gap-md { gap: var(--ssbcore-spacing-md) !important; }
.gap-lg { gap: var(--ssbcore-spacing-lg) !important; }
.gap-xl { gap: var(--ssbcore-spacing-xl) !important; }
.gap-xxl { gap: var(--ssbcore-spacing-xxl) !important; }

/* Row gap */
.gap-y-xs { row-gap: var(--ssbcore-spacing-xs) !important; }
.gap-y-sm { row-gap: var(--ssbcore-spacing-sm) !important; }
.gap-y-md { row-gap: var(--ssbcore-spacing-md) !important; }
.gap-y-lg { row-gap: var(--ssbcore-spacing-lg) !important; }

/* Column gap */
.gap-x-xs { column-gap: var(--ssbcore-spacing-xs) !important; }
.gap-x-sm { column-gap: var(--ssbcore-spacing-sm) !important; }
.gap-x-md { column-gap: var(--ssbcore-spacing-md) !important; }
.gap-x-lg { column-gap: var(--ssbcore-spacing-lg) !important; }

/* ============================================= */
/* TYPOGRAPHY - FONT SIZE                        */
/* ============================================= */

.text-2xs { font-size: 10px !important; }
.text-xs { font-size: 11px !important; }
.text-sm { font-size: 12px !important; }
.text-md { font-size: 14px !important; }
.text-base { font-size: 14px !important; }
.text-lg { font-size: 16px !important; }
.text-xl { font-size: 18px !important; }
.text-2xl { font-size: 20px !important; }
.text-3xl { font-size: 24px !important; }
.text-4xl { font-size: 32px !important; }
.text-5xl { font-size: 40px !important; }
.text-6xl { font-size: 48px !important; }

/* Icon sizes (for MudIcon) */
.icon-xs { font-size: 16px !important; }
.icon-sm { font-size: 20px !important; }
.icon-md { font-size: 24px !important; }
.icon-lg { font-size: 32px !important; }
.icon-xl { font-size: 40px !important; }
.icon-2xl { font-size: 48px !important; }
.icon-3xl { font-size: 64px !important; }
.icon-4xl { font-size: 4rem !important; }

/* ============================================= */
/* TYPOGRAPHY - FONT WEIGHT                      */
/* ============================================= */

.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-regular { 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; }

/* ============================================= */
/* TYPOGRAPHY - TEXT ALIGNMENT                   */
/* ============================================= */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ============================================= */
/* TYPOGRAPHY - TEXT TRANSFORM                   */
/* ============================================= */

.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ============================================= */
/* TYPOGRAPHY - TEXT DECORATION                  */
/* ============================================= */

.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* ============================================= */
/* TYPOGRAPHY - 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; }

/* ============================================= */
/* TYPOGRAPHY - LETTER SPACING                   */
/* ============================================= */

.tracking-tight { letter-spacing: -0.5px !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.5px !important; }
.tracking-wider { letter-spacing: 1px !important; }

/* ============================================= */
/* TYPOGRAPHY - TEXT OVERFLOW                    */
/* ============================================= */

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

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.break-words { word-wrap: break-word !important; overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }

/* ============================================= */
/* BORDER RADIUS                                 */
/* ============================================= */

.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--ssbcore-radius-sm) !important; }
.rounded-md { border-radius: var(--ssbcore-radius-md) !important; }
.rounded { border-radius: var(--ssbcore-radius-md) !important; }
.rounded-lg { border-radius: var(--ssbcore-radius-lg) !important; }
.rounded-xl { border-radius: var(--ssbcore-radius-xl) !important; }
.rounded-full { border-radius: 9999px !important; }

/* Individual corners */
.rounded-t-md { border-top-left-radius: var(--ssbcore-radius-md) !important; border-top-right-radius: var(--ssbcore-radius-md) !important; }
.rounded-b-md { border-bottom-left-radius: var(--ssbcore-radius-md) !important; border-bottom-right-radius: var(--ssbcore-radius-md) !important; }
.rounded-l-md { border-top-left-radius: var(--ssbcore-radius-md) !important; border-bottom-left-radius: var(--ssbcore-radius-md) !important; }
.rounded-r-md { border-top-right-radius: var(--ssbcore-radius-md) !important; border-bottom-right-radius: var(--ssbcore-radius-md) !important; }

/* ============================================= */
/* BOX SHADOW                                    */
/* ============================================= */

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--ssbcore-shadow-sm) !important; }
.shadow-md { box-shadow: var(--ssbcore-shadow-md) !important; }
.shadow { box-shadow: var(--ssbcore-shadow-md) !important; }
.shadow-lg { box-shadow: var(--ssbcore-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--ssbcore-shadow-xl) !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-3 { border-width: 3px !important; border-style: solid !important; }
.border-4 { border-width: 4px !important; border-style: solid !important; }

/* Individual sides */
.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 styles */
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }

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

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-contents { display: contents !important; }

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

/* Flex direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col { flex-direction: column !important; }
.flex-column { 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; }

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

/* 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; }
.flex-grow { flex-grow: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-shrink { flex-shrink: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* ============================================= */
/* WIDTH & HEIGHT                                */
/* ============================================= */

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

/* Min/Max width */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Height */
.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-min { height: min-content !important; }
.h-max { height: max-content !important; }
.h-fit { height: fit-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; }

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

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

/* Positioning */
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 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; }
.z-auto { z-index: auto !important; }

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

.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-y-auto { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ============================================= */
/* VISIBILITY & OPACITY                          */
/* ============================================= */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-85 { opacity: 0.85 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }

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

.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; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !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; }

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

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

/* ============================================= */
/* TRANSITIONS                                   */
/* ============================================= */

.transition-none { transition: none !important; }
.transition-fast { transition: all var(--ssbcore-transition-fast) !important; }
.transition { transition: all var(--ssbcore-transition-normal) !important; }
.transition-slow { transition: all var(--ssbcore-transition-slow) !important; }

.transition-colors {
    transition-property: color, background-color, border-color !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease !important;
}

.transition-opacity {
    transition-property: opacity !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease !important;
}

.transition-transform {
    transition-property: transform !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease !important;
}

/* ============================================= */
/* RESPONSIVE UTILITIES                          */
/* ============================================= */

/* Mobile-first breakpoints:
   - xs: 0-359px (Mobile Small)
   - sm: 360-767px (Mobile)
   - md: 768-959px (Tablet)
   - lg: 960-1199px (Desktop)
   - xl: 1200-1919px (Desktop Large)
   - xxl: 1920px+ (Desktop Extra Large)
*/

/* Hide on specific breakpoints */
@media (max-width: 359px) {
    .hide-xs { display: none !important; }
}

@media (min-width: 360px) and (max-width: 767px) {
    .hide-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 959px) {
    .hide-md { display: none !important; }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .hide-lg { display: none !important; }
}

@media (min-width: 1200px) {
    .hide-xl { display: none !important; }
}

/* Show only on specific breakpoints */
@media (max-width: 359px) {
    .show-xs-only { display: block !important; }
}
@media (min-width: 360px) {
    .show-xs-only { display: none !important; }
}

@media (min-width: 360px) and (max-width: 767px) {
    .show-sm-only { display: block !important; }
}
@media (max-width: 359px), (min-width: 768px) {
    .show-sm-only { display: none !important; }
}

@media (min-width: 768px) and (max-width: 959px) {
    .show-md-only { display: block !important; }
}
@media (max-width: 767px), (min-width: 960px) {
    .show-md-only { display: none !important; }
}

/* Mobile: hide on tablet and up */
.hide-tablet-up { display: block !important; }
@media (min-width: 768px) {
    .hide-tablet-up { display: none !important; }
}

/* Desktop: hide on mobile */
.hide-mobile { display: block !important; }
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Show only on mobile */
.show-mobile-only { display: none !important; }
@media (max-width: 767px) {
    .show-mobile-only { display: block !important; }
}

/* Show only on desktop */
.show-desktop-only { display: none !important; }
@media (min-width: 960px) {
    .show-desktop-only { display: block !important; }
}

/* Responsive text alignment */
@media (max-width: 767px) {
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
}

@media (min-width: 768px) {
    .text-center-tablet { text-align: center !important; }
    .text-left-tablet { text-align: left !important; }
}

/* Responsive flex direction */
@media (max-width: 767px) {
    .flex-col-mobile { flex-direction: column !important; }
    .flex-row-mobile { flex-direction: row !important; }
}

/* ============================================= */
/* COMPONENT UTILITIES                           */
/* ============================================= */

/* Empty state container */
.empty-state {
    text-align: center;
    padding: var(--ssbcore-spacing-xxl);
    color: var(--ssbcore-text-secondary);
}

.empty-state-icon {
    font-size: 48px;
    color: var(--ssbcore-border);
    margin-bottom: var(--ssbcore-spacing-md);
}

/* Card container */
.card-container {
    background: var(--ssbcore-paper);
    border-radius: var(--ssbcore-radius-md);
    padding: var(--ssbcore-spacing-md);
    box-shadow: var(--ssbcore-shadow-sm);
    border: 1px solid var(--ssbcore-border-light);
}

.mud-theme-dark .card-container {
    background: var(--ssbcore-dark-surface);
    border-color: var(--ssbcore-dark-border);
}

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ssbcore-spacing-md);
}

/* Divider with text */
.divider-with-text {
    display: flex;
    align-items: center;
    gap: var(--ssbcore-spacing-md);
    color: var(--ssbcore-text-hint);
    font-size: 12px;
}

.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ssbcore-border);
}

/* Avatar placeholder */
.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ssbcore-primary-lightest);
    color: var(--ssbcore-primary);
    font-weight: 600;
    border-radius: 50%;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--ssbcore-border-light) 25%, var(--ssbcore-surface) 50%, var(--ssbcore-border-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--ssbcore-radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hover effects */
.hover-lift {
    transition: transform var(--ssbcore-transition-fast), box-shadow var(--ssbcore-transition-fast);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--ssbcore-shadow-lg);
}

.hover-bg-light:hover {
    background-color: var(--ssbcore-surface) !important;
}

.hover-bg-primary-light:hover {
    background-color: var(--ssbcore-primary-lightest) !important;
}

/* Focus styles */
.focus-ring:focus {
    outline: 2px solid var(--ssbcore-primary);
    outline-offset: 2px;
}

.focus-ring:focus:not(:focus-visible) {
    outline: none;
}

/* Scrollable container */
.scrollable {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ssbcore-border-dark) transparent;
}

.scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollable::-webkit-scrollbar-thumb {
    background: var(--ssbcore-border-dark);
    border-radius: 3px;
}

/* Clickable area */
.clickable {
    cursor: pointer;
    user-select: none;
}

.clickable:active {
    opacity: 0.8;
}

/* ============================================= */
/* SEVERITY COLORS                               */
/* ============================================= */

/* Severity text colors */
.text-severity-critical { color: var(--ssbcore-severity-critical) !important; }
.text-severity-high { color: var(--ssbcore-severity-high) !important; }
.text-severity-medium { color: var(--ssbcore-severity-medium) !important; }
.text-severity-low { color: var(--ssbcore-severity-low) !important; }
.text-severity-active { color: var(--ssbcore-severity-active) !important; }

/* Severity border colors */
.border-severity-critical { border-color: var(--ssbcore-severity-critical) !important; }
.border-severity-high { border-color: var(--ssbcore-severity-high) !important; }
.border-severity-medium { border-color: var(--ssbcore-severity-medium) !important; }
.border-severity-low { border-color: var(--ssbcore-severity-low) !important; }
.border-severity-active { border-color: var(--ssbcore-severity-active) !important; }

/* Severity card styles (border-left + hover background) */
.severity-card-critical {
    border-left: 4px solid var(--ssbcore-severity-critical);
    cursor: pointer;
    transition: all 0.2s ease;
}
.severity-card-critical.active {
    background-color: color-mix(in srgb, var(--ssbcore-severity-critical) 8%, transparent);
    transform: scale(1.02);
}

.severity-card-high {
    border-left: 4px solid var(--ssbcore-severity-high);
    cursor: pointer;
    transition: all 0.2s ease;
}
.severity-card-high.active {
    background-color: color-mix(in srgb, var(--ssbcore-severity-high) 8%, transparent);
    transform: scale(1.02);
}

.severity-card-medium {
    border-left: 4px solid var(--ssbcore-severity-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}
.severity-card-medium.active {
    background-color: color-mix(in srgb, var(--ssbcore-severity-medium) 8%, transparent);
    transform: scale(1.02);
}

.severity-card-low {
    border-left: 4px solid var(--ssbcore-severity-low);
    cursor: pointer;
    transition: all 0.2s ease;
}
.severity-card-low.active {
    background-color: color-mix(in srgb, var(--ssbcore-severity-low) 8%, transparent);
    transform: scale(1.02);
}

.severity-card-active {
    border-left: 4px solid var(--ssbcore-severity-active);
    cursor: pointer;
    transition: all 0.2s ease;
}
.severity-card-active.active {
    background-color: color-mix(in srgb, var(--ssbcore-severity-active) 8%, transparent);
    transform: scale(1.02);
}

/* ============================================= */
/* UTILITY MAPPING TO MUDBLAZOR                  */
/* ============================================= */
/* Reference for developers:
   MudBlazor pa-4 = p-md (16px)
   MudBlazor pa-6 = p-lg (24px)
   MudBlazor ma-2 = m-sm (8px)
   MudBlazor ma-4 = m-md (16px)
*/