.agenda-panel {
    width: 40%;
    background: var(--dark);
    border-left: 1px solid var(--white-05);
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px var(--black-30);
    z-index: 500;
    min-width: 550px;
}
.tool-content { display: none; flex: 1; overflow-y: auto; }
.tool-content.active { display: flex; flex-direction: column; }
.agenda-header {padding: 20px;border-bottom: 1px solid var(--white-05);background: var(--black-20);border-radius: 1.5em;}
.agenda-header h2 { font-size: 1.2rem; margin-bottom: 5px; color: #fff; text-shadow: 0 2px 4px var(--black-30); }
.agenda-content { flex: 1; overflow-y: auto; padding: 15px; scroll-behavior: smooth; background: var(--accent); background: linear-gradient(to bottom, var(--dark), var(--purple)); }
/* Scrollbar personnalisee : le theme global (base.css) est trop discret sur le
   gradient dark->purple de l'agenda. On le rend plus visible, comme les popups
   Swal (pouce primary, track white-05, largeur 8px). */
.agenda-content::-webkit-scrollbar { width: 8px; }
.agenda-content::-webkit-scrollbar-track { background: var(--white-05); border-radius: 8px; }
.agenda-content::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.agenda-content::-webkit-scrollbar-thumb:hover { background: var(--primary-2); background-clip: padding-box; }
.agenda-content { scrollbar-width: thin; scrollbar-color: var(--primary) var(--white-05); }

.day-section {margin-bottom: 10px;/* background: red; */}
.day-title {
    font-weight: bold;
    padding: 4px 14px 0 13px;
    border-bottom: 2px solid var(--white-10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
    background: #ffffff0d;
    border-radius: 1.5em;
}
.day-title-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.day-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.day-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.day-label svg {
    flex-shrink: 0;
}

/* Version pleine des icônes Lucide dans les day-labels (fill au lieu du stroke) */
.day-label svg.lucide {
    fill: currentColor;
    stroke: none;
}

.day-stats-summary {
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.6;
    text-transform: none;
    vertical-align: middle;
}
.day-stats-summary svg.lucide { vertical-align: -2px; }
.day-date { font-size: 0.8em; opacity: 0.8; }
.toggle-map-backlog, .toggle-map-planned { display: inline-flex; cursor: pointer; color: var(--text); }
.toggle-map-backlog.is-hidden, .toggle-map-planned.is-hidden, .toggle-map-group.is-hidden { opacity: 0.5; }
.backlog-section.is-map-hidden > .day-title { opacity: 0.5; }
.toggle-map-group { display: inline-flex; cursor: pointer; color: var(--text); }
.day-toggle-icon { transition: transform 0.3s ease; width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; }
.day-section.is-collapsed .day-toggle-icon { transform: rotate(-90deg); }
.day-section.is-collapsed .step-list { display: none; }
.day-section.is-collapsed { margin-bottom: 10px; }
.day-title.unplanned {color: var(--warning);border-color: rgba(243, 156, 18, 0.2);}

.voyage-section { margin-bottom: 10px; }
.voyage-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 2px 10px;
    padding-left: 12px;
    border-left: 2px solid var(--primary-25);
}
.voyage-inner .day-title {
    background: #0000003d;
    border-bottom: none;
    border-radius: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    padding: 4px 8px;
    text-transform: uppercase;
}
.voyage-inner .day-title:hover { background: var(--white-04); }
.voyage-inner .day-toggle-icon { width: 14px; height: 14px; }
.voyage-section.is-collapsed .voyage-inner { display: none; }
.voyage-section.is-collapsed .day-toggle-icon { transform: rotate(-90deg); }
.voyage-section > .day-title { border-bottom: 2px solid var(--primary-35); }
.voyage-section .is-filter-empty { display: none; }
.voyage-section.is-map-hidden > .day-title { opacity: 0.5; }
.voyage-section.is-map-hidden > .day-title .toggle-map-planned svg.lucide { opacity: 0.6; }

.step-list {display: flex;flex-direction: column;gap: 0;}
.backlog-list {
    margin: 6px 0 2px 10px;
    padding-left: 12px;
    border-left: 2px solid var(--primary-25);
}
.step-card {
    background: var(--white-03);
    border-radius: 12px;
    padding: 0;
    border: 1px solid var(--white-05);
    display: flex;
    align-items: stretch;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    margin-left: 1.5em;
    min-height: 55px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.drag-handle {
    width: 24px; min-width: 24px; background: var(--white-02);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); opacity: 0.3; cursor: grab;
    border-right: 1px solid var(--white-03); transition: 0.2s;
    flex-shrink: 0;
}
.step-card:hover .drag-handle { opacity: 0.8; background: var(--white-05); }

.step-card:hover { transform: translateY(-3px) scale(1.01); background: var(--white-07); border-color: var(--primary); box-shadow: 0 8px 15px var(--black-30); }
.step-card.active-from-map { border-color: var(--primary); background: rgba(52, 152, 219, 0.1); box-shadow: 0 0 15px rgba(52, 152, 219, 0.3); }

/* --- BACKLOG SPECIFIC REDESIGN --- */
.backlog-list .step-card {
    flex-direction: column;
    padding: 0;
    margin-left: 0;
    min-height: unset;
    margin: 8px -4px;
}

.backlog-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white-02);
    padding: 0px 0px  4px 0;
    border-bottom: 1px solid var(--white-05);
}

