/* app/static/css/base/utilities.css */
/* Утилитарные классы */

/* Margin */
.app-mt-0 { margin-top: 0 !important; }
.app-mt-1 { margin-top: var(--app-spacing-xs) !important; }
.app-mt-2 { margin-top: var(--app-spacing-sm) !important; }
.app-mt-3 { margin-top: var(--app-spacing-md) !important; }
.app-mt-4 { margin-top: var(--app-spacing-lg) !important; }
.app-mt-5 { margin-top: var(--app-spacing-xl) !important; }

.app-mb-0 { margin-bottom: 0 !important; }
.app-mb-1 { margin-bottom: var(--app-spacing-xs) !important; }
.app-mb-2 { margin-bottom: var(--app-spacing-sm) !important; }
.app-mb-3 { margin-bottom: var(--app-spacing-md) !important; }
.app-mb-4 { margin-bottom: var(--app-spacing-lg) !important; }
.app-mb-5 { margin-bottom: var(--app-spacing-xl) !important; }

.app-ml-0 { margin-left: 0 !important; }
.app-ml-1 { margin-left: var(--app-spacing-xs) !important; }
.app-ml-2 { margin-left: var(--app-spacing-sm) !important; }
.app-ml-3 { margin-left: var(--app-spacing-md) !important; }
.app-ml-4 { margin-left: var(--app-spacing-lg) !important; }
.app-ml-5 { margin-left: var(--app-spacing-xl) !important; }

.app-mr-0 { margin-right: 0 !important; }
.app-mr-1 { margin-right: var(--app-spacing-xs) !important; }
.app-mr-2 { margin-right: var(--app-spacing-sm) !important; }
.app-mr-3 { margin-right: var(--app-spacing-md) !important; }
.app-mr-4 { margin-right: var(--app-spacing-lg) !important; }
.app-mr-5 { margin-right: var(--app-spacing-xl) !important; }

.app-m-0 { margin: 0 !important; }
.app-m-1 { margin: var(--app-spacing-xs) !important; }
.app-m-2 { margin: var(--app-spacing-sm) !important; }
.app-m-3 { margin: var(--app-spacing-md) !important; }
.app-m-4 { margin: var(--app-spacing-lg) !important; }
.app-m-5 { margin: var(--app-spacing-xl) !important; }

/* Padding */
.app-p-0 { padding: 0 !important; }
.app-p-1 { padding: var(--app-spacing-xs) !important; }
.app-p-2 { padding: var(--app-spacing-sm) !important; }
.app-p-3 { padding: var(--app-spacing-md) !important; }
.app-p-4 { padding: var(--app-spacing-lg) !important; }
.app-p-5 { padding: var(--app-spacing-xl) !important; }

.app-pt-0 { padding-top: 0 !important; }
.app-pt-1 { padding-top: var(--app-spacing-xs) !important; }
.app-pt-2 { padding-top: var(--app-spacing-sm) !important; }
.app-pt-3 { padding-top: var(--app-spacing-md) !important; }
.app-pt-4 { padding-top: var(--app-spacing-lg) !important; }
.app-pt-5 { padding-top: var(--app-spacing-xl) !important; }

.app-pb-0 { padding-bottom: 0 !important; }
.app-pb-1 { padding-bottom: var(--app-spacing-xs) !important; }
.app-pb-2 { padding-bottom: var(--app-spacing-sm) !important; }
.app-pb-3 { padding-bottom: var(--app-spacing-md) !important; }
.app-pb-4 { padding-bottom: var(--app-spacing-lg) !important; }
.app-pb-5 { padding-bottom: var(--app-spacing-xl) !important; }

.app-pl-0 { padding-left: 0 !important; }
.app-pl-1 { padding-left: var(--app-spacing-xs) !important; }
.app-pl-2 { padding-left: var(--app-spacing-sm) !important; }
.app-pl-3 { padding-left: var(--app-spacing-md) !important; }
.app-pl-4 { padding-left: var(--app-spacing-lg) !important; }
.app-pl-5 { padding-left: var(--app-spacing-xl) !important; }

.app-pr-0 { padding-right: 0 !important; }
.app-pr-1 { padding-right: var(--app-spacing-xs) !important; }
.app-pr-2 { padding-right: var(--app-spacing-sm) !important; }
.app-pr-3 { padding-right: var(--app-spacing-md) !important; }
.app-pr-4 { padding-right: var(--app-spacing-lg) !important; }
.app-pr-5 { padding-right: var(--app-spacing-xl) !important; }

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

/* Flexbox */
.app-flex-row { flex-direction: row !important; }
.app-flex-col { flex-direction: column !important; }
.app-justify-start { justify-content: flex-start !important; }
.app-justify-end { justify-content: flex-end !important; }
.app-justify-center { justify-content: center !important; }
.app-justify-between { justify-content: space-between !important; }
.app-items-start { align-items: flex-start !important; }
.app-items-end { align-items: flex-end !important; }
.app-items-center { align-items: center !important; }
.app-flex-wrap { flex-wrap: wrap !important; }
.app-flex-1 { flex: 1 1 0% !important; }
.app-flex-grow { flex-grow: 1 !important; }
.app-flex-shrink { flex-shrink: 1 !important; }

