/* Marketing Platform Design System - Utility Classes */

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

.transition-standard {
  transition: all var(--transition-standard);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

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

.shadow-custom-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-custom-md {
  box-shadow: var(--shadow-md);
}

.shadow-custom-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-custom-hover {
  box-shadow: var(--shadow-hover);
}

.shadow-none {
  box-shadow: none;
}

/* ===================================
   COLOR UTILITIES
   =================================== */

.text-navy-50 { color: var(--navy-50); }
.text-navy-100 { color: var(--navy-100); }
.text-navy-200 { color: var(--navy-200); }
.text-navy-300 { color: var(--navy-300); }
.text-navy-400 { color: var(--navy-400); }
.text-navy-500 { color: var(--navy-500); }
.text-navy-600 { color: var(--navy-600); }
.text-navy-700 { color: var(--navy-700); }
.text-navy-800 { color: var(--navy-800); }
.text-navy-900 { color: var(--navy-900); }

.bg-navy-50 { background-color: var(--navy-50); }
.bg-navy-100 { background-color: var(--navy-100); }
.bg-navy-200 { background-color: var(--navy-200); }
.bg-navy-300 { background-color: var(--navy-300); }
.bg-navy-400 { background-color: var(--navy-400); }
.bg-navy-500 { background-color: var(--navy-500); }
.bg-navy-600 { background-color: var(--navy-600); }
.bg-navy-700 { background-color: var(--navy-700); }
.bg-navy-800 { background-color: var(--navy-800); }
.bg-navy-900 { background-color: var(--navy-900); }

.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }

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

.border-custom {
  border: 1px solid var(--gray-200);
}

.border-custom-primary {
  border: 1px solid var(--navy-500);
}

.border-custom-secondary {
  border: 1px solid var(--gray-300);
}

.border-custom-success {
  border: 1px solid var(--success-500);
}

.border-custom-warning {
  border: 1px solid var(--warning-500);
}

.border-custom-error {
  border: 1px solid var(--error-500);
}

.border-custom-info {
  border: 1px solid var(--info-500);
}

.rounded-custom-sm {
  border-radius: var(--radius-sm);
}

.rounded-custom-md {
  border-radius: var(--radius-md);
}

.rounded-custom-lg {
  border-radius: var(--radius-lg);
}

.rounded-custom-xl {
  border-radius: var(--radius-xl);
}

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

.p-custom-1 { padding: var(--space-1); }
.p-custom-2 { padding: var(--space-2); }
.p-custom-3 { padding: var(--space-3); }
.p-custom-4 { padding: var(--space-4); }
.p-custom-5 { padding: var(--space-5); }
.p-custom-6 { padding: var(--space-6); }
.p-custom-8 { padding: var(--space-8); }
.p-custom-10 { padding: var(--space-10); }
.p-custom-12 { padding: var(--space-12); }
.p-custom-16 { padding: var(--space-16); }

.px-custom-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-custom-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-custom-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-custom-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-custom-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-custom-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-custom-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-custom-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-custom-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

.py-custom-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-custom-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-custom-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-custom-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-custom-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-custom-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-custom-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-custom-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-custom-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.m-custom-1 { margin: var(--space-1); }
.m-custom-2 { margin: var(--space-2); }
.m-custom-3 { margin: var(--space-3); }
.m-custom-4 { margin: var(--space-4); }
.m-custom-5 { margin: var(--space-5); }
.m-custom-6 { margin: var(--space-6); }
.m-custom-8 { margin: var(--space-8); }
.m-custom-10 { margin: var(--space-10); }
.m-custom-12 { margin: var(--space-12); }
.m-custom-16 { margin: var(--space-16); }

.mx-custom-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-custom-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-custom-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-custom-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-custom-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-custom-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-custom-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-custom-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-custom-12 { margin-left: var(--space-12); margin-right: var(--space-12); }

.my-custom-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-custom-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-custom-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-custom-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-custom-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-custom-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-custom-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-custom-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-custom-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

.mt-custom-1 { margin-top: var(--space-1); }
.mt-custom-2 { margin-top: var(--space-2); }
.mt-custom-3 { margin-top: var(--space-3); }
.mt-custom-4 { margin-top: var(--space-4); }
.mt-custom-5 { margin-top: var(--space-5); }
.mt-custom-6 { margin-top: var(--space-6); }
.mt-custom-8 { margin-top: var(--space-8); }
.mt-custom-10 { margin-top: var(--space-10); }
.mt-custom-12 { margin-top: var(--space-12); }
.mt-custom-16 { margin-top: var(--space-16); }

