/****************************************************************
* General Utilities
*****************************************************************/
.no-stretch {
  place-items: center;
}

/****************************************************************
* Extended Margin Utilities
*****************************************************************/
/* Margin (all sides) */
.m-11 { margin: var(--size-11); }
.m-12 { margin: var(--size-12); }
.m-14 { margin: var(--size-14); }
.m-16 { margin: var(--size-16); }
.m-20 { margin: var(--size-20); }
.m-24 { margin: var(--size-24); }
.m-28 { margin: var(--size-28); }
.m-32 { margin: var(--size-32); }
.m-36 { margin: var(--size-36); }
.m-40 { margin: var(--size-40); }

/* Margin Block (vertical in horizontal writing modes) */
.mb-11 { margin-block: var(--size-11); }
.mb-12 { margin-block: var(--size-12); }
.mb-14 { margin-block: var(--size-14); }
.mb-16 { margin-block: var(--size-16); }
.mb-20 { margin-block: var(--size-20); }
.mb-24 { margin-block: var(--size-24); }
.mb-28 { margin-block: var(--size-28); }
.mb-32 { margin-block: var(--size-32); }
.mb-36 { margin-block: var(--size-36); }
.mb-40 { margin-block: var(--size-40); }

/* Margin Block Start (top in horizontal writing modes) */
.mbs-11 { margin-block-start: var(--size-11); }
.mbs-12 { margin-block-start: var(--size-12); }
.mbs-14 { margin-block-start: var(--size-14); }
.mbs-16 { margin-block-start: var(--size-16); }
.mbs-20 { margin-block-start: var(--size-20); }
.mbs-24 { margin-block-start: var(--size-24); }
.mbs-28 { margin-block-start: var(--size-28); }
.mbs-32 { margin-block-start: var(--size-32); }
.mbs-36 { margin-block-start: var(--size-36); }
.mbs-40 { margin-block-start: var(--size-40); }

/* Margin Block End (bottom in horizontal writing modes) */
.mbe-11 { margin-block-end: var(--size-11); }
.mbe-12 { margin-block-end: var(--size-12); }
.mbe-14 { margin-block-end: var(--size-14); }
.mbe-16 { margin-block-end: var(--size-16); }
.mbe-20 { margin-block-end: var(--size-20); }
.mbe-24 { margin-block-end: var(--size-24); }
.mbe-28 { margin-block-end: var(--size-28); }
.mbe-32 { margin-block-end: var(--size-32); }
.mbe-36 { margin-block-end: var(--size-36); }
.mbe-40 { margin-block-end: var(--size-40); }

/* Margin Inline (horizontal in horizontal writing modes) */
.mi-11 { margin-inline: var(--size-11); }
.mi-12 { margin-inline: var(--size-12); }
.mi-14 { margin-inline: var(--size-14); }
.mi-16 { margin-inline: var(--size-16); }
.mi-20 { margin-inline: var(--size-20); }
.mi-24 { margin-inline: var(--size-24); }
.mi-28 { margin-inline: var(--size-28); }
.mi-32 { margin-inline: var(--size-32); }
.mi-36 { margin-inline: var(--size-36); }
.mi-40 { margin-inline: var(--size-40); }

/* Margin Inline Start (left in ltr writing modes) */
.mis-11 { margin-inline-start: var(--size-11); }
.mis-12 { margin-inline-start: var(--size-12); }
.mis-14 { margin-inline-start: var(--size-14); }
.mis-16 { margin-inline-start: var(--size-16); }
.mis-20 { margin-inline-start: var(--size-20); }
.mis-24 { margin-inline-start: var(--size-24); }
.mis-28 { margin-inline-start: var(--size-28); }
.mis-32 { margin-inline-start: var(--size-32); }
.mis-36 { margin-inline-start: var(--size-36); }
.mis-40 { margin-inline-start: var(--size-40); }

/* Margin Inline End (right in ltr writing modes) */
.mie-11 { margin-inline-end: var(--size-11); }
.mie-12 { margin-inline-end: var(--size-12); }
.mie-14 { margin-inline-end: var(--size-14); }
.mie-16 { margin-inline-end: var(--size-16); }
.mie-20 { margin-inline-end: var(--size-20); }
.mie-24 { margin-inline-end: var(--size-24); }
.mie-28 { margin-inline-end: var(--size-28); }
.mie-32 { margin-inline-end: var(--size-32); }
.mie-36 { margin-inline-end: var(--size-36); }
.mie-40 { margin-inline-end: var(--size-40); }

/****************************************************************
* Extended Padding Utilities
*****************************************************************/
/* Padding (all sides) */
.p-11 { padding: var(--size-11); }
.p-12 { padding: var(--size-12); }
.p-14 { padding: var(--size-14); }
.p-16 { padding: var(--size-16); }
.p-20 { padding: var(--size-20); }
.p-24 { padding: var(--size-24); }
.p-28 { padding: var(--size-28); }
.p-32 { padding: var(--size-32); }
.p-36 { padding: var(--size-36); }
.p-40 { padding: var(--size-40); }

