/**
 * ActivGate Utility Classes
 * =========================
 * Single-purpose utility classes using design tokens.
 */

/* ========================================
 * SPACING UTILITIES
 * ======================================== */

/* Margin utilities */
.ag-m-0 { margin: var(--ag-space-0) !important; }
.ag-m-1 { margin: var(--ag-space-1) !important; }
.ag-m-2 { margin: var(--ag-space-2) !important; }
.ag-m-3 { margin: var(--ag-space-3) !important; }
.ag-m-4 { margin: var(--ag-space-4) !important; }
.ag-m-5 { margin: var(--ag-space-5) !important; }
.ag-m-6 { margin: var(--ag-space-6) !important; }
.ag-m-8 { margin: var(--ag-space-8) !important; }
.ag-m-auto { margin: auto !important; }

/* Margin top */
.ag-mt-0 { margin-top: var(--ag-space-0) !important; }
.ag-mt-1 { margin-top: var(--ag-space-1) !important; }
.ag-mt-2 { margin-top: var(--ag-space-2) !important; }
.ag-mt-3 { margin-top: var(--ag-space-3) !important; }
.ag-mt-4 { margin-top: var(--ag-space-4) !important; }
.ag-mt-5 { margin-top: var(--ag-space-5) !important; }
.ag-mt-6 { margin-top: var(--ag-space-6) !important; }
.ag-mt-8 { margin-top: var(--ag-space-8) !important; }
.ag-mt-12 { margin-top: var(--ag-space-12) !important; }
.ag-mt-auto { margin-top: auto !important; }

/* Margin bottom */
.ag-mb-0 { margin-bottom: var(--ag-space-0) !important; }
.ag-mb-1 { margin-bottom: var(--ag-space-1) !important; }
.ag-mb-2 { margin-bottom: var(--ag-space-2) !important; }
.ag-mb-3 { margin-bottom: var(--ag-space-3) !important; }
.ag-mb-4 { margin-bottom: var(--ag-space-4) !important; }
.ag-mb-5 { margin-bottom: var(--ag-space-5) !important; }
.ag-mb-6 { margin-bottom: var(--ag-space-6) !important; }
.ag-mb-8 { margin-bottom: var(--ag-space-8) !important; }
.ag-mb-12 { margin-bottom: var(--ag-space-12) !important; }

/* Margin left */
.ag-ml-0 { margin-left: var(--ag-space-0) !important; }
.ag-ml-1 { margin-left: var(--ag-space-1) !important; }
.ag-ml-2 { margin-left: var(--ag-space-2) !important; }
.ag-ml-3 { margin-left: var(--ag-space-3) !important; }
.ag-ml-4 { margin-left: var(--ag-space-4) !important; }
.ag-ml-auto { margin-left: auto !important; }

/* Margin right */
.ag-mr-0 { margin-right: var(--ag-space-0) !important; }
.ag-mr-1 { margin-right: var(--ag-space-1) !important; }
.ag-mr-2 { margin-right: var(--ag-space-2) !important; }
.ag-mr-3 { margin-right: var(--ag-space-3) !important; }
.ag-mr-4 { margin-right: var(--ag-space-4) !important; }
.ag-mr-auto { margin-right: auto !important; }

/* Margin X (horizontal) */
.ag-mx-0 { margin-left: var(--ag-space-0) !important; margin-right: var(--ag-space-0) !important; }
.ag-mx-1 { margin-left: var(--ag-space-1) !important; margin-right: var(--ag-space-1) !important; }
.ag-mx-2 { margin-left: var(--ag-space-2) !important; margin-right: var(--ag-space-2) !important; }
.ag-mx-3 { margin-left: var(--ag-space-3) !important; margin-right: var(--ag-space-3) !important; }
.ag-mx-4 { margin-left: var(--ag-space-4) !important; margin-right: var(--ag-space-4) !important; }
.ag-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (vertical) */
.ag-my-0 { margin-top: var(--ag-space-0) !important; margin-bottom: var(--ag-space-0) !important; }
.ag-my-1 { margin-top: var(--ag-space-1) !important; margin-bottom: var(--ag-space-1) !important; }
.ag-my-2 { margin-top: var(--ag-space-2) !important; margin-bottom: var(--ag-space-2) !important; }
.ag-my-3 { margin-top: var(--ag-space-3) !important; margin-bottom: var(--ag-space-3) !important; }
.ag-my-4 { margin-top: var(--ag-space-4) !important; margin-bottom: var(--ag-space-4) !important; }
.ag-my-6 { margin-top: var(--ag-space-6) !important; margin-bottom: var(--ag-space-6) !important; }
.ag-my-8 { margin-top: var(--ag-space-8) !important; margin-bottom: var(--ag-space-8) !important; }

