/* Backlog View Modes */
/* Backlog View Modes - Redesigned Cards */
.view-cards .backlog-group-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .view-cards .backlog-group-content { grid-template-columns: repeat(2, 1fr); } }

.view-cards .step-card {
    flex-direction: column;
    text-align: center;
    margin-left: 0;
    align-items: stretch;
    justify-content: space-between;
    padding: 8px 8px 4px 0;
}

.view-cards .drag-handle { 
    width: 100%; height: 24px; border-right: none; 
    border-bottom: 1px solid var(--white-05); 
    background: var(--white-02);
    cursor: grab;
}

.view-cards .step-time { display: none; } /* Hide time in backlog cards */

.view-cards .step-icon {
    margin: 10px auto;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    border-radius: 10.8px;
}

.view-cards .step-info { 
    padding: 0 5px 5px; 
    align-items: center; 
    text-align: center; 
    gap: 2px;
}

.view-cards .step-name { 
    font-size: 0.9rem; 
    white-space: normal; 
    line-height: 1.2;
    margin-bottom: 4px;
}

.view-cards .step-meta { 
    flex-direction: column; 
    gap: 8px; 
    width: 100%;
}

.view-cards .status-badge { 
    font-size: 0.65rem; 
    height: 16px;
    padding: 2px 6px;
}

.view-cards .step-actions-btns {
    margin: 5px 0 0 0;
    width: 100%;
    justify-content: center;
    border-top: 1px solid var(--white-05);
    padding-top: 4px;
    gap: 7px;
}

.view-summary .step-card {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-height: 42px;
    margin: 4px 0;
}
.view-summary .step-card:hover { transform: none; }
.view-summary .backlog-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border-bottom: none;
    padding: 0;
    flex-shrink: 0;
}
.view-summary .drag-handle,
.view-summary .backlog-card-header .drag-handle {
    width: 20px;
    min-width: 20px;
    height: 26px;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    opacity: 0.4;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-summary .step-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.8rem;
    border-radius: 6px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-summary .backlog-card-body {
    flex: 1;
    min-width: 0;
    gap: 8px;
    padding: 0;
}
.view-summary .step-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.view-summary .step-price,
.view-summary .step-actions-btns,
.view-summary .status-badge,
.view-summary .step-time { display: none; }
.view-summary .backlog-card-extra,
.view-summary .step-attachments { display: none !important; }
/* Recap Modal Styles */
.recap-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--white-10);
    padding-bottom: 10px;
}
.recap-tab {
    flex: 1;
    padding: 10px 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-dim);
    transition: all 0.2s;
    text-align: center;
    background: var(--white-03);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.recap-tab svg.lucide { width: 18px; height: 18px; }
.recap-tab:hover { background: var(--white-08); color: white; }
.recap-tab.active { background: var(--primary); color: white; box-shadow: 0 4px 10px var(--primary-30); }

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

/* Trois cartes sur UNE seule rangee, compactes : elles ne portent qu'un chiffre
   et son libelle, et prenaient la moitie de la hauteur du recapitulatif en
   occupant deux rangees (la grille etait en 1fr 1fr pour trois cartes, donc la
   troisieme passait a la ligne). */
.recap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}
.recap-card {
    background: var(--black-20);
    padding: 9px 8px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--white-05);
}
.recap-card i { font-size: 1rem; margin-bottom: 4px; }
.recap-card span { display: inline-flex; margin-bottom: 4px; }
.recap-card svg.lucide { width: 16px; height: 16px; }
.recap-card .value { font-size: 1rem; font-weight: bold; margin-bottom: 1px; color: white; line-height: 1.2; }
.recap-card .label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }

.budget-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.budget-bar-item { display: flex; flex-direction: column; gap: 5px; }
.budget-bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); }
.budget-bar-label b { color: white; }
.progress-bg { width: 100%; height: 8px; background: var(--white-10); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease-out; }

/* --- Recapitulatif : repartition par categorie ----------------------------
   Un interrupteur, deux dessins. La legende n'existe que sous le camembert :
   les barres portent deja l'icone, le nom, le montant et le pourcentage, donc
   une legende commune repeterait quatre fois la meme ligne. */
