/**
 * TMngO - Buttons Component - VERSION FINALE
 * Version: 1.1
 * Date: 11 février 2026
 * 
 * Système de boutons unifié COMPLET :
 * - Base button
 * - Variants (enr, hist, param, user, primary, secondary, danger)
 * - Tailles (sm, md, lg, xl)
 * - Modifiers (outline, ghost, block, icon)
 * - Alignement header
 * - Responsive labels (icône mobile, abrégé tablet, complet desktop)
 */

/* ========================================
   BASE BUTTON
   ======================================== */

.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    
    /* Sizing (défaut: medium) */
    padding: 0.3rem 0.8rem;
    min-height: 28px;
    font-size: 0.75rem;
    
    /* Appearance */
    font-family: -apple-system, 'Segoe UI', Roboto, Oxygen, Cantarell, sans-serif;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    
    /* Border & Radius */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    
    /* Metallic gradient base */
    background: linear-gradient(145deg, #f0f4f8 0%, #d1d9e0 50%, #b8c6d4 100%);
    color: #2c3e50;
    
    /* Shadow effects */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    
    /* Effects */
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    
    /* Position for ::before shine effect */
    position: relative;
    overflow: hidden;
}

/* Shine effect on hover */
.tm-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.tm-btn:hover::before {
    left: 100%;
}

/* Hover state */
.tm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    background: linear-gradient(145deg, #ffffff 0%, #e1e8ed 50%, #c8d6e4 100%);
}

/* Active/pressed state */
.tm-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(0, 0, 0, 0.1),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

/* Disabled state */
.tm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   BUTTON VARIANTS - Colors
   ======================================== */