/* Padding utilities */
.ag-p-0 { padding: var(--ag-space-0) !important; }
.ag-p-1 { padding: var(--ag-space-1) !important; }
.ag-p-2 { padding: var(--ag-space-2) !important; }
.ag-p-3 { padding: var(--ag-space-3) !important; }
.ag-p-4 { padding: var(--ag-space-4) !important; }
.ag-p-5 { padding: var(--ag-space-5) !important; }
.ag-p-6 { padding: var(--ag-space-6) !important; }
.ag-p-8 { padding: var(--ag-space-8) !important; }

/* Padding top */
.ag-pt-0 { padding-top: var(--ag-space-0) !important; }
.ag-pt-1 { padding-top: var(--ag-space-1) !important; }
.ag-pt-2 { padding-top: var(--ag-space-2) !important; }
.ag-pt-3 { padding-top: var(--ag-space-3) !important; }
.ag-pt-4 { padding-top: var(--ag-space-4) !important; }
.ag-pt-6 { padding-top: var(--ag-space-6) !important; }
.ag-pt-8 { padding-top: var(--ag-space-8) !important; }

/* Padding bottom */
.ag-pb-0 { padding-bottom: var(--ag-space-0) !important; }
.ag-pb-1 { padding-bottom: var(--ag-space-1) !important; }
.ag-pb-2 { padding-bottom: var(--ag-space-2) !important; }
.ag-pb-3 { padding-bottom: var(--ag-space-3) !important; }
.ag-pb-4 { padding-bottom: var(--ag-space-4) !important; }
.ag-pb-6 { padding-bottom: var(--ag-space-6) !important; }
.ag-pb-8 { padding-bottom: var(--ag-space-8) !important; }

/* Padding left */
.ag-pl-0 { padding-left: var(--ag-space-0) !important; }
.ag-pl-1 { padding-left: var(--ag-space-1) !important; }
.ag-pl-2 { padding-left: var(--ag-space-2) !important; }
.ag-pl-3 { padding-left: var(--ag-space-3) !important; }
.ag-pl-4 { padding-left: var(--ag-space-4) !important; }

/* Padding right */
.ag-pr-0 { padding-right: var(--ag-space-0) !important; }
.ag-pr-1 { padding-right: var(--ag-space-1) !important; }
.ag-pr-2 { padding-right: var(--ag-space-2) !important; }
.ag-pr-3 { padding-right: var(--ag-space-3) !important; }
.ag-pr-4 { padding-right: var(--ag-space-4) !important; }

/* Padding X (horizontal) */
.ag-px-0 { padding-left: var(--ag-space-0) !important; padding-right: var(--ag-space-0) !important; }
.ag-px-1 { padding-left: var(--ag-space-1) !important; padding-right: var(--ag-space-1) !important; }
.ag-px-2 { padding-left: var(--ag-space-2) !important; padding-right: var(--ag-space-2) !important; }
.ag-px-3 { padding-left: var(--ag-space-3) !important; padding-right: var(--ag-space-3) !important; }
.ag-px-4 { padding-left: var(--ag-space-4) !important; padding-right: var(--ag-space-4) !important; }
.ag-px-6 { padding-left: var(--ag-space-6) !important; padding-right: var(--ag-space-6) !important; }

