/* ==========================================================
   BA.UI Responsive Utilities
   Version: 1.0

   Consistent breakpoints and utility classes for responsive design.
   Mobile-first approach with Bootstrap-compatible breakpoints.
   ========================================================== */

/* ==========================================================
   BREAKPOINT REFERENCE (for documentation)
   ----------------------------------------------------------
   xs: 0px      - Extra small (phones portrait)
   sm: 576px   - Small (phones landscape)
   md: 768px   - Medium (tablets)
   lg: 992px   - Large (desktops)
   xl: 1200px  - Extra large (large desktops)
   xxl: 1400px - Extra extra large (wide screens)
   ========================================================== */

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

/* Hide on specific breakpoints */
.ba-hide-xs { display: none !important; }

@media (min-width: 576px) {
    .ba-hide-xs { display: initial !important; }
    .ba-hide-sm { display: none !important; }
}

@media (min-width: 768px) {
    .ba-hide-sm { display: initial !important; }
    .ba-hide-md { display: none !important; }
}

@media (min-width: 992px) {
    .ba-hide-md { display: initial !important; }
    .ba-hide-lg { display: none !important; }
}

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

@media (min-width: 1400px) {
    .ba-hide-xl { display: initial !important; }
}

/* Show only on specific breakpoints */
.ba-show-xs { display: initial !important; }
.ba-show-sm,
.ba-show-md,
.ba-show-lg,
.ba-show-xl { display: none !important; }

@media (min-width: 576px) {
    .ba-show-xs { display: none !important; }
    .ba-show-sm { display: initial !important; }
}

@media (min-width: 768px) {
    .ba-show-sm { display: none !important; }
    .ba-show-md { display: initial !important; }
}

@media (min-width: 992px) {
    .ba-show-md { display: none !important; }
    .ba-show-lg { display: initial !important; }
}

@media (min-width: 1200px) {
    .ba-show-lg { display: none !important; }
    .ba-show-xl { display: initial !important; }
}

/* Display variants */
.ba-d-none { display: none !important; }
.ba-d-block { display: block !important; }
.ba-d-inline { display: inline !important; }
.ba-d-inline-block { display: inline-block !important; }
.ba-d-flex { display: flex !important; }
.ba-d-inline-flex { display: inline-flex !important; }
.ba-d-grid { display: grid !important; }

@media (min-width: 576px) {
    .ba-d-sm-none { display: none !important; }
    .ba-d-sm-block { display: block !important; }
    .ba-d-sm-inline { display: inline !important; }
    .ba-d-sm-inline-block { display: inline-block !important; }
    .ba-d-sm-flex { display: flex !important; }
    .ba-d-sm-inline-flex { display: inline-flex !important; }
    .ba-d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
    .ba-d-md-none { display: none !important; }
    .ba-d-md-block { display: block !important; }
    .ba-d-md-inline { display: inline !important; }
    .ba-d-md-inline-block { display: inline-block !important; }
    .ba-d-md-flex { display: flex !important; }
    .ba-d-md-inline-flex { display: inline-flex !important; }
    .ba-d-md-grid { display: grid !important; }
}

@media (min-width: 992px) {
    .ba-d-lg-none { display: none !important; }
    .ba-d-lg-block { display: block !important; }
    .ba-d-lg-inline { display: inline !important; }
    .ba-d-lg-inline-block { display: inline-block !important; }
    .ba-d-lg-flex { display: flex !important; }
    .ba-d-lg-inline-flex { display: inline-flex !important; }
    .ba-d-lg-grid { display: grid !important; }
}

@media (min-width: 1200px) {
    .ba-d-xl-none { display: none !important; }
    .ba-d-xl-block { display: block !important; }
    .ba-d-xl-inline { display: inline !important; }
    .ba-d-xl-inline-block { display: inline-block !important; }
    .ba-d-xl-flex { display: flex !important; }
    .ba-d-xl-inline-flex { display: inline-flex !important; }
    .ba-d-xl-grid { display: grid !important; }
}

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

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

@media (min-width: 576px) {
    .ba-flex-sm-row { flex-direction: row !important; }
    .ba-flex-sm-column { flex-direction: column !important; }
}

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

@media (min-width: 992px) {
    .ba-flex-lg-row { flex-direction: row !important; }
    .ba-flex-lg-column { flex-direction: column !important; }
}

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

