/* =====================================================
   grid.css — نظام شبكة Vanilla CSS كامل (بديل Bootstrap)
   ===================================================== */

/* ── الحاوية والشبكة ── */
.container, .container-fluid {
  width: 100%; padding-right: 16px; padding-left: 16px; margin-right: auto; margin-left: auto;
}
.container { max-width: 1320px; }

.row {
  display: flex; flex-wrap: wrap;
  margin-right: -8px; margin-left: -8px;
}
.row > * { padding-right: 8px; padding-left: 8px; }

/* g-* gutter */
.g-0 { --g: 0px; } .g-1 { --g: 4px; } .g-2 { --g: 8px; }
.g-3 { --g: 12px; } .g-4 { --g: 16px; } .g-5 { --g: 24px; }
.row.g-0,.row.g-1,.row.g-2,.row.g-3,.row.g-4,.row.g-5 { margin-right:calc(var(--g,-8px)*-1); margin-left:calc(var(--g,-8px)*-1); }
.row.g-0>*,.row.g-1>*,.row.g-2>*,.row.g-3>*,.row.g-4>*,.row.g-5>* { padding-right:var(--g,8px); padding-left:var(--g,8px); padding-top:var(--g,0); padding-bottom:var(--g,0); }
.gy-2 { row-gap: 8px; } .gy-3 { row-gap: 12px; }

/* gx-* horizontal gutter */
.gx-3 { column-gap: 12px; } .gx-3.row { margin-right:-6px; margin-left:-6px; } .gx-3.row>*{padding-right:6px;padding-left:6px;}

/* ── الأعمدة ── */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex:0 0 auto; width:8.3333%; }
.col-2  { flex:0 0 auto; width:16.6667%; }
.col-3  { flex:0 0 auto; width:25%; }
.col-4  { flex:0 0 auto; width:33.3333%; }
.col-5  { flex:0 0 auto; width:41.6667%; }
.col-6  { flex:0 0 auto; width:50%; }
.col-7  { flex:0 0 auto; width:58.3333%; }
.col-8  { flex:0 0 auto; width:66.6667%; }
.col-9  { flex:0 0 auto; width:75%; }
.col-10 { flex:0 0 auto; width:83.3333%; }
.col-11 { flex:0 0 auto; width:91.6667%; }
.col-12 { flex:0 0 auto; width:100%; }

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

/* md: 768px */
@media (min-width:768px) {
  .col-md-1{flex:0 0 auto;width:8.3333%} .col-md-2{flex:0 0 auto;width:16.6667%}
  .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.6667%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}
  .col-md-9{flex:0 0 auto;width:75%}     .col-md-10{flex:0 0 auto;width:83.3333%}
  .col-md-11{flex:0 0 auto;width:91.6667%}.col-md-12{flex:0 0 auto;width:100%}
  .col-md-auto{flex:0 0 auto;width:auto}
}

/* lg: 992px */
@media (min-width:992px) {
  .col-lg-1{flex:0 0 auto;width:8.3333%} .col-lg-2{flex:0 0 auto;width:16.6667%}
  .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.6667%}.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.6667%}
  .col-lg-9{flex:0 0 auto;width:75%}     .col-lg-10{flex:0 0 auto;width:83.3333%}
  .col-lg-11{flex:0 0 auto;width:91.6667%}.col-lg-12{flex:0 0 auto;width:100%}
  .col-lg-auto{flex:0 0 auto;width:auto}
}

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

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

.flex-row     { flex-direction:row !important; }
.flex-column  { flex-direction:column !important; }
.flex-wrap    { flex-wrap:wrap !important; }
.flex-nowrap  { flex-wrap:nowrap !important; }
.flex-grow-1  { flex-grow:1 !important; }
.flex-shrink-0{ flex-shrink:0 !important; }

.align-items-start   { align-items:flex-start !important; }
.align-items-center  { align-items:center !important; }
.align-items-end     { align-items:flex-end !important; }
.align-items-stretch { align-items:stretch !important; }
.align-self-center   { align-self:center !important; }
.align-middle        { vertical-align:middle !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; }

