/* ========================================
   🎯 UTILITY CLASSES
   ======================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }

.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.p-1 { padding: var(--space-sm); }
.p-2 { padding: var(--space-md); }
.p-3 { padding: var(--space-lg); }

.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: var(--space-sm); }
.gap-2 { gap: var(--space-md); }
.gap-3 { gap: var(--space-lg); }

.hidden { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.mobile-only { display: block; }
.desktop-only { display: none; }

@media (min-width: 768px) {
    .mobile-only { display: none; }
    .desktop-only { display: block; }
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.up { color: #21c964; }
.down { color: #ff5e5e; }
.muted { opacity: .7; }

.tabs .tab-panel { display: none; }
.tabs .tab-panel.active { display: block; }
.tabs .tab-btn.active { background: #1a2442; border-color: #3c4e7a; }

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .card { padding: var(--space-lg); }
}

.info-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem 0;
}

.info-row > span {
    width: 180px;
    opacity: .8;
}

.font-mono { font-family: var(--font-mono); }
.break-anywhere { word-break: break-word; overflow-wrap: anywhere; }

/* ========================================
   🌟 SPECIAL EFFECTS
   ======================================== */
.glow { box-shadow: var(--shadow-glow); }

@media (min-width: 768px) {
    .hover-lift { transition: transform var(--transition-base); }
    .hover-lift:hover { transform: translateY(-4px); }
}

.glass {
    background: rgba(21, 27, 61, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 139, 255, 0.2);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========================================
   🎭 ANIMATIONS
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface) 25%,
        rgba(124, 139, 255, 0.1) 50%,
        var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@media (min-width: 768px) {
    .loading-spinner {
        width: 24px;
        height: 24px;
    }
}

.empty-state {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    opacity: 0.6;
}

@media (min-width: 768px) {
    .empty-icon { font-size: 3rem; }
}

.empty-text { font-size: var(--text-base); }

@media (min-width: 768px) {
    .empty-text { font-size: var(--text-lg); }
}

/* ========================================
   🚀 PERFORMANCE OPTIMIZATIONS
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (min-width: 768px) {
    .kanban-card, .kpi-card, .btn, .modal { will-change: transform; }
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: local('Inter'), url('/static/fonts/inter.woff2') format('woff2');
}


/* Animation utility classes */
.fade-in-up { animation: fadeInUp 0.8s var(--animation-smooth); }
.fade-in-scale { animation: fadeInScale 0.6s var(--animation-smooth) backwards; }


/* === Icon sizing & rotation === */
.icon { display:inline-block; width:1em; height:1em; vertical-align:-0.125em; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }

/* Line-height compact utile pour les boutons “au texte” */
.lh-1 { line-height: 1; }

/* ==========================================================================
   utilities.css — utilitaires globaux
   ========================================================================== */

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

/* Helpers génériques */
.hidden { display:none !important; }
.right  { text-align:right !important; }
.mt-2   { margin-top:8px !important; }

/* Couleurs sémantiques (si non définies ailleurs) */
.text-success{ color: var(--color-success, #22c55e) !important; }
.text-danger { color: var(--color-danger,  #ef4444) !important; }
.text-muted  { color: var(--color-text-muted, #9fb0ca) !important; }