/**
 * Styles pour les tags cliquables TrocLocal
 * Conforme aux instructions Copilot
 */

/* Styles de base pour tous les tags cliquables */
.clickable-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.clickable-tag:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tag catégorie */
.tag-category {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.tag-category:hover {
    background-color: #bbdefb;
    color: #0d47a1;
    border-color: #90caf9;
}

/* Tag utilisateur */
.tag-user {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #e1bee7;
}

.tag-user:hover {
    background-color: #e1bee7;
    color: #4a148c;
    border-color: #ce93d8;
}

/* Tag type */
.tag-type {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.tag-type:hover {
    background-color: #c8e6c9;
    color: #1b5e20;
    border-color: #a5d6a7;
}

/* Tag ville */
.tag-city {
    background-color: #fff3e0;
    color: #ef6c00;
    border-color: #ffcc02;
}

.tag-city:hover {
    background-color: #ffcc02;
    color: #e65100;
    border-color: #ffb300;
}

/* Variantes pour les différentes tailles */
.tag-small {
    font-size: 0.8em;
    padding: 1px 4px;
}

.tag-large {
    font-size: 1em;
    padding: 4px 8px;
}

/* Style avec icône */
.tag-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.tag-icon {
    font-size: 0.8em;
}

/* Responsive */
@media (max-width: 768px) {
    .clickable-tag {
        font-size: 0.8em;
        padding: 2px 4px;
    }
    
    .tag-large {
        font-size: 0.9em;
        padding: 3px 6px;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .tag-category {
        background-color: #1e3a8a;
        color: #bfdbfe;
        border-color: #3b82f6;
    }
    
    .tag-category:hover {
        background-color: #1d4ed8;
        color: #dbeafe;
    }
    
    .tag-user {
        background-color: #6b21a8;
        color: #e9d5ff;
        border-color: #a855f7;
    }
    
    .tag-user:hover {
        background-color: #7c3aed;
        color: #f3e8ff;
    }
    
    .tag-type {
        background-color: #166534;
        color: #bbf7d0;
        border-color: #22c55e;
    }
    
    .tag-type:hover {
        background-color: #15803d;
        color: #dcfce7;
    }
    
    .tag-city {
        background-color: #ea580c;
        color: #fed7aa;
        border-color: #f97316;
    }
    
    .tag-city:hover {
        background-color: #dc2626;
        color: #fef3c7;
    }
}