/* ============================================
   BULMA‑SAFE QUASAR‑STYLE FLEX GRID
   Namespace: b-
   ============================================ */

/* Breakpoints (match Bulma) */
@media (min-width: 769px)  { :root { --b-break-md: 1; } }
@media (min-width: 1024px) { :root { --b-break-lg: 1; } }
@media (min-width: 1216px) { :root { --b-break-xl: 1; } }
@media (min-width: 1408px) { :root { --b-break-xxl: 1; } }

/* --------------------------------------------
   ROW
   -------------------------------------------- */
.b-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: -0.5rem; /* gutter compensation */
}

/* --------------------------------------------
   COLUMN BASE (Quasar col behavior)
   -------------------------------------------- */
.b-column {
  display: flex;
  flex-direction: column;
  padding: 0.5rem; /* gutter */
  box-sizing: border-box;
  min-width: 0;
}

.b-col {
  flex: 10000 1 0%; /* Quasar default col */
}

/* --------------------------------------------
   FIXED SIZES (12-column grid)
   -------------------------------------------- */
.b-col-0  { flex: 0 0 auto }
.b-col-1  { flex: 0 0 8.3333%; }
.b-col-2  { flex: 0 0 16.6667%; }
.b-col-3  { flex: 0 0 25%; }
.b-col-4  { flex: 0 0 33.3333%; }
.b-col-5  { flex: 0 0 41.6667%; }
.b-col-6  { flex: 0 0 50%; }
.b-col-7  { flex: 0 0 58.3333%; }
.b-col-8  { flex: 0 0 66.6667%; }
.b-col-9  { flex: 0 0 75%; }
.b-col-10 { flex: 0 0 83.3333%; }
.b-col-11 { flex: 0 0 91.6667%; }
.b-col-12 { flex: 0 0 100%; }

/* --------------------------------------------
   GROW / SHRINK / AUTO
   -------------------------------------------- */
.b-col-grow   { flex: 1 1 0%; }   /* Quasar col-grow */
.b-col-shrink { flex: 0 1 auto; }
.b-col-auto   { flex: 0 0 auto; }

/* --------------------------------------------
   RESPONSIVE SIZES
   (xs, sm, md, lg, xl)
   -------------------------------------------- */

/* XS ≥ 0px */
@media (min-width: 0px) {
  .b-col-xs-0  { flex: 0 0 auto }
  .b-col-xs-1  { flex: 0 0 8.3333%; }
  .b-col-xs-2  { flex: 0 0 16.6667%; }
  .b-col-xs-3  { flex: 0 0 25%; }
  .b-col-xs-4  { flex: 0 0 33.3333%; }
  .b-col-xs-5  { flex: 0 0 41.6667%; }
  .b-col-xs-6  { flex: 0 0 50%; }
  .b-col-xs-7  { flex: 0 0 58.3333%; }
  .b-col-xs-8  { flex: 0 0 66.6667%; }
  .b-col-xs-9  { flex: 0 0 75%; }
  .b-col-xs-10 { flex: 0 0 83.3333%; }
  .b-col-xs-11 { flex: 0 0 91.6667%; }
  .b-col-xs-12 { flex: 0 0 100%; }
}
/* SM ≥ 769px */
@media (min-width: 769px) {
  .b-col-sm-0  { flex: 0 0 auto; }
  .b-col-sm-1  { flex: 0 0 8.3333%; }
  .b-col-sm-2  { flex: 0 0 16.6667%; }
  .b-col-sm-3  { flex: 0 0 25%; }
  .b-col-sm-4  { flex: 0 0 33.3333%; }
  .b-col-sm-5  { flex: 0 0 41.6667%; }
  .b-col-sm-6  { flex: 0 0 50%; }
  .b-col-sm-7  { flex: 0 0 58.3333%; }
  .b-col-sm-8  { flex: 0 0 66.6667%; }
  .b-col-sm-9  { flex: 0 0 75%; }
  .b-col-sm-10 { flex: 0 0 83.3333%; }
  .b-col-sm-11 { flex: 0 0 91.6667%; }
  .b-col-sm-12 { flex: 0 0 100%; }
}

/* MD ≥ 1024px */
@media (min-width: 1024px) {
  .b-col-md-0  { flex: 0 0 auto; }
  .b-col-md-1  { flex: 0 0 8.3333%; }
  .b-col-md-2  { flex: 0 0 16.6667%; }
  .b-col-md-3  { flex: 0 0 25%; }
  .b-col-md-4  { flex: 0 0 33.3333%; }
  .b-col-md-5  { flex: 0 0 41.6667%; }
  .b-col-md-6  { flex: 0 0 50%; }
  .b-col-md-7  { flex: 0 0 58.3333%; }
  .b-col-md-8  { flex: 0 0 66.6667%; }
  .b-col-md-9  { flex: 0 0 75%; }
  .b-col-md-10 { flex: 0 0 83.3333%; }
  .b-col-md-11 { flex: 0 0 91.6667%; }
  .b-col-md-12 { flex: 0 0 100%; }
}

/* LG ≥ 1216px */
@media (min-width: 1216px) {
  .b-col-lg-0  { flex: 0 0 auto; }
  .b-col-lg-1  { flex: 0 0 8.3333%; }
  .b-col-lg-2  { flex: 0 0 16.6667%; }
  .b-col-lg-3  { flex: 0 0 25%; }
  .b-col-lg-4  { flex: 0 0 33.3333%; }
  .b-col-lg-5  { flex: 0 0 41.6667%; }
  .b-col-lg-6  { flex: 0 0 50%; }
  .b-col-lg-7  { flex: 0 0 58.3333%; }
  .b-col-lg-8  { flex: 0 0 66.6667%; }
  .b-col-lg-9  { flex: 0 0 75%; }
  .b-col-lg-10 { flex: 0 0 83.3333%; }
  .b-col-lg-11 { flex: 0 0 91.6667%; }
  .b-col-lg-12 { flex: 0 0 100%; }
}

/* XL ≥ 1408px */
@media (min-width: 1408px) {
  .b-col-xl-0  { flex: 0 0 auto; }
  .b-col-xl-1  { flex: 0 0 8.3333%; }
  .b-col-xl-2  { flex: 0 0 16.6667%; }
  .b-col-xl-3  { flex: 0 0 25%; }
  .b-col-xl-4  { flex: 0 0 33.3333%; }
  .b-col-xl-5  { flex: 0 0 41.6667%; }
  .b-col-xl-6  { flex: 0 0 50%; }
  .b-col-xl-7  { flex: 0 0 58.3333%; }
  .b-col-xl-8  { flex: 0 0 66.6667%; }
  .b-col-xl-9  { flex: 0 0 75%; }
  .b-col-xl-10 { flex: 0 0 83.3333%; }
  .b-col-xl-11 { flex: 0 0 91.6667%; }
  .b-col-xl-12 { flex: 0 0 100%; }
}