/**
 * Spacing Utility Classes
 * Margin and padding utilities based on 8-point grid system
 * Implements specifications from TECHTRONIC_DESIGN_SYSTEM.md Section 4
 *
 * @package Techtronic_Learning
 * @since 1.0.0
 */

/* ==========================================================================
   Margin Utilities - All Sides
   ========================================================================== */

.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md- { margin: var(--spacing-md-); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }
.m-4xl { margin: var(--spacing-4xl); }
.m-5xl { margin: var(--spacing-5xl); }
.m-6xl { margin: var(--spacing-6xl); }
.m-7xl { margin: var(--spacing-7xl); }

/* Auto Margin */
.m-auto { margin: auto; }

/* ==========================================================================
   Margin Utilities - Top
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md- { margin-top: var(--spacing-md-); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-4xl { margin-top: var(--spacing-4xl); }
.mt-5xl { margin-top: var(--spacing-5xl); }
.mt-6xl { margin-top: var(--spacing-6xl); }
.mt-7xl { margin-top: var(--spacing-7xl); }

.mt-auto { margin-top: auto; }

/* ==========================================================================
   Margin Utilities - Bottom
   ========================================================================== */

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md- { margin-bottom: var(--spacing-md-); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }
.mb-4xl { margin-bottom: var(--spacing-4xl); }
.mb-5xl { margin-bottom: var(--spacing-5xl); }
.mb-6xl { margin-bottom: var(--spacing-6xl); }
.mb-7xl { margin-bottom: var(--spacing-7xl); }

.mb-auto { margin-bottom: auto; }

/* ==========================================================================
   Margin Utilities - Left
   ========================================================================== */

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md- { margin-left: var(--spacing-md-); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.ml-2xl { margin-left: var(--spacing-2xl); }
.ml-3xl { margin-left: var(--spacing-3xl); }
.ml-4xl { margin-left: var(--spacing-4xl); }
.ml-5xl { margin-left: var(--spacing-5xl); }
.ml-6xl { margin-left: var(--spacing-6xl); }
.ml-7xl { margin-left: var(--spacing-7xl); }

.ml-auto { margin-left: auto; }

/* ==========================================================================
   Margin Utilities - Right
   ========================================================================== */

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md- { margin-right: var(--spacing-md-); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
.mr-2xl { margin-right: var(--spacing-2xl); }
.mr-3xl { margin-right: var(--spacing-3xl); }
.mr-4xl { margin-right: var(--spacing-4xl); }
.mr-5xl { margin-right: var(--spacing-5xl); }
.mr-6xl { margin-right: var(--spacing-6xl); }
.mr-7xl { margin-right: var(--spacing-7xl); }

.mr-auto { margin-right: auto; }

/* ==========================================================================
   Margin Utilities - Horizontal (Left + Right)
   ========================================================================== */

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md- { margin-left: var(--spacing-md-); margin-right: var(--spacing-md-); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
.mx-2xl { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); }
.mx-3xl { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl); }
.mx-4xl { margin-left: var(--spacing-4xl); margin-right: var(--spacing-4xl); }
.mx-5xl { margin-left: var(--spacing-5xl); margin-right: var(--spacing-5xl); }
.mx-6xl { margin-left: var(--spacing-6xl); margin-right: var(--spacing-6xl); }
.mx-7xl { margin-left: var(--spacing-7xl); margin-right: var(--spacing-7xl); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Margin Utilities - Vertical (Top + Bottom)
   ========================================================================== */

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md- { margin-top: var(--spacing-md-); margin-bottom: var(--spacing-md-); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.my-2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }
.my-3xl { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); }
.my-4xl { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); }
.my-5xl { margin-top: var(--spacing-5xl); margin-bottom: var(--spacing-5xl); }
.my-6xl { margin-top: var(--spacing-6xl); margin-bottom: var(--spacing-6xl); }
.my-7xl { margin-top: var(--spacing-7xl); margin-bottom: var(--spacing-7xl); }