.recap-chart { margin-top: 18px; }
.recap-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recap-chart-title { font-size: 0.8rem; font-weight: bold; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.recap-chart-body { margin-top: 12px; }
.recap-chart-view[hidden] { display: none; }
.recap-chart-empty { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-dim); }

/* Le camembert est un degrade conique -- chaque part borne la suivante. Le trou
   central est un enfant pose par-dessus, pas un mask : aucun SVG, aucune
   dependance, et le total reste du texte selectionnable. 220px : a 168px il
   paraissait lost au milieu d'une modale de 700px, et la legende en dessous
   prenait plus de place que lui. */
.recap-donut { position: relative; width: 220px; height: 220px; margin: 4px auto 0; border-radius: 50%; }
.recap-donut-hole { position: absolute; inset: 24%; border-radius: 50%; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 0 8px; }
.recap-donut-value { font-size: 1rem; font-weight: bold; color: white; line-height: 1.15; word-break: break-word; }
.recap-donut-label { font-size: 0.58rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Legende du camembert : la pastille reprend la couleur de la part, c'est elle
   qui relie la ligne au disque. Montants alignes a droite, pourcentage en colonne
   fixe et en chiffres tabulaires pour que les virgules se calent d'une ligne a
   l'autre. */
.recap-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.recap-legend-item { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--text-dim); padding: 4px 2px; border-radius: 6px; }
.recap-legend-item:hover { background: var(--white-05); }
.recap-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.recap-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-legend-value { color: white; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap-legend-pct { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Onglet Partage ------------------------------------------------------
   Tout était en style="" inline avant : déplacé ici pour respecter la
   convention du projet (aucun style inline, le CSS vit dans assets/css). */
#share-content { min-height: 100px; }

.share-loading {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 20px; color: var(--text-dim); font-size: 0.85rem;
}
.share-loading .lucide { animation: share-spin 1s linear infinite; }
@keyframes share-spin { to { transform: rotate(360deg); } }

.share-error { color: var(--danger); text-align: center; padding: 20px; }
.share-empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; padding: 15px; }
.share-picked {
    display: flex; align-items: center; gap: 6px;
    color: var(--success); font-size: 0.8rem; padding: 8px;
}

.share-section { margin-bottom: 18px; }
.share-section:last-child { margin-bottom: 0; }
.share-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--text-dim); margin-bottom: 8px;
}

.share-user {
    background: var(--white-03); border: 1px solid var(--white-05);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 6px;
}
.share-user.is-owner { border-color: rgba(241,196,15,0.25); }
.share-user-row { display: flex; align-items: center; gap: 10px; }
.share-user-icon { color: var(--text-dim); flex-shrink: 0; }
.share-user-icon.is-owner { color: var(--warning); }
.share-user-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-user.is-owner .share-user-name { font-weight: 600; }

