/* =============================================================================
   PLANNING V2 — Segments (barre de visualisation + badges)
   ============================================================================= */

/* ── Barre de segments (dans la cellule) ────────────────────────────────────── */
.p2-seg-bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    gap: 1px;
    margin-top: 3px;
}

.p2-seg-bar-chunk {
    border-radius: 1px;
    flex-shrink: 0;
    transition: opacity var(--trans-fast);
}
.p2-seg-bar-chunk:hover { opacity: .8; }

/* ── Badge type de segment ───────────────────────────────────────────────────── */
.p2-seg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Couleurs par type (utilisées partout : bar + badge + modale) ─────────────── */
.seg-traitement   { background: var(--seg-traitement);   }
.seg-formation    { background: var(--seg-formation);    }
.seg-reunion      { background: var(--seg-reunion);      }
.seg-logistique   { background: var(--seg-logistique);   }
.seg-doublon      { background: var(--seg-doublon);      }
.seg-rdv          { background: var(--seg-rdv);          }
.seg-tdp          { background: var(--seg-tdp);          }
.seg-pause        { background: var(--seg-pause);        }
.seg-hors-prod    { background: var(--seg-hors-prod);    }
.seg-visite       { background: var(--seg-visite);       }
.seg-jour-off     { background: var(--seg-jour-off);     }
.seg-amenagement  { background: var(--seg-amenagement);  }
.seg-ferie        { background: var(--seg-ferie);        }

/* Version texte foncé pour les backgrounds clairs */
.seg-badge-traitement  { background: var(--seg-traitement-bg);  color: var(--seg-traitement); }
.seg-badge-formation   { background: var(--seg-formation-bg);   color: var(--seg-formation);  }
.seg-badge-reunion     { background: var(--seg-reunion-bg);     color: var(--seg-reunion);    }
.seg-badge-logistique  { background: var(--seg-logistique-bg);  color: var(--seg-logistique); }
.seg-badge-doublon     { background: var(--seg-doublon-bg);     color: var(--seg-doublon);    }
.seg-badge-rdv         { background: var(--seg-rdv-bg);         color: var(--seg-rdv);        }
.seg-badge-pause       { background: var(--seg-pause-bg);       color: var(--seg-pause);      }
.seg-badge-hors-prod   { background: var(--seg-hors-prod-bg);   color: var(--seg-hors-prod);  }
.seg-badge-visite      { background: var(--seg-visite-bg);      color: var(--seg-visite);     }

/* ── Liste de segments (dans DayDetailModal + ShiftEditorModal) ──────────────── */
.p2-seg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p2-seg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--bg-body);
    border: 1px solid var(--border-panel);
    transition: border-color var(--trans-fast);
}
.p2-seg-row:hover { border-color: rgba(255,255,255,.1); }

.p2-seg-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.p2-seg-row-type {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-main);
}

.p2-seg-row-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p2-seg-row-duration {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* ── Segment editor row (dans ShiftEditorModal) ──────────────────────────────── */
.p2-seg-editor-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-panel);
    background: var(--bg-body);
    transition: border-color var(--trans-fast);
}
.p2-seg-editor-row:hover { border-color: rgba(255,255,255,.1); }

.p2-seg-color-wrap {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.p2-seg-color-wrap input[type="color"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.p2-seg-color-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform var(--trans-fast);
}
.p2-seg-color-wrap:hover .p2-seg-color-dot {
    transform: scale(1.15);
}

.p2-seg-select {
    background: var(--bg-card);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: var(--text-sm);
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--trans-fast);
}
.p2-seg-select:focus { border-color: var(--accent); }

.p2-seg-time-input {
    background: var(--bg-card);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: var(--text-sm);
    padding: 5px 8px;
    width: 105px;
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--trans-fast);
}
.p2-seg-time-input:focus { border-color: var(--accent); }

.p2-seg-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-panel);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all var(--trans-fast);
    flex-shrink: 0;
}
.p2-seg-action-btn:hover { color: var(--text-main); border-color: rgba(255,255,255,.15); }
.p2-seg-action-btn.danger:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #ef4444; }