.my-auto { margin-top: auto; margin-bottom: auto; }

/* ==========================================================================
   Negative Margin Utilities
   ========================================================================== */

/* Negative Top */
.-mt-xs { margin-top: calc(var(--spacing-xs) * -1); }
.-mt-sm { margin-top: calc(var(--spacing-sm) * -1); }
.-mt-md- { margin-top: calc(var(--spacing-md-) * -1); }
.-mt-md { margin-top: calc(var(--spacing-md) * -1); }
.-mt-lg { margin-top: calc(var(--spacing-lg) * -1); }
.-mt-xl { margin-top: calc(var(--spacing-xl) * -1); }

/* Negative Bottom */
.-mb-xs { margin-bottom: calc(var(--spacing-xs) * -1); }
.-mb-sm { margin-bottom: calc(var(--spacing-sm) * -1); }
.-mb-md- { margin-bottom: calc(var(--spacing-md-) * -1); }
.-mb-md { margin-bottom: calc(var(--spacing-md) * -1); }
.-mb-lg { margin-bottom: calc(var(--spacing-lg) * -1); }
.-mb-xl { margin-bottom: calc(var(--spacing-xl) * -1); }

/* Negative Left */
.-ml-xs { margin-left: calc(var(--spacing-xs) * -1); }
.-ml-sm { margin-left: calc(var(--spacing-sm) * -1); }
.-ml-md- { margin-left: calc(var(--spacing-md-) * -1); }
.-ml-md { margin-left: calc(var(--spacing-md) * -1); }
.-ml-lg { margin-left: calc(var(--spacing-lg) * -1); }
.-ml-xl { margin-left: calc(var(--spacing-xl) * -1); }

/* Negative Right */
.-mr-xs { margin-right: calc(var(--spacing-xs) * -1); }
.-mr-sm { margin-right: calc(var(--spacing-sm) * -1); }
.-mr-md- { margin-right: calc(var(--spacing-md-) * -1); }
.-mr-md { margin-right: calc(var(--spacing-md) * -1); }
.-mr-lg { margin-right: calc(var(--spacing-lg) * -1); }
.-mr-xl { margin-right: calc(var(--spacing-xl) * -1); }

