/* ===== Bootstrap 3 → looks like Bootstrap 5 (visual shim) ===== */

/* 1) Design tokens (approximate BS5) */
:root{
  --bs-body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-color:#212529;
  --bs-body-bg:#fff;
  --bs-border-color:#dee2e6;
  --bs-border-radius:.375rem;
  --bs-border-radius-sm:.25rem;
  --bs-border-radius-lg:.5rem;

  --bs-primary:#0d6efd;
  --bs-secondary:#6c757d;
  --bs-success:#198754;
  --bs-info:#0dcaf0;
  --bs-warning:#ffc107;
  --bs-danger:#dc3545;
  --bs-light:#f8f9fa;
  --bs-dark:#212529;
}

/* 2) Reboot-like touches */
html{font-size:16px;}
body{
  color:var(--bs-body-color);
  background:var(--bs-body-bg);
  font-family:var(--bs-body-font);
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6{margin-top:0;}
img{max-width:100%; height:auto;}

/* 3) Buttons: recolor BS3 buttons to BS5 palette */
.btn{border-radius:var(--bs-border-radius); border:1px solid transparent;}
.btn:focus,.btn:active{outline:0; box-shadow:0 0 0 .2rem rgba(13,110,253,.25);}

.btn-primary{background:var(--bs-primary); border-color:var(--bs-primary);}
.btn-default{background:var(--bs-secondary); border-color:var(--bs-secondary); color:#fff;} /* ≈ btn-secondary */
.btn-success{background:var(--bs-success); border-color:var(--bs-success);}
.btn-info{background:var(--bs-info); border-color:var(--bs-info); color:#000;}
.btn-warning{background:var(--bs-warning); border-color:var(--bs-warning); color:#000;}
.btn-danger{background:var(--bs-danger); border-color:var(--bs-danger);}
.btn-link{color:var(--bs-primary);}

/* Hover states */
.btn-primary:hover{filter:brightness(.95);}
.btn-default:hover{filter:brightness(.95);}
.btn-success:hover{filter:brightness(.95);}
.btn-info:hover{filter:brightness(.95);}
.btn-warning:hover{filter:brightness(.95);}
.btn-danger:hover{filter:brightness(.95);}

/* 4) Panels → Cards look */
.panel{
  border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}
.panel>.panel-heading{
  background:#fff;
  border-bottom:1px solid var(--bs-border-color);
  border-top-left-radius:var(--bs-border-radius);
  border-top-right-radius:var(--bs-border-radius);
  font-weight:600;
}
.panel>.panel-body{padding:1rem;}
.panel>.panel-footer{
  background:#fff;
  border-top:1px solid var(--bs-border-color);
  border-bottom-left-radius:var(--bs-border-radius);
  border-bottom-right-radius:var(--bs-border-radius);
}

/* Optional: make .panel-* colors softer like BS5 card variants */
.panel-primary{border-color:rgba(13,110,253,.25);}
.panel-primary>.panel-heading{background:rgba(13,110,253,.08);}
.panel-success{border-color:rgba(25,135,84,.25);}
.panel-success>.panel-heading{background:rgba(25,135,84,.08);}
.panel-info{border-color:rgba(13,202,240,.35);}
.panel-info>.panel-heading{background:rgba(13,202,240,.12);}
.panel-warning{border-color:rgba(255,193,7,.35);}
.panel-warning>.panel-heading{background:rgba(255,193,7,.12);}
.panel-danger{border-color:rgba(220,53,69,.35);}
.panel-danger>.panel-heading{background:rgba(220,53,69,.12);}

/* 5) Labels → Badges */
.label{
  display:inline-block;
  padding:.35em .55em;
  font-size:.75rem;
  font-weight:600;
  line-height:1;
  border-radius:var(--bs-border-radius);
}
.label-default{background:var(--bs-secondary);}
.label-primary{background:var(--bs-primary);}
.label-success{background:var(--bs-success);}
.label-info{background:var(--bs-info); color:#000;}
.label-warning{background:var(--bs-warning); color:#000;}
.label-danger{background:var(--bs-danger);}

/* Pill look (use your own helper .badge-pill on label if needed) */
.label.badge-pill{border-radius:10rem;}

/* 6) Alerts: flatter with BS5 spacing */
.alert{
  border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  padding:.75rem 1rem;
  margin-bottom:1rem;
}
.alert-success{background:rgba(25,135,84,.1); color:#0f5132; border-color:rgba(25,135,84,.25);}
.alert-info{background:rgba(13,202,240,.12); color:#055160; border-color:rgba(13,202,240,.35);}
.alert-warning{background:rgba(255,193,7,.12); color:#664d03; border-color:rgba(255,193,7,.35);}
.alert-danger{background:rgba(220,53,69,.12); color:#842029; border-color:rgba(220,53,69,.35);}

/* Close button → look like .btn-close */
.close{
  float:right;
  font-size:1rem;
  font-weight:400;
  opacity:.6;
  text-shadow:none;
}
.close:hover{opacity:.85;}
.close:after{
  /* content:"×";  keep compatibility */
}

/* 7) Forms: spacing akin to BS5 */
.form-group{margin-bottom:1rem;}
.form-control{
  border-radius:var(--bs-border-radius);
  border:1px solid var(--bs-border-color);
  box-shadow:none;
}
.help-block{margin-top:.25rem; font-size:.875rem; color:#6c757d;}

/* Checkboxes/radios (simple refresh) */
.checkbox label, .radio label{padding-left:1.5rem; position:relative;}
/* .checkbox input[type=checkbox], .radio input[type=radio]{position:absolute; left:0; top:.2rem;} */

/* Input groups a bit cleaner */
.input-group .form-control{box-shadow:none;}
.input-group-addon{
  background:#fff;
  border:1px solid var(--bs-border-color);
  border-right:0;
}

/* 8) Navbar: lighter default */
.navbar{
  border:none;
  border-bottom:1px solid var(--bs-border-color);
  border-radius:0;
  box-shadow:none;
}
.navbar-default{
  background:#fff;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a{
  color:var(--bs-body-color);
}

/* 9) Minimal BS5-like spacing utilities (subset) */
[class^="m-"], [class*=" m-"], [class^="p-"], [class*=" p-"]{ /* namespace helper */ }
.m-0{margin:0!important;} .mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;}
.m-1{margin:.25rem!important;} .mt-1{margin-top:.25rem!important;} .mb-1{margin-bottom:.25rem!important;}
.m-2{margin:.5rem!important;}  .mt-2{margin-top:.5rem!important;}  .mb-2{margin-bottom:.5rem!important;}
.m-3{margin:1rem!important;}   .mt-3{margin-top:1rem!important;}   .mb-3{margin-bottom:1rem!important;}
.m-4{margin:1.5rem!important;} .mt-4{margin-top:1.5rem!important;} .mb-4{margin-bottom:1.5rem!important;}
.p-0{padding:0!important;} .pt-0{padding-top:0!important;} .pb-0{padding-bottom:0!important;}
.p-1{padding:.25rem!important;} .p-2{padding:.5rem!important;} .p-3{padding:1rem!important;} .p-4{padding:1.5rem!important;}

/* 10) Tables: lighter borders */
.table{
  border-color:var(--bs-border-color);
}
.table>thead>tr>th{
  border-bottom:2px solid var(--bs-border-color);
}
.table>tbody>tr>td{
  border-top:1px solid var(--bs-border-color);
}

/* 11) Misc: rounded images/buttons */
.img-thumbnail{border-radius:var(--bs-border-radius);}
.btn-group .btn{border-radius:var(--bs-border-radius);}

.navbar-form{margin-top:0px;margin-bottom:0px;}
.navbar-form button{color:white;}