/* Padding Y (vertical) */
.ag-py-0 { padding-top: var(--ag-space-0) !important; padding-bottom: var(--ag-space-0) !important; }
.ag-py-1 { padding-top: var(--ag-space-1) !important; padding-bottom: var(--ag-space-1) !important; }
.ag-py-2 { padding-top: var(--ag-space-2) !important; padding-bottom: var(--ag-space-2) !important; }
.ag-py-3 { padding-top: var(--ag-space-3) !important; padding-bottom: var(--ag-space-3) !important; }
.ag-py-4 { padding-top: var(--ag-space-4) !important; padding-bottom: var(--ag-space-4) !important; }
.ag-py-6 { padding-top: var(--ag-space-6) !important; padding-bottom: var(--ag-space-6) !important; }

/* Gap utilities */
.ag-gap-0 { gap: var(--ag-space-0) !important; }
.ag-gap-1 { gap: var(--ag-space-1) !important; }
.ag-gap-2 { gap: var(--ag-space-2) !important; }
.ag-gap-3 { gap: var(--ag-space-3) !important; }
.ag-gap-4 { gap: var(--ag-space-4) !important; }
.ag-gap-5 { gap: var(--ag-space-5) !important; }
.ag-gap-6 { gap: var(--ag-space-6) !important; }
.ag-gap-8 { gap: var(--ag-space-8) !important; }

/* ========================================
 * TYPOGRAPHY UTILITIES
 * ======================================== */

/* Font sizes */
.ag-text-xs { font-size: var(--ag-font-size-xs) !important; }
.ag-text-sm { font-size: var(--ag-font-size-sm) !important; }
.ag-text-base { font-size: var(--ag-font-size-base) !important; }
.ag-text-md { font-size: var(--ag-font-size-md) !important; }
.ag-text-lg { font-size: var(--ag-font-size-lg) !important; }
.ag-text-xl { font-size: var(--ag-font-size-xl) !important; }
.ag-text-2xl { font-size: var(--ag-font-size-2xl) !important; }
.ag-text-3xl { font-size: var(--ag-font-size-3xl) !important; }
.ag-text-4xl { font-size: var(--ag-font-size-4xl) !important; }

/* Font weights */
.ag-font-normal { font-weight: var(--ag-font-weight-normal) !important; }
.ag-font-medium { font-weight: var(--ag-font-weight-medium) !important; }
.ag-font-semibold { font-weight: var(--ag-font-weight-semibold) !important; }
.ag-font-bold { font-weight: var(--ag-font-weight-bold) !important; }

/* Font families */
.ag-font-sans { font-family: var(--ag-font-sans) !important; }
.ag-font-serif { font-family: var(--ag-font-serif) !important; }
.ag-font-mono { font-family: var(--ag-font-mono) !important; }