.gap-1 { gap:4px !important; }
.gap-2 { gap:8px !important; }
.gap-3 { gap:12px !important; }
.gap-4 { gap:16px !important; }
.gap-5 { gap:24px !important; }

/* ── Visibility (responsive) ── */
@media (min-width:768px)  { .d-md-flex{display:flex!important} .d-md-none{display:none!important} .d-md-block{display:block!important} .d-md-table-cell{display:table-cell!important} }
@media (min-width:992px)  { .d-lg-flex{display:flex!important} .d-lg-none{display:none!important} .d-lg-block{display:block!important} .d-lg-table-cell{display:table-cell!important} }
@media (min-width:1200px) { .d-xl-flex{display:flex!important} .d-xl-none{display:none!important} .d-xl-block{display:block!important} }
@media (max-width:767.98px) { .d-md-table-cell{display:none!important} }
@media (max-width:991.98px) { .d-lg-table-cell{display:none!important} }

/* مخفي على الشاشات الكبيرة، يظهر فقط على الجوال (عبر responsive.css) */
.d-mobile-only { display: none !important; }
/* لا تأثير على الشاشات الكبيرة */
.w-100-mobile { width: auto; }

/* ── Spacing ── */
.m-0{margin:0!important}       .m-1{margin:4px!important}    .m-2{margin:8px!important}
.m-3{margin:12px!important}    .m-4{margin:16px!important}   .m-5{margin:24px!important}
.mt-0{margin-top:0!important}  .mt-1{margin-top:4px!important}.mt-2{margin-top:8px!important}
.mt-3{margin-top:12px!important}.mt-4{margin-top:16px!important}.mt-5{margin-top:24px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:4px!important}.mb-2{margin-bottom:8px!important}
.mb-3{margin-bottom:12px!important}.mb-4{margin-bottom:16px!important}.mb-5{margin-bottom:24px!important}
.ms-0{margin-left:0!important}  .ms-1{margin-left:4px!important}.ms-2{margin-left:8px!important}
.ms-3{margin-left:12px!important}.ms-4{margin-left:16px!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important} .me-1{margin-right:4px!important}.me-2{margin-right:8px!important}
.me-3{margin-right:12px!important}.me-4{margin-right:16px!important}.me-auto{margin-right:auto!important}
.p-0{padding:0!important}       .p-1{padding:4px!important}   .p-2{padding:8px!important}
.p-3{padding:12px!important}    .p-4{padding:16px!important}  .p-5{padding:24px!important}
.pt-0{padding-top:0!important}  .pt-1{padding-top:4px!important}.pt-2{padding-top:8px!important}
.pt-3{padding-top:12px!important}.pt-4{padding-top:16px!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:4px!important}.pb-2{padding-bottom:8px!important}
.pb-3{padding-bottom:12px!important}.pb-4{padding-bottom:16px!important}
.ps-0{padding-left:0!important}  .ps-2{padding-left:8px!important}.ps-3{padding-left:12px!important}
.pe-0{padding-right:0!important} .pe-2{padding-right:8px!important}.pe-3{padding-right:12px!important}
.px-0{padding-right:0!important;padding-left:0!important}
.px-2{padding-right:8px!important;padding-left:8px!important}
.py-1{padding-top:4px!important;padding-bottom:4px!important}
.py-2{padding-top:8px!important;padding-bottom:8px!important}
.py-4{padding-top:16px!important;padding-bottom:16px!important}

/* ── Typography Utilities ── */
.text-center  { text-align:center !important; }
.text-end     { text-align:left !important; }   /* RTL: end = left */
.text-start   { text-align:right !important; }  /* RTL: start = right */
.text-right   { text-align:right !important; }
.text-left    { text-align:left !important; }
.text-uppercase { text-transform:uppercase !important; }
.text-xs { font-size:11px !important; }
.text-sm { font-size:13px !important; }
.fw-bold   { font-weight:700 !important; }
.fw-normal { font-weight:400 !important; }
.small     { font-size:85% !important; }
.fs-5      { font-size:1.1rem !important; }
.fs-6      { font-size:0.9rem !important; }

/* ── Width / Height ── */
.w-100  { width:100% !important; }
.w-50   { width:50% !important; }
.h-100  { height:100% !important; }
.mw-100 { max-width:100% !important; }

