/* agent-timeline.css */

/* ══ Layout global ══ */
.at-sidebar {
  width: 280px; min-width: 280px;
  gap: 14px !important;
}
.at-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C96AA' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px !important; width:100%;
}

/* ── Liste agents ── */
.at-agents-section { flex-shrink:0; display:flex; flex-direction:column; gap:8px !important; }
.at-agents-section h3 { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.at-agent-actions { display:flex; gap:5px; }
.at-agent-actions button {
  background:none; border:1px solid var(--border); border-radius:var(--radius);
  padding:2px 8px; font-size:10px; font-weight:600; color:var(--text3);
  cursor:pointer; font-family:var(--font); transition:all .15s;
}
.at-agent-actions button:hover { border-color:var(--blue); color:var(--blue); }
.at-agent-list { max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.at-loading-agents { font-size:12px; color:var(--text3); padding:8px; }

.at-agent-item {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:var(--radius); background:var(--surface2);
  border:1.5px solid var(--border); cursor:pointer; transition:all .12s; user-select:none;
}
.at-agent-item:hover   { border-color:var(--blue); background:var(--blue-dim); }
.at-agent-item.selected{ border-color:var(--blue); background:var(--blue-dim); }
.at-agent-avatar {
  width:24px; height:24px; border-radius:50%; color:#fff;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.at-agent-info  { flex:1; min-width:0; }
.at-agent-name  { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-agent-division { font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-agent-check {
  width:16px; height:16px; border-radius:4px; border:2px solid var(--border2);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .12s;
}
.at-agent-item.selected .at-agent-check { background:var(--blue); border-color:var(--blue); }
.at-agent-item.selected .at-agent-check::after {
  content:''; width:4px; height:7px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(40deg) translate(-1px,-1px);
}

/* ══ Main ══ */
.at-main {
  flex:1; display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
  background:var(--bg);
}

/* ── Barre supérieure ── */
.at-topbar {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.at-topbar-left { flex:1; min-width:0; }
.at-results-title { font-size:15px; font-weight:800; letter-spacing:-.3px; }
.at-results-sub   { font-size:11px; color:var(--text3); font-family:var(--mono); margin-top:2px; }
.at-legend { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.at-li { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text2); font-weight:600; white-space:nowrap; }
.at-sw  { width:12px; height:12px; border-radius:3px; flex-shrink:0; }

/* Boutons export */
.at-export-btns { display:flex; gap:6px; flex-shrink:0; }
.at-export-btn {
  display:flex; align-items:center; gap:5px; padding:6px 12px;
  border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text2);
  font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .15s;
}
.at-export-btn svg { width:13px; height:13px; }
.at-export-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }
.at-export-btn--xl { border-color:rgba(0,166,81,.3); color:var(--green); background:var(--green-dim); }
.at-export-btn--xl:hover { border-color:var(--green); background:var(--green); color:#fff; }

/* ── Barre zoom/pan ── */
.at-controls-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  padding:8px 20px; border-bottom:1px solid var(--border);
  background:var(--surface2); flex-shrink:0; overflow-x:auto;
}
.at-zoom-btns { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.at-ctrl-btn {
  width:28px; height:28px; border-radius:var(--radius);
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text2); cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
}
.at-ctrl-btn svg { width:14px; height:14px; }
.at-ctrl-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }
.at-ctrl-btn--reset:hover { border-color:var(--gc-orange); color:var(--gc-orange); background:var(--gc-orange-dim); }
.at-zoom-label {
  font-size:11px; font-family:var(--mono); color:var(--text3);
  margin-left:4px; white-space:nowrap; min-width:80px;
}

/* Sliders */
.at-slider-group { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.at-slider-group--pan { flex:1; min-width:100px; }
.at-slider-icon { font-size:10px; color:var(--text3); }
.at-slider {
  appearance:none; height:4px; border-radius:2px;
  background:var(--surface3); outline:none; cursor:pointer;
  transition:background .15s;
}
.at-slider::-webkit-slider-thumb {
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--blue); cursor:pointer; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,102,255,.3);
}
.at-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--blue); cursor:pointer; border:2px solid #fff;
}
.at-slider--zoom { width:100px; }
.at-slider--pan  { flex:1; }