/* Grid */
.app-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.app-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.app-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

.app-gap-0 { gap: 0 !important; }
.app-gap-1 { gap: var(--app-spacing-xs) !important; }
.app-gap-2 { gap: var(--app-spacing-sm) !important; }
.app-gap-3 { gap: var(--app-spacing-md) !important; }
.app-gap-4 { gap: var(--app-spacing-lg) !important; }
.app-gap-5 { gap: var(--app-spacing-xl) !important; }

.app-col-span-1 { grid-column: span 1 / span 1 !important; }
.app-col-span-2 { grid-column: span 2 / span 2 !important; }
.app-col-span-3 { grid-column: span 3 / span 3 !important; }
.app-col-span-4 { grid-column: span 4 / span 4 !important; }
.app-col-span-5 { grid-column: span 5 / span 5 !important; }
.app-col-span-6 { grid-column: span 6 / span 6 !important; }

/* Размеры */
.app-w-full { width: 100% !important; }
.app-w-auto { width: auto !important; }
.app-h-full { height: 100% !important; }
.app-h-auto { height: auto !important; }

/* Скругления */
.app-rounded-none { border-radius: 0 !important; }
.app-rounded-sm { border-radius: var(--app-radius-sm) !important; }
.app-rounded { border-radius: var(--app-radius-md) !important; }
.app-rounded-md { border-radius: var(--app-radius-md) !important; }
.app-rounded-lg { border-radius: var(--app-radius-lg) !important; }
.app-rounded-xl { border-radius: var(--app-radius-xl) !important; }
.app-rounded-full { border-radius: 9999px !important; }

/* Тени */
.app-shadow-none { box-shadow: none !important; }
.app-shadow-sm { box-shadow: var(--app-shadow-sm) !important; }
.app-shadow { box-shadow: var(--app-shadow-md) !important; }
.app-shadow-md { box-shadow: var(--app-shadow-md) !important; }
.app-shadow-lg { box-shadow: var(--app-shadow-lg) !important; }

/* Позиционирование */
.app-relative { position: relative !important; }
.app-absolute { position: absolute !important; }
.app-fixed { position: fixed !important; }
.app-sticky { position: sticky !important; }

/* Текст */
.app-text-left { text-align: left !important; }
.app-text-center { text-align: center !important; }
.app-text-right { text-align: right !important; }
.app-text-uppercase { text-transform: uppercase !important; }
.app-text-lowercase { text-transform: lowercase !important; }
.app-text-capitalize { text-transform: capitalize !important; }
.app-text-muted { color: var(--app-color-text-muted) !important; }
.app-text-primary { color: var(--app-color-primary) !important; }
.app-text-success { color: var(--app-color-success) !important; }
.app-text-danger { color: var(--app-color-danger) !important; }
.app-text-warning { color: var(--app-color-warning) !important; }

/* Цвета фона */
.app-bg-primary { background-color: var(--app-color-primary) !important; }
.app-bg-secondary { background-color: var(--app-color-secondary) !important; }
.app-bg-tertiary { background-color: var(--app-color-bg-tertiary) !important; }
.app-bg-success { background-color: var(--app-color-success) !important; }
.app-bg-danger { background-color: var(--app-color-danger) !important; }
.app-bg-warning { background-color: var(--app-color-warning) !important; }
.app-bg-info { background-color: var(--app-color-info) !important; }
.app-bg-transparent { background-color: transparent !important; }
.app-bg-white { background-color: white !important; }
.app-bg-body { background-color: var(--app-color-bg-body) !important; }

/* Курсоры */
.app-cursor-pointer { cursor: pointer !important; }
.app-cursor-default { cursor: default !important; }
.app-cursor-not-allowed { cursor: not-allowed !important; }

/* Прозрачность */
.app-opacity-0 { opacity: 0 !important; }
.app-opacity-50 { opacity: 0.5 !important; }
.app-opacity-100 { opacity: 1 !important; }

/* Переполнение */
.app-overflow-hidden { overflow: hidden !important; }
.app-overflow-auto { overflow: auto !important; }
.app-overflow-y-auto { overflow-y: auto !important; }

/* Z-index */
.app-z-10 { z-index: 10 !important; }
.app-z-20 { z-index: 20 !important; }
.app-z-30 { z-index: 30 !important; }
.app-z-40 { z-index: 40 !important; }
.app-z-50 { z-index: 50 !important; }

/* Адаптивные утилиты */
@media (min-width: 768px) {
    .md\:app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .md\:app-col-span-1 { grid-column: span 1 / span 1 !important; }
    .md\:app-col-span-2 { grid-column: span 2 / span 2 !important; }
    .md\:app-col-span-3 { grid-column: span 3 / span 3 !important; }
    .md\:app-col-span-4 { grid-column: span 4 / span 4 !important; }
    .md\:app-hidden { display: none !important; }
    .md\:app-flex { display: flex !important; }
    .md\:app-block { display: block !important; }
}

@media (min-width: 1024px) {
    .lg\:app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}