.backlog-card-header .drag-handle {
    width: 32px;
    height: 100%;
    margin: 0;
    background: transparent;
    border: none;
    opacity: 0.5;
    font-size: 0.85rem;
}

/* Fix pour le mode Grille (view-cards) */
.view-cards .backlog-card-header .drag-handle {
    width: 32px !important;
    border-bottom: none;
}

.view-cards .backlog-card-body {
    flex-direction: column;
    text-align: center;
    gap: 0px;
}

.view-cards .backlog-card-body .step-actions-btns {
    margin: 0px auto 0;
}

.view-cards .step-icon { display: flex !important; margin: 0 !important; }
.view-cards .step-time { display: none; }

.backlog-card-header .status-badge {
    margin: 0 auto;
    font-size: 0.6rem;
    padding: 1px 8px;
}

.backlog-card-body {
    padding: 0px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.backlog-card-body .step-name {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px;
    flex: 1;
}

.backlog-card-body .step-actions-btns {
    margin-left: auto;
}

.backlog-step-actions .gps-btn,
.backlog-step-actions .edit-step-btn,
.backlog-step-actions .delete-btn-icon {
    width: 28px;
    height: 28px;
}

.backlog-card-extra {
    border-top: 1px solid var(--white-02);
    margin-top: -2px;
    font-size: 0.7rem;
    color: var(--text-dim);
    padding: 0 12px 6px;
}
.backlog-card-extra.deadline {
    color: var(--warning);
}

/* Placeholders de cartes fantômes (glisser-déposer) */
.card-ghost-spacer { flex-shrink: 0; }
.backlog-card-header .card-ghost-spacer { width: 32px; }
.step-card > .card-ghost-spacer { width: 20px; }

/* --- END BACKLOG SPECIFIC --- */

/* Drag & Drop Feedback */
.sortable-ghost {
    opacity: 0.3;
    background: var(--primary) !important;
    border: 2px dashed white !important;
}
.sortable-chosen {
    background: var(--white-10) !important;
    cursor: grabbing;
}
.sortable-drag {
    opacity: 0.9;
    transform: rotate(2deg) scale(1.05);
    box-shadow: 0 15px 30px var(--black-50) !important;
    z-index: 10000;
}

/* Pendant un drag : les sections/groupes repliés proposent un slot de drop sans se déplier */
body.agenda-dragging .day-section.is-collapsed > .step-list:not(.backlog-list),
body.agenda-dragging .voyage-section.is-collapsed > .voyage-inner {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 40px;
    border: 2px dashed var(--primary-50);
    border-radius: 10px;
    background: var(--primary-10);
    padding: 6px 10px;
    margin: 4px 8px;
}
body.agenda-dragging .backlog-group-wrapper.is-collapsed > .backlog-group-content {
    display: block !important;
    min-height: 40px;
    border: 2px dashed var(--primary-50);
    border-radius: 10px;
    background: var(--primary-10);
    padding: 6px 10px;
    margin: 4px 8px;
}

.step-time { width: 55px; min-width: 55px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.65rem; color: var(--text-dim); padding: 0 5px; flex-shrink: 0; line-height: 1.1; }
.free-label { color: #bbb; font-size: 0.65rem; font-weight: bold; }
.step-deadline { font-size: 0.7rem; color: var(--warning); margin-top: 2px; }
.step-icon { 
    width: 32px; height: 32px; border-radius: 8px; margin: auto 5px;
    display: flex; align-items: center; justify-content: center; 
    color: white; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 3px 6px var(--black-20);
}
.step-icon.poi { background: #3498db; }
.step-icon.park { background: #27ae60; }
.step-icon-img { width: 20px; height: 20px; }
.backlog-card-header .step-icon { width: 24px; height: 24px; font-size: 0.8rem; margin: 0; }
.step-icon.hotel { background: #9b59b6; }
.step-icon.restaurant { background: #e67e22; }
.step-icon.airport { background: #34495e; }
.step-icon.train { background: #f1c40f; }
.step-icon.start { background: #3498db; }
.step-icon.end { background: #1a1a2e; }

.step-info { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 4px; }
.step-name { font-weight: bold; font-size: 0.85rem; color: #fff; display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; }
.step-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.step-price { color: var(--success); font-size: 0.8rem; flex-shrink: 0; }
.step-num-badge {margin-left: auto;flex-shrink: 0;font-size: 0.65rem;opacity: 0.6;font-weight: normal;font-size: 1.1em;}
.step-duration { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.backlog-card-extra .lucide { vertical-align: -2px; }
.step-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; margin-top: 2px; }

.status-badge { 
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; border-radius: 10px; font-size: 0.6rem; font-weight: bold; 
    text-transform: uppercase; color: white; line-height: 1; height: 18px; white-space: nowrap;
}
.status-badge.can-move {
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.status-badge.can-move:hover {
    opacity: 0.8;
}
.status-badge--done { background: var(--success); }

.gps-btn { color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; background: var(--white-05); border-radius: 8px; text-decoration: none; }
.gps-btn:hover { color: var(--primary); background: var(--white-15); }

.step-actions-btns { display: flex; gap: 5px; margin-left: auto; align-items: center; }
.edit-step-btn, .delete-btn-icon { 
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; 
    border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem;
}
.edit-step-btn { background: rgba(52, 152, 219, 0.1); color: #3498db; }
.edit-step-btn:hover { background: #3498db; color: white; }
/* Variante « Visualiser » : quand l'appelant n'a pas le droit edit_steps, le
   crayon ouvre la fiche en lecture seule au lieu du formulaire. */
.edit-step-btn.is-view { background: rgba(155, 89, 182, 0.14); color: #bb8fce; }
.edit-step-btn.is-view:hover { background: #9b59b6; color: white; }
.delete-btn-icon { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
.delete-btn-icon:hover { background: #e74c3c; color: white; }

.transport-block {margin: 0 0 0 70px;padding: 0px 15px;border-left: 2px dashed var(--white-10);font-size: 0.75rem;color: var(--text-dim);display: flex;align-items: center;justify-content: space-between;gap: 10px;background: #00000040;}
.transport-block:hover { border-color: var(--primary); }
.transport-info { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.transport-info:hover { color: var(--primary); }
.transport-mode-arrow { font-size: 0.7rem; margin: 0 2px; }
.transport-cost { color: var(--success); font-weight: bold; }
.transport-actions { display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s; }
.transport-block:hover .transport-actions { opacity: 1; }
.tr-action-btn {padding: 4px;cursor: pointer;color: rgb(255 255 255 / 75%);transition: color 0.2s;}
.tr-action-btn:hover {color: var(--primary);}

.step-card.is-ghost { opacity: 0.5; border-style: dashed; background: rgba(255,255,255,0.01); }