@media (min-width: 768px) {
    .ba-flex-md-wrap { flex-wrap: wrap !important; }
    .ba-flex-md-nowrap { flex-wrap: nowrap !important; }
}

/* Justify Content */
.ba-justify-start { justify-content: flex-start !important; }
.ba-justify-end { justify-content: flex-end !important; }
.ba-justify-center { justify-content: center !important; }
.ba-justify-between { justify-content: space-between !important; }
.ba-justify-around { justify-content: space-around !important; }
.ba-justify-evenly { justify-content: space-evenly !important; }

@media (min-width: 768px) {
    .ba-justify-md-start { justify-content: flex-start !important; }
    .ba-justify-md-end { justify-content: flex-end !important; }
    .ba-justify-md-center { justify-content: center !important; }
    .ba-justify-md-between { justify-content: space-between !important; }
}

/* Align Items */
.ba-align-start { align-items: flex-start !important; }
.ba-align-end { align-items: flex-end !important; }
.ba-align-center { align-items: center !important; }
.ba-align-baseline { align-items: baseline !important; }
.ba-align-stretch { align-items: stretch !important; }

@media (min-width: 768px) {
    .ba-align-md-start { align-items: flex-start !important; }
    .ba-align-md-end { align-items: flex-end !important; }
    .ba-align-md-center { align-items: center !important; }
}

/* Gap */
.ba-gap-0 { gap: 0 !important; }
.ba-gap-1 { gap: var(--ba-space-1, 4px) !important; }
.ba-gap-2 { gap: var(--ba-space-2, 8px) !important; }
.ba-gap-3 { gap: var(--ba-space-3, 12px) !important; }
.ba-gap-4 { gap: var(--ba-space-4, 16px) !important; }
.ba-gap-5 { gap: var(--ba-space-5, 20px) !important; }
.ba-gap-6 { gap: var(--ba-space-6, 24px) !important; }

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

.ba-w-auto { width: auto !important; }
.ba-w-25 { width: 25% !important; }
.ba-w-33 { width: 33.333% !important; }
.ba-w-50 { width: 50% !important; }
.ba-w-66 { width: 66.666% !important; }
.ba-w-75 { width: 75% !important; }
.ba-w-100 { width: 100% !important; }

@media (min-width: 576px) {
    .ba-w-sm-auto { width: auto !important; }
    .ba-w-sm-25 { width: 25% !important; }
    .ba-w-sm-33 { width: 33.333% !important; }
    .ba-w-sm-50 { width: 50% !important; }
    .ba-w-sm-66 { width: 66.666% !important; }
    .ba-w-sm-75 { width: 75% !important; }
    .ba-w-sm-100 { width: 100% !important; }
}

@media (min-width: 768px) {
    .ba-w-md-auto { width: auto !important; }
    .ba-w-md-25 { width: 25% !important; }
    .ba-w-md-33 { width: 33.333% !important; }
    .ba-w-md-50 { width: 50% !important; }
    .ba-w-md-66 { width: 66.666% !important; }
    .ba-w-md-75 { width: 75% !important; }
    .ba-w-md-100 { width: 100% !important; }
}

@media (min-width: 992px) {
    .ba-w-lg-auto { width: auto !important; }
    .ba-w-lg-25 { width: 25% !important; }
    .ba-w-lg-33 { width: 33.333% !important; }
    .ba-w-lg-50 { width: 50% !important; }
    .ba-w-lg-66 { width: 66.666% !important; }
    .ba-w-lg-75 { width: 75% !important; }
    .ba-w-lg-100 { width: 100% !important; }
}

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

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

@media (min-width: 576px) {
    .ba-text-sm-left { text-align: left !important; }
    .ba-text-sm-center { text-align: center !important; }
    .ba-text-sm-right { text-align: right !important; }
}

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

@media (min-width: 992px) {
    .ba-text-lg-left { text-align: left !important; }
    .ba-text-lg-center { text-align: center !important; }
    .ba-text-lg-right { text-align: right !important; }
}

/* Text wrapping */
.ba-text-nowrap { white-space: nowrap !important; }
.ba-text-wrap { white-space: normal !important; }
.ba-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ==========================================================
   SPACING UTILITIES (margin & padding)
   ========================================================== */