.share-perm-summary {
    font-size: 0.7rem; padding: 2px 9px; border-radius: 12px;
    background: var(--white-10); color: var(--text-dim); white-space: nowrap;
}
.share-perm-summary--readonly { background: rgba(149,165,166,0.2); color: #95a5a6; }
.share-perm-summary--editor { background: rgba(52,152,219,0.18); color: #5dade2; }
.share-perm-summary--full { background: rgba(39,174,96,0.18); color: #58d68d; }
.share-perm-summary--all { background: rgba(241,196,15,0.18); color: var(--warning); }
.share-perm-summary--custom { background: rgba(155,89,182,0.18); color: #bb8fce; }

.share-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-width: 32px;
    background: var(--white-05); color: var(--text-dim);
    border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.share-icon-btn:hover { background: var(--primary-15); color: var(--primary); }
.share-remove-btn { min-width: 36px; justify-content: center; padding: 6px 10px; }

.share-perm-panel {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--white-08);
}
.share-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.share-preset-chip {
    min-height: 32px; padding: 4px 12px;
    background: var(--white-05); color: var(--text-dim);
    border: 1px solid transparent; border-radius: 16px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.share-preset-chip:hover { background: var(--white-10); color: var(--text); }
.share-preset-chip.is-active { background: var(--primary-25); color: var(--primary); border-color: var(--primary); }

.share-perm-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.share-perm-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; cursor: pointer; padding: 4px 0;
}
.share-perm-item input { min-width: 36px; min-height: 36px; accent-color: var(--primary); cursor: pointer; }
.share-perm-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.share-invite { border-top: 1px solid var(--white-08); padding-top: 15px; }
.share-invite-row { display: flex; gap: 8px; }
.share-invite-row .swal-custom-input { flex: 1; }

@media (max-width: 600px) {
    .share-perm-grid { grid-template-columns: 1fr; }
}

/* Onglet Voyage verrouillé pour un invité sans edit_trip. */
.tab-content.is-locked { opacity: 0.65; }
.tab-content.is-locked input:disabled, .tab-content.is-locked textarea:disabled { cursor: not-allowed; }
.currency-select-wrap.is-disabled { pointer-events: none; opacity: 0.6; }
.recap-locked-note {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--warning);
    background: rgba(241,196,15,0.12);
    border-radius: 8px; padding: 8px 10px; margin: 0 0 12px;
}

.share-user-result { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--white-03); border-radius: 8px; cursor: pointer; transition: background 0.2s; margin-bottom: 4px; }
.share-user-result:hover { background: var(--primary-15); }
.share-user-result .lucide { color: var(--text-dim); }
#share-search-results { margin-top: 8px; }

/* Devises employees : un titre, les pastilles, puis UNE ligne de note sur les
   taux. C'etait trois blocs avant (titre, pastilles, encart a bordure
   pointillee de deux lignes) pour une information qui tient sur deux lignes. */
.recap-rates { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--white-08); }
.recap-rates-title { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.recap-rates-title svg { color: var(--primary); flex-shrink: 0; }
.recap-rates-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.7rem; color: var(--text-dim); }
.recap-rates-note svg { flex-shrink: 0; opacity: 0.7; }
/* Enveloppe de l'icone de bouton quand il est en cours : rotation continue sur
   l'icone, pas sur le texte du bouton a cote. Le <svg> est mis en inline-flex
   avec son enroulant, et la rotation ne fait pas sauter la mise en page. */
.recap-rates-spin { display: inline-flex; animation: recap-spin 1s linear infinite; }
@keyframes recap-spin { to { transform: rotate(360deg); } }
.currency-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.currency-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 15px;
    background: var(--white-05);
    border: 1px solid var(--white-10);
    font-size: 0.78rem;
    color: var(--text-dim);
}
.currency-tag-sym { font-weight: 700; color: white; }
.currency-tag-code { text-transform: uppercase; }
.currency-tag-rate { opacity: 0.8; }

@media (max-width: 600px) {
    .recap-tabs { gap: 5px; }
    .recap-tab { font-size: 0.7rem; padding: 8px 2px; }
    /* Les cartes et le camembert n'ont pas de declencheur : la grille est deja
       sur trois colonnes et deja compacte, le camembert est en largeur fixe
       donc il passe sous 600px sans deborder. */
    .recap-card { padding: 8px 5px; }
    .recap-card .value { font-size: 0.92rem; }
    .recap-donut { width: 190px; height: 190px; }
}


/* Badge de niveau d'acces sur les cartes de travels.php. Reprend les
   couleurs des pastilles de l'onglet Partage pour que le meme niveau se
   reconnaisse aux deux endroits. */
.trip-perm-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 12px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.trip-perm-badge--readonly { background: rgba(149,165,166,0.2); color: #95a5a6; }
.trip-perm-badge--editor { background: rgba(52,152,219,0.18); color: #5dade2; }
.trip-perm-badge--full { background: rgba(39,174,96,0.18); color: #58d68d; }
.trip-perm-badge--all { background: rgba(241,196,15,0.18); color: var(--warning); }
.trip-perm-badge--custom { background: rgba(155,89,182,0.18); color: #bb8fce; }