/* Map Card Popup Overrides */
.leaflet-popup-content-wrapper {
    backdrop-filter: blur(4px);
    color: #222 !important;
    border-radius: 14px !important;
    padding: 2px 2px !important;
    border: 1px solid var(--white-10);
    box-shadow: 0 10px 30px var(--black-50) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}
.leaflet-popup-content {margin: 0 !important;width: 280px !important;}
.leaflet-popup-tip { background: rgba(0, 0, 0, 0.15) !important; }
.leaflet-popup-close-button { color: #333 !important; padding: 10px !important; }

.map-card {padding: 8px;display: flex;flex-direction: column;gap: 5px;}
.map-card-header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--white-10); padding-bottom: 10px; }
.map-card-header i, .map-card-header .map-header-icon-wrap { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.map-card-header .map-header-icon-wrap img { width: 18px; height: 18px; }
.map-card-title { font-weight: bold; font-size: 1rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.map-card-body { display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; }
.map-card-row { display: flex; justify-content: space-between; align-items: center; }
.map-card-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.map-card-duration { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 3px 5px; border-radius: 6px; background: rgba(0,0,0,0.08); color: #555; font-size: 0.58rem; font-weight: 600; white-space: nowrap; }
.map-card-duration svg { display: block; }
.map-chip { padding: 3px 8px; border-radius: 6px; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
.map-chip.cat {background: rgb(0 0 0 / 26%);color: #363636;line-height: 1.5em;}
.map-chip.cost {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(39,174,96,0.14);
    color: #1a6b3d;
    border: 1px solid rgba(26,107,61,0.32);
}
.map-chip.cost svg.lucide { width: 11px; height: 11px; }

.map-card-notes {background: rgb(0 0 0 / 9%);padding: 8px;border-radius: 8px;font-style: normal;font-weight: 500;color: #000000;max-height: 80px;overflow-y: auto;}

.map-card-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--white-10); }
.map-nav-btn {background: var(--white-05);border: none;color: var(--primary);width: 30px;height: 30px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: 0.2s;}
.map-nav-btn:hover {background: var(--primary);color: white;}
.map-edit-btn { background: var(--primary); border: none; color: white; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 0.75rem; font-weight: bold; }
/* Variante lecture seule dans la fiche d'un point de la carte.
   Le popup est CLAIR (fond blanc translucide + texte #222 impose plus haut) alors
   que le theme de l'app est sombre : --text (#e0e0e0) et --white-10 y donnaient
   du texte clair sur fond clair, donc un bouton invisible. D'ou des couleurs
   explicites, comme le reste des regles .leaflet-popup-*. */
.map-view-btn { background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.2); color: #333; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 0.75rem; font-weight: bold; }
.map-view-btn:hover { background: var(--primary); border-color: var(--primary); color: white; }

@media (max-width: 1024px) {
    .agenda-panel { 
        --drawer-y: calc(100vh - 60px);
        --drawer-y: calc(100dvh - 60px);
        position: fixed; bottom: 0; left: 0; width: 100%; top: var(--drawer-y); height: calc(100vh - var(--drawer-y)); height: calc(100dvh - var(--drawer-y)); 
        transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 25px 25px 0 0; z-index: 3000;
        background: var(--dark); border-top: 1px solid var(--white-10); display: flex; flex-direction: column;
        min-width: auto;
    }
    .agenda-header {cursor: grab;touch-action: none;padding-top: 11px;flex-shrink: 0;padding-bottom: 12px;-webkit-user-select: none;user-select: none;}body.drawer-open .agenda-header {cursor: grabbing;}
    .mobile-handle { display: block; margin: 0 auto 10px; width: 50px; height: 6px; background: var(--white-10); border-radius: 10px; }
    .mobile-switch { 
        display: flex; position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); 
        background: var(--primary); color: white; padding: 14px 28px; border-radius: 40px; 
        z-index: 4000; font-weight: bold; box-shadow: 0 10px 25px var(--black-50); border: none; align-items: center; gap: 10px;
    }
}

/* Navigation PC (Sub-header) */
.sub-nav-desktop {
    background: var(--darker);
    display: flex;
    gap: 5px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--white-05);
    z-index: 900;
    flex-direction: row-reverse;
}
.sub-nav-desktop .nav-item {
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-nav-desktop .nav-item svg.lucide { flex-shrink: 0; }
.sub-nav-desktop .nav-item:hover { background: var(--white-05); color: white; }
.sub-nav-desktop .nav-item.active { background: var(--primary); color: white; box-shadow: 0 4px 10px var(--primary-30); }

/* Navigation Mobile (Footer) */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* --panel-glass suit le theme ; #1a1a2e etait fige et restait bleu
       nuit quel que soit l'accent choisi. */
    background: var(--panel-glass);
    border-top: 1px solid var(--white-10);
    justify-content: space-around;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    z-index: 6000; /* Au dessus du tiroir (3000) */
    backdrop-filter: blur(15px);
    box-shadow: 0 -5px 20px var(--black-50);
}
.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s;
}
.mobile-bottom-nav .nav-item svg.lucide { width: 20px; height: 20px; }
.mobile-bottom-nav .nav-item.active { color: var(--primary); }

@media (max-width: 1024px) {
    .sub-nav-desktop { display: none; }
    .mobile-bottom-nav { display: flex; }
    .agenda-panel {
        padding-bottom: 63px;
        z-index: 5000;
    }
    .mobile-switch { display: none !important; }
    body.drawer-open { overflow: hidden; }
}

.todo-group { margin-bottom: 5px; }
.todo-group-header {
    font-size: 0.75rem; font-weight: bold; color: var(--primary); margin: 20px 0 10px 5px;
    text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--primary-30); padding-bottom: 5px;
    cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none;
}
.todo-group-header:hover { opacity: 0.8; }
.todo-group-label { flex: 1; }
.todo-group-count { font-size: 0.7rem; opacity: 0.6; font-weight: normal; }
.todo-group-chevron { font-size: 0.65rem; opacity: 0.4; transition: transform 0.3s; }
.todo-group.collapsed .todo-group-chevron { transform: rotate(-90deg); }
.todo-group.collapsed .todo-group-items { display: none; }
.todo-filters { 
    display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; 
    padding: 5px; justify-content: center;
}
@media (max-width: 768px) {
    .todo-filters { justify-content: flex-start; }
}
.todo-filter { 
    padding: 8px 16px; border-radius: 12px; background: var(--white-05); 
    font-size: 0.75rem; font-weight: bold; color: var(--text-dim); cursor: pointer; 
    transition: all 0.2s; white-space: nowrap; border: 1px solid var(--white-05);
}
.todo-filter:hover { background: var(--white-10); color: white; border-color: var(--white-10); }
.todo-filter.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 12px var(--primary-30); }

.btn-add-todo {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px var(--primary-20);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-add-todo svg.lucide { flex: none; width: 14px; height: 14px; }
.btn-add-todo:hover { transform: translateY(-2px); filter: brightness(1.1); }

@media (max-width: 600px) {
    .hide-mobile { display: none; }
    .btn-add-todo { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
}

/* Collapsible Checklist */
.todo-toggle-icon { transition: transform 0.3s; margin-left: 10px; opacity: 0.5; }
.todo-item:not(.collapsed) .todo-toggle-icon { transform: rotate(180deg); }
.todo-item.collapsed .todo-checklist { display: none; }
.items-summary { font-size: 0.7rem; opacity: 0.6; }

/* Details Modal Styles */
.swal-todo-details { text-align: left; }
.swal-todo-checklist { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.swal-todo-item { display: flex; align-items: center; gap: 12px; font-size: 1rem; cursor: pointer; }
.swal-todo-item input { width: 20px; height: 20px; cursor: pointer; }
/* SweetAlert higher than Mobile Panel */
.swal2-container { 
    z-index: 10000 !important; 
    /* --scrim suit le theme ; #0d0d22b8 etait fige et restait bleu nuit
       quel que soit l'accent choisi. */
    background: var(--scrim) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* SweetAlert2 n'injecte ses couleurs qu'en dur dans sa propre feuille de
   style injectee : sans ces variables, le bouton de confirmation restait
   dans sa    couleur d'origine, quel que soit le theme choisi. On les
   declare sur le conteneur plutot que sur :root pour qu'elles se propagent
   par proximite et l'emportent sur celles de la bibliotheque. */
.swal2-container {
    --swal2-confirm-button-background-color: var(--primary);
    --swal2-confirm-button-color: #fff;
    --swal2-cancel-button-background-color: var(--white-08);
    --swal2-cancel-button-color: var(--text);
    --swal2-deny-button-background-color: var(--danger);
    --swal2-deny-button-color: #fff;
}

.todo-header-actions { margin-bottom: 20px; }
.btn-add-todo { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
.btn-add-todo:hover { background: #9b59b6; transform: translateY(-2px); box-shadow: 0 4px 12px var(--primary-30); }

.todo-item {
    background: var(--white-03);
    border: 1px solid var(--white-05);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: all 0.2s;
    cursor: pointer;
    margin: 8px;
}
.todo-item:hover { background: var(--white-07); border-color: var(--primary); }
.todo-item.done { opacity: 0.7; }
.todo-item.done .todo-title { text-decoration: line-through; color: var(--text-dim); }
.todo-item.done .todo-checklist { max-height: none; overflow: visible; }

.todo-check { 
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--white-20); 
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s;
}
.todo-item.done .todo-check { background: var(--success); border-color: var(--success); color: white; }
.todo-item:not(.done):hover .todo-check { border-color: var(--primary); }

.todo-info { flex: 1; }
.todo-title { font-weight: bold; font-size: 0.95rem; display: block; margin-bottom: 4px; }
.todo-meta { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-dim); }
.todo-meta .deadline.late { color: var(--danger); font-weight: bold; }
.todo-actions { margin-left: auto; opacity: 0.5; }

.todo-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--white-05);
}
.todo-item .todo-check i { font-size: 0.8rem; }
.todo-checkitem { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; cursor: default; }
.todo-checkitem-text.done { text-decoration: line-through; opacity: 0.5; }

/* Liste de choix "Déplacer l'étape" (quick move) */
.qm-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    font-weight: bold;
    margin: 12px 4px 6px;
}
.qm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    background: var(--black-25);
    border: 1px solid var(--white-08);
    color: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.qm-item:hover { border-color: var(--primary); background: var(--white-06); }
.qm-item:active { transform: scale(0.98); }
.qm-item span { font-size: 1rem; line-height: 1; }
.qm-item.qm-new { border-style: dashed; color: var(--text-dim); }
.qm-item.qm-new:hover { color: #fff; }

/* Icônes Lucide inline dans les boutons Swal */
.swal2-styled { display: inline-flex !important; align-items: center; gap: 8px; }
.swal2-styled svg.lucide { flex-shrink: 0; }

/* Système d'onglets pour les formulaires */
.swal-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--white-10);
    padding-bottom: 10px;
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--black-25);
}
.swal-tab {
    flex: 1;
    padding: 8px 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-dim);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--white-03);
}
.swal-tab i { font-size: 1.1rem; }
.swal-tab svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.swal-tab:hover { background: var(--white-08); color: white; }
.swal-tab.active { background: var(--primary); color: white; box-shadow: 0 4px 10px var(--primary-30); }

.swal-tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.swal-tab-content.active { display: block; }

.swal-form-group { margin-bottom: 12px; text-align: left; }
.swal-form-group label { display: block; margin-bottom: 4px; font-size: 0.65rem; color: var(--text-dim); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }

.swal-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text);
    padding: 4px 0;
}

.swal-checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}
.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-group label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sort-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--black-40);
    border: 1px solid var(--white-10);
    color: #fff;
    padding: 4px 10px 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.custom-select-trigger:hover {
    border-color: var(--primary);
}

.custom-select-trigger .sort-select-icon {
    display: inline-flex;
    color: var(--text-dim);
}

.custom-select-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.custom-select.is-open .custom-select-chevron {
    transform: rotate(180deg);
}

.custom-select.is-open .custom-select-trigger {
    border-color: var(--primary);
}

.custom-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    /* --darker comme le menu compte : les deux sont des menus flottants
       qui doivent se detacher de la surface qui les porte. #1a1a2e etait
       fige et restait bleu nuit quel que soit l'accent choisi. */
    background: var(--darker);
    border: 1px solid var(--white-10);
    border-radius: 8px;
    padding: 4px;
    z-index: 60;
    box-shadow: 0 8px 25px var(--black-40);
}

.custom-select.is-open .custom-select-menu {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.custom-select-option:hover {
    background: var(--white-10);
}

.custom-select-option.is-selected {
    background: var(--primary-25);
    color: var(--primary);
}

.custom-select-option .sort-opt-icon {
    display: inline-flex;
    color: var(--text-dim);
}

.custom-select-option.is-selected .sort-opt-icon {
    color: var(--primary);
}

/* --- Sélecteur de devise (custom-select) --- */
.currency-select-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.currency-select-wrap .custom-select-trigger {
    width: 100px;
    justify-content: space-between;
    padding: 4px 10.7px;
    border-radius: 10px;
    background: var(--black-40);
    border: 1px solid var(--white-10);
    font-size: 0.8rem;
    height: 2.9em;
}
.currency-select-wrap .custom-select-menu {
    right: 0;
    left: auto;
    min-width: 108px;
    max-height: 260px;
    overflow-y: auto;
    width: max-content;
    z-index: 9999;
    top: 40px;
}
.currency-select-wrap.currency-select-block { display: flex; width: 100%; }
.currency-select-wrap.currency-select-block .custom-select-trigger { width: 100%; }
.currency-sym { color: var(--text); }
.currency-code { font-weight: 700; }
.currency-opt-sym { display: inline-block; width: 22px; text-align: center; color: var(--text-dim); }
.currency-opt-code { font-weight: 600; }
.currency-used-badge {
    margin-left: auto;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--success);
    flex-shrink: 0;
}
.currency-used-badge--display {
    color: var(--text-dim);
    opacity: 0.6;
}

#backlog-sort-mode {
    display: none;
}

.view-switches { 
    display: flex; 
    background: var(--black-30); 
    padding: 2px; 
    border-radius: 10px; 
    border: 1px solid var(--white-08); 
}

.view-btn { 
    border: none; 
    background: transparent; 
    padding: 4px 10px; 
    border-radius: 7px; 
    cursor: pointer; 
    color: var(--text-dim); 
    transition: all 0.2s;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.view-btn svg.lucide { flex-shrink: 0; }
.view-btn.active { 
    background: var(--primary); 
    color: white; 
    box-shadow: 0 2px 8px var(--primary-40);
}

.btn-add-group { 
    background: linear-gradient(135deg, var(--primary), #6c5ce7);
    color: white; 
    border: none; 
    padding: 8px 16px; 
    border-radius: 10px; 
    cursor: pointer; 
    font-size: 0.85rem; 
    font-weight: 600; 
    transition: all 0.2s; 
    box-shadow: 0 4px 12px var(--primary-30);
}

.btn-add-group-small {
    background: linear-gradient(135deg, var(--primary), #6c5ce7);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s;
    box-shadow: 0 2px 8px var(--primary-30);
}

.btn-add-group:hover, .btn-add-group-small:hover { 
    filter: brightness(1.2); 
    transform: translateY(-1px);
}

/* Folder/Group Styling */
.backlog-group-wrapper {
    margin: 0px 0px 4px 0;
    background: var(--white-02);
    border-radius: 16px;
    border: 1px solid var(--white-05);
    overflow: hidden;
}

.backlog-group-header {
    padding: 5px 12px;
    background: var(--white-04);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--white-05);
    transition: background 0.2s;
}
.backlog-group-header i { color: var(--primary); font-size: 1.1rem; }
.backlog-group-header .group-name-text { font-weight: 600; font-size: 0.95rem; color: white; }
.backlog-group-header .count {color: var(--text-dim);font-size: 0.8rem;}

.backlog-group-header:hover { background: var(--white-08); }

.backlog-group-content {padding: 5px;}

.empty-group-placeholder {
    padding: 0;
    margin: 0;
    text-align: center;
    opacity: 0.4;
    font-size: 0.75rem;
    font-style: italic;
    display: block;
}

.group-rename-input { 
    background: var(--black-30); 
    border: 1px solid var(--primary); 
    color: white; 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 0.9rem; 
    font-weight: 600; 
    outline: none; 
    flex: 1; 
}

/* ============================================================
   Priorité des étapes (échelle 1..5)
   Trois variables par niveau : --prio-color (texte sur fond
   sombre, agenda), --prio-bg (fond alpha) et --prio-on-light
   (texte et bordure sur fond clair, popup carte). La pastille,
   le sélecteur de modale, le libellé du filtre et la chip du
   popup reprennent toutes les trois, donc un niveau se règle à
   un seul endroit. PHP et JS ne posent plus que la classe.
   ============================================================ */
.prio-0 { --prio-color: var(--text-dim); --prio-bg: transparent; --prio-on-light: #6b7280; }
.prio-1 { --prio-color: #6b7280; --prio-bg: rgba(107, 114, 128, 0.22); --prio-on-light: #4b5563; }
.prio-2 { --prio-color: #3498db; --prio-bg: rgba(52, 152, 219, 0.22); --prio-on-light: #1d6fa5; }
.prio-3 { --prio-color: #27ae60; --prio-bg: rgba(39, 174, 96, 0.22); --prio-on-light: #1a7f45; }
.prio-4 { --prio-color: #f39c12; --prio-bg: rgba(243, 156, 18, 0.22); --prio-on-light: #a35c00; }
.prio-5 { --prio-color: #e74c3c; --prio-bg: rgba(231, 76, 60, 0.22); --prio-on-light: #b3271e; }

/* --- Pastille sur la carte --- */
.step-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    height: 17px;
    padding: 0 6px 0 5px;
    border-radius: 9px;
    border: 1px solid var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.step-priority .lucide { opacity: 0.9; }
.step-priority-num { font-variant-numeric: tabular-nums; }
/* Cible tactile : la pastille est un bouton. La zone de clic est élargie par
   un pseudo-élément pour ne pas gonfler la hauteur de la ligne .step-name
   (les autres boutons de carte font 30px, on reste dans le même ordre). */
.step-priority[onclick] { cursor: pointer; position: relative; }
.step-priority[onclick]:hover { background: var(--prio-color); color: #fff; }
.step-priority[onclick]::after { content: ''; position: absolute; inset: -9px -5px; }

/* Le niveau neutre se fond dans la carte, le plus bas Discute le moins.
   La bordure gauche reste réservée à la couleur de catégorie (posée en inline
   par renderStepCard) : la priorité ne s'y prête pas. */
.step-card.prio-1 .step-priority { opacity: 0.65; }

/* --- Priorité par personne (avis des invités) ---
   Le module assets/js/priority_votes.js pose un <span class="prio-votes">
   juste après la pastille officielle. Les couleurs viennent des variables
   --prio-color / --prio-bg déjà portées par les classes .prio-N, donc les
   niveaux ont exactement le même code couleur que la priorité de
   l'organisateur : on compare d'un coup d'œil. */
.prio-votes { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.prio-vote-chip,
.prio-vote-mine {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    padding: 0 6px 0 5px;
    border-radius: 9px;
    border: 1px solid var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.prio-vote-chip .lucide, .prio-vote-mine .lucide { opacity: 0.9; }
.prio-vote-count {
    font-size: 0.55rem;
    opacity: 0.75;
    font-weight: 600;
    padding-left: 2px;
    border-left: 1px solid currentColor;
    margin-left: 1px;
}
/* Mon avis : même niveau que l'organisateur, on ne le distingue que par la
   bordure en pointillés. La pastille disparaît tant qu'aucun avis n'est posé,
   pour ne pas laisser un empl vide sur chaque étape. */
.prio-vote-mine { border-style: dashed; }

.prio-vote-menu { position: relative; display: inline-flex; }
.prio-vote-trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    padding: 0 6px 0 5px;
    border-radius: 9px;
    border: 1px dashed var(--white-20);
    background: var(--white-05);
    color: var(--text-dim);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.prio-vote-trigger::-webkit-details-marker { display: none; }
.prio-vote-trigger.is-set {
    border-style: solid;
    border-color: var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
}
.prio-vote-trigger:hover { border-color: var(--primary); color: var(--text); }
/* Cible tactile : le <summary> est petit, on étale la zone de clic sans
   gonfler la hauteur de la ligne, comme pour .step-priority. */
.prio-vote-trigger::after { content: ''; position: absolute; inset: -9px -5px; }

.prio-vote-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    gap: 3px;
    padding: 5px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--white-10);
    box-shadow: var(--shadow);
}
.prio-vote-opt {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.prio-vote-opt:hover { background: var(--prio-color); color: #fff; }

/* --- Détail dans la fiche Visualiser et le formulaire d'édition --- */
.prio-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--white-05);
}
.prio-detail-row:last-of-type { border-bottom: none; }
.prio-detail-count { color: var(--text-dim); font-size: 0.8rem; }
.prio-detail-vote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-dim);
}
/* Dans une modale, le menu s'ouvre vers le bas : la fiche est déjà haute et
   la liste déborderait du popup. */
.prio-detail-vote .prio-vote-list { left: 0; right: auto; }

.prio-votes-panel {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--white-05);
    border: 1px solid var(--white-08);
    font-size: 0.8rem;
}
.prio-votes-panel-title { font-weight: 700; color: var(--text); }
.prio-panel-avg { display: inline-flex; align-items: center; gap: 5px; }
.prio-panel-avg b { font-variant-numeric: tabular-nums; }
.prio-panel-count { color: var(--text-dim); }
.prio-panel-empty { color: var(--text-dim); font-style: italic; }
.prio-votes-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.prio-votes-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
}
.prio-vote-who { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.prio-vote-lvl {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
    font-size: 0.68rem;
    font-weight: 700;
}

/* --- Sélecteur 1..5 dans les modales SweetAlert --- */
.prio-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
.prio-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--white-10);
    background: var(--black-30);
    color: var(--text-dim);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.prio-pick-btn:hover { border-color: var(--prio-color); color: #fff; }
.prio-pick-btn.is-active {
    border-color: var(--prio-color);
    background: var(--prio-bg);
    color: #fff;
    font-weight: 600;
}
.prio-pick-num { font-size: 0.85rem; font-weight: 700; line-height: 1; }
.prio-pick-name { font-size: 0.55rem; line-height: 1.1; text-align: center; }

/* --- Pastille de niveau dans le menu de changement rapide --- */
.qm-priority-item { border-left: 3px solid var(--prio-color); }
/* inset plutôt que border-color : border-color écraserait la bordure
   gauche colorée du niveau, qui sert de repère dans la liste. */
.qm-priority-item.is-current { background: var(--primary-20); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
/* Sélecteur .qm-item (et non .qm-prio-badge) : la règle générique
   `.qm-item span` est plus spécifique et écraserait la taille de police. */
.qm-item .qm-prio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    background: var(--prio-color);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* --- Libellé du filtre actif dans la barre d'outils --- */
.prio-filter-label { color: var(--prio-color, var(--text-dim)); }
.prio-filter-label.prio-1, .prio-filter-label.prio-2,
.prio-filter-label.prio-3, .prio-filter-label.prio-4,
.prio-filter-label.prio-5 { font-weight: 700; }

/* L'icône d'une option du menu hérite du niveau : la règle générique
   .sort-opt-icon ci-dessus la griserait sinon. */
.custom-select-option[class*="prio-"] .sort-opt-icon,
.custom-select-trigger .sort-select-icon[class*="prio-"] { color: var(--prio-color); }

/* --- Chip priorité dans la popup carte ---
   La popup est claire (rgba(255,255,255,0.78) sur .leaflet-popup-content-wrapper)
   alors que l'agenda est sombre : on bascule sur --prio-on-light, version
   assombrie de la même teinte, sinon #27ae60 ou #f39c12 deviennent
   illisibles sur blanc. */
.map-chip-prio {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--prio-bg);
    color: var(--prio-on-light);
    border: 1px solid var(--prio-on-light);
    font-variant-numeric: tabular-nums;
}
.map-chip-prio svg.lucide { flex-shrink: 0; }


/* Pastilles de role et petits boutons.
   Deplaces depuis admin.css : l'onglet Partage de travel.php s'en sert
   aussi, et travel.php ne charge pas admin.css, ces classes y etaient donc
   sans effet. */
/* .role-badge, .role-admin, .role-user, .btn-sm et ses variantes */
.role-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.role-badge--lg { font-size: 0.9rem; padding: 4px 16px; }
.role-badge--sm { padding: 2px 8px; font-size: 0.65rem; }
.role-admin { background: var(--primary-25); color: var(--primary); }
.role-user { background: rgba(52,152,219,0.15); color: #3498db; }

.btn-sm { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.2s; }
.btn-sm-edit { background: rgba(52,152,219,0.2); color: #3498db; }
.btn-sm-edit:hover { background: rgba(52,152,219,0.35); }
.btn-sm-primary { background: var(--primary); color: #fff; }
.btn-sm-primary:hover { filter: brightness(1.1); }
.btn-sm-del { background: rgba(231,76,60,0.2); color: var(--danger); }
.btn-sm-del:hover { background: rgba(231,76,60,0.35); }
.btn-sm:disabled, .btn-sm[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Elements masques parce que l'appelant n'a pas le droit correspondant
   (voir applyPermGuards dans assets/js/ui.js). display:none et pas
   visibility:hidden pour que la mise en page ne garde pas de trou. */
.perm-hidden { display: none !important; }