.mb-custom-1 { margin-bottom: var(--space-1); }
.mb-custom-2 { margin-bottom: var(--space-2); }
.mb-custom-3 { margin-bottom: var(--space-3); }
.mb-custom-4 { margin-bottom: var(--space-4); }
.mb-custom-5 { margin-bottom: var(--space-5); }
.mb-custom-6 { margin-bottom: var(--space-6); }
.mb-custom-8 { margin-bottom: var(--space-8); }
.mb-custom-10 { margin-bottom: var(--space-10); }
.mb-custom-12 { margin-bottom: var(--space-12); }
.mb-custom-16 { margin-bottom: var(--space-16); }

.ml-custom-1 { margin-left: var(--space-1); }
.ml-custom-2 { margin-left: var(--space-2); }
.ml-custom-3 { margin-left: var(--space-3); }
.ml-custom-4 { margin-left: var(--space-4); }
.ml-custom-5 { margin-left: var(--space-5); }
.ml-custom-6 { margin-left: var(--space-6); }
.ml-custom-8 { margin-left: var(--space-8); }
.ml-custom-10 { margin-left: var(--space-10); }
.ml-custom-12 { margin-left: var(--space-12); }

.mr-custom-1 { margin-right: var(--space-1); }
.mr-custom-2 { margin-right: var(--space-2); }
.mr-custom-3 { margin-right: var(--space-3); }
.mr-custom-4 { margin-right: var(--space-4); }
.mr-custom-5 { margin-right: var(--space-5); }
.mr-custom-6 { margin-right: var(--space-6); }
.mr-custom-8 { margin-right: var(--space-8); }
.mr-custom-10 { margin-right: var(--space-10); }
.mr-custom-12 { margin-right: var(--space-12); }

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

.text-xs-custom { font-size: var(--text-xs); }
.text-sm-custom { font-size: var(--text-sm); }
.text-base-custom { font-size: var(--text-base); }
.text-lg-custom { font-size: var(--text-lg); }
.text-xl-custom { font-size: var(--text-xl); }
.text-2xl-custom { font-size: var(--text-2xl); }
.text-3xl-custom { font-size: var(--text-3xl); }
.text-4xl-custom { font-size: var(--text-4xl); }

.font-normal-custom { font-weight: var(--font-normal); }
.font-medium-custom { font-weight: var(--font-medium); }
.font-semibold-custom { font-weight: var(--font-semibold); }
.font-bold-custom { font-weight: var(--font-bold); }

.leading-tight-custom { line-height: var(--leading-tight); }
.leading-normal-custom { line-height: var(--leading-normal); }
.leading-relaxed-custom { line-height: var(--leading-relaxed); }

/* ===================================
   LAYOUT UTILITIES
   =================================== */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  padding: var(--space-6);
}

.dashboard-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.dashboard-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* ===================================
   INTERACTIVE UTILITIES
   =================================== */

