* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body { background: #080808; color: #ddd; font-family: 'Segoe UI', 'Consolas', monospace; min-height: 100vh; overflow-x: clip; max-width: 100vw; }

/* ── HEADER ── */
header {
    background: #111; padding: 14px 24px 0;
    border-bottom: 2px solid #1e1e1e; position: sticky; top: 0; z-index: 10;
}
.header-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
header h1 { color: #ff8800; font-size: 1.25em; letter-spacing: 3px; font-weight: 700; }
#status { font-size: 0.82em; color: #777; transition: color .3s; }
#status.ok      { color: #33cc55; }
#status.late    { color: #ff4444; }
#status.err     { color: #ff4444; }

/* ── SECTIONS (niveau supérieur) ── */
.sections { display: flex; gap: 2px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sections::-webkit-scrollbar { display: none; }
.section-btn { flex-shrink: 0;
    padding: 8px 20px; cursor: pointer; font-size: 0.82em; font-weight: 600;
    letter-spacing: 1px; border-radius: 6px 6px 0 0;
    color: #888; background: transparent; border: none; outline: none;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
    user-select: none; text-transform: uppercase;
}
.section-btn:focus { outline: none; }
.section-btn:hover { color: #bbb; }
.section-btn.active { color: #ff8800; border-bottom: 2px solid #ff8800; }

/* ── ONGLETS (niveau secondaire, sous TRAINS) ── */
.tabs { display: flex; gap: 4px; }
.tab {
    padding: 8px 20px; cursor: pointer; font-size: 0.82em; font-weight: 600;
    letter-spacing: 1px; border-radius: 6px 6px 0 0;
    color: #888; background: transparent; border: none; outline: none;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
    user-select: none;
}
.tab:focus { outline: none; }
.tab:hover { color: #bbb; }
.tab.active { color: #ff8800; border-bottom: 2px solid #ff8800; }

/* ── PAGES ── */
.page { display: none; padding: 16px; }
.page.active { display: block; }

/* ── COLONNES TRAINS ── */
.columns {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.col { background: #111; border-radius: 8px; overflow: hidden; }
.col-header {
    padding: 12px 16px; font-size: 0.82em; font-weight: 700;
    letter-spacing: 1.5px; display: flex; justify-content: space-between; align-items: center;
}
.col-label-icon { display: none; font-size: 1.3em; line-height: 1; }

@media (max-width: 600px) {
    /* Header */
    header { padding: 10px 12px 0; }
    header h1 { font-size: 1em; letter-spacing: 1px; }
    .tabs { gap: 2px; }
    .tab { padding: 8px 12px; letter-spacing: 0; font-size: 0.76em; }

    /* Pages */
    .page { padding: 8px; }

    /* Status : pastille + temps seulement */
    .status-lbl { display: none; }

    /* Colonnes trains → empilées */
    .columns { grid-template-columns: 1fr; gap: 8px; }
    .col-header { padding: 10px 14px; justify-content: space-between; }
    .col-label-full { display: inline; }
    .col-label-icon { display: none; }
    .train-row { padding: 7px 10px; }
    .train-name { font-size: 0.85em; }
    .train-sub  { font-size: 0.72em; }

    /* Historique */
    .seg-stats, .seg-inv { white-space: normal; word-break: break-word; }
}
.col-header.moving  { background:#091209; color:#33ff55; border-bottom:2px solid #33ff55; }
.col-header.docked  { background:#09090f; color:#4499ff; border-bottom:2px solid #4499ff; }
.col-header.stopped { background:#120909; color:#ff4444; border-bottom:2px solid #ff4444; }
.badge {
    background: rgba(255,255,255,0.08); border-radius: 12px;
    padding: 2px 10px; font-size: 0.9em;
}
.train-row {
    padding: 9px 14px; border-bottom: 1px solid #161616;
    display: flex; flex-direction: column; gap: 3px;
}
.train-row:last-child { border-bottom: none; }
.train-name { color: #fff; font-size: 0.9em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train-sub  { color: #999; font-size: 0.76em; }
.train-sub span { margin-right: 10px; }
.spd-fast { color: #33ff55; }
.spd-slow { color: #ffff33; }
.spd-none { color: #ff4444; }
.clr-blue { color: #4499ff; }
.empty-row { padding: 12px 14px; color: #666; font-size: 0.8em; font-style: italic; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; flex-shrink: 0; }
.dot-fast    { background: #33ff55; }
.dot-slow    { background: #ffff33; }
.dot-stopped { background: #ff4444; }
.dot-docked  { background: #4499ff; }

/* ── HISTORIQUE ── */
.train-card { background: #111; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.train-card-header {
    padding: 10px 16px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    background: #141414; user-select: none; transition: background .15s;
}
.train-card-header:hover { background: #1a1a1a; }
.train-card-header .tname { color: #ccc; font-size: 0.88em; font-weight: 600; }
.train-card-header .tmeta { color: #777; font-size: 0.78em; }
.train-card-header .arrow { color: #777; font-size: 0.8em; transition: transform .2s; }
.train-card-header.open .arrow { transform: rotate(90deg); }
.segments { display: none; padding: 8px; }
.segments.open { display: block; }
.segment {
    margin-bottom: 6px; padding: 8px 12px;
    background: #0c0c0c; border-radius: 6px; border-left: 3px solid #2255aa;
}
.seg-title { color: #4499ff; font-size: 0.8em; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-stats { color: #999; font-size: 0.74em; }
.seg-inv   { color: #aaa; font-size: 0.74em; margin-top: 4px; }
.seg-inv span { margin-right: 10px; }

/* ── STATISTIQUES ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.stats-section {
    background: #111; border-radius: 8px; padding: 18px 20px;
    border: 1px solid #1a1a1a;
    display: flex; flex-direction: column; gap: 0;
}
.stats-section-title {
    color: #ff8800; font-size: 0.78em; letter-spacing: 1.5px; font-weight: 700;
    margin-bottom: 14px; border-bottom: 1px solid #1e1e1e; padding-bottom: 8px;
}
.stats-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.stats-label { color: #888; font-size: 0.82em; margin-bottom: 2px; }
.stats-val { font-weight: 700; }
.stats-bigval { font-size: 1.6em; font-weight: 700; color: #eee; }
.stats-sub { font-size: 0.6em; color: #888; font-weight: 400; display: block; margin-top: 2px; }
.stats-bar-bg { background: #0d0d0d; height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0 16px; }
.stats-bar { height: 100%; border-radius: 4px; transition: width .5s; width: 0%; }
.stats-score { font-size: 4em; font-weight: 700; line-height: 1; display: inline; }
.stats-score-denom { font-size: 1.2em; color: #666; }
.stats-uptime { margin-top: 16px; color: #666; font-size: 0.72em; }
.stats-inv-row { display: flex; gap: 12px; margin-top: 12px; }
.stats-inv-cell { flex: 1; min-width: 0; }
.clr-orange { color: #ff8800; }
.stats-hist-header { color: #ff8800; font-size: 0.78em; letter-spacing: 1.5px; font-weight: 700; margin: 4px 0 8px; }
.clr-green  { color: #22ee22; }
.clr-yellow { color: #eeee22; }
.clr-red    { color: #ee3333; }
.clr-blue   { color: #3399ff; }
.bar-green  { background: #22ee22; }
.bar-yellow { background: #eeee22; }
.bar-red    { background: #ee3333; }

/* ── STOCKAGE ── */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.stock-card { background: #111; border-radius: 8px; padding: 16px 18px; border: 1px solid #1a1a1a; }
.stock-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.stock-zone { color: #ff8800; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.stock-fill { font-size: 1.4em; font-weight: 700; }
.stock-bar-bg { background: #0d0d0d; height: 6px; border-radius: 3px; overflow: hidden; margin: 4px 0 12px; }
.stock-bar { height: 100%; border-radius: 3px; transition: width .5s; }
.stock-meta { color: #888; font-size: 0.76em; margin-bottom: 10px; }
.stock-items { display: flex; flex-direction: column; gap: 3px; }
.stock-item-row { display: grid; grid-template-columns: 1fr 56px 40px; gap: 4px; font-size: 0.78em; align-items: center; }
.stock-item-name { color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-item-count { color: #ddd; font-weight: 600; text-align: right; }
.stock-item-pct  { color: #555; text-align: right; }
.stock-empty { color: #888; font-size: 0.82em; font-style: italic; padding: 8px 0; }
.stock-stale { opacity: 0.45; }
.stock-offline-badge { background: #441111; color: #cc4444; font-size: 0.65em; font-weight: 700; letter-spacing: 0.8px; padding: 1px 6px; border-radius: 3px; margin: 0 6px; vertical-align: middle; text-transform: uppercase; }
.stock-subzone-stale { opacity: 0.5; }
.stock-card { cursor: grab; transition: border-color .15s, opacity .15s; }
.stock-card:hover { border-color: #333; }
.stock-card.dragging { opacity: 0.35; cursor: grabbing; }
.stock-card.drag-over { border-color: #ff8800; }

/* ── SOUS-ZONES STOCKAGE ── */
.stock-subzones { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.stock-subzone { background: #0d0d0d; border-radius: 4px; padding: 7px 10px; border-left: 2px solid #2a2a2a; }
.stock-subzone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.stock-subzone-name { color: #cc6600; font-size: 0.72em; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.stock-subzone-fill { font-size: 0.82em; font-weight: 700; }
.stock-subzone-bar-bg { background: #1a1a1a; height: 3px; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.stock-subzone-bar { height: 100%; border-radius: 2px; transition: width .5s; }
.stock-subzone-meta { color: #555; font-size: 0.7em; margin-bottom: 3px; }
/* modal sous-zones */
.stock-modal-subzone { padding: 10px 0; border-bottom: 1px solid #1e1e1e; }
.stock-modal-subzone:last-child { border-bottom: none; }
.stock-modal-subzone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.stock-modal-subzone-name { color: #aaa; font-size: 0.8em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.stock-modal-subzone-meta { color: #666; font-size: 0.72em; margin-bottom: 6px; }

/* ── BOUTONS FENÊTRE PERF ── */
.perf-range-btn {
    background: #1a1a1a; border: 1px solid #2a2a2a; color: #666;
    border-radius: 4px; padding: 3px 10px; font-size: 0.72em; cursor: pointer;
}
.perf-range-btn:hover { border-color: #ffaa00; color: #ffaa00; }
.perf-range-btn.active { background: #1f1600; border-color: #ffaa00; color: #ffaa00; font-weight: 700; }

/* ── MODAL CHECK PERF ── */
#perf-modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
}
#perf-modal.open { display: flex; }
#perf-panel {
    background: #111; border-radius: 8px; border: 1px solid #1a1a1a;
    width: 660px; max-width: 96vw; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px;
}
#perf-body { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #333 #111; }
#perf-body::-webkit-scrollbar { width: 6px; }
#perf-body::-webkit-scrollbar-track { background: #111; }
#perf-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── MODAL RAPPORT DISPATCH ── */
#dp-report-modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
}
#dp-report-modal.open { display: flex; }
#dp-report-panel {
    background: #111; border-radius: 8px; border: 1px solid #1a1a1a;
    width: 640px; max-width: 96vw; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px;
}
#dp-report-body { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #333 #111; }
#dp-report-body::-webkit-scrollbar { width: 6px; }
#dp-report-body::-webkit-scrollbar-track { background: #111; }
#dp-report-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── MODAL STOCKAGE ── */
#stock-modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
}
#stock-modal.open { display: flex; }
#stock-modal-panel {
    background: #111; border-radius: 8px; border: 1px solid #1a1a1a;
    width: 480px; max-width: 95vw; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden; padding: 0;
}
#stock-modal-panel .stock-card-header { padding: 12px 18px; margin-bottom: 0; flex-shrink: 0; border-bottom: 1px solid #1e1e1e; }
#stock-modal-panel .stock-bar-bg { margin: 0; border-radius: 0; flex-shrink: 0; }
#stock-modal-panel .stock-meta { padding: 8px 18px 4px; margin: 0; flex-shrink: 0; }
#stock-modal-panel .stock-items { overflow-y: auto; flex: 1; padding: 4px 18px 12px; scrollbar-width: thin; scrollbar-color: #333 #111; }
#stock-modal-panel .stock-items::-webkit-scrollbar { width: 6px; }
#stock-modal-panel .stock-items::-webkit-scrollbar-track { background: #111; }
#stock-modal-panel .stock-items::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
#stock-modal-panel .stock-items::-webkit-scrollbar-thumb:hover { background: #444; }
#stock-modal-panel .stock-item-row { padding: 5px 0; border-bottom: 1px solid #161616; }
#stock-modal-panel .stock-item-row:last-child { border-bottom: none; }
.stock-modal-close { background: none; border: none; outline: none; color: #666; font-size: 1em; cursor: pointer; padding: 0 2px; line-height: 1; }
.stock-modal-close:hover { color: #bbb; }

/* ── BARRE SECTION STOCKAGE ── */
.stock-section-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 4px 12px;
}
.stock-section-title { color: #ff8800; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; }
.stock-purge-btn {
    background: none; border: 1px solid #444; outline: none; cursor: pointer;
    color: #888; font-size: 0.76em; font-weight: 600; letter-spacing: 0.5px;
    padding: 4px 12px; border-radius: 4px; transition: color .15s, border-color .15s;
}
.stock-purge-btn:hover { color: #ff8800; border-color: #ff8800; }

/* ── Config stockage DnD ── */
.stk-cfg-layout { display: flex; gap: 16px; align-items: flex-start; }
.stk-cfg-pool { width: 210px; flex-shrink: 0; position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; align-self: flex-start; scrollbar-width: thin; scrollbar-color: #2a2a2a #0d0d0d; }
.stk-cfg-pool::-webkit-scrollbar { width: 4px; }
.stk-cfg-pool::-webkit-scrollbar-track { background: #0d0d0d; }
.stk-cfg-pool::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
.stk-cfg-pool-title { color: #888; font-size: 0.76em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.stk-cfg-filter { display: block; width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 4px; color: #bbb; font-size: 0.74em; padding: 5px 8px; outline: none; box-sizing: border-box; margin-bottom: 8px; }
.stk-cfg-filter:focus { border-color: #4499cc; }
.stk-cfg-filter::placeholder { color: #555; }
.stk-cfg-zones { flex: 1; min-width: 0; }
.stk-zone-card { background: #111; border: 1px solid #1e1e1e; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.stk-zone-header { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #141414; border-bottom: 1px solid #1e1e1e; }
.stk-zone-name-input { background: transparent; border: none; border-bottom: 1px solid transparent; color: #ff8800; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; outline: none; flex: 1; min-width: 80px; }
.stk-zone-name-input:focus { border-bottom-color: #ff8800; }
.stk-btn-collapse { background: none; border: none; color: #777; cursor: pointer; font-size: 0.8em; padding: 0 2px; flex-shrink: 0; line-height: 1; }
.stk-btn-collapse:hover { color: #ccc; }
.stk-subzone-card { border-top: 1px solid #1a1a1a; }
.stk-subzone-header { display: flex; align-items: center; gap: 6px; padding: 5px 14px 0; }
.stk-subzone-name-input { background: transparent; border: none; border-bottom: 1px solid transparent; color: #ff8800; opacity: 0.7; font-size: 0.76em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; outline: none; flex: 1; min-width: 60px; }
.stk-subzone-name-input:focus { border-bottom-color: #ff8800; opacity: 1; }
.stk-btn-sm { background: #1a1a1a; border: 1px solid #2a2a2a; color: #777; border-radius: 4px; padding: 2px 8px; font-size: 0.72em; cursor: pointer; white-space: nowrap; }
.stk-btn-sm:hover { color: #ff8800; border-color: #ff8800; }
.stk-btn-del:hover { color: #cc3333 !important; border-color: #cc3333 !important; }
.stk-drop-area { min-height: 44px; padding: 6px; display: flex; flex-wrap: wrap; gap: 5px; transition: background .15s, outline .15s; border-radius: 4px; }
.stk-drop-area.drag-over { background: #161616; outline: 1px dashed #ff8800; }
.stk-drop-hint { color: #666; font-size: 0.7em; font-style: italic; align-self: center; padding: 2px 4px; pointer-events: none; }
.stk-cont-card { background: #0d0d0d; border: 1px solid #222; border-radius: 5px; padding: 5px 8px; cursor: grab; width: 180px; transition: border-color .15s, opacity .15s; user-select: none; }
.stk-cont-card:hover { border-color: #444; }
.stk-cont-card.dragging { opacity: 0.3; cursor: grabbing; }
.stk-cont-nick { color: #ccc; font-size: 0.78em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.stk-cont-sat  { color: #4499cc; font-size: 0.68em; font-weight: 400; margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-cont-fill { color: #777; font-size: 0.68em; margin-bottom: 3px; }
.stk-cont-bar-bg { background: #1a1a1a; height: 3px; border-radius: 2px; overflow: hidden; }
.stk-cont-bar { height: 100%; border-radius: 2px; }
.stk-cfg-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ── POWER ── */
.pw-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 4px 12px;
}
.pw-title { color: #ff8800; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; }
.pw-stale { font-size: 0.76em; color: #555; }

/* Desktop : sidebar gauche (cards) + graphe droit */
.pw-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 12px;
    align-items: stretch;
}
.pw-sidebar { display: flex; flex-direction: column; gap: 10px; }
.pw-stat-card {
    background: #111; border-radius: 8px; padding: 14px 16px;
    border: 1px solid #1a1a1a;
}
.pw-stat-label { color: #666; font-size: 0.72em; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.pw-stat-val   { font-size: 1.7em; font-weight: 700; }
.pw-load-row   { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pw-load-bar-bg { flex: 1; background: #0d0d0d; height: 6px; border-radius: 3px; overflow: hidden; }
.pw-load-bar   { height: 100%; border-radius: 3px; transition: width .5s, background .5s; width: 0%; }
.pw-load-pct   { color: #888; font-size: 0.78em; font-weight: 700; min-width: 36px; text-align: right; }

.pw-chart-col {
    background: #111; border-radius: 8px; padding: 16px 18px;
    border: 1px solid #1a1a1a;
    display: flex; flex-direction: column;
}
.pw-chart-col canvas { flex: 1; width: 100%; display: block; border-radius: 4px; min-height: 0; }

.pw-section-title {
    color: #ff8800; font-size: 0.78em; letter-spacing: 1.5px; font-weight: 700;
    margin-bottom: 10px;
}
.pw-batt {
    background: #111; border-radius: 8px; padding: 14px 16px;
    border: 1px solid #1a1a1a;
}
.pw-batt-pct   { font-size: 2em; font-weight: 700; margin-bottom: 4px; }
.pw-batt-store { color: #888; font-size: 0.8em; margin-bottom: 2px; }
.pw-batt-flux  { font-size: 0.8em; margin-top: 6px; }

/* Mobile : empilement — graphe masqué */
@media (max-width: 700px) {
    .pw-layout { grid-template-columns: 1fr; }
    .pw-chart-col { display: none; }
}

/* ── FOOTER ── */
#footer { position: fixed; bottom: 8px; right: 14px; color: #282828; font-size: 0.72em; }

/* ── DISPATCH ── */
.dp-offline-banner {
    color: #888; font-size: 0.78em; font-style: italic;
    background: #0d0d0d; border: 1px solid #1e1e1e; border-radius: 6px;
    padding: 12px 16px; margin-bottom: 14px;
}
.dp-status-bar {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px;
    border-bottom: 1px solid #1e1e1e; margin-bottom: 12px; flex-wrap: wrap;
}
.dp-status-title { color: #00aacc; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; flex: 1; }
.dp-badge {
    font-size: 0.72em; font-weight: 600; padding: 2px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.08);
}
.dp-badge.ok   { color: #33cc55; }
.dp-badge.warn { color: #ff8800; }
.dp-badge.err  { color: #ff4444; }

.dp-route {
    background: #111; border: 1px solid #1a1a1a; border-radius: 8px;
    margin-bottom: 10px; overflow: hidden;
}
.dp-route-header {
    background: #091012; border-bottom: 2px solid #00aacc;
    padding: 8px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dp-route-name { color: #00aacc; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; flex: 1; }
.dp-route-meta { color: #666; font-size: 0.72em; }
.dp-route-stat { color: #aaa; font-size: 0.76em; }

.dp-train-row {
    padding: 7px 14px; border-bottom: 1px solid #161616;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dp-train-row:last-child { border-bottom: none; }
.dp-train-name { color: #fff; font-size: 0.88em; font-weight: 600; min-width: 120px; }
.dp-train-phase {
    font-size: 0.72em; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    background: rgba(255,255,255,0.07);
}
.dp-train-phase.park     { color: #4499ff; }
.dp-train-phase.route    { color: #33cc55; }
.dp-train-phase.delivery { color: #ff8800; }
.dp-train-phase.unknown  { color: #666; }
.dp-train-decision          { font-size: 0.76em; font-weight: 700; letter-spacing: 0.5px; }
.dp-train-decision.dec-go   { color: #33cc55; }
.dp-train-decision.dec-hold { color: #cc4444; }
.dp-train-decision.dec-idle { color: #555; }
.dp-btns { display: flex; gap: 5px; margin-left: auto; }
.dp-btn {
    background: none; border: 1px solid #333; outline: none; cursor: pointer;
    color: #888; font-size: 0.70em; font-weight: 600; padding: 3px 10px;
    border-radius: 4px; transition: color .15s, border-color .15s;
}
.dp-btn:hover       { color: #ddd; border-color: #aaa; }
.dp-btn.go:hover    { color: #33cc55; border-color: #33cc55; }
.dp-btn.hold:hover  { color: #ff8800; border-color: #ff8800; }
.dp-btn.rec:hover   { color: #4499ff; border-color: #4499ff; }
.dp-btn.del:hover   { color: #ff4444; border-color: #ff4444; }

/* Éditeur inline par route / Inline per-route editor */
.dp-inline-editor {
    background: #0a0e10; border-top: 1px solid #1e1e1e;
    padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end;
}
.dp-edit-field { display: flex; flex-direction: column; gap: 3px; }
.dp-edit-field label { color: #555; font-size: 0.68em; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.dp-edit-field .dp-input { width: 150px; }
.dp-edit-field.dp-ef-max .dp-input { width: 58px; }
.dp-editor-actions {
    width: 100%; display: flex; align-items: center; gap: 8px;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid #1a1a1a;
}
.dp-input {
    background: #0d0d0d; border: 1px solid #2a2a2a; color: #ddd;
    padding: 3px 8px; font-size: 0.78em; border-radius: 3px; width: 100%; outline: none;
}
.dp-input:focus { border-color: #00aacc; }
.dp-save-btn {
    background: rgba(0,170,204,0.12); border: 1px solid #00aacc; color: #00aacc;
    padding: 4px 14px; font-size: 0.76em; font-weight: 600; border-radius: 4px;
    cursor: pointer; transition: background .15s;
}
.dp-save-btn:hover { background: rgba(0,170,204,0.22); }

/* ── DISPATCH LIVE 2 — Cards ── */
.dp2-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dp2c-card { background: #111; border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; }
.dp2c-header { background: #090d0f; border-bottom: 2px solid #00aacc; padding: 8px 12px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dp2c-name { color: #00aacc; font-size: 0.8em; font-weight: 700; letter-spacing: 1px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp2c-stats { padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid #161616; }
.dp2c-stat { display: flex; align-items: center; gap: 5px; font-size: 0.72em; flex-wrap: wrap; }
.dp2c-sl { color: #555; }
.dp2c-sv { color: #bbb; font-weight: 600; }
.dp2c-enroute { gap: 5px; }
.dp2c-sv.full    { color: #33cc55; }
.dp2c-sv.partial { color: #ff8800; }
.dp2c-bar-bg { flex: 1; background: #1a1a1a; height: 3px; border-radius: 2px; overflow: hidden; min-width: 40px; }
.dp2c-bar { height: 100%; border-radius: 2px; background: #555; transition: width .3s; }
.dp2c-bar.partial { background: #ff8800; }
.dp2c-bar.full    { background: #33cc55; }
.dp2c-offline-meta { padding: 10px 12px; color: #444; font-size: 0.74em; line-height: 1.7; }
.dp2c-toggle { border-radius: 4px; border: 1px solid; font-size: 0.65em; font-weight: 700; padding: 1px 7px; cursor: pointer; transition: background .15s, color .15s; }
.dp2c-toggle.on  { background: rgba(51,204,85,0.1);  border-color: #33cc55; color: #33cc55; }
.dp2c-toggle.on:hover  { background: rgba(51,204,85,0.22); }
.dp2c-toggle.off { background: rgba(100,100,100,0.1); border-color: #555; color: #555; }
.dp2c-toggle.off:hover { background: rgba(100,100,100,0.22); color: #888; border-color: #888; }
.dp2c-trains { border-top: 1px solid #161616; }
.dp2c-train { padding: 5px 10px 6px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid #141414; }
.dp2c-train:last-child { border-bottom: none; }
.dp2c-train-info { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dp2c-train-btns { display: flex; justify-content: flex-end; gap: 4px; }
.dp2c-tname { color: #ddd; font-size: 0.78em; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── DISPATCH 2 — Configurateur deux panneaux ── */
.dp2-layout { display: flex; height: calc(100vh - 88px); overflow: hidden; }
.dp2-left { width: 240px; flex-shrink: 0; background: #111; border-right: 1px solid #1e1e1e; display: flex; flex-direction: column; overflow: hidden; }
.dp2-list-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #090d0f; border-bottom: 2px solid #00aacc; }
.dp2-list-title { color: #00aacc; font-size: 0.76em; font-weight: 700; letter-spacing: 1.5px; flex: 1; }
.dp2-cnt { background: #0d1a1f; color: #00aacc; border-radius: 9px; padding: 1px 7px; font-size: 0.85em; font-weight: 700; }
.dp2-route-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: #2a2a2a #0d0d0d; }
.dp2-route-item { background: #0d0d0d; border: 1px solid #1e1e1e; border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.dp2-route-item:hover { border-color: #333; background: #131313; }
.dp2-route-item.selected { border-color: #00aacc; background: #050d0f; }
.dp2-item-name { font-size: 0.78em; font-weight: 700; letter-spacing: 0.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888; }
.dp2-route-item.selected .dp2-item-name { color: #00aacc; }
.dp2-item-meta { color: #444; font-size: 0.69em; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp2-item-foot { display: flex; gap: 5px; align-items: center; margin-top: 4px; }
.dp2-off-tag { color: #555; font-size: 0.65em; font-weight: 700; padding: 1px 5px; border: 1px solid #333; border-radius: 3px; }
.dp2-empty { color: #444; font-size: 0.76em; text-align: center; padding: 24px 12px; line-height: 1.7; }
.dp2-right { flex: 1; overflow-y: auto; padding: 24px 28px; }
.dp2-form-placeholder { color: #333; font-size: 0.82em; text-align: center; padding: 80px 24px; line-height: 2; }
.dp2-form-header { padding-bottom: 12px; border-bottom: 2px solid #00aacc; margin-bottom: 22px; }
.dp2-form-title { color: #00aacc; font-size: 0.82em; font-weight: 700; letter-spacing: 1.5px; }
.dp2-form-body { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.dp2-form-body .dp-edit-field label { color: #555; font-size: 0.68em; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 4px; }
.dp2-input { width: 100% !important; box-sizing: border-box; }
.dp2-input-short { width: 80px !important; }
.dp2-enabled-row { padding-top: 4px; }
.dp2-toggle-label { color: #777; font-size: 0.8em; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dp2-toggle-label input[type="checkbox"] { accent-color: #00aacc; cursor: pointer; width: 15px; height: 15px; }
.dp2-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #1a1a1a; }

/* ── STOCKAGE — MISE À JOUR ── */
.stk-upd-header {
    background: #111; border: 1px solid #1e1e1e; border-radius: 8px;
    padding: 14px 18px; margin-bottom: 18px;
}
.stk-upd-title-row {
    display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.stk-upd-latest-label { color: #888; font-size: 0.78em; }
.stk-upd-latest-ver   { color: #ff8800; font-size: 0.9em; font-weight: 700; }
.stk-upd-sat-count    { color: #555; font-size: 0.72em; margin-left: auto; }
.stk-upd-actions      { display: flex; gap: 10px; flex-wrap: wrap; }

.stk-upd-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.stk-upd-card {
    background: #111; border: 1px solid #1e1e1e; border-radius: 8px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.stk-upd-card-header { display: flex; flex-direction: column; gap: 6px; }
.stk-upd-nick { color: #fff; font-size: 0.9em; font-weight: 700; }

.stk-upd-badge {
    font-size: 0.68em; font-weight: 600; border-radius: 10px;
    padding: 2px 9px; white-space: nowrap;
}
.stk-upd-ok      { background: rgba(51,204,85,0.15);  color: #33cc55; border: 1px solid rgba(51,204,85,0.3); }
.stk-upd-old     { background: rgba(255,68,68,0.15);   color: #ff4444; border: 1px solid rgba(255,68,68,0.3); }
.stk-upd-pending { background: rgba(0,180,255,0.12);  color: #44aaff; border: 1px solid rgba(0,180,255,0.3); }
.stk-upd-timeout { background: rgba(255,68,68,0.12);  color: #ff4444; border: 1px solid rgba(255,68,68,0.3); }

.stk-upd-versions { display: flex; align-items: center; gap: 8px; font-size: 0.78em; }
.stk-upd-ver-cur    { color: #888; }
.stk-upd-ver-arrow  { color: #333; }
.stk-upd-ver-new    { color: #33cc55; font-weight: 700; }
.stk-upd-ver-same   { color: #555; }

.stk-upd-btn {
    background: rgba(255,136,0,0.12); border: 1px solid rgba(255,136,0,0.4); color: #ff8800;
    padding: 5px 14px; font-size: 0.76em; font-weight: 600; border-radius: 4px;
    cursor: pointer; transition: background .15s; align-self: flex-start; width: 100%;
}
.stk-upd-btn:hover:not(:disabled) { background: rgba(255,136,0,0.22); }
.stk-upd-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.stk-upd-filter-active { background: rgba(255,136,0,0.18) !important; border-color: #ff8800 !important; color: #ff8800 !important; }