/* Margin */
.ba-m-0 { margin: 0 !important; }
.ba-m-1 { margin: var(--ba-space-1, 4px) !important; }
.ba-m-2 { margin: var(--ba-space-2, 8px) !important; }
.ba-m-3 { margin: var(--ba-space-3, 12px) !important; }
.ba-m-4 { margin: var(--ba-space-4, 16px) !important; }
.ba-m-5 { margin: var(--ba-space-5, 20px) !important; }
.ba-m-6 { margin: var(--ba-space-6, 24px) !important; }
.ba-m-auto { margin: auto !important; }

.ba-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.ba-mx-1 { margin-left: var(--ba-space-1, 4px) !important; margin-right: var(--ba-space-1, 4px) !important; }
.ba-mx-2 { margin-left: var(--ba-space-2, 8px) !important; margin-right: var(--ba-space-2, 8px) !important; }
.ba-mx-3 { margin-left: var(--ba-space-3, 12px) !important; margin-right: var(--ba-space-3, 12px) !important; }
.ba-mx-4 { margin-left: var(--ba-space-4, 16px) !important; margin-right: var(--ba-space-4, 16px) !important; }
.ba-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.ba-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.ba-my-1 { margin-top: var(--ba-space-1, 4px) !important; margin-bottom: var(--ba-space-1, 4px) !important; }
.ba-my-2 { margin-top: var(--ba-space-2, 8px) !important; margin-bottom: var(--ba-space-2, 8px) !important; }
.ba-my-3 { margin-top: var(--ba-space-3, 12px) !important; margin-bottom: var(--ba-space-3, 12px) !important; }
.ba-my-4 { margin-top: var(--ba-space-4, 16px) !important; margin-bottom: var(--ba-space-4, 16px) !important; }
.ba-my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.ba-mt-0 { margin-top: 0 !important; }
.ba-mt-1 { margin-top: var(--ba-space-1, 4px) !important; }
.ba-mt-2 { margin-top: var(--ba-space-2, 8px) !important; }
.ba-mt-3 { margin-top: var(--ba-space-3, 12px) !important; }
.ba-mt-4 { margin-top: var(--ba-space-4, 16px) !important; }
.ba-mt-5 { margin-top: var(--ba-space-5, 20px) !important; }
.ba-mt-6 { margin-top: var(--ba-space-6, 24px) !important; }

.ba-mb-0 { margin-bottom: 0 !important; }
.ba-mb-1 { margin-bottom: var(--ba-space-1, 4px) !important; }
.ba-mb-2 { margin-bottom: var(--ba-space-2, 8px) !important; }
.ba-mb-3 { margin-bottom: var(--ba-space-3, 12px) !important; }
.ba-mb-4 { margin-bottom: var(--ba-space-4, 16px) !important; }
.ba-mb-5 { margin-bottom: var(--ba-space-5, 20px) !important; }
.ba-mb-6 { margin-bottom: var(--ba-space-6, 24px) !important; }

.ba-ml-0 { margin-left: 0 !important; }
.ba-ml-1 { margin-left: var(--ba-space-1, 4px) !important; }
.ba-ml-2 { margin-left: var(--ba-space-2, 8px) !important; }
.ba-ml-3 { margin-left: var(--ba-space-3, 12px) !important; }
.ba-ml-4 { margin-left: var(--ba-space-4, 16px) !important; }
.ba-ml-auto { margin-left: auto !important; }

.ba-mr-0 { margin-right: 0 !important; }
.ba-mr-1 { margin-right: var(--ba-space-1, 4px) !important; }
.ba-mr-2 { margin-right: var(--ba-space-2, 8px) !important; }
.ba-mr-3 { margin-right: var(--ba-space-3, 12px) !important; }
.ba-mr-4 { margin-right: var(--ba-space-4, 16px) !important; }
.ba-mr-auto { margin-right: auto !important; }

/* Padding */
.ba-p-0 { padding: 0 !important; }
.ba-p-1 { padding: var(--ba-space-1, 4px) !important; }
.ba-p-2 { padding: var(--ba-space-2, 8px) !important; }
.ba-p-3 { padding: var(--ba-space-3, 12px) !important; }
.ba-p-4 { padding: var(--ba-space-4, 16px) !important; }
.ba-p-5 { padding: var(--ba-space-5, 20px) !important; }
.ba-p-6 { padding: var(--ba-space-6, 24px) !important; }

