/**
 * Core Bootstrap Overrides & Extensions
 * Additional utilities and responsive classes for Bootstrap components
 */

/* ===========================================
   Responsive Width Utilities (w-{breakpoint}-px-{size})
   =========================================== */

/* Extra Small (xs) - default (no prefix needed) */
/* These exist in core.css already */

/* Small (sm) and up */
@media (min-width: 576px) {
  .w-sm-px-14 { width: 14px !important; }
  .w-sm-px-18 { width: 18px !important; }
  .w-sm-px-20 { width: 20px !important; }
  .w-sm-px-30 { width: 30px !important; }
  .w-sm-px-40 { width: 40px !important; }
  .w-sm-px-50 { width: 50px !important; }
  .w-sm-px-75 { width: 75px !important; }
  .w-sm-px-100 { width: 100px !important; }
  .w-sm-px-150 { width: 150px !important; }
  .w-sm-px-200 { width: 200px !important; }
  .w-sm-px-250 { width: 250px !important; }
  .w-sm-px-300 { width: 300px !important; }
  .w-sm-px-350 { width: 350px !important; }
  .w-sm-px-400 { width: 400px !important; }
  .w-sm-px-500 { width: 500px !important; }
  .w-sm-px-600 { width: 600px !important; }
  .w-sm-px-700 { width: 700px !important; }
  .w-sm-px-800 { width: 800px !important; }
}

/* Medium (md) and up */
@media (min-width: 768px) {
  .w-md-px-14 { width: 14px !important; }
  .w-md-px-18 { width: 18px !important; }
  .w-md-px-20 { width: 20px !important; }
  .w-md-px-30 { width: 30px !important; }
  .w-md-px-40 { width: 40px !important; }
  .w-md-px-50 { width: 50px !important; }
  .w-md-px-75 { width: 75px !important; }
  .w-md-px-100 { width: 100px !important; }
  .w-md-px-150 { width: 150px !important; }
  .w-md-px-200 { width: 200px !important; }
  .w-md-px-250 { width: 250px !important; }
  .w-md-px-300 { width: 300px !important; }
  .w-md-px-350 { width: 350px !important; }
  .w-md-px-400 { width: 400px !important; }
  .w-md-px-500 { width: 500px !important; }
  .w-md-px-600 { width: 600px !important; }
  .w-md-px-700 { width: 700px !important; }
  .w-md-px-800 { width: 800px !important; }
}

/* Large (lg) and up */
@media (min-width: 992px) {
  .w-lg-px-14 { width: 14px !important; }
  .w-lg-px-18 { width: 18px !important; }
  .w-lg-px-20 { width: 20px !important; }
  .w-lg-px-30 { width: 30px !important; }
  .w-lg-px-40 { width: 40px !important; }
  .w-lg-px-50 { width: 50px !important; }
  .w-lg-px-75 { width: 75px !important; }
  .w-lg-px-100 { width: 100px !important; }
  .w-lg-px-150 { width: 150px !important; }
  .w-lg-px-200 { width: 200px !important; }
  .w-lg-px-250 { width: 250px !important; }
  .w-lg-px-300 { width: 300px !important; }
  .w-lg-px-350 { width: 350px !important; }
  .w-lg-px-400 { width: 400px !important; }
  .w-lg-px-500 { width: 500px !important; }
  .w-lg-px-600 { width: 600px !important; }
  .w-lg-px-700 { width: 700px !important; }
  .w-lg-px-800 { width: 800px !important; }
}

/* Extra Large (xl) and up */
@media (min-width: 1200px) {
  .w-xl-px-14 { width: 14px !important; }
  .w-xl-px-18 { width: 18px !important; }
  .w-xl-px-20 { width: 20px !important; }
  .w-xl-px-30 { width: 30px !important; }
  .w-xl-px-40 { width: 40px !important; }
  .w-xl-px-50 { width: 50px !important; }
  .w-xl-px-75 { width: 75px !important; }
  .w-xl-px-100 { width: 100px !important; }
  .w-xl-px-150 { width: 150px !important; }
  .w-xl-px-200 { width: 200px !important; }
  .w-xl-px-250 { width: 250px !important; }
  .w-xl-px-300 { width: 300px !important; }
  .w-xl-px-350 { width: 350px !important; }
  .w-xl-px-400 { width: 400px !important; }
  .w-xl-px-500 { width: 500px !important; }
  .w-xl-px-600 { width: 600px !important; }
  .w-xl-px-700 { width: 700px !important; }
  .w-xl-px-800 { width: 800px !important; }
}

/* Extra Extra Large (xxl) and up */
@media (min-width: 1400px) {
  .w-xxl-px-14 { width: 14px !important; }
  .w-xxl-px-18 { width: 18px !important; }
  .w-xxl-px-20 { width: 20px !important; }
  .w-xxl-px-30 { width: 30px !important; }
  .w-xxl-px-40 { width: 40px !important; }
  .w-xxl-px-50 { width: 50px !important; }
  .w-xxl-px-75 { width: 75px !important; }
  .w-xxl-px-100 { width: 100px !important; }
  .w-xxl-px-150 { width: 150px !important; }
  .w-xxl-px-200 { width: 200px !important; }
  .w-xxl-px-250 { width: 250px !important; }
  .w-xxl-px-300 { width: 300px !important; }
  .w-xxl-px-350 { width: 350px !important; }
  .w-xxl-px-400 { width: 400px !important; }
  .w-xxl-px-500 { width: 500px !important; }
  .w-xxl-px-600 { width: 600px !important; }
  .w-xxl-px-700 { width: 700px !important; }
  .w-xxl-px-800 { width: 800px !important; }
}

/* ===========================================
   Flexbox Gap Utilities (for older browsers or specific needs)
   =========================================== */

.gap-3 {
  gap: 1rem;
}

/* ===========================================
   Future Bootstrap overrides can be added here
   =========================================== */