.hover-lift {
  transition: transform var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-shadow {
  transition: box-shadow var(--transition-fast);
}

.hover-shadow:hover {
  box-shadow: var(--shadow-hover);
}

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

.sticky-custom {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-tooltip { z-index: var(--z-tooltip); }

/* ===================================
   RESPONSIVE UTILITIES - ENHANCED
   =================================== */

@media (max-width: 576px) {
  .mobile-hidden {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
  }

  .mobile-no-padding {
    padding: 0 !important;
  }

  .mobile-no-margin {
    margin: 0 !important;
  }

  /* Touch Target Utilities */
  .mobile-touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .mobile-touch-target-large {
    min-height: 48px !important;
    min-width: 48px !important;
  }

  /* Mobile Spacing */
  .mobile-spacing-compact {
    margin-bottom: var(--space-2) !important;
  }

  .mobile-spacing-normal {
    margin-bottom: var(--space-4) !important;
  }

  .mobile-spacing-loose {
    margin-bottom: var(--space-6) !important;
  }

  /* Mobile Text */
  .mobile-text-sm {
    font-size: var(--text-sm) !important;
  }

  .mobile-text-base {
    font-size: var(--text-base) !important;
  }

  .mobile-text-lg {
    font-size: var(--text-lg) !important;
  }

  /* Mobile Layout */
  .mobile-stack {
    flex-direction: column !important;
  }

  .mobile-column {
    flex-direction: column !important;
  }

  .mobile-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile Cards */
  .mobile-card-compact {
    padding: var(--space-3) !important;
    margin-bottom: var(--space-2) !important;
  }

  .mobile-card-spacious {
    padding: var(--space-6) !important;
    margin-bottom: var(--space-4) !important;
  }

  /* Mobile Borders */
  .mobile-border-top {
    border-top: 1px solid var(--gray-200) !important;
    padding-top: var(--space-3) !important;
  }

  .mobile-border-bottom {
    border-bottom: 1px solid var(--gray-200) !important;
    padding-bottom: var(--space-3) !important;
  }

  /* Mobile Shadows */
  .mobile-shadow-elevated {
    box-shadow: var(--shadow-lg) !important;
  }

  /* Mobile Sticky Elements */
  .mobile-sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-sticky) !important;
  }

  /* Mobile Safe Areas for Notch Devices */
  .mobile-safe-top {
    padding-top: env(safe-area-inset-top) !important;
  }

  .mobile-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* Tablet Specific Utilities */
@media (min-width: 577px) and (max-width: 1023px) {
  .tablet-hidden {
    display: none !important;
  }

  .tablet-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

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

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

/* ===================================
   SPACING FIX UTILITIES - PREVENT MARGIN COLLAPSE
   =================================== */

/* Use these instead of mb-* classes when you need guaranteed spacing */
.pb-fixed-1 { padding-bottom: var(--space-1) !important; }
.pb-fixed-2 { padding-bottom: var(--space-2) !important; }
.pb-fixed-3 { padding-bottom: var(--space-3) !important; }
.pb-fixed-4 { padding-bottom: var(--space-4) !important; }
.pb-fixed-5 { padding-bottom: var(--space-5) !important; }
.pb-fixed-6 { padding-bottom: var(--space-6) !important; }
.pb-fixed-8 { padding-bottom: var(--space-8) !important; }

/* ===================================
   ACCESSIBILITY UTILITIES
   =================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible-only:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===================================
   ANIMATION UTILITIES
   =================================== */

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.3s ease-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   FORM STATE UTILITIES
   =================================== */

.is-valid-custom {
  border-color: var(--success-500) !important;
}

.is-valid-custom:focus {
  border-color: var(--success-500) !important;
  box-shadow:
    0 0 0 3px rgba(72, 187, 120, 0.1),
    inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

.is-invalid-custom {
  border-color: var(--error-500) !important;
}

.is-invalid-custom:focus {
  border-color: var(--error-500) !important;
  box-shadow:
    0 0 0 3px rgba(229, 62, 62, 0.1),
    inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

.valid-feedback-custom {
  color: var(--success-600);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.invalid-feedback-custom {
  color: var(--error-600);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* ===================================
   TEXT TRUNCATION UTILITIES - ENHANCED
   =================================== */

/* Basic text truncation */
.text-truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--leading-normal);
}

.text-truncate-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: var(--leading-normal);
}

/* URL-specific truncation */
.url-truncate-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.url-truncate-md {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.url-truncate-lg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

/* Responsive text truncation */
@media (max-width: 576px) {
  .url-truncate-responsive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
  }

  .text-truncate-mobile-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: var(--leading-tight);
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .url-truncate-responsive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }
}

@media (min-width: 769px) {
  .url-truncate-responsive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
  }
}

/* Word break utilities */
.text-break-word {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.text-break-all {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ===================================
   MOBILE RESPONSIVE ENHANCEMENTS
   =================================== */

/* Enhanced mobile container */
@media (max-width: 768px) {
  .container-mobile-fluid {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  /* Mobile card spacing */
  .mobile-card-stack > * + * {
    margin-top: var(--space-4);
  }

  /* Mobile button stacking */
  .mobile-button-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Mobile horizontal scroll with fade */
  .mobile-scroll-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .mobile-scroll-container::before,
  .mobile-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--space-4);
    pointer-events: none;
    z-index: 1;
  }

  .mobile-scroll-container::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
  }

  .mobile-scroll-container::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
  }
}

/* Mobile safe area support */
@supports (padding: max(0px)) {
  .mobile-safe-padding {
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }

  .mobile-safe-margin {
    margin-left: max(var(--space-3), env(safe-area-inset-left));
    margin-right: max(var(--space-3), env(safe-area-inset-right));
  }
}