/* Indicateur créneau */
.at-view-range-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.at-view-label { font-size:11px; color:var(--text3); font-weight:600; white-space:nowrap; }
.at-view-range { font-size:11px; font-family:var(--mono); color:var(--blue); font-weight:600; white-space:nowrap; }

/* ── Timeline ── */
.at-timeline-wrap { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.at-time-header {
  display:flex; flex-shrink:0; border-bottom:2px solid var(--border); background:var(--surface);
}
.at-agent-col-hdr { width:200px; min-width:200px; flex-shrink:0; border-right:1px solid var(--border); }
.at-axis-wrap { flex:1; min-width:0; overflow:hidden; }
#at-axis-canvas { display:block; width:100%; }
.at-rows-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
#at-rows-container { display:flex; flex-direction:column; }

/* Ligne agent */
.at-row { display:flex; align-items:stretch; border-bottom:1px solid var(--border); min-height:48px; }
.at-row:hover { background:rgba(0,102,255,0.02); }
.at-row-name {
  width:200px; min-width:200px; flex-shrink:0; padding:0 12px;
  display:flex; align-items:center; gap:8px;
  border-right:1px solid var(--border); background:var(--surface);
}
.at-row:hover .at-row-name { background:var(--blue-dim); }
.at-row-avatar {
  width:28px; height:28px; border-radius:50%; color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.at-row-info { flex:1; min-width:0; }
.at-row-agent-name { font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-row-meta       { font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-row-canvas-wrap { flex:1; min-width:0; position:relative; overflow:hidden; }
.at-row-canvas { display:block; width:100%; height:48px; cursor:crosshair; }

/* ── Tooltip ── */
.at-tooltip {
  position:fixed; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius2); padding:10px 14px; font-size:12px; color:var(--text);
  box-shadow:var(--shadow-lg); pointer-events:none; display:none; z-index:1000;
  max-width:280px; line-height:1.7;
}
.at-tooltip-title { font-weight:700; font-size:12px; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.at-tooltip-dot   { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.at-tooltip-row   { display:flex; gap:8px; font-size:11px; color:var(--text2); }
.at-tooltip-label { color:var(--text3); min-width:52px; }

/* ── Vide ── */
#at-empty { padding:80px 32px; }

/* ══ Focus agent ══ */

/* Ligne dimmed : opacité réduite + filtre gris */
.at-row--dimmed {
  opacity: 0.18;
  filter: grayscale(0.7);
  transition: opacity .25s ease, filter .25s ease;
}

/* Ligne focused : mise en avant, légère ombre */
.at-row--focused {
  opacity: 1;
  filter: none;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  z-index: 2;
  position: relative;
  transition: opacity .25s ease;
}
.at-row--focused .at-row-name {
  background: var(--blue-dim);
  border-right-color: var(--blue);
}

/* Icône focus dans la colonne nom */
.at-focus-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  opacity: 0;
  transition: opacity .15s;
}
.at-focus-icon svg { width: 12px; height: 12px; }
.at-row-name:hover .at-focus-icon { opacity: 1; color: var(--blue); }
.at-row--focused .at-focus-icon   { opacity: 1; color: var(--blue); }

/* Hint "ESC pour annuler le focus" sous la timeline quand actif */
.at-focus-hint {
  position: absolute;
  bottom: 8px; right: 12px;
  font-size: 10px; color: var(--text3);
  font-family: var(--mono);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.at-focus-hint--visible { opacity: 1; }

/* ── Timezone ── */
.at-utc-label {
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--text3);
  margin-left: 4px;
}

/* ══ Liste divisions multi-sélection ══ */
.at-div-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 140px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  padding: 4px;
}

.at-div-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.at-div-item:hover  { background: var(--surface); }
.at-div-item.selected { background: var(--blue-dim); }

.at-div-check {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 3px;
  border: 2px solid var(--border2);
  transition: all .12s;
  display: flex; align-items: center; justify-content: center;
}
.at-div-check.checked {
  background: var(--blue);
  border-color: var(--blue);
}
.at-div-check.checked::after {
  content: '';
  width: 4px; height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg) translate(-1px,-1px);
}

.at-div-name {
  font-size: 11px; font-weight: 600;
  color: var(--text2);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-div-item.selected .at-div-name { color: var(--blue); }