/* Text colors */
.ag-text-heading { color: var(--ag-color-text-heading) !important; }
.ag-text-body { color: var(--ag-color-text-body) !important; }
.ag-text-muted { color: var(--ag-color-text-muted) !important; }
.ag-text-subtle { color: var(--ag-color-text-subtle) !important; }
.ag-text-primary { color: var(--ag-color-brand-primary) !important; }
.ag-text-success { color: var(--ag-color-success) !important; }
.ag-text-warning { color: var(--ag-color-warning) !important; }
.ag-text-error { color: var(--ag-color-error) !important; }
.ag-text-white { color: #ffffff !important; }

/* Text alignment */
.ag-text-left { text-align: left !important; }
.ag-text-center { text-align: center !important; }
.ag-text-right { text-align: right !important; }

/* Line heights */
.ag-leading-tight { line-height: var(--ag-line-height-tight) !important; }
.ag-leading-snug { line-height: var(--ag-line-height-snug) !important; }
.ag-leading-normal { line-height: var(--ag-line-height-normal) !important; }
.ag-leading-relaxed { line-height: var(--ag-line-height-relaxed) !important; }

/* ========================================
 * DISPLAY UTILITIES
 * ======================================== */

.ag-hidden { display: none !important; }
.ag-block { display: block !important; }
.ag-inline { display: inline !important; }
.ag-inline-block { display: inline-block !important; }
.ag-flex { display: flex !important; }
.ag-inline-flex { display: inline-flex !important; }
.ag-grid { display: grid !important; }

/* Flex direction */
.ag-flex-row { flex-direction: row !important; }
.ag-flex-col { flex-direction: column !important; }
.ag-flex-row-reverse { flex-direction: row-reverse !important; }
.ag-flex-col-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.ag-flex-wrap { flex-wrap: wrap !important; }
.ag-flex-nowrap { flex-wrap: nowrap !important; }

/* Justify content */
.ag-justify-start { justify-content: flex-start !important; }
.ag-justify-center { justify-content: center !important; }
.ag-justify-end { justify-content: flex-end !important; }
.ag-justify-between { justify-content: space-between !important; }
.ag-justify-around { justify-content: space-around !important; }

/* Align items */
.ag-items-start { align-items: flex-start !important; }
.ag-items-center { align-items: center !important; }
.ag-items-end { align-items: flex-end !important; }
.ag-items-stretch { align-items: stretch !important; }
.ag-items-baseline { align-items: baseline !important; }

/* Flex grow/shrink */
.ag-flex-1 { flex: 1 1 0% !important; }
.ag-flex-auto { flex: 1 1 auto !important; }
.ag-flex-none { flex: none !important; }
.ag-grow { flex-grow: 1 !important; }
.ag-grow-0 { flex-grow: 0 !important; }
.ag-shrink { flex-shrink: 1 !important; }
.ag-shrink-0 { flex-shrink: 0 !important; }

/* ========================================
 * SIZING UTILITIES
 * ======================================== */

.ag-w-full { width: 100% !important; }
.ag-w-auto { width: auto !important; }
.ag-w-fit { width: fit-content !important; }
.ag-min-w-0 { min-width: 0 !important; }
.ag-max-w-full { max-width: 100% !important; }

.ag-h-full { height: 100% !important; }
.ag-h-auto { height: auto !important; }
.ag-h-screen { height: 100vh !important; }
.ag-min-h-0 { min-height: 0 !important; }
.ag-min-h-screen { min-height: 100vh !important; }

/* ========================================
 * BACKGROUND UTILITIES
 * ======================================== */

.ag-bg-page { background-color: var(--ag-color-bg-page) !important; }
.ag-bg-surface { background-color: var(--ag-color-bg-surface) !important; }
.ag-bg-surface-alt { background-color: var(--ag-color-bg-surface-alt) !important; }
.ag-bg-primary { background-color: var(--ag-color-brand-primary) !important; }
.ag-bg-primary-soft { background-color: var(--ag-color-brand-primary-soft) !important; }
.ag-bg-success-soft { background-color: var(--ag-color-success-softer) !important; }
.ag-bg-warning-soft { background-color: var(--ag-color-warning-softer) !important; }
.ag-bg-error-soft { background-color: var(--ag-color-error-softer) !important; }
.ag-bg-transparent { background-color: transparent !important; }

/* ========================================
 * BORDER UTILITIES
 * ======================================== */

.ag-border { border: 1px solid var(--ag-color-border) !important; }
.ag-border-0 { border: 0 !important; }
.ag-border-t { border-top: 1px solid var(--ag-color-border) !important; }
.ag-border-b { border-bottom: 1px solid var(--ag-color-border) !important; }
.ag-border-l { border-left: 1px solid var(--ag-color-border) !important; }
.ag-border-r { border-right: 1px solid var(--ag-color-border) !important; }

.ag-border-strong { border-color: var(--ag-color-border-strong) !important; }
.ag-border-primary { border-color: var(--ag-color-brand-primary) !important; }
.ag-border-success { border-color: var(--ag-color-success) !important; }
.ag-border-error { border-color: var(--ag-color-error) !important; }

/* Border radius */
.ag-rounded-none { border-radius: var(--ag-radius-none) !important; }
.ag-rounded-sm { border-radius: var(--ag-radius-sm) !important; }
.ag-rounded-md { border-radius: var(--ag-radius-md) !important; }
.ag-rounded-lg { border-radius: var(--ag-radius-lg) !important; }
.ag-rounded-xl { border-radius: var(--ag-radius-xl) !important; }
.ag-rounded-2xl { border-radius: var(--ag-radius-2xl) !important; }
.ag-rounded-3xl { border-radius: var(--ag-radius-3xl) !important; }
.ag-rounded-full { border-radius: var(--ag-radius-full) !important; }

/* ========================================
 * SHADOW UTILITIES
 * ======================================== */

.ag-shadow-none { box-shadow: var(--ag-shadow-none) !important; }
.ag-shadow-xs { box-shadow: var(--ag-shadow-xs) !important; }
.ag-shadow-sm { box-shadow: var(--ag-shadow-sm) !important; }
.ag-shadow-md { box-shadow: var(--ag-shadow-md) !important; }
.ag-shadow-lg { box-shadow: var(--ag-shadow-lg) !important; }
.ag-shadow-xl { box-shadow: var(--ag-shadow-xl) !important; }

/* ========================================
 * POSITION UTILITIES
 * ======================================== */

.ag-relative { position: relative !important; }
.ag-absolute { position: absolute !important; }
.ag-fixed { position: fixed !important; }
.ag-sticky { position: sticky !important; }
.ag-static { position: static !important; }

.ag-inset-0 { inset: 0 !important; }
.ag-top-0 { top: 0 !important; }
.ag-right-0 { right: 0 !important; }
.ag-bottom-0 { bottom: 0 !important; }
.ag-left-0 { left: 0 !important; }

/* ========================================
 * Z-INDEX UTILITIES
 * ======================================== */

.ag-z-0 { z-index: var(--ag-z-base) !important; }
.ag-z-10 { z-index: var(--ag-z-dropdown) !important; }
.ag-z-20 { z-index: var(--ag-z-sticky) !important; }
.ag-z-50 { z-index: var(--ag-z-header) !important; }
.ag-z-100 { z-index: var(--ag-z-overlay) !important; }

/* ========================================
 * OVERFLOW UTILITIES
 * ======================================== */

.ag-overflow-auto { overflow: auto !important; }
.ag-overflow-hidden { overflow: hidden !important; }
.ag-overflow-visible { overflow: visible !important; }
.ag-overflow-scroll { overflow: scroll !important; }
.ag-overflow-x-auto { overflow-x: auto !important; }
.ag-overflow-y-auto { overflow-y: auto !important; }
.ag-overflow-x-hidden { overflow-x: hidden !important; }
.ag-overflow-y-hidden { overflow-y: hidden !important; }

/* ========================================
 * CURSOR UTILITIES
 * ======================================== */

.ag-cursor-pointer { cursor: pointer !important; }
.ag-cursor-default { cursor: default !important; }
.ag-cursor-not-allowed { cursor: not-allowed !important; }
.ag-cursor-grab { cursor: grab !important; }

/* ========================================
 * OPACITY UTILITIES
 * ======================================== */

.ag-opacity-0 { opacity: 0 !important; }
.ag-opacity-25 { opacity: 0.25 !important; }
.ag-opacity-50 { opacity: 0.5 !important; }
.ag-opacity-75 { opacity: 0.75 !important; }
.ag-opacity-100 { opacity: 1 !important; }

/* ========================================
 * TRANSITION UTILITIES
 * ======================================== */

.ag-transition-none { transition: none !important; }
.ag-transition-all { transition: var(--ag-transition-all) !important; }
.ag-transition-colors { transition: var(--ag-transition-colors) !important; }
.ag-transition-transform { transition: var(--ag-transition-transform) !important; }
.ag-transition-opacity { transition: var(--ag-transition-opacity) !important; }

/* ========================================
 * RESPONSIVE UTILITIES
 * ======================================== */

/* Hide on mobile, show on md+ */
@media (max-width: 767px) {
  .ag-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .ag-hidden-desktop { display: none !important; }
}

/* Stack on mobile */
@media (max-width: 767px) {
  .ag-stack-mobile {
    flex-direction: column !important;
  }
  .ag-stack-mobile > * {
    width: 100% !important;
  }
}