/**
 * D-One UI Utilities - Sistema di Helper CSS
 * Utilities basate sui pattern esistenti nelle pagine UI
 * Progettate per ridurre CSS inline e standardizzare spacing/text/layout
 */

/* ========================================
   SPACING UTILITIES
   Pattern da Services/KB: padding:10px 2rem, margin-top:0, ecc.
   ======================================== */

/* Margin utilities - basate su pattern esistenti */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }

/* Standard hero spacing - dal pattern KB/Services */
.hero-margin-bottom { margin-bottom: 2rem !important; }
.content-section-reset {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Padding utilities - dai pattern più usati */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.p-1 { padding: var(--space-4) !important; } /* 1rem */
.p-2 { padding: var(--space-8) !important; } /* 2rem */
.p-3 { padding: 3rem !important; }

.pt-1 { padding-top: var(--space-4) !important; }
.pb-1 { padding-bottom: var(--space-4) !important; }
.pt-2 { padding-top: var(--space-8) !important; }
.pb-2 { padding-bottom: var(--space-8) !important; }

/* Container padding standard - dal pattern Services */
.container-padding {
    padding: 10px 2rem !important;
}
.container-padding-sm {
    padding: var(--space-4) var(--space-6) !important;
}

/* Card padding standard */
.card-padding {
    padding: var(--card-padding) !important; /* 1.5rem da tokens */
}
.card-padding-lg {
    padding: 2rem !important;
}

/* ========================================
   TEXT UTILITIES
   Pattern da Services/KB: nowrap, ellipsis, font-sizes
   ======================================== */

/* Text wrapping - dal pattern subtitle Services/KB */
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Text sizes - dai pattern hero esistenti */
.text-hero-title {
    font-size: 1.75rem !important; /* h3 Services */
    font-weight: 700 !important;
    margin-bottom: var(--space-2) !important;
}
.text-hero-subtitle {
    font-size: 0.95rem !important; /* pattern Services/KB */
    margin-bottom: var(--space-4) !important;
}

/* Mobile responsive text - dal pattern esistente */
@media (max-width: 576px) {
    .text-hero-title {
        font-size: 1.5rem !important;
    }
    .text-hero-subtitle {
        font-size: 0.85rem !important;
        white-space: normal !important; /* override nowrap su mobile */
    }
    .mobile-text-wrap {
        white-space: normal !important;
        max-width: 90% !important;
    }
}

/* Desktop-specific text behavior */
@media (min-width: 992px) {
    .desktop-nowrap {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }
}

/* Text colors - semantici */
.text-white { color: white !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* ========================================
   LAYOUT UTILITIES
   Pattern da pagine esistenti
   ======================================== */

/* Flexbox utilities */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.justify-center { justify-content: center !important; }
.align-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* Width/Height utilities */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-auto { width: auto !important; }
.h-auto { height: auto !important; }

/* Max-width utilities */
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }

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

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

/* Z-index utilities */
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-10 { z-index: 10 !important; }
.z-dropdown { z-index: var(--z-index-dropdown) !important; }
.z-modal { z-index: var(--z-index-modal) !important; }

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

/* Responsive visibility */
@media (max-width: 576px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 577px) {
    .show-mobile { display: none !important; }
    .hide-desktop { display: none !important; }
}

/* ========================================
   BORDER & SHADOW UTILITIES
   ======================================== */

.border-0 { border: none !important; }
.border-radius { border-radius: var(--radius-md) !important; }
.border-radius-lg { border-radius: var(--radius-lg) !important; }
.border-radius-xl { border-radius: var(--radius-xl) !important; }

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

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

.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: white !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.bg-primary { background-color: var(--primary) !important; }

/* Gradient backgrounds - dai pattern esistenti */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-services-hero {
    background: linear-gradient(135deg, #9458cf 0%, #4652c2 50%, #6747b4 100%) !important;
}

/* ========================================
   HOVER & INTERACTION UTILITIES
   ======================================== */

.hover-lift:hover {
    transform: translateY(-2px) !important;
    transition: transform var(--transition-fast) !important;
}
.hover-lift-lg:hover {
    transform: translateY(-8px) !important;
    transition: transform var(--transition-base) !important;
}

.hover-shadow:hover {
    box-shadow: var(--shadow-lg) !important;
    transition: box-shadow var(--transition-base) !important;
}

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

/* ========================================
   ICON UTILITIES
   Pattern per forzare icone bianche su hero
   ======================================== */

.icon-white {
    color: white !important;
}
.icon-white i,
.icon-white .fas,
.icon-white .far {
    color: white !important;
}

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

.fade-in {
    animation: fadeIn var(--transition-base) ease-in-out !important;
}

.slide-up {
    animation: slideUp var(--transition-base) ease-out !important;
}

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

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

/* Stagger children animation */
.stagger-children > * {
    opacity: 0;
    animation: slideUp var(--transition-base) ease-out forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }