/* 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;
}

/* ── Boutons dans les bulles Leaflet ────────────────────────────────────
   Leaflet colore tous les liens de la carte (.leaflet-container a), ce qui
   écrase la couleur des boutons Bootstrap. On rend à chaque bouton SES
   couleurs (variables Bootstrap) : un bouton à contour est bleu sur blanc au
   repos et s'inverse au survol ; un bouton plein garde son texte blanc.
   (L'ancienne règle forçait du blanc partout : texte invisible sur fond blanc.) */
.leaflet-container a.btn {
    color: var(--bs-btn-color);
}
.leaflet-container a.btn:hover,
.leaflet-container a.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.leaflet-container a.btn:active {
    color: var(--bs-btn-active-color);
}

/* ── T3 : Jardin Nomade — palette header ────────────────────────────────
   Ciblage via data-module="jardin" injecté par base_jardin.html           */
body[data-module="jardin"] .navbar.bg-primary {
    background-color: #1b4332 !important;
}
body[data-module="jardin"] .navbar .navbar-brand,
body[data-module="jardin"] .navbar .nav-link {
    color: rgba(255,255,255,.85);
}
body[data-module="jardin"] .navbar .navbar-brand:hover,
body[data-module="jardin"] .navbar .nav-link:hover {
    color: #b7e4c7 !important;
}

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

    #map {
        height: 300px;
    }
}


/* ── Top navigation: one line, aligned, no icon offsets ───────────── */
.ps-navbar { padding-top: .6rem; padding-bottom: .6rem; }
.ps-navbar .navbar-brand { letter-spacing: .02em; margin-right: 2rem; }
.ps-navbar .nav-link {
    white-space: nowrap;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}
.ps-navbar .nav-link:hover,
.ps-navbar .nav-link:focus,
.ps-navbar .nav-link.active { color: #fff; }
@media (min-width: 1200px) {
    .ps-navbar .navbar-nav .nav-link { padding-left: .75rem; padding-right: .75rem; }
    .ps-navbar .nav-link.active { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .9); }
}
.ps-navbar .ps-nav-cta {
    white-space: nowrap;
    color: var(--bs-primary);
    padding: .35rem .85rem;
    border-radius: .5rem;
}
.ps-navbar .ps-nav-cta:hover { color: var(--bs-primary); background: #fff; }
/* Collapsed menu (phones, tablets) */
@media (max-width: 1199.98px) {
    .ps-navbar .navbar-collapse { padding-top: .5rem; }
    .ps-navbar .ps-nav-cta { display: inline-block; margin: .5rem 0; }
}
body[data-module="jardin"] .ps-navbar .ps-nav-cta,
body[data-module="jardin"] .ps-navbar .ps-nav-cta:hover { color: #1b4332 !important; }


/* ── Task cards (tasks list) ─────────────────────────────────────────── */
.task-card { border-left: 4px solid var(--bs-primary) !important; border-radius: .6rem; transition: box-shadow .15s ease; }
.task-card-offer { border-left-color: var(--bs-success) !important; }
.task-card:hover { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .10) !important; }
.task-card-title { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-card-meta li { display: flex; gap: .4rem; align-items: baseline; margin-bottom: .2rem; }
.task-card-meta .bi { flex-shrink: 0; }
.task-cat-badge { font-weight: 500; }
.task-cat-purple { background-color: #f3e8ff; color: #6f42c1; }
/* buttons stay clickable above the stretched title link */
.task-card-actions { position: relative; z-index: 2; }