/* Common Tag Styles - Shared across all pages */

/* Tag container */
.tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

/* Individual tag style */
.tag {
    background: rgba(59, 130, 246, 0.1);  /* Blue background with transparency */
    color: #3B82F6;                       /* Blue text color */
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Tag hover effect */
.tag:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3B82F6;
    transform: translateY(-1px);
}

/* Alternative tag sizes */
.tag-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.tag-lg {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Tag variations for different contexts */
.tag-primary {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.tag-secondary {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

.tag-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.tag-warning {
    background: rgba(251, 146, 60, 0.1);
    color: #FB923C;
}

.tag-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}