/* Custom CSS pour POLYSERVICE */ 
/* POLYSERVICE/app/static/css/style.css */ 

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Navigation */
.navbar-brand {
    font-size: 1.5rem;
}

/* Cards — effet de survol (lift)
 *
 * IMPORTANT: on utilise `top` au lieu de `transform: translateY()`
 * car `transform` crée un nouveau stacking context CSS.
 * Conséquence avec transform : les modaux Bootstrap (position:fixed) enfants
 * de la card se positionnent par rapport à la card plutôt que le viewport,
 * ce qui provoque un flickering quand la souris entre/sort de la card.
 * `position: relative; top: -5px` produit le même effet visuel SANS créer
 * de stacking context → les modaux restent stables sur le viewport.
 */
.card {
    position: relative;
    top: 0;
    transition: top 0.2s, box-shadow 0.2s;
}

.card:hover {
    top: -5px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Reward badges */
.reward-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.reward-gift-card {
    background-color: #d1ecf1;
    color: #0c5460;
}

.reward-time-credit {
    background-color: #d4edda;
    color: #155724;
}

.reward-troc {
    background-color: #fff3cd;
    color: #856404;
}

.reward-service {
    background-color: #e7d4f7;
    color: #6f42c1;
}

/* Task status badges */
.status-open {
    background-color: #198754;
    color: white;
}

.status-claimed {
    background-color: #0dcaf0;
    color: white;
}

.status-pending {
    background-color: #ffc107;
    color: #000;
}

.status-completed {
    background-color: #6c757d;
    color: white;
}

/* Reputation stars */
.reputation-stars {
    color: #ffc107;
}

/* User avatar */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 80px;
    height: 80px;
}

/* Map container */
#map {
    height: 400px;
    width: 100%;
    border-radius: 0.5rem;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Utility classes */
.text-primary-emphasis {
    color: var(--primary-color) !important;
}

.bg-light-subtle {
    background-color: #f8f9fa;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* Custom map pins */
/* IMPORTANT : ne pas mettre margin: 0 !important ici.
   Leaflet positionne les divIcon via element.style.marginLeft / marginTop (inline style).
   Un !important dans une règle CSS écrase les inline styles et casse l'ancrage (iconAnchor),
   ce qui fait bouger les points lors du zoom ou du déplacement de la carte. */
.custom-pin {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
}

.pin-marker {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.pin-marker i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.75rem;
}

/* Map popup */
.map-popup {
    min-width: 150px;
    max-width: 250px;
}

.map-popup .btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

/* Mini-map on task list */
#mini-map {
    z-index: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.25rem;
    }

    #map {
        height: 300px;
    }
}