/* ==========================
   PRODUCTION.CSS — Kanban Prod + Gantt
   ========================== */

#app-prod {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Barre d'outils Prod (reprend le style CRM) */
.prod-toolbar {
    height: 50px;
    min-height: 50px;
    background: white;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.prod-toolbar h3 { margin: 0; color: #2c3e50; font-size: 16px; }

/* Sous-onglets Kanban / Gantt */
.prod-subtabs {
    display: flex;
    gap: 2px;
    background: #e9ecef;
    border-radius: 6px;
    padding: 3px;
}
.prod-subtab {
    background: transparent;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s;
}
.prod-subtab:hover { background: rgba(255,255,255,0.6); }
.prod-subtab.active { background: #1b1b1b; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Conteneur principal (change entre kanban et gantt) */
.prod-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* --- KANBAN PROD (réutilise l'esprit crm.css) --- */
.prod-kanban {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 15px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
}
.prod-column {
    flex: 1;
    min-width: 220px;
    background: #ebecf0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}
.prod-column-header {
    padding: 10px 12px;
    font-weight: bold;
    color: #172b4d;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.prod-column-header .prod-col-badge {
    font-size: 11px;
    color: #666;
    font-weight: normal;
}
.prod-column-body { padding: 6px; flex: 1; overflow-y: auto; min-height: 0; }
.prod-column-body::-webkit-scrollbar { width: 6px; }
.prod-column-body::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }

.prod-card {
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    margin-bottom: 8px;
    padding: 10px;
    border-left: 4px solid #009c6b;
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
}
.prod-card:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.12); }
.prod-card.dragging { opacity: 0.5; transform: rotate(1deg); border: 2px dashed #009c6b; }
.prod-card-title { font-weight: 700; color: #1b1b1b; font-size: 13px; margin-bottom: 4px; }
.prod-card-client { font-size: 11px; color: #666; margin-bottom: 4px; }
.prod-card-value { font-weight: bold; color: #009c6b; font-size: 12px; }
.prod-card-dates {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    font-size: 10px;
    color: #495057;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prod-card-dates .prod-card-dates-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
}
.prod-card-dates .prod-card-dates-btn:hover { background: #1b1b1b; color: white; border-color: #1b1b1b; }

/* Empty-state */
.prod-empty {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
}
.prod-empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.4; }

/* --- GANTT --- */
.gantt-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.gantt-scroll {
    flex: 1;
    overflow: auto;
    position: relative;
}
.gantt-grid {
    display: grid;
    /* grid-template-columns set dynamically by JS */
    min-width: 100%;
    position: relative;
}
.gantt-header-cell {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #1b1b1b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #333;
    border-bottom: 2px solid #009c6b;
    white-space: nowrap;
}
.gantt-header-cell.gantt-label-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    text-align: left;
    padding-left: 14px;
    min-width: 260px;
    border-right: 2px solid #009c6b;
    background: #1b1b1b;
    transform: translateX(var(--gantt-scroll-x, 0px));
    will-change: transform;
}
.gantt-header-cell.gantt-weekend { background: #1b1b1b; color: #aaa; }

.gantt-label-cell {
    position: relative;
    z-index: 40;
    background: #fafbfc;
    padding: 10px 12px;
    border-right: 2px solid #009c6b;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 260px;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 4px 0 8px -4px rgba(0,0,0,0.15);
    transform: translateX(var(--gantt-scroll-x, 0px));
    will-change: transform;
}
.gantt-label-cell:hover { background: #eef7f2; }
.gantt-label-cell .gantt-label-title { font-weight: 700; color: #1b1b1b; font-size: 13px; }
.gantt-label-cell .gantt-label-sub { font-size: 10px; color: #777; margin-top: 2px; }

.gantt-day-cell {
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #eee;
    min-height: 44px;
    position: relative;
    background: white;
}
.gantt-day-cell.gantt-weekend { background: #1b1b1b; }

.gantt-bar {
    position: absolute;
    top: 8px;
    bottom: 8px;
    background: linear-gradient(180deg, #34c787 0%, #009c6b 100%);
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 0 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    transition: transform 0.1s;
}
.gantt-bar:hover { transform: translateY(-1px); box-shadow: 0 3px 7px rgba(0,0,0,0.22); }
.gantt-bar.gantt-bar-unplanned { background: linear-gradient(180deg, #f5b041 0%, #d68910 100%); }
.gantt-bar.gantt-bar-done { background: linear-gradient(180deg, #7e7e7e 0%, #4a4a4a 100%); }
.gantt-bar.gantt-bar-dragging {
    opacity: 0.55;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    cursor: grabbing;
    outline: 2px dashed rgba(255,255,255,0.7);
    outline-offset: -3px;
    transition: none !important;
}
/* Surlignage de la rangée cible pendant un drag inter-équipes */
.gantt-row-drop-target {
    background: linear-gradient(90deg, rgba(0,156,107,0.10), rgba(0,156,107,0.04)) !important;
    box-shadow: inset 0 0 0 2px rgba(0,156,107,0.45);
}

/* Poignées de redimensionnement */
.gantt-bar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
    touch-action: none;
}
.gantt-bar:hover .gantt-bar-handle { opacity: 1; }
.gantt-bar-handle-left { left: 0; border-radius: 4px 0 0 4px; }
.gantt-bar-handle-right { right: 0; border-radius: 0 4px 4px 0; }
.gantt-bar-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background: rgba(255,255,255,0.6);
    transform: translate(-50%, -50%);
    border-radius: 1px;
}
.gantt-bar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
    min-width: 0;
    cursor: grab;
    user-select: none;
    line-height: 1.2;
    gap: 1px;
}
.gantt-bar.gantt-bar-dragging .gantt-bar-content { cursor: grabbing; }

/* Boutons de navigation du Gantt */
.gantt-nav-btn {
    background: white;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #1b1b1b;
    transition: background 0.15s;
}
.gantt-nav-btn:hover { background: #1b1b1b; color: white; border-color: #1b1b1b; }

/* Modal dates */
.prod-modal-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9500;
    display: flex; align-items: center; justify-content: center;
}
.prod-modal {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    padding: 22px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.prod-modal h3 { margin: 0 0 14px 0; color: #1b1b1b; font-size: 16px; }
.prod-modal label { display: block; font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 4px; }
.prod-modal input[type="date"],
.prod-modal input[type="color"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.prod-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.prod-modal-actions button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.prod-modal-btn-cancel { background: #f0f0f0; color: #333; border-color: #ccc !important; }
.prod-modal-btn-save { background: #009c6b; color: white; }
.prod-modal-btn-clear { background: #dc3545; color: white; margin-right: auto; }

.prod-modal select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
    box-sizing: border-box;
    background: white;
}

/* --- Lignes "équipes" dans le Gantt --- */
.gantt-team-label { align-items: flex-start !important; padding-top: 14px !important; }
.gantt-team-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0,0,0,0.12);
}
.gantt-team-edit {
    background: transparent;
    border: 1px solid #ddd;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
}
.gantt-team-edit:hover { background: #1b1b1b; color: white; border-color: #1b1b1b; }

/* --- Barres "client" (big picture par équipe) --- */
.gantt-bar-client {
    padding: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}
.gantt-bar-client-name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.gantt-bar-client-addr {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.gantt-bar-client-warn {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.95;
}

/* --- Modal gestion des équipes --- */
.prod-modal-teams { max-width: 500px; }
.prod-teams-list { max-height: 400px; overflow-y: auto; margin-bottom: 12px; }
.prod-team-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.prod-team-row input[type="color"] {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
    cursor: pointer;
}
.prod-team-row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    margin: 0;
    box-sizing: border-box;
}
.prod-team-delete {
    background: transparent;
    border: 1px solid #eee;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.prod-team-delete:hover { background: #dc3545; border-color: #dc3545; }
.prod-team-add {
    width: 100%;
    padding: 10px;
    background: #f8f9fa;
    border: 1px dashed #aaa;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #495057;
    margin-bottom: 10px;
}
.prod-team-add:hover { background: #1b1b1b; color: white; border-color: #1b1b1b; border-style: solid; }

/* --- Vue détaillée client --- */
.prod-client-detail {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prod-client-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.prod-back-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.prod-back-btn:hover { background: #1b1b1b; color: white; border-color: #1b1b1b; }

/* Menu 3 points dans l'en-tête de la fiche */
.prod-detail-menu-wrap { position: relative; }
.prod-detail-menu-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: #555;
    line-height: 1;
    padding: 0;
}
.prod-detail-menu-btn:hover { background: #e5e5e5; }
.prod-detail-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 180px;
    padding: 4px;
    display: none;
    z-index: 100;
}
.prod-detail-menu.prod-detail-menu-open { display: block; }
.prod-detail-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
}
.prod-detail-menu-item:hover { background: #f5f5f5; }
.prod-detail-menu-danger { color: #c0392b; font-weight: 600; }
.prod-detail-menu-danger:hover { background: #fdecea; }

.prod-client-title { flex: 1; }
.prod-client-title h2 { margin: 0; font-size: 20px; color: #1b1b1b; }
.prod-client-title .prod-client-sub { font-size: 13px; color: #777; margin-top: 2px; }
.prod-client-info {
    background: white;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.prod-client-info-block { display: flex; flex-direction: column; gap: 3px; }
.prod-info-label { font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.prod-client-calendar {
    background: white;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.prod-client-calendar-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: #1b1b1b; }
.prod-client-calendar .gantt-wrap { margin: 0; }

/* --- Fiche client : documents + notes --- */
.prod-client-docs, .prod-client-notes {
    background: white;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.prod-client-section-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    color: #1b1b1b;
}
.prod-client-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.prod-client-doc-block { display: flex; flex-direction: column; gap: 4px; }
.prod-client-doc-block input { margin-bottom: 2px; }
.prod-doc-open {
    font-size: 11px;
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}
.prod-doc-open:hover { text-decoration: underline; }
.prod-doc-hint { font-size: 11px; color: #888; font-style: italic; }
.prod-client-save-bar { display: flex; justify-content: flex-end; }
.prod-client-save-bar .prod-modal-btn-save {
    padding: 10px 22px;
    border-radius: 4px;
    border: none;
    background: #009c6b;
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.prod-client-save-bar .prod-modal-btn-save:hover { background: #00875c; }

/* Badge "commande spéciale" sur la carte Kanban */
.prod-card-so {
    font-size: 11px;
    color: #8e44ad;
    font-weight: 600;
    margin-top: 4px;
}

/* Widget "Soumission à jour" dans la fiche */
.prod-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.prod-quote-pick {
    background: #9b59b6;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    font-weight: 600;
}
.prod-quote-pick:hover { background: #8e44ad; }
.prod-quote-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f0f8ff;
    border: 1px solid #d5e8f5;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    transition: background 0.15s;
}
.prod-quote-card:hover { background: #e3f0fc; }
.prod-quote-card-link { background: #f8f0ff; border-color: #e8d5f5; }
.prod-quote-card-link:hover { background: #f0e0ff; }
.prod-quote-icon { font-size: 22px; flex-shrink: 0; }
.prod-quote-body { flex: 1; min-width: 0; }
.prod-quote-name {
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-quote-meta { font-size: 10px; color: #999; margin-top: 2px; }
.prod-quote-open {
    color: #007bff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.prod-quote-card-link .prod-quote-open { color: #9b59b6; font-size: 14px; }
.prod-quote-empty {
    padding: 16px 10px;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-style: italic;
    background: #f9f9f9;
    border-radius: 4px;
    cursor: pointer;
    border: 1px dashed #ddd;
}
.prod-quote-empty:hover { background: #f0f0f0; }

/* Dans la fiche client, le sous-Gantt est embarqué — on cache la fermeture (pas de sens ici) */
.prod-client-detail .gantt-sub-wrap { margin-top: 4px; border-radius: 6px; }
.prod-client-detail .gantt-sub-close { display: none; }


/* ==========================
   SOUS-GANTT (client sélectionné)
   ========================== */
.gantt-sub-wrap {
    flex: 1;
    min-height: 240px;
    max-height: 50vh;
    margin-top: 0;
    border-top: 3px solid #009c6b;
}
.gantt-sub-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}
.gantt-sub-title { flex: 1; min-width: 0; padding-left: 8px; }
.gantt-sub-client { font-weight: 700; font-size: 14px; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-sub-addr { font-size: 11px; color: #777; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-sub-range { font-size: 11px; color: #009c6b; margin-top: 3px; font-weight: 600; }
.gantt-sub-range strong { color: #1b1b1b; }

/* Cellules à l'intérieur de la plage du projet — teinte aux couleurs de l'équipe */
.gantt-day-cell.gantt-in-proj { background: rgba(0, 156, 107, 0.06); }
.gantt-header-cell.gantt-in-proj { background: rgba(0, 156, 107, 0.12); }
.gantt-sub-wrap .gantt-day-cell.gantt-in-proj {
    background: color-mix(in srgb, var(--team-color, #009c6b) 8%, transparent);
}
.gantt-sub-wrap .gantt-header-cell.gantt-in-proj {
    background: color-mix(in srgb, var(--team-color, #009c6b) 16%, transparent);
}
/* Sur les cellules d'en-tête pâles (teintées équipe), texte en noir pour lisibilité */
.gantt-sub-wrap .gantt-header-cell.gantt-in-proj:not(.gantt-weekend) {
    color: #1b1b1b;
}

/* La ligne unique du sous-Gantt se dimensionne selon le contenu */
#gantt-sub-grid { grid-auto-rows: min-content; position: relative; }

/* Week-ends en noir dans le sous-Gantt (colonne entière samedi/dimanche) */
.gantt-sub-wrap .gantt-header-cell.gantt-weekend { background: #1b1b1b; color: #aaa; }
.gantt-sub-wrap .gantt-day-cell.gantt-weekend { background: #1b1b1b; }
.gantt-sub-wrap .gantt-day-cell.gantt-weekend.gantt-in-proj {
    background: color-mix(in srgb, var(--team-color, #009c6b) 20%, #1b1b1b);
}

/* Marqueur vertical "aujourd'hui" dans le sous-Gantt — couleur de l'équipe */
.gantt-today-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    --marker-color: var(--team-color, #e53935);
    background: linear-gradient(to right,
        transparent 0%,
        transparent calc(50% - 1px),
        var(--marker-color) calc(50% - 1px),
        var(--marker-color) calc(50% + 1px),
        transparent calc(50% + 1px),
        transparent 100%);
}
.gantt-today-marker::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: var(--marker-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.gantt-sub-zoom { display: flex; background: white; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.gantt-sub-zoom-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: white;
    border: none;
    cursor: pointer;
    color: #495057;
    border-right: 1px solid #e5e5e5;
}
.gantt-sub-zoom-btn:last-child { border-right: none; }
.gantt-sub-zoom-btn:hover { background: #f0f0f0; }
.gantt-sub-zoom-btn.active { background: #1b1b1b; color: white; }

.gantt-sub-actions { display: flex; gap: 6px; align-items: center; }
.gantt-sub-add-task { background: #009c6b !important; color: white !important; border-color: #009c6b !important; }
.gantt-sub-add-task:hover { background: #007f57 !important; border-color: #007f57 !important; }
.gantt-sub-close {
    width: 30px; height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    display: flex; align-items: center; justify-content: center;
}
.gantt-sub-close:hover { background: #dc3545; color: white; border-color: #dc3545; }

/* Barres de tâches dans le sous-Gantt */
.gantt-bar.gantt-bar-task {
    font-size: 10px;
    padding: 0 6px;
    opacity: 0.92;
}
.gantt-bar.gantt-bar-task:hover { opacity: 1; }
.gantt-bar.gantt-bar-task .gantt-bar-client-name { font-size: 10px; font-weight: 600; }

/* Barre client sélectionnée dans le Gantt principal */
.gantt-bar.gantt-bar-selected {
    outline: 3px solid #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 2px #1b1b1b, 0 4px 12px rgba(0,0,0,0.25);
    z-index: 5;
}

.gantt-cat-label { background: #f5f8fa !important; }

/* Titres dans les labels */
.gantt-label-cell .gantt-label-title { font-weight: 700; color: #1b1b1b; font-size: 13px; }
.gantt-label-cell .gantt-label-sub { font-size: 10px; color: #777; margin-top: 2px; }

/* Inputs génériques dans les modals (tâche) */
.prod-modal-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
    box-sizing: border-box;
    background: white;
    font-family: inherit;
}
.prod-modal-input:focus { outline: none; border-color: #009c6b; box-shadow: 0 0 0 2px rgba(0,156,107,0.15); }
.prod-modal-label { display: block; font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 4px; }
textarea.prod-modal-input { resize: vertical; min-height: 60px; }

/* Sélecteur de couleur pour les tâches */
.prod-task-colors {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center; margin-bottom: 10px;
}
.prod-task-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    transition: transform .1s ease, border-color .1s ease;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff;
}
.prod-task-swatch:hover { transform: scale(1.1); }
.prod-task-swatch.selected { border-color: #009c6b; box-shadow: 0 0 0 2px #009c6b; }
.prod-task-swatch-none {
    background: #fff !important;
    color: #888; font-weight: 700;
    border: 1px dashed #aaa;
}
.prod-task-color-custom {
    width: 32px; height: 32px; padding: 0; border: 1px solid #ccc;
    border-radius: 4px; cursor: pointer; background: transparent;
}

/* Aperçu (fantôme) pendant le drag-to-create sur la grille du sous-Gantt */
.gantt-sub-create-preview {
    position: absolute;
    border-radius: 4px;
    opacity: 0.55;
    pointer-events: none;
    border: 2px dashed rgba(255,255,255,0.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    z-index: 3;
}

/* Zone des tâches orphelines */
.gantt-sub-orphans {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}
.gantt-sub-orphans-label {
    font-size: 12px; font-weight: 600; color: #495057;
    white-space: nowrap;
}
.gantt-sub-orphans-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1; min-width: 0;
}
.gantt-sub-orphans-hint {
    font-size: 11px; color: #999; font-style: italic;
    white-space: nowrap;
}
.gantt-sub-orphan-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px; font-weight: 500;
    color: #fff; cursor: grab;
    max-width: 180px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    user-select: none;
    transition: transform .1s ease, box-shadow .1s ease;
}
.gantt-sub-orphan-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.gantt-sub-orphan-chip:active, .gantt-sub-orphan-chip.dragging {
    cursor: grabbing; opacity: 0.6;
}