/* Bootstrap 5 ↔ Framework7 compatibility (safe subset)
   Scope: containers/grid, spacing, display/flex, text, buttons, badges, rounding/shadows, accessibility
   Notes:
   - No global resets/normalize (to avoid fighting F7).
   - Uses Bootstrap spacing scale (0..5) and breakpoints.
*/

/* -------------------- Root tokens -------------------- */
:root {
  /* Palette (map to F7 if desired) */
  --bs-primary:   var(--f7-theme-color, #0d6efd);
  --bs-secondary: #6c757d;
  --bs-success:   #198754;
  --bs-danger:    #dc3545;
  --bs-warning:   #ffc107;
  --bs-info:      #0dcaf0;
  --bs-light:     #f8f9fa;
  --bs-dark:      #212529;

  --bs-body-color: var(--f7-text-color, #212529);
  --bs-body-bg:    var(--f7-page-bg-color, #fff);

  --bs-border-color: rgba(0,0,0,.175);
  --bs-radius:      var(--f7-button-border-radius, 8px);
  --bs-radius-pill: 50rem;
  --bs-shadow:      0 .5rem 1rem rgba(0,0,0,.15);

  /* Spacing scale */
  --bs-sp-0: 0;
  --bs-sp-1: .25rem;
  --bs-sp-2: .5rem;
  --bs-sp-3: 1rem;
  --bs-sp-4: 1.5rem;
  --bs-sp-5: 3rem;
}

/* -------------------- Container & Grid -------------------- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-sp-2);
  padding-left: var(--bs-sp-2);
  max-width: 100%;
}

@media (min-width:576px){ .container, .container-sm { max-width: 540px; } }
@media (min-width:768px){ .container, .container-md { max-width: 720px; } }
@media (min-width:992px){ .container, .container-lg { max-width: 960px; } }
@media (min-width:1200px){ .container, .container-xl { max-width: 1140px; } }
@media (min-width:1400px){ .container, .container-xxl { max-width: 1320px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--bs-sp-2));
  margin-left: calc(-1 * var(--bs-sp-2));
}

[class^="col"], [class*=" col"] {
  padding-right: var(--bs-sp-2);
  padding-left: var(--bs-sp-2);
  box-sizing: border-box;
}

.col { flex: 1 0 0%; max-width: 100%; }

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

/* Responsive cols (common ones) */
@media (min-width:576px){ .col-sm-6{width:50%;flex:0 0 auto} .col-sm-12{width:100%;flex:0 0 auto} }
@media (min-width:768px){ .col-md-6{width:50%;flex:0 0 auto} .col-md-4{width:33.333333%;flex:0 0 auto} .col-md-12{width:100%;flex:0 0 auto} }
@media (min-width:992px){ .col-lg-3{width:25%;flex:0 0 auto} .col-lg-4{width:33.333333%;flex:0 0 auto} .col-lg-6{width:50%;flex:0 0 auto} }

/* -------------------- Spacing utilities (subset) -------------------- */
.m-0{margin:var(--bs-sp-0)!important}
.m-1{margin:var(--bs-sp-1)!important}
.m-2{margin:var(--bs-sp-2)!important}
.m-3{margin:var(--bs-sp-3)!important}
.m-4{margin:var(--bs-sp-4)!important}
.m-5{margin:var(--bs-sp-5)!important}

.mt-0{margin-top:var(--bs-sp-0)!important}
.me-0{margin-right:var(--bs-sp-0)!important}
.mb-0{margin-bottom:var(--bs-sp-0)!important}
.ms-0{margin-left:var(--bs-sp-0)!important}
.mt-1{margin-top:var(--bs-sp-1)!important}
.me-1{margin-right:var(--bs-sp-1)!important}
.mb-1{margin-bottom:var(--bs-sp-1)!important}
.ms-1{margin-left:var(--bs-sp-1)!important}
/* Add more m*/p* variants as needed */

.p-0{padding:var(--bs-sp-0)!important}
.p-1{padding:var(--bs-sp-1)!important}
.p-2{padding:var(--bs-sp-2)!important}
.p-3{padding:var(--bs-sp-3)!important}
.p-4{padding:var(--bs-sp-4)!important}
.p-5{padding:var(--bs-sp-5)!important}

/* Custom gap helpers (kept from your original) */
.gap-1{gap:var(--bs-sp-1)!important}
.gap-2{gap:var(--bs-sp-2)!important}
.gap-3{gap:var(--bs-sp-3)!important}

/* -------------------- Text utilities (complete) -------------------- */
/* Wrapping & overflow */
.text-wrap    { white-space: normal !important; }
.text-nowrap  { white-space: nowrap !important; }
.text-break   { word-wrap: break-word !important; overflow-wrap: break-word !important; }

/* Alignment */
.text-start   { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-end     { text-align: right !important; }

/* Responsive alignment */
@media (min-width: 576px) {
  .text-sm-start  { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-end    { text-align: right !important; }
}
@media (min-width: 768px) {
  .text-md-start  { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-end    { text-align: right !important; }
}
@media (min-width: 992px) {
  .text-lg-start  { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-end    { text-align: right !important; }
}
@media (min-width: 1200px) {
  .text-xl-start  { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-end    { text-align: right !important; }
}
@media (min-width: 1400px) {
  .text-xxl-start  { text-align: left !important; }
  .text-xxl-center { text-align: center !important; }
  .text-xxl-end    { text-align: right !important; }
}

/* Transform / weight / style / line-height / decoration */
.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.fw-light    { font-weight: 300 !important; }
.fw-normal   { font-weight: 400 !important; }
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }

.fst-italic  { font-style: italic !important; }
.fst-normal  { font-style: normal !important; }

.font-monospace {
  font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important;
}

.lh-1    { line-height: 1 !important; }
.lh-sm   { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg   { line-height: 2 !important; }

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

/* Colors (use CSS vars or fallbacks) */
.text-muted    { color: var(--bs-secondary-color, #6c757d) !important; }
.text-primary  { color: var(--bs-primary,   #0d6efd) !important; }
.text-secondary{ color: var(--bs-secondary, #6c757d) !important; }
.text-success  { color: var(--bs-success,   #198754) !important; }
.text-info     { color: var(--bs-info,      #0dcaf0) !important; }
.text-warning  { color: var(--bs-warning,   #ffc107) !important; }
.text-danger   { color: var(--bs-danger,    #dc3545) !important; }
.text-light    { color: var(--bs-light,     #f8f9fa) !important; }
.text-dark     { color: var(--bs-dark,      #212529) !important; }
.text-white    { color: #fff !important; }

.text-opacity-25 { opacity: .25 !important; }
.text-opacity-50 { opacity: .5  !important; }
.text-opacity-75 { opacity: .75 !important; }
.text-opacity-100{ opacity: 1   !important; }

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

/* -------------------- Display & Flex utilities (complete) -------------------- */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-grid         { display: grid !important; }
.d-table        { display: table !important; }
.d-table-row    { display: table-row !important; }
.d-table-cell   { display: table-cell !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

.flex-row{flex-direction:row!important}
.flex-column{flex-direction:column!important}
.flex-wrap{flex-wrap:wrap!important}
.justify-content-start{justify-content:flex-start!important}
.justify-content-center{justify-content:center!important}
.justify-content-end{justify-content:flex-end!important}
.justify-content-between{justify-content:space-between!important}
.align-items-start{align-items:flex-start!important}
.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}

/* Responsive display */
@media (min-width: 576px) {
  .d-sm-none{display:none!important}
  .d-sm-inline{display:inline!important}
  .d-sm-inline-block{display:inline-block!important}
  .d-sm-block{display:block!important}
  .d-sm-grid{display:grid!important}
  .d-sm-table{display:table!important}
  .d-sm-table-row{display:table-row!important}
  .d-sm-table-cell{display:table-cell!important}
  .d-sm-flex{display:flex!important}
  .d-sm-inline-flex{display:inline-flex!important}
}
@media (min-width: 768px) {
  .d-md-none{display:none!important}
  .d-md-inline{display:inline!important}
  .d-md-inline-block{display:inline-block!important}
  .d-md-block{display:block!important}
  .d-md-grid{display:grid!important}
  .d-md-table{display:table!important}
  .d-md-table-row{display:table-row!important}
  .d-md-table-cell{display:table-cell!important}
  .d-md-flex{display:flex!important}
  .d-md-inline-flex{display:inline-flex!important}
}
@media (min-width: 992px) {
  .d-lg-none{display:none!important}
  .d-lg-inline{display:inline!important}
  .d-lg-inline-block{display:inline-block!important}
  .d-lg-block{display:block!important}
  .d-lg-grid{display:grid!important}
  .d-lg-table{display:table!important}
  .d-lg-table-row{display:table-row!important}
  .d-lg-table-cell{display:table-cell!important}
  .d-lg-flex{display:flex!important}
  .d-lg-inline-flex{display:inline-flex!important}
}
@media (min-width: 1200px) {
  .d-xl-none{display:none!important}
  .d-xl-inline{display:inline!important}
  .d-xl-inline-block{display:inline-block!important}
  .d-xl-block{display:block!important}
  .d-xl-grid{display:grid!important}
  .d-xl-table{display:table!important}
  .d-xl-table-row{display:table-row!important}
  .d-xl-table-cell{display:table-cell!important}
  .d-xl-flex{display:flex!important}
  .d-xl-inline-flex{display:inline-flex!important}
}
@media (min-width: 1400px) {
  .d-xxl-none{display:none!important}
  .d-xxl-inline{display:inline!important}
  .d-xxl-inline-block{display:inline-block!important}
  .d-xxl-block{display:block!important}
  .d-xxl-grid{display:grid!important}
  .d-xxl-table{display:table!important}
  .d-xxl-table-row{display:table-row!important}
  .d-xxl-table-cell{display:table-cell!important}
  .d-xxl-flex{display:flex!important}
  .d-xxl-inline-flex{display:inline-flex!important}
}

/* -------------------- Buttons (Bootstrap API, F7-friendly) -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--bs-radius);
  padding: .5rem 1rem;
  font: inherit;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--bs-light);
  color: var(--bs-body-color);
  transition: filter .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:disabled,
.btn.disabled { opacity: .65; pointer-events: none; }
.btn:hover { filter: brightness(0.98); }

/* Solid variants */
.btn-primary{ background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-secondary{ background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.btn-success{ background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.btn-danger{ background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.btn-warning{ background-color: var(--bs-warning); border-color: var(--bs-warning); color: #212529; }
.btn-info{ background-color: var(--bs-info); border-color: var(--bs-info); color: #212529; }
.btn-light{ background-color: var(--bs-light); border-color: var(--bs-light); color: #212529; }
.btn-dark{ background-color: var(--bs-dark); border-color: var(--bs-dark); color: #fff; }

/* Outline variants */
.btn-outline-primary{ background:transparent; color:var(--bs-primary); border-color:var(--bs-primary); }
.btn-outline-secondary{ background:transparent; color:var(--bs-secondary); border-color:var(--bs-secondary); }
.btn-outline-success{ background:transparent; color:var(--bs-success); border-color:var(--bs-success); }
.btn-outline-danger{ background:transparent; color:var(--bs-danger); border-color:var(--bs-danger); }
.btn-outline-warning{ background:transparent; color:var(--bs-warning); border-color:var(--bs-warning); }
.btn-outline-info{ background:transparent; color:var(--bs-info); border-color:var(--bs-info); }
.btn-outline-light{ background:transparent; color:#212529; border-color:var(--bs-light); background-clip: padding-box; }
.btn-outline-dark{ background:transparent; color:var(--bs-dark); border-color:var(--bs-dark); }

/* Sizes */
.btn-sm{ padding: .25rem .5rem; font-size: .875rem; border-radius: calc(var(--bs-radius) - 2px); }
.btn-lg{ padding: .75rem 1.25rem; font-size: 1.125rem; border-radius: calc(var(--bs-radius) + 2px); }

/* -------------------- Badges -------------------- */

.badge.bg-primary{ background-color:var(--bs-primary)!important; }
.badge.bg-secondary{ background-color:var(--bs-secondary)!important; }
.badge.bg-success{ background-color:var(--bs-success)!important; }
.badge.bg-danger{ background-color:var(--bs-danger)!important; }
.badge.bg-warning{ background-color:var(--bs-warning)!important; color:#212529!important; }
.badge.bg-info{ background-color:var(--bs-info)!important; color:#212529!important; }
.badge.bg-light{ background-color:var(--bs-light)!important; color:#212529!important; }
.badge.bg-dark{ background-color:var(--bs-dark)!important; }

/* -------------------- Rounding & Shadows -------------------- */
.rounded{ border-radius: var(--bs-radius)!important; }
.rounded-0{ border-radius: 0!important; }
.rounded-pill{ border-radius: var(--bs-radius-pill)!important; }
.shadow{ box-shadow: var(--bs-shadow)!important; }
.shadow-sm{ box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow-lg{ box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }

/* -------------------- Accessibility -------------------- */
.visually-hidden {
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}