/* ============================================================
   BOOTSTRAP-COMPATIBLE GRID + UTILITIES
   Self-hosted — no CDN needed
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

/* Gutters */
.g-0 { --g: 0px; }
.g-2 { --g: 8px; }
.g-3 { --g: 16px; }
.g-4 { --g: 24px; }
.g-5 { --g: 48px; }
.g-0,.g-2,.g-3,.g-4,.g-5 {
  margin-right: calc(-0.5 * var(--g));
  margin-left: calc(-0.5 * var(--g));
}
.g-0 > *, .g-2 > *, .g-3 > *, .g-4 > *, .g-5 > * {
  padding-right: calc(0.5 * var(--g));
  padding-left: calc(0.5 * var(--g));
  margin-top: var(--g);
}

/* Columns — mobile first = 100% */
.col    { flex: 1 0 0%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* SM (≥576px) */
@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

/* MD (≥768px) */
@media (min-width: 768px) {
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.33333%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66667%; }
  .d-md-flex { display: flex !important; }
  .d-md-none { display: none !important; }
}

/* LG (≥992px) */
@media (min-width: 992px) {
  .col-lg-2  { flex: 0 0 auto; width: 16.66667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.33333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.66667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.33333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.66667%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .d-lg-block  { display: block  !important; }
  .d-lg-flex   { display: flex   !important; }
  .d-lg-none   { display: none   !important; }
}

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

/* ---- Flex utilities ---- */
.flex-wrap           { flex-wrap: wrap !important; }
.flex-column         { flex-direction: column !important; }
.align-items-center  { align-items: center !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-end     { align-items: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }

/* ---- Spacing — margin ---- */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 48px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 48px !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 16px !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 16px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ---- Spacing — padding ---- */
.p-0  { padding: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pb-3 { padding-bottom: 16px !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }

/* ---- Sizing ---- */
.w-100  { width: 100% !important; }
.h-100  { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

/* ---- Text ---- */
.text-center  { text-align: center !important; }
.text-start   { text-align: left !important; }
.text-end     { text-align: right !important; }
.text-muted   { color: #6c757d !important; }
.fw-bold      { font-weight: 700 !important; }
.fw-semibold  { font-weight: 600 !important; }
.small        { font-size: 0.875em !important; }

/* ---- Overflow ---- */
.overflow-hidden { overflow: hidden !important; }

/* ---- Position ---- */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* ---- Gap ---- */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

/* ---- Misc ---- */
.rounded     { border-radius: 0.375rem !important; }
.shadow-sm   { box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important; }
.img-fluid   { max-width: 100%; height: auto; }
.list-unstyled { list-style: none; padding: 0; margin: 0; }