/* ==========================================================================
   Padding Utilities - All Sides
   ========================================================================== */

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md- { padding: var(--spacing-md-); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }
.p-4xl { padding: var(--spacing-4xl); }
.p-5xl { padding: var(--spacing-5xl); }
.p-6xl { padding: var(--spacing-6xl); }
.p-7xl { padding: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Top
   ========================================================================== */

.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md- { padding-top: var(--spacing-md-); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }
.pt-3xl { padding-top: var(--spacing-3xl); }
.pt-4xl { padding-top: var(--spacing-4xl); }
.pt-5xl { padding-top: var(--spacing-5xl); }
.pt-6xl { padding-top: var(--spacing-6xl); }
.pt-7xl { padding-top: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Bottom
   ========================================================================== */

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md- { padding-bottom: var(--spacing-md-); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }
.pb-3xl { padding-bottom: var(--spacing-3xl); }
.pb-4xl { padding-bottom: var(--spacing-4xl); }
.pb-5xl { padding-bottom: var(--spacing-5xl); }
.pb-6xl { padding-bottom: var(--spacing-6xl); }
.pb-7xl { padding-bottom: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Left
   ========================================================================== */

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md- { padding-left: var(--spacing-md-); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }
.pl-2xl { padding-left: var(--spacing-2xl); }
.pl-3xl { padding-left: var(--spacing-3xl); }
.pl-4xl { padding-left: var(--spacing-4xl); }
.pl-5xl { padding-left: var(--spacing-5xl); }
.pl-6xl { padding-left: var(--spacing-6xl); }
.pl-7xl { padding-left: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Right
   ========================================================================== */

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md- { padding-right: var(--spacing-md-); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }
.pr-2xl { padding-right: var(--spacing-2xl); }
.pr-3xl { padding-right: var(--spacing-3xl); }
.pr-4xl { padding-right: var(--spacing-4xl); }
.pr-5xl { padding-right: var(--spacing-5xl); }
.pr-6xl { padding-right: var(--spacing-6xl); }
.pr-7xl { padding-right: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Horizontal (Left + Right)
   ========================================================================== */

.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md- { padding-left: var(--spacing-md-); padding-right: var(--spacing-md-); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }
.px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }
.px-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); }
.px-5xl { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); }
.px-6xl { padding-left: var(--spacing-6xl); padding-right: var(--spacing-6xl); }
.px-7xl { padding-left: var(--spacing-7xl); padding-right: var(--spacing-7xl); }

/* ==========================================================================
   Padding Utilities - Vertical (Top + Bottom)
   ========================================================================== */

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md- { padding-top: var(--spacing-md-); padding-bottom: var(--spacing-md-); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.py-5xl { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); }
.py-6xl { padding-top: var(--spacing-6xl); padding-bottom: var(--spacing-6xl); }
.py-7xl { padding-top: var(--spacing-7xl); padding-bottom: var(--spacing-7xl); }

/* ==========================================================================
   Gap Utilities (For Flexbox and Grid)
   ========================================================================== */

.gap-0 { gap: 0; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md- { gap: var(--spacing-md-); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }
.gap-4xl { gap: var(--spacing-4xl); }
.gap-5xl { gap: var(--spacing-5xl); }
.gap-6xl { gap: var(--spacing-6xl); }
.gap-7xl { gap: var(--spacing-7xl); }

/* Row and Column Gaps */
.row-gap-0 { row-gap: 0; }
.row-gap-xs { row-gap: var(--spacing-xs); }
.row-gap-sm { row-gap: var(--spacing-sm); }
.row-gap-md- { row-gap: var(--spacing-md-); }
.row-gap-md { row-gap: var(--spacing-md); }
.row-gap-lg { row-gap: var(--spacing-lg); }
.row-gap-xl { row-gap: var(--spacing-xl); }
.row-gap-2xl { row-gap: var(--spacing-2xl); }

.column-gap-0 { column-gap: 0; }
.column-gap-xs { column-gap: var(--spacing-xs); }
.column-gap-sm { column-gap: var(--spacing-sm); }
.column-gap-md- { column-gap: var(--spacing-md-); }
.column-gap-md { column-gap: var(--spacing-md); }
.column-gap-lg { column-gap: var(--spacing-lg); }
.column-gap-xl { column-gap: var(--spacing-xl); }
.column-gap-2xl { column-gap: var(--spacing-2xl); }

/* ==========================================================================
   Responsive Spacing Utilities (Mobile Only)
   ========================================================================== */

@media (max-width: 767px) {
	/* Reduce large spacing on mobile */
	.mobile\:mt-0 { margin-top: 0; }
	.mobile\:mb-0 { margin-bottom: 0; }
	.mobile\:my-0 { margin-top: 0; margin-bottom: 0; }

	.mobile\:pt-0 { padding-top: 0; }
	.mobile\:pb-0 { padding-bottom: 0; }
	.mobile\:py-0 { padding-top: 0; padding-bottom: 0; }

	/* Common mobile spacing adjustments */
	.mobile\:mt-lg { margin-top: var(--spacing-lg); }
	.mobile\:mb-lg { margin-bottom: var(--spacing-lg); }
	.mobile\:pt-lg { padding-top: var(--spacing-lg); }
	.mobile\:pb-lg { padding-bottom: var(--spacing-lg); }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	/* Remove excessive spacing for print */
	.print\:m-0 { margin: 0; }
	.print\:p-0 { padding: 0; }
	.print\:my-0 { margin-top: 0; margin-bottom: 0; }
	.print\:py-0 { padding-top: 0; padding-bottom: 0; }
}