/* ── Border ── */
.border          { border:1px solid var(--color-border) !important; }
.border-0        { border:none !important; }
.border-top      { border-top:1px solid var(--color-border) !important; }
.border-bottom   { border-bottom:1px solid var(--color-border) !important; }
.border-start    { border-right:1px solid var(--color-border) !important; }
.border-3        { border-width:3px !important; }
.border-4        { border-width:4px !important; }
.border-primary  { border-color:var(--color-dark) !important; }
.border-success  { border-color:var(--color-success) !important; }
.border-danger   { border-color:var(--color-danger) !important; }
.border-warning  { border-color:var(--color-warning) !important; }
.border-info     { border-color:var(--color-info) !important; }
.border-secondary{ border-color:var(--color-border) !important; }
.rounded         { border-radius:var(--radius-sm) !important; }
.rounded-circle  { border-radius:50% !important; }
.rounded-pill    { border-radius:var(--radius-pill) !important; }

/* ── Table utilities ── */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; margin-bottom:0; }
.table th, .table td { padding:12px 16px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.table-striped tbody tr:nth-of-type(odd) { background:rgba(0,0,0,0.015); }
.table-hover tbody tr:hover { background:var(--color-surface-2); }
.table-bordered th, .table-bordered td { border:1px solid var(--color-border); }
.table-dark th { background:var(--color-dark); color:white; border-color:rgba(255,255,255,0.1); }
.table-light th, .table-light td { background:var(--color-surface-2); }
.table-danger  td, .table-danger  th { background:var(--color-danger-bg) !important; }
.table-warning td, .table-warning th { background:var(--color-warning-bg) !important; }
.table-success td, .table-success th { background:var(--color-success-bg) !important; }

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

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

/* ── Shadow ── */
.shadow     { box-shadow:var(--shadow-md) !important; }
.shadow-sm  { box-shadow:var(--shadow-sm) !important; }
.shadow-lg  { box-shadow:var(--shadow-lg) !important; }
.shadow-none{ box-shadow:none !important; }

/* ── Background colors ── */
.bg-white   { background:var(--color-surface) !important; }
.bg-light   { background:var(--color-surface-2) !important; }
.bg-dark    { background:var(--color-dark) !important; color:white !important; }
.bg-primary { background:var(--color-dark) !important; color:white !important; }
.bg-success { background:var(--color-success-bg) !important; color:var(--color-success) !important; }
.bg-danger  { background:var(--color-danger-bg) !important; color:var(--color-danger) !important; }
.bg-warning { background:var(--color-warning-bg) !important; color:var(--color-warning) !important; }
.bg-info    { background:var(--color-info-bg) !important; color:var(--color-info) !important; }
.bg-purple  { background:var(--color-purple) !important; color:white !important; }

/* ── Misc ── */
.no-gutters { margin-right:0 !important; margin-left:0 !important; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right:0 !important; padding-left:0 !important; }
.stretched-link::after { position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; content:''; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.justify-content-center.row, .row.justify-content-center { justify-content:center; }
.align-items-end.row { align-items:flex-end; }

/* ── Form utilities ── */
.form-check { display:flex; align-items:center; gap:8px; }
.form-check-label { cursor:pointer; font-size:var(--font-size-sm); }
.form-text { font-size:var(--font-size-xs); color:var(--color-text-muted); margin-top:4px; }
.invalid-feedback { font-size:var(--font-size-xs); color:var(--color-danger); margin-top:4px; }

/* ── Modal (Vanilla) ── */
.modal { display:none; position:fixed; inset:0; z-index:3000; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); }
.modal.show { display:flex; }
.modal-dialog { width:100%; max-width:540px; margin:16px; }
.modal-content { background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding:20px 24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:8px; }
.btn-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--color-text-muted); padding:4px 8px; border-radius:var(--radius-xs); transition:all var(--transition-fast); }
.btn-close:hover { background:var(--color-danger-bg); color:var(--color-danger); }

/* ── Offcanvas via Bootstrap classes (compat) ── */
.collapse { display:none; }
.collapse.show { display:block; }
.navbar-collapse.show { display:block; }