.ba-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.ba-px-1 { padding-left: var(--ba-space-1, 4px) !important; padding-right: var(--ba-space-1, 4px) !important; }
.ba-px-2 { padding-left: var(--ba-space-2, 8px) !important; padding-right: var(--ba-space-2, 8px) !important; }
.ba-px-3 { padding-left: var(--ba-space-3, 12px) !important; padding-right: var(--ba-space-3, 12px) !important; }
.ba-px-4 { padding-left: var(--ba-space-4, 16px) !important; padding-right: var(--ba-space-4, 16px) !important; }
.ba-px-5 { padding-left: var(--ba-space-5, 20px) !important; padding-right: var(--ba-space-5, 20px) !important; }
.ba-px-6 { padding-left: var(--ba-space-6, 24px) !important; padding-right: var(--ba-space-6, 24px) !important; }

.ba-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.ba-py-1 { padding-top: var(--ba-space-1, 4px) !important; padding-bottom: var(--ba-space-1, 4px) !important; }
.ba-py-2 { padding-top: var(--ba-space-2, 8px) !important; padding-bottom: var(--ba-space-2, 8px) !important; }
.ba-py-3 { padding-top: var(--ba-space-3, 12px) !important; padding-bottom: var(--ba-space-3, 12px) !important; }
.ba-py-4 { padding-top: var(--ba-space-4, 16px) !important; padding-bottom: var(--ba-space-4, 16px) !important; }
.ba-py-5 { padding-top: var(--ba-space-5, 20px) !important; padding-bottom: var(--ba-space-5, 20px) !important; }
.ba-py-6 { padding-top: var(--ba-space-6, 24px) !important; padding-bottom: var(--ba-space-6, 24px) !important; }

.ba-pt-0 { padding-top: 0 !important; }
.ba-pt-1 { padding-top: var(--ba-space-1, 4px) !important; }
.ba-pt-2 { padding-top: var(--ba-space-2, 8px) !important; }
.ba-pt-3 { padding-top: var(--ba-space-3, 12px) !important; }
.ba-pt-4 { padding-top: var(--ba-space-4, 16px) !important; }

.ba-pb-0 { padding-bottom: 0 !important; }
.ba-pb-1 { padding-bottom: var(--ba-space-1, 4px) !important; }
.ba-pb-2 { padding-bottom: var(--ba-space-2, 8px) !important; }
.ba-pb-3 { padding-bottom: var(--ba-space-3, 12px) !important; }
.ba-pb-4 { padding-bottom: var(--ba-space-4, 16px) !important; }

.ba-pl-0 { padding-left: 0 !important; }
.ba-pl-1 { padding-left: var(--ba-space-1, 4px) !important; }
.ba-pl-2 { padding-left: var(--ba-space-2, 8px) !important; }
.ba-pl-3 { padding-left: var(--ba-space-3, 12px) !important; }
.ba-pl-4 { padding-left: var(--ba-space-4, 16px) !important; }

.ba-pr-0 { padding-right: 0 !important; }
.ba-pr-1 { padding-right: var(--ba-space-1, 4px) !important; }
.ba-pr-2 { padding-right: var(--ba-space-2, 8px) !important; }
.ba-pr-3 { padding-right: var(--ba-space-3, 12px) !important; }
.ba-pr-4 { padding-right: var(--ba-space-4, 16px) !important; }

/* Responsive spacing */
@media (min-width: 768px) {
    .ba-m-md-0 { margin: 0 !important; }
    .ba-m-md-4 { margin: var(--ba-space-4, 16px) !important; }
    .ba-mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .ba-my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .ba-mt-md-0 { margin-top: 0 !important; }
    .ba-mb-md-0 { margin-bottom: 0 !important; }
    .ba-p-md-0 { padding: 0 !important; }
    .ba-p-md-4 { padding: var(--ba-space-4, 16px) !important; }
    .ba-p-md-5 { padding: var(--ba-space-5, 20px) !important; }
    .ba-p-md-6 { padding: var(--ba-space-6, 24px) !important; }
    .ba-px-md-4 { padding-left: var(--ba-space-4, 16px) !important; padding-right: var(--ba-space-4, 16px) !important; }
    .ba-px-md-5 { padding-left: var(--ba-space-5, 20px) !important; padding-right: var(--ba-space-5, 20px) !important; }
    .ba-py-md-4 { padding-top: var(--ba-space-4, 16px) !important; padding-bottom: var(--ba-space-4, 16px) !important; }
}