/* Enregistrement - Blue */
.tm-btn-enr {
    background: linear-gradient(145deg, #e8f4fd 0%, #b8d4e8 50%, #8fb4d4 100%);
    border-color: rgba(184, 212, 232, 0.5);
}

.tm-btn-enr:hover {
    background: linear-gradient(145deg, #f0f8ff 0%, #c8e0f0 50%, #9fc4e0 100%);
}

.tm-btn-enr.active {
    background: linear-gradient(145deg, #4a90e2 0%, #357abd 50%, #2968a8 100%);
    color: white;
    box-shadow: 
        0 2px 4px rgba(74, 144, 226, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.tm-btn-enr.active:hover {
    background: linear-gradient(145deg, #5ba0f2 0%, #4580cd 50%, #3978b8 100%);
    box-shadow: 
        0 3px 6px rgba(74, 144, 226, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

/* Historique - Green */
.tm-btn-hist {
    background: linear-gradient(145deg, #f0f8e8 0%, #d4e8b8 50%, #b8d48f 100%);
    border-color: rgba(212, 232, 184, 0.5);
}

.tm-btn-hist:hover {
    background: linear-gradient(145deg, #f8fff0 0%, #e0f0c8 50%, #c4e09f 100%);
}

.tm-btn-hist.active {
    background: linear-gradient(145deg, #10b981 0%, #059669 50%, #047857 100%);
    color: white;
    box-shadow: 
        0 2px 4px rgba(16, 185, 129, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.tm-btn-hist.active:hover {
    background: linear-gradient(145deg, #34d399 0%, #10b981 50%, #059669 100%);
}

/* Paramètres - Orange */
.tm-btn-param {
    background: linear-gradient(145deg, #fef3e8 0%, #fde8b8 50%, #fbd48f 100%);
    border-color: rgba(253, 232, 184, 0.5);
}

.tm-btn-param:hover {
    background: linear-gradient(145deg, #fffbf0 0%, #fef0c8 50%, #fde09f 100%);
}

.tm-btn-param.active {
    background: linear-gradient(145deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: white;
    box-shadow: 
        0 2px 4px rgba(245, 158, 11, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.tm-btn-param.active:hover {
    background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}

/* User - Rose/Pink */
.tm-btn-user {
    background: linear-gradient(145deg, #f8e8f0 0%, #e8b8d4 50%, #d48fb8 100%);
    border-color: rgba(232, 184, 212, 0.5);
}

.tm-btn-user:hover {
    background: linear-gradient(145deg, #fff0f8 0%, #f0c8e0 50%, #e09fc4 100%);
}

/* Primary - Blue solid */
.tm-btn-primary {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.tm-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

/* Secondary - Gray */
.tm-btn-secondary {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

.tm-btn-secondary:hover {
    background: #4b5563;
    border-color: #4b5563;
}

/* Danger - Red */
.tm-btn-danger {
    background: linear-gradient(145deg, #fee2e2 0%, #fca5a5 50%, #ef4444 100%);
    color: white;
    border-color: rgba(239, 68, 68, 0.5);
}

.tm-btn-danger:hover {
    background: linear-gradient(145deg, #fecaca 0%, #f87171 50%, #dc2626 100%);
}

/* ========================================
   BUTTON SIZES
   ======================================== */

.tm-btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    min-height: 24px;
}

.tm-btn-md {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    min-height: 28px;
}

.tm-btn-lg {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    min-height: 36px;
}

.tm-btn-xl {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
}

/* ========================================
   BUTTON MODIFIERS
   ======================================== */

/* Block button - full width */
.tm-btn-block {
    width: 100%;
}

/* Icon button - square, no padding */
.tm-btn-icon {
    padding: 0.3rem;
    aspect-ratio: 1;
    min-width: 28px;
}

.tm-btn-icon.tm-btn-sm {
    min-width: 24px;
}

.tm-btn-icon.tm-btn-lg {
    min-width: 36px;
}

.tm-btn-icon.tm-btn-xl {
    min-width: 44px;
}

/* Outline variant */
.tm-btn-outline {
    background: transparent;
    border-width: 2px;
}

.tm-btn-outline.tm-btn-enr {
    border-color: #3b82f6;
    color: #3b82f6;
}

.tm-btn-outline.tm-btn-hist {
    border-color: #10b981;
    color: #10b981;
}

.tm-btn-outline.tm-btn-param {
    border-color: #f59e0b;
    color: #f59e0b;
}

.tm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Ghost variant */
.tm-btn-ghost {
    background: transparent;
    border: none;
    box-shadow: none;
}

.tm-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ========================================
   HEADER BUTTON ALIGNMENT
   ======================================== */

/* Force tous les boutons header même hauteur et alignement */
.tm-responsive-header .tm-btn {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    line-height: 1;
    vertical-align: top;
    position: relative;
}

/* Label standard */
.tm-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    line-height: 1;
}

/* Dropdown arrow - integrated into button flow */
.tm-dropdown-arrow {
    font-size: 0.6rem;
    margin-left: 0.2rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* ========================================
   RESPONSIVE - LABELS
   ======================================== */

/* TABLET: Labels abrégés (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Masquer le texte original */
    .tm-responsive-header .tm-btn-label {
        font-size: 0;
        gap: 0;
    }
    
    /* Afficher l'abréviation via ::after */
    .tm-responsive-header .tm-btn-enr .tm-btn-label::after {
        content: '🎙️ Enreg';
        font-size: 0.75rem;
    }

    .tm-responsive-header .tm-btn-hist .tm-btn-label::after {
        content: '📋 Hist';
        font-size: 0.75rem;
    }

    .tm-responsive-header .tm-btn-user .tm-btn-label::after {
        content: '👤 User';
        font-size: 0.75rem;
    }
    
    .tm-responsive-header .tm-btn-param .tm-btn-label::after {
        content: '⚙️ Param';
        font-size: 0.75rem;
    }
}

/* MOBILE: Icône seule (max 768px) */
@media (max-width: 768px) {
    /* Boutons header plus petits */
    .tm-responsive-header .tm-btn {
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        padding: 0 0.4rem;
        min-width: 32px;
    }
    
    /* Masquer tout le texte */
    .tm-responsive-header .tm-btn-label {
        font-size: 0 !important;
        gap: 0;
    }
    
    /* Afficher UNIQUEMENT l'icône via data-icon */
    .tm-responsive-header .tm-btn-label::after {
        content: attr(data-icon);
        font-size: 1rem;
        display: inline-block;
    }
    
    /* Boutons actions (non-header) responsive */
    .tm-btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
        min-height: 24px;
    }
    
    .tm-btn-lg {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
        min-height: 32px;
    }
    
    .tm-btn-xl {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        min-height: 40px;
    }
}

/* Super petit mobile */
@media (max-width: 480px) {
    .tm-responsive-header .tm-btn {
        height: 22px;
        min-height: 22px;
        max-height: 22px;
        padding: 0 0.3rem;
        min-width: 28px;
    }
    
    .tm-responsive-header .tm-btn-label::after {
        font-size: 0.9rem;
    }
    
    .tm-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
        min-height: 22px;
    }
    
    .tm-btn-lg {
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        min-height: 28px;
    }
}

/* ========================================
   RESPONSIVE - LABELS HEADER
   ======================================== */

/* TABLET: Labels abrégés (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .tm-responsive-header .tm-btn-label {
        font-size: 0 !important;
        gap: 0;
    }
    
    .tm-responsive-header .tm-btn-enr .tm-btn-label::after {
        content: '🎙️ Enreg';
        font-size: 0.75rem;
        display: inline-block;
    }

    .tm-responsive-header .tm-btn-hist .tm-btn-label::after {
        content: '📋 Hist';
        font-size: 0.75rem;
        display: inline-block;
    }

    .tm-responsive-header .tm-btn-user .tm-btn-label::after {
        content: '👤 User';
        font-size: 0.75rem;
        display: inline-block;
    }
    
    .tm-responsive-header .tm-btn-param .tm-btn-label::after {
        content: '⚙️ Param';
        font-size: 0.75rem;
        display: inline-block;
    }
}

/* MOBILE: Icône seule (max 768px) */
@media (max-width: 768px) {
    .tm-responsive-header .tm-btn {
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        padding: 0 0.4rem;
        min-width: 32px;
    }
    
    .tm-responsive-header .tm-btn-label {
        font-size: 0 !important;
        gap: 0;
    }
    
    .tm-responsive-header .tm-btn-label::after {
        content: attr(data-icon) !important;
        font-size: 1rem !important;
        display: inline-block !important;
    }
}

/* Super petit mobile */
@media (max-width: 480px) {
    .tm-responsive-header .tm-btn {
        height: 22px;
        min-height: 22px;
        max-height: 22px;
        padding: 0 0.3rem;
        min-width: 28px;
    }
    
    .tm-responsive-header .tm-btn-label::after {
        font-size: 0.9rem !important;
    }
}