/* ===== Utility Classes for NTVN Platform ===== */
/* Helper classes for common styling needs */

/* Text Colors */
.text-primary { color: var(--primary-blue) !important; }
.text-secondary { color: var(--secondary-indigo) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }

/* Background Colors */
.bg-primary { background-color: var(--primary-blue) !important; }
.bg-secondary { background-color: var(--secondary-indigo) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--info) !important; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

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

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

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

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

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

/* Loading States */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile Utilities */
@media (max-width: 768px) {
    .d-mobile-none {
        display: none !important;
    }
    
    .text-mobile-center {
        text-align: center !important;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn, 
    .form-control, 
    .form-select,
    .nav-link,
    .property-card {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .property-card:hover {
        transform: none;
    }
    
    .btn-action:hover {
        background-color: inherit;
    }
}