@media (min-width: 992px) {
    .ba-m-lg-0 { margin: 0 !important; }
    .ba-mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .ba-p-lg-0 { padding: 0 !important; }
    .ba-p-lg-5 { padding: var(--ba-space-5, 20px) !important; }
    .ba-p-lg-6 { padding: var(--ba-space-6, 24px) !important; }
    .ba-px-lg-5 { padding-left: var(--ba-space-5, 20px) !important; padding-right: var(--ba-space-5, 20px) !important; }
    .ba-px-lg-6 { padding-left: var(--ba-space-6, 24px) !important; padding-right: var(--ba-space-6, 24px) !important; }
}

/* ==========================================================
   RESPONSIVE GRID SYSTEM
   ========================================================== */

.ba-container {
    width: 100%;
    padding-left: var(--ba-space-4, 16px);
    padding-right: var(--ba-space-4, 16px);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .ba-container { max-width: 540px; }
}

@media (min-width: 768px) {
    .ba-container { max-width: 720px; }
}

@media (min-width: 992px) {
    .ba-container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .ba-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .ba-container { max-width: 1320px; }
}

.ba-container-fluid {
    width: 100%;
    padding-left: var(--ba-space-4, 16px);
    padding-right: var(--ba-space-4, 16px);
    margin-left: auto;
    margin-right: auto;
}

/* Row */
.ba-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--ba-space-3, 12px) * -1);
    margin-right: calc(var(--ba-space-3, 12px) * -1);
}

.ba-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: var(--ba-space-3, 12px);
    padding-right: var(--ba-space-3, 12px);
}

/* Columns */
.ba-col { flex: 1 0 0%; }
.ba-col-auto { flex: 0 0 auto; width: auto; }
.ba-col-1 { flex: 0 0 auto; width: 8.333333%; }
.ba-col-2 { flex: 0 0 auto; width: 16.666667%; }
.ba-col-3 { flex: 0 0 auto; width: 25%; }
.ba-col-4 { flex: 0 0 auto; width: 33.333333%; }
.ba-col-5 { flex: 0 0 auto; width: 41.666667%; }
.ba-col-6 { flex: 0 0 auto; width: 50%; }
.ba-col-7 { flex: 0 0 auto; width: 58.333333%; }
.ba-col-8 { flex: 0 0 auto; width: 66.666667%; }
.ba-col-9 { flex: 0 0 auto; width: 75%; }
.ba-col-10 { flex: 0 0 auto; width: 83.333333%; }
.ba-col-11 { flex: 0 0 auto; width: 91.666667%; }
.ba-col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .ba-col-sm { flex: 1 0 0%; }
    .ba-col-sm-auto { flex: 0 0 auto; width: auto; }
    .ba-col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .ba-col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .ba-col-sm-3 { flex: 0 0 auto; width: 25%; }
    .ba-col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .ba-col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .ba-col-sm-6 { flex: 0 0 auto; width: 50%; }
    .ba-col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .ba-col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .ba-col-sm-9 { flex: 0 0 auto; width: 75%; }
    .ba-col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .ba-col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .ba-col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .ba-col-md { flex: 1 0 0%; }
    .ba-col-md-auto { flex: 0 0 auto; width: auto; }
    .ba-col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .ba-col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .ba-col-md-3 { flex: 0 0 auto; width: 25%; }
    .ba-col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .ba-col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .ba-col-md-6 { flex: 0 0 auto; width: 50%; }
    .ba-col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .ba-col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .ba-col-md-9 { flex: 0 0 auto; width: 75%; }
    .ba-col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .ba-col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .ba-col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .ba-col-lg { flex: 1 0 0%; }
    .ba-col-lg-auto { flex: 0 0 auto; width: auto; }
    .ba-col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .ba-col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .ba-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .ba-col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .ba-col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .ba-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .ba-col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .ba-col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .ba-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .ba-col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .ba-col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .ba-col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .ba-col-xl { flex: 1 0 0%; }
    .ba-col-xl-auto { flex: 0 0 auto; width: auto; }
    .ba-col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .ba-col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .ba-col-xl-3 { flex: 0 0 auto; width: 25%; }
    .ba-col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .ba-col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .ba-col-xl-6 { flex: 0 0 auto; width: 50%; }
    .ba-col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .ba-col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .ba-col-xl-9 { flex: 0 0 auto; width: 75%; }
    .ba-col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .ba-col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .ba-col-xl-12 { flex: 0 0 auto; width: 100%; }
}

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

.ba-position-static { position: static !important; }
.ba-position-relative { position: relative !important; }
.ba-position-absolute { position: absolute !important; }
.ba-position-fixed { position: fixed !important; }
.ba-position-sticky { position: sticky !important; top: 0; }

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

.ba-overflow-auto { overflow: auto !important; }
.ba-overflow-hidden { overflow: hidden !important; }
.ba-overflow-visible { overflow: visible !important; }
.ba-overflow-scroll { overflow: scroll !important; }
.ba-overflow-x-auto { overflow-x: auto !important; }
.ba-overflow-y-auto { overflow-y: auto !important; }

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

.ba-rounded-none { border-radius: 0 !important; }
.ba-rounded-sm { border-radius: var(--ba-control-radius-sm, 12px) !important; }
.ba-rounded { border-radius: var(--ba-control-radius-md, 16px) !important; }
.ba-rounded-lg { border-radius: var(--ba-control-radius-lg, 20px) !important; }
.ba-rounded-full { border-radius: var(--ba-control-radius, 999px) !important; }
.ba-rounded-circle { border-radius: 50% !important; }

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

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

/* ==========================================================
   COLOR UTILITIES
   ========================================================== */

/* Text Colors */
.ba-text-primary { color: var(--ba-text-primary, #2F3542) !important; }
.ba-text-secondary { color: var(--ba-text-secondary, #667085) !important; }
.ba-text-muted { color: var(--ba-text-muted, #98A2B3) !important; }
.ba-text-danger { color: var(--ba-danger, #E53935) !important; }
.ba-text-success { color: var(--ba-success, #2E7D32) !important; }
.ba-text-warning { color: var(--ba-warning, #F57C00) !important; }
.ba-text-info { color: var(--ba-info, #0288D1) !important; }
.ba-text-white { color: #FFFFFF !important; }

/* Background Colors */
.ba-bg-primary { background-color: var(--ba-primary, #304FFE) !important; }
.ba-bg-danger { background-color: var(--ba-danger, #E53935) !important; }
.ba-bg-success { background-color: var(--ba-success, #2E7D32) !important; }
.ba-bg-warning { background-color: var(--ba-warning, #F57C00) !important; }
.ba-bg-info { background-color: var(--ba-info, #0288D1) !important; }
.ba-bg-light { background-color: var(--ba-bg-secondary, #F8FAFC) !important; }
.ba-bg-dark { background-color: var(--ba-dark, #1A1A1A) !important; }
.ba-bg-white { background-color: #FFFFFF !important; }
.ba-bg-transparent { background-color: transparent !important; }

/* ==========================================================
   INTERACTION UTILITIES
   ========================================================== */

.ba-pointer { cursor: pointer !important; }
.ba-cursor-default { cursor: default !important; }
.ba-cursor-not-allowed { cursor: not-allowed !important; }
.ba-user-select-none { user-select: none !important; }
.ba-user-select-all { user-select: all !important; }

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

.ba-visible { visibility: visible !important; }
.ba-invisible { visibility: hidden !important; }
.ba-opacity-0 { opacity: 0 !important; }
.ba-opacity-25 { opacity: 0.25 !important; }
.ba-opacity-50 { opacity: 0.5 !important; }
.ba-opacity-75 { opacity: 0.75 !important; }
.ba-opacity-100 { opacity: 1 !important; }

/* ==========================================================
   MOBILE-FIRST COMPONENT HELPERS
   ========================================================== */

/* Stack items on mobile, inline on larger screens */
.ba-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3, 12px);
}

@media (min-width: 768px) {
    .ba-stack-md-row {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .ba-stack-lg-row {
        flex-direction: row;
        align-items: center;
    }
}

/* Full width on mobile, auto on larger screens */
.ba-full-mobile {
    width: 100%;
}

@media (min-width: 768px) {
    .ba-full-mobile {
        width: auto;
    }
}

/* Center on mobile */
.ba-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .ba-center-mobile {
        text-align: left;
    }
}

/* Hide scrollbar but keep functionality */
.ba-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ba-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Touch-friendly tap targets (min 44px) */
.ba-touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Safe area padding for notched devices */
.ba-safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.ba-safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ba-safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.ba-safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}