/* =========================================================
   WEBIDES — Local grid & utilities (v4)
   Self-authored replacement for the Bootstrap CDN stylesheet.
   Covers exactly the grid/flex/spacing utility classes used
   across this project. No external dependency, RTL-aware via
   CSS logical properties so it works correctly under dir="rtl".
   ========================================================= */

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

/* ---------- Breakpoints (match the classes used: md/lg/xl) ----------
   sm:576  md:768  lg:992  xl:1200  xxl:1400                          */

/* ---------- Container ---------- */
.container-fluid{width:100%;padding-inline:24px;margin-inline:auto;}

/* ---------- Grid ---------- */
.row{
  display:flex;flex-wrap:wrap;
  margin-block-start:calc(-1 * var(--row-gy,0px));
  margin-inline:calc(-1 * var(--row-gx,1.5rem) / 2);
}
.row > *{
  box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;
  padding-inline:calc(var(--row-gx,1.5rem) / 2);
  margin-block-start:var(--row-gy,0px);
}
.g-0{--row-gx:0px;--row-gy:0px;}
.g-1{--row-gx:.25rem;--row-gy:.25rem;}
.g-2{--row-gx:.5rem;--row-gy:.5rem;}
.g-3{--row-gx:1rem;--row-gy:1rem;}
.g-4{--row-gx:1.5rem;--row-gy:1.5rem;}
.g-5{--row-gx:3rem;--row-gy:3rem;}
.gy-3{--row-gy:1rem;}
.gy-4{--row-gy:1.5rem;}
.gy-5{--row-gy:3rem;}
.gx-0{--row-gx:0px;}

.col{flex:1 0 0%;}
.col-auto{flex:0 0 auto;width:auto;}
.col-6{flex:0 0 auto;width:50%;}
.col-12{flex:0 0 auto;width:100%;}

@media (min-width:768px){
  .col-md-2{flex:0 0 auto;width:16.6666%;}
  .col-md-3{flex:0 0 auto;width:25%;}
  .col-md-4{flex:0 0 auto;width:33.3333%;}
  .col-md-5{flex:0 0 auto;width:41.6666%;}
  .col-md-6{flex:0 0 auto;width:50%;}
  .col-md-12{flex:0 0 auto;width:100%;}
  .d-md-none{display:none!important;}
  .d-md-flex{display:flex!important;}
}
@media (min-width:992px){
  .col-lg-1{flex:0 0 auto;width:8.3333%;}
  .col-lg-2{flex:0 0 auto;width:16.6666%;}
  .col-lg-3{flex:0 0 auto;width:25%;}
  .col-lg-4{flex:0 0 auto;width:33.3333%;}
  .col-lg-5{flex:0 0 auto;width:41.6666%;}
  .col-lg-6{flex:0 0 auto;width:50%;}
  .col-lg-7{flex:0 0 auto;width:58.3333%;}
  .col-lg-8{flex:0 0 auto;width:66.6666%;}
  .col-lg-9{flex:0 0 auto;width:75%;}
  .col-lg-10{flex:0 0 auto;width:83.3333%;}
  .col-lg-12{flex:0 0 auto;width:100%;}
  .order-lg-1{order:1;}
  .order-lg-2{order:2;}
  .d-lg-none{display:none!important;}
  .d-lg-flex{display:flex!important;}
}
@media (min-width:1200px){
  .d-xl-flex{display:flex!important;}
  .d-xl-none{display:none!important;}
}

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

/* ---------- Flex utilities ---------- */
.flex-wrap{flex-wrap:wrap!important;}
.flex-column{flex-direction:column!important;}
.justify-content-start{justify-content:flex-start!important;}
.justify-content-center{justify-content:center!important;}
.justify-content-between{justify-content:space-between!important;}
.justify-content-end{justify-content:flex-end!important;}
.align-items-start{align-items:flex-start!important;}
.align-items-center{align-items:center!important;}
.align-items-end{align-items:flex-end!important;}
.gap-1{gap:.25rem!important;}
.gap-2{gap:.5rem!important;}
.gap-3{gap:1rem!important;}
.gap-4{gap:1.5rem!important;}