/* Padding Block (vertical in horizontal writing modes) */
.pb-11 { padding-block: var(--size-11); }
.pb-12 { padding-block: var(--size-12); }
.pb-14 { padding-block: var(--size-14); }
.pb-16 { padding-block: var(--size-16); }
.pb-20 { padding-block: var(--size-20); }
.pb-24 { padding-block: var(--size-24); }
.pb-28 { padding-block: var(--size-28); }
.pb-32 { padding-block: var(--size-32); }
.pb-36 { padding-block: var(--size-36); }
.pb-40 { padding-block: var(--size-40); }

/* Padding Block Start (top in horizontal writing modes) */
.pbs-11 { padding-block-start: var(--size-11); }
.pbs-12 { padding-block-start: var(--size-12); }
.pbs-14 { padding-block-start: var(--size-14); }
.pbs-16 { padding-block-start: var(--size-16); }
.pbs-20 { padding-block-start: var(--size-20); }
.pbs-24 { padding-block-start: var(--size-24); }
.pbs-28 { padding-block-start: var(--size-28); }
.pbs-32 { padding-block-start: var(--size-32); }
.pbs-36 { padding-block-start: var(--size-36); }
.pbs-40 { padding-block-start: var(--size-40); }

/* Padding Block End (bottom in horizontal writing modes) */
.pbe-11 { padding-block-end: var(--size-11); }
.pbe-12 { padding-block-end: var(--size-12); }
.pbe-14 { padding-block-end: var(--size-14); }
.pbe-16 { padding-block-end: var(--size-16); }
.pbe-20 { padding-block-end: var(--size-20); }
.pbe-24 { padding-block-end: var(--size-24); }
.pbe-28 { padding-block-end: var(--size-28); }
.pbe-32 { padding-block-end: var(--size-32); }
.pbe-36 { padding-block-end: var(--size-36); }
.pbe-40 { padding-block-end: var(--size-40); }

/* Padding Inline (horizontal in horizontal writing modes) */
.pi-11 { padding-inline: var(--size-11); }
.pi-12 { padding-inline: var(--size-12); }
.pi-14 { padding-inline: var(--size-14); }
.pi-16 { padding-inline: var(--size-16); }
.pi-20 { padding-inline: var(--size-20); }
.pi-24 { padding-inline: var(--size-24); }
.pi-28 { padding-inline: var(--size-28); }
.pi-32 { padding-inline: var(--size-32); }
.pi-36 { padding-inline: var(--size-36); }
.pi-40 { padding-inline: var(--size-40); }

/* Padding Inline Start (left in ltr writing modes) */
.pis-11 { padding-inline-start: var(--size-11); }
.pis-12 { padding-inline-start: var(--size-12); }
.pis-14 { padding-inline-start: var(--size-14); }
.pis-16 { padding-inline-start: var(--size-16); }
.pis-20 { padding-inline-start: var(--size-20); }
.pis-24 { padding-inline-start: var(--size-24); }
.pis-28 { padding-inline-start: var(--size-28); }
.pis-32 { padding-inline-start: var(--size-32); }
.pis-36 { padding-inline-start: var(--size-36); }
.pis-40 { padding-inline-start: var(--size-40); }

/* Padding Inline End (right in ltr writing modes) */
.pie-11 { padding-inline-end: var(--size-11); }
.pie-12 { padding-inline-end: var(--size-12); }
.pie-14 { padding-inline-end: var(--size-14); }
.pie-16 { padding-inline-end: var(--size-16); }
.pie-20 { padding-inline-end: var(--size-20); }
.pie-24 { padding-inline-end: var(--size-24); }
.pie-28 { padding-inline-end: var(--size-28); }
.pie-32 { padding-inline-end: var(--size-32); }
.pie-36 { padding-inline-end: var(--size-36); }
.pie-40 { padding-inline-end: var(--size-40); }

/* Add responsive variants for commonly needed larger sizes */
@media (min-width: 48rem) {
  .md\:pbs-16 { padding-block-start: var(--size-16); }
  .md\:pbs-20 { padding-block-start: var(--size-20); }
  .md\:pbs-24 { padding-block-start: var(--size-24); }
  .md\:pbs-32 { padding-block-start: var(--size-32); }
  
  .md\:mbs-16 { margin-block-start: var(--size-16); }
  .md\:mbs-20 { margin-block-start: var(--size-20); }
  .md\:mbs-24 { margin-block-start: var(--size-24); }
  .md\:mbs-32 { margin-block-start: var(--size-32); }
}

/****************************************************************
* Custom Flex utilities
*****************************************************************/
.justify-between { 
  justify-content: space-between; 
}

.items-baseline { 
  align-items: baseline; 
}

/****************************************************************
* Custom admin layout utilities
*****************************************************************/

/* Maximum width classes - equivalent to Tailwind's max-w-* */
.max-width-sm {
  max-width: var(--max-i-sm); /* 24rem / 384px */
}

/* Auto margin for centering - equivalent to Tailwind's mx-auto */
.center-h {
  margin-inline: auto;
}

.overflow-visible {
  overflow: visible !important;
}