/* ---------- Spacing (0-5 scale, matches Bootstrap's rem values) ---------- */
:root{
  --sp-0:0;--sp-1:.25rem;--sp-2:.5rem;--sp-3:1rem;--sp-4:1.5rem;--sp-5:3rem;
}
@media (min-width:0px){
  /* generated 0..5 for m, mt, mb, ms, me, mx, my and p, pt, pb, ps, pe, px, py */
}
.m-0{margin:var(--sp-0)!important;} .m-1{margin:var(--sp-1)!important;} .m-2{margin:var(--sp-2)!important;} .m-3{margin:var(--sp-3)!important;} .m-4{margin:var(--sp-4)!important;} .m-5{margin:var(--sp-5)!important;}
.mt-0{margin-block-start:var(--sp-0)!important;} .mt-1{margin-block-start:var(--sp-1)!important;} .mt-2{margin-block-start:var(--sp-2)!important;} .mt-3{margin-block-start:var(--sp-3)!important;} .mt-4{margin-block-start:var(--sp-4)!important;} .mt-5{margin-block-start:var(--sp-5)!important;}
.mb-0{margin-block-end:var(--sp-0)!important;} .mb-1{margin-block-end:var(--sp-1)!important;} .mb-2{margin-block-end:var(--sp-2)!important;} .mb-3{margin-block-end:var(--sp-3)!important;} .mb-4{margin-block-end:var(--sp-4)!important;} .mb-5{margin-block-end:var(--sp-5)!important;}
.ms-0{margin-inline-start:var(--sp-0)!important;} .ms-1{margin-inline-start:var(--sp-1)!important;} .ms-2{margin-inline-start:var(--sp-2)!important;} .ms-3{margin-inline-start:var(--sp-3)!important;}
.me-0{margin-inline-end:var(--sp-0)!important;} .me-1{margin-inline-end:var(--sp-1)!important;} .me-2{margin-inline-end:var(--sp-2)!important;} .me-3{margin-inline-end:var(--sp-3)!important;}
.mx-auto{margin-inline:auto!important;}
.my-0{margin-block:var(--sp-0)!important;} .my-2{margin-block:var(--sp-2)!important;} .my-3{margin-block:var(--sp-3)!important;}

.p-0{padding:var(--sp-0)!important;} .p-1{padding:var(--sp-1)!important;} .p-2{padding:var(--sp-2)!important;} .p-3{padding:var(--sp-3)!important;} .p-4{padding:var(--sp-4)!important;} .p-5{padding:var(--sp-5)!important;}
.pt-0{padding-block-start:var(--sp-0)!important;} .pt-1{padding-block-start:var(--sp-1)!important;} .pt-2{padding-block-start:var(--sp-2)!important;} .pt-3{padding-block-start:var(--sp-3)!important;} .pt-4{padding-block-start:var(--sp-4)!important;}
.pb-0{padding-block-end:var(--sp-0)!important;} .pb-1{padding-block-end:var(--sp-1)!important;} .pb-2{padding-block-end:var(--sp-2)!important;} .pb-3{padding-block-end:var(--sp-3)!important;} .pb-4{padding-block-end:var(--sp-4)!important;}
.py-2{padding-block:var(--sp-2)!important;} .py-3{padding-block:var(--sp-3)!important;}
.px-3{padding-inline:var(--sp-3)!important;}

/* ---------- Text ---------- */
.text-center{text-align:center!important;}
.text-start{text-align:start!important;}
.text-end{text-align:end!important;}

/* ---------- Misc ---------- */
.w-100{width:100%!important;}
.h-100{height:100%!important;}
.overflow-hidden{overflow:hidden!important;}
.list-unstyled{list-style:none;padding-inline-start:0;margin:0;}
.position-relative{position:relative!important;}
.position-absolute{position:absolute!important;}

/* ---------- Minimal form base (our own .form-control-ide overrides visuals; this just resets browser defaults) ---------- */
input,select,textarea,button{font-family:inherit;font-size:inherit;}
label{display:inline-block;}

/* ---------- Minimal alert/badge base used only as structural fallback (visual styling comes from style.css/admin.css) ---------- */
.alert{padding:1rem;border-radius:.5rem;margin-bottom:1rem;}