/* SatView Tasking Module — Complete CSS
 * Dark theme, matching SatDream Tech/SatView design system
 * All classes prefixed .tasking-* or .sat-info-*
 */

/* ============================================================
   SATELLITE INFO BUTTON & PANEL
   ============================================================ */

.satellite-item__info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 150ms, color 150ms, background 150ms;
  padding: 0;
  margin-inline-start: auto;
}

.satellite-item:hover .satellite-item__info {
  opacity: 1;
}

.satellite-item__info:hover {
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

.sat-info-panel {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  /* inset-inline-start (2026-09-01, support RTL) : sous direction:ltr
     (défaut), se comporte exactement comme `left` — la seule position
     de ce fichier calculée à partir de --sidebar-width, cohérente avec
     le côté où la grille .app-layout place la colonne barre latérale
     quelle que soit la direction (Grid CSS réordonne nativement ses
     colonnes selon `direction`, sans changement à .app-layout lui-même). */
  inset-inline-start: calc(var(--sidebar-width) + 12px);
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
  overflow: hidden;
}

.sat-info-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sat-info-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.sat-info-panel__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.sat-info-panel__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.sat-info-panel__operator {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.sat-info-panel__close {
  margin-inline-start: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, background 150ms;
}

.sat-info-panel__close:hover {
  color: var(--color-text);
  background: var(--color-surface-3);
}

.sat-info-panel__body {
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.sat-info-panel__body .sat-card__row {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sat-info-panel__body .sat-card__row:last-child {
  border-bottom: none;
}

/* ============================================================
   TASKING SIDEBAR TAB CONTENT
   ============================================================ */

.tasking-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.tasking-summary__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color 150ms;
}

.tasking-summary__card:hover {
  border-color: var(--color-accent);
}

.tasking-summary__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
}

.tasking-summary__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tasking-recent {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-3);
}

.tasking-recent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0 var(--space-1);
}

.tasking-recent__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tasking-recent__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms;
  border: 1px solid transparent;
  margin-bottom: 4px;
}

.tasking-recent__item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.tasking-recent__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tasking-recent__info {
  flex: 1;
  min-width: 0;
}

.tasking-recent__id {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
}

.tasking-recent__name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-recent__badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* tasking-tab-actions replaced by unified sidebar-actions-top/bottom pattern */
/* btn--accent replaced by btn--center-open pattern */

/* Badge on tab (base styles in style.css) */

/* ============================================================
   FULLSCREEN TASKING OVERLAY
   ============================================================ */

/* Floating, resizable window — same family as the .cat-modal windows
   (Scene Search / My Orders / My Missions): draggable by its header
   (tool-windows.js, which also persists position+size and handles
   bring-to-front), native bottom-right resize grip, internal panes
   (.tasking-body and each view) already scroll within the bounded height.
   Wide default: the Kanban board is the widest layout in the app. */
.tasking-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 12000;               /* floating-window family */
  width: min(1400px, 96vw);
  height: min(88vh, 920px);
  border: 1px solid var(--color-border, #2A3038);
  border-radius: 12px;
  overflow: hidden;             /* required for resize + rounded corners */
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  resize: both;
  min-width: 640px;
  min-height: 400px;
  max-width: 96vw;
  max-height: 96vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.99);
  transition: opacity 250ms ease, transform 250ms ease;
}

.tasking-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile keeps the previous fullscreen behavior — a 640px-min floating
   window can't fit a phone viewport, and drag/resize make no sense there. */
@media (max-width: 768px) {
  .tasking-overlay,
  .tasking-overlay.visible {
    inset: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    resize: none;
  }
}

/* ============================================================
   TASKING HEADER
   ============================================================ */

.tasking-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 52px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  z-index: 10;
  cursor: move;         /* drag handle (tool-windows.js) */
  user-select: none;
}

.tasking-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.tasking-header__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.tasking-header__center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.tasking-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* ============================================================
   VIEW TABS
   ============================================================ */

.tasking-view-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3px;
}

.tasking-view-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 150ms, background 150ms;
  white-space: nowrap;
}

.tasking-view-tab svg {
  flex-shrink: 0;
}

.tasking-view-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.tasking-view-tab.active {
  color: var(--color-text);
  background: var(--color-surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ============================================================
   FILTERS
   ============================================================ */

.tasking-filters {
  display: flex;
  gap: var(--space-2);
}

.tasking-filter-select {
  height: 30px;
  padding: 0 var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A949E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* background-position n'a pas d'équivalent logique fiable partout —
     repli [dir="rtl"] explicite juste en dessous plutôt qu'une propriété
     logique (2026-09-01, support RTL). */
  background-position: right 8px center;
  padding-inline-end: 28px;
  transition: border-color 150ms;
}

[dir="rtl"] .tasking-filter-select {
  background-position: left 8px center;
}

.tasking-filter-select:hover,
.tasking-filter-select:focus {
  border-color: var(--color-accent);
}

/* ============================================================
   BODY LAYOUT
   ============================================================ */

.tasking-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */

.tasking-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-inline-end: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tasking-sidebar__section {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.tasking-sidebar__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
}

.tasking-aoi-filter,
.tasking-sensor-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasking-filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: background 150ms, color 150ms;
  user-select: none;
}

.tasking-filter-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.tasking-filter-item input[type="checkbox"] {
  width: 12px;
  height: 12px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.tasking-filter-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tasking-quick-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tasking-quick-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.tasking-quick-stat__label {
  color: var(--color-text-muted);
}

.tasking-quick-stat__value {
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
}

/* ============================================================
   MAIN VIEW AREA
   ============================================================ */

.tasking-main {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.tasking-view {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.tasking-view.hidden {
  display: none;
}

/* ============================================================
   TIMELINE / GANTT VIEW
   ============================================================
   Îlot intentionnellement LTR même en arabe (2026-09-01, support RTL,
   décision actée avec l'utilisateur — voir le plan de session) : un
   diagramme de Gantt représente le temps qui avance, et flipper cet axe
   en RTL casserait la convention universelle "le temps va vers la
   droite" qu'un opérateur (arabophone ou non) attend d'un Gantt. Toutes
   les propriétés à direction physique de cette section (colonne
   d'étiquettes, remplissage des barres, ligne "maintenant", marqueurs de
   passage) restent donc VOLONTAIREMENT en dur, pas converties en
   propriétés logiques — contrairement au reste de ce fichier. */

.tasking-timeline-container {
  flex: 1;
  overflow: auto;
  position: relative;
  /* direction:ltr explicite (2026-09-01, support RTL — corrige un
     chevauchement de texte signalé par l'utilisateur) : laisser les
     propriétés physiques (left/right) en l'état ne suffisait pas — la
     propriété CSS `direction` est HÉRITÉE, donc `dir="rtl"` sur <html>
     se propage à tout ce sous-arbre par défaut, y compris le rendu du
     TEXTE des étiquettes de barres (white-space:nowrap + text-overflow:
     ellipsis calculés dans le mauvais sens, superposition de libellés
     voisins). Ce réglage explicite isole tout l'îlot Gantt/Timeline de
     l'héritage RTL — pas seulement ses positions, aussi son rendu de
     texte — cohérent avec les propriétés physiques déjà laissées en LTR
     dans cette section. */
  direction: ltr;
}

.tasking-timeline-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
}

.tasking-timeline-header__label-col {
  width: 200px;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tasking-timeline-header__label-col select {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
}

.tasking-timeline-axis {
  flex: 1;
  position: relative;
  height: 32px;
  overflow: hidden;
}

.tasking-timeline-axis__ticks {
  display: flex;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.tasking-timeline-axis__tick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0;
  transform: translateX(-50%);
}

.tasking-timeline-axis__tick-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  padding: 2px 0;
  white-space: nowrap;
}

.tasking-timeline-axis__tick-line {
  width: 1px;
  background: var(--color-border);
  height: 6px;
}

.tasking-timeline-body {
  display: flex;
  flex: 1;
}

.tasking-timeline-labels {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
}

.tasking-lane-label {
  /* Repli 56px, même raison que .tasking-lane ci-dessous (2026-09-01) —
     doit toujours matcher la hauteur réelle de sa ligne pour rester
     alignée avec elle, posée en ligne par JS dans les deux cas. */
  height: 56px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: default;
}

.tasking-lane-label__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tasking-lane-label__text {
  font-size: var(--text-xs);
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-lane-label__sub {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-timeline-tracks {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow-x: hidden;
}

.tasking-lane {
  /* Repli 56px = une seule piste (voir laneHeightForTracks() dans
     tasking-manager.js) — hauteur réelle posée en ligne par JS, plus
     grande dès que des commandes de la ligne se chevauchent dans le
     temps (2026-09-01). */
  height: 56px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.tasking-lane:nth-child(even) {
  background: rgba(255,255,255,0.012);
}

.tasking-bar {
  position: absolute;
  /* top posé en ligne par tasking-manager.js (2026-09-01) — dépend de la
     piste assignée par packOrdersIntoTracks() quand des commandes de la
     même ligne se chevauchent dans le temps ; plus une constante CSS. */
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  cursor: pointer;
  overflow: hidden;
  transition: filter 150ms, box-shadow 150ms;
  min-width: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.tasking-bar:hover {
  filter: brightness(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2;
}

.tasking-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.tasking-bar__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.tasking-bar__id {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}

.tasking-bar__name {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-bar__sensor-badge {
  font-size: 9px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
  padding: 1px 4px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

/* Now line */
.tasking-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-error);
  z-index: 10;
  pointer-events: none;
}

.tasking-now-line::before {
  content: 'NOW';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-error);
  white-space: nowrap;
  background: var(--color-bg);
  padding: 0 2px;
}

/* Pass markers on timeline */
.tasking-pass-marker {
  position: absolute;
  top: 2px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid;
  cursor: pointer;
  z-index: 3;
  transform: translateX(-50%);
  opacity: 0.7;
  transition: opacity 150ms;
}

.tasking-pass-marker:hover {
  opacity: 1;
}

/* Grid lines on timeline */
.tasking-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

/* Timeline toolbar */
.tasking-timeline-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.tasking-timeline-toolbar__zoom {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.tasking-zoom-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: color 150ms, border-color 150ms;
}

.tasking-zoom-btn:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.tasking-zoom-label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  min-width: 40px;
  text-align: center;
}

.tasking-groupby {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.tasking-groupby label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tasking-groupby select {
  height: 26px;
  padding: 0 var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
}

/* ============================================================
   BOARD / KANBAN VIEW
   ============================================================ */

.tasking-board {
  flex: 1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}

.tasking-column {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: calc(100% - 2px);
}

.tasking-column__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
}

.tasking-column__indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tasking-column__name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tasking-column__count {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}

.tasking-column__cards {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasking-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
  position: relative;
  overflow: hidden;
}

.tasking-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.tasking-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

.tasking-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.tasking-card__id {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text-muted);
}

.tasking-card__priority {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.tasking-card__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-card__meta {
  font-size: 10px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tasking-card__sat {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tasking-card__sat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tasking-card__feasibility {
  margin-top: var(--space-2);
}

.tasking-card__feasibility-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tasking-card__feasibility-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: width 300ms ease;
}

.tasking-card__feasibility-label {
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

.tasking-card__window {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tasking-card__window svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ============================================================
   MAP VIEW
   ============================================================ */

.tasking-map-container {
  flex: 1;
  position: relative;
}

.tasking-map-container #taskingMapLeaflet {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.tasking-map-legend {
  /* Coin fixe, jamais mirroré (2026-09-01, support RTL) — même décision
     que les coins des contrôles Leaflet : chrome de carte, pas contenu
     de lecture. */
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  z-index: 1000;
  min-width: 160px;
  box-shadow: var(--shadow-md);
}

.tasking-map-legend__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.tasking-map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 2px 0;
}

.tasking-map-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   ANALYTICS VIEW
   ============================================================ */

.tasking-analytics {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-content: start;
}

.tasking-analytics-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

.tasking-analytics-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tasking-analytics-card__title svg {
  color: var(--color-accent);
}

/* Bar charts */
.tasking-chart-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasking-chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tasking-chart-bar-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasking-chart-bar-track {
  flex: 1;
  height: 16px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tasking-chart-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  min-width: 2px;
  transition: width 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 4px;
}

.tasking-chart-bar span {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.tasking-chart-bar-value {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text);
  width: 32px;
  /* start/end plutôt que gauche/droite fixe (2026-09-01, support RTL) —
     valeur numérique à côté d'une barre : converti par cohérence avec le
     reste du fichier, à revoir si un alignement physique fixe s'avère
     préférable en pratique pour comparer des grandeurs d'un coup d'œil
     (cas signalé, pas tranché unilatéralement). */
  text-align: end;
  flex-shrink: 0;
}

/* Stat grid in analytics */
.tasking-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.tasking-stat-box {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.tasking-stat-box__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
  display: block;
}

.tasking-stat-box__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: block;
}

/* Comparison table */
.tasking-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.tasking-compare-table th {
  text-align: start;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.tasking-compare-table td {
  padding: 6px var(--space-2);
  color: var(--color-text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.tasking-compare-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ============================================================
   ORDER DETAIL PANEL (right slide-in)
   ============================================================ */

.tasking-detail-panel {
  width: 0;
  flex-shrink: 0;
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-border);
  overflow: hidden;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.tasking-detail-panel.open {
  width: 340px;
}

.tasking-detail-panel__inner {
  width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tasking-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.tasking-detail-panel__id {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text);
}

.tasking-detail-panel__close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, background 150ms;
}

.tasking-detail-panel__close:hover {
  color: var(--color-text);
  background: var(--color-surface-3);
}

.tasking-detail-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tasking-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasking-detail-section__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.tasking-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.tasking-detail-row__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.tasking-detail-row__value {
  font-size: var(--text-xs);
  color: var(--color-text);
  font-weight: 500;
  text-align: end;
  word-break: break-all;
}

/* Status pipeline */
.tasking-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: var(--space-3) 0;
}

.tasking-pipeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  flex: 1;
  min-width: 40px;
}

.tasking-pipeline__step::before {
  content: '';
  position: absolute;
  top: 11px;
  inset-inline-end: 50%;
  inset-inline-start: -50%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.tasking-pipeline__step:first-child::before {
  display: none;
}

.tasking-pipeline__step--done::before {
  background: var(--color-success);
}

.tasking-pipeline__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms, background 200ms;
}

.tasking-pipeline__step--done .tasking-pipeline__dot {
  border-color: var(--color-success);
  background: var(--color-success);
}

.tasking-pipeline__step--active .tasking-pipeline__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79,168,201,0.25);
  animation: pipelinePulse 2s infinite;
}

.tasking-pipeline__step--failed .tasking-pipeline__dot {
  border-color: var(--color-error);
  background: var(--color-error);
}

@keyframes pipelinePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79,168,201,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(79,168,201,0.1); }
}

.tasking-pipeline__label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 44px;
  line-height: 1.2;
}

.tasking-pipeline__step--done .tasking-pipeline__label,
.tasking-pipeline__step--active .tasking-pipeline__label {
  color: var(--color-text);
  font-weight: 600;
}

.tasking-pipeline__step--clickable {
  cursor: pointer;
}

.tasking-pipeline__step--clickable:hover .tasking-pipeline__dot {
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(79, 168, 201, 0.5);
}

.tasking-pipeline__step--clickable:hover .tasking-pipeline__label {
  color: var(--color-accent);
}

/* Captures list */
.tasking-capture-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasking-capture-item {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.tasking-capture-item__icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.tasking-capture-item__info {
  flex: 1;
}

.tasking-capture-item__time {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text);
  font-weight: 500;
}

.tasking-capture-item__reason {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Activity log */
.tasking-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tasking-activity-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  position: relative;
}

.tasking-activity-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.tasking-activity-item:last-child::before {
  display: none;
}

.tasking-activity-item__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}

.tasking-activity-item__content {
  flex: 1;
  padding-bottom: var(--space-2);
}

.tasking-activity-item__time {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

.tasking-activity-item__event {
  font-size: var(--text-xs);
  color: var(--color-text);
  font-weight: 500;
}

.tasking-activity-item__details {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Action buttons in detail panel */
.tasking-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.tasking-detail-actions .btn {
  justify-content: center;
}

/* ============================================================
   KPI BAR (bottom of fullscreen overlay)
   ============================================================ */

.tasking-kpi-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0 var(--space-4);
  flex-shrink: 0;
  overflow: hidden;
}

.tasking-kpi-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border-inline-end: 1px solid var(--color-border);
}

.tasking-kpi-item:first-child {
  padding-inline-start: 0;
}

.tasking-kpi-item:last-child {
  border-inline-end: none;
}

.tasking-kpi-item__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tasking-kpi-item__value {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text);
}

.tasking-kpi-item__value--accent {
  color: var(--color-accent);
}

.tasking-kpi-item__value--success {
  color: var(--color-success);
}

.tasking-kpi-item__value--warning {
  color: var(--color-warning);
}

/* ============================================================
   WIZARD MODAL
   ============================================================ */

.tasking-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.tasking-wizard-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.tasking-wizard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(20px) scale(0.98);
  transition: transform 200ms ease;
}

.tasking-wizard-overlay.visible .tasking-wizard {
  transform: translateY(0) scale(1);
}

/* Wizard header */
.tasking-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.tasking-wizard__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-wizard__close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, background 150ms;
}

.tasking-wizard__close:hover {
  color: var(--color-text);
  background: var(--color-surface-3);
}

/* Stepper */
.tasking-stepper {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
  gap: 0;
}

.tasking-stepper__step {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.tasking-stepper__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

.tasking-stepper__step--done:not(:last-child)::after {
  background: var(--color-success);
}

.tasking-stepper__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.tasking-stepper__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  transition: border-color 200ms, background 200ms, color 200ms;
}

.tasking-stepper__step--done .tasking-stepper__circle {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.tasking-stepper__step--active .tasking-stepper__circle {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(79,168,201,0.2);
}

.tasking-stepper__label {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

.tasking-stepper__step--active .tasking-stepper__label {
  color: var(--color-accent);
  font-weight: 600;
}

.tasking-stepper__step--done .tasking-stepper__label {
  color: var(--color-success);
}

.tasking-stepper__step--clickable {
  cursor: pointer;
}
.tasking-stepper__step--clickable:hover .tasking-stepper__circle {
  border-color: var(--color-accent);
  background: var(--color-accent);
  transform: scale(1.1);
}
.tasking-stepper__step--clickable:hover .tasking-stepper__label {
  color: var(--color-accent);
}

/* Wizard body */
.tasking-wizard__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  min-height: 0;
}

.tasking-step-panel {
  display: none;
}

.tasking-step-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Form elements in wizard */
.tasking-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tasking-form-row label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tasking-form-row input,
.tasking-form-row select,
.tasking-form-row textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color 150ms;
  width: 100%;
  box-sizing: border-box;
}

.tasking-form-row input:focus,
.tasking-form-row select:focus,
.tasking-form-row textarea:focus {
  border-color: var(--color-accent);
}

.tasking-form-row textarea {
  resize: vertical;
  min-height: 70px;
}

.tasking-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.tasking-form-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Sensor type selector */
.tasking-sensor-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.tasking-sensor-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}

.tasking-sensor-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.tasking-sensor-card.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.tasking-sensor-card__icon {
  font-size: 28px;
  margin-bottom: var(--space-1);
}

.tasking-sensor-card__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-sensor-card__desc {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Satellite selector in wizard */
.tasking-sat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
}

.tasking-sat-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: border-color 150ms, background 150ms;
}

.tasking-sat-option:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.tasking-sat-option.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.tasking-sat-option__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tasking-sat-option__info {
  flex: 1;
}

.tasking-sat-option__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-sat-option__meta {
  font-size: 10px;
  color: var(--color-text-muted);
}

.tasking-sat-option__stars {
  color: var(--color-warning);
  font-size: 11px;
  flex-shrink: 0;
}

/* "Use sidebar selection" button in step 2 */
.wiz-use-sidebar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(79,168,201,.35);
  background: rgba(79,168,201,.08);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
}
.wiz-use-sidebar-btn:hover {
  background: rgba(79,168,201,.18);
  border-color: var(--color-accent);
}
.wiz-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* Slider parameter rows */
.tasking-param-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasking-param-slider label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tasking-param-slider label span {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-weight: 600;
}

.tasking-param-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

/* Toggle group */
.tasking-toggle-group {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tasking-toggle-group button {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  border-inline-end: 1px solid var(--color-border);
}

.tasking-toggle-group button:last-child {
  border-inline-end: none;
}

.tasking-toggle-group button:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.tasking-toggle-group button.active {
  background: var(--color-accent);
  color: #fff;
}

/* Priority selector */
.tasking-priority-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.tasking-priority-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}

.tasking-priority-option:hover {
  background: var(--color-surface-2);
}

.tasking-priority-option.selected {
  border-color: currentColor;
}

.tasking-priority-option__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tasking-priority-option__desc {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Opportunity preview */
.tasking-opportunity-preview {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.tasking-opportunity-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.tasking-opportunity-preview__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-opportunity-preview__count {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-accent);
  background: var(--color-accent-glow);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.tasking-opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.tasking-opportunity-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.tasking-opportunity-item__date {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-weight: 600;
  flex-shrink: 0;
  width: 120px;
}

.tasking-opportunity-item__sat {
  color: var(--color-text-muted);
  flex: 1;
}

.tasking-opportunity-item__score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.tasking-opportunity-item--best {
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.2);
}

/* Review step */
.tasking-review-section {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.tasking-review-section__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.tasking-review-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: var(--text-xs);
}

.tasking-review-row__label {
  color: var(--color-text-muted);
}

.tasking-review-row__value {
  color: var(--color-text);
  font-weight: 500;
}

.tasking-feasibility-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-2) 0;
}

.tasking-feasibility-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-warning), var(--color-success));
  transition: width 600ms ease;
}

/* Wizard footer */
.tasking-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.tasking-wizard__footer-left {
  display: flex;
  gap: var(--space-2);
}

.tasking-wizard__footer-right {
  display: flex;
  gap: var(--space-2);
}

/* ============================================================
   STATUS COLOR CLASSES
   ============================================================ */

.tasking-status--draft       { color: #6B7280; }
.tasking-status--submitted   { color: #3B82F6; }
.tasking-status--received    { color: #60A5FA; }
.tasking-status--planning    { color: #818CF8; }
.tasking-status--pending     { color: #F59E0B; }
.tasking-status--in_progress { color: #4FA8C9; }
.tasking-status--collecting  { color: #6BBAD5; }
.tasking-status--processing  { color: #06B6D4; }
.tasking-status--delivered   { color: #10B981; }
.tasking-status--completed   { color: #10B981; }
.tasking-status--failed      { color: #EF4444; }
.tasking-status--canceled    { color: #9CA3AF; }
.tasking-status--partial     { color: #84CC16; }

.tasking-status-bg--draft       { background: #6B7280; }
.tasking-status-bg--submitted   { background: #3B82F6; }
.tasking-status-bg--received    { background: #60A5FA; }
.tasking-status-bg--planning    { background: #818CF8; }
.tasking-status-bg--pending     { background: #F59E0B; }
.tasking-status-bg--in_progress { background: #4FA8C9; }
.tasking-status-bg--collecting  { background: #6BBAD5; }
.tasking-status-bg--processing  { background: #06B6D4; }
.tasking-status-bg--delivered   { background: #10B981; }
.tasking-status-bg--completed   { background: #10B981; }
.tasking-status-bg--failed      { background: #EF4444; }
.tasking-status-bg--canceled    { background: #9CA3AF; }
.tasking-status-bg--partial     { background: #84CC16; }

/* Collecting pulse animation */
.tasking-collecting-pulse {
  animation: collectingPulse 1.2s ease-in-out infinite;
}

@keyframes collectingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Priority colors */
.tasking-priority--urgent   { color: #EF4444; background: rgba(239,68,68,0.15); }
.tasking-priority--priority { color: #F59E0B; background: rgba(245,158,11,0.15); }
.tasking-priority--standard { color: #3B82F6; background: rgba(59,130,246,0.15); }
.tasking-priority--flexible { color: #6B7280; background: rgba(107,114,128,0.15); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.tasking-toast-container {
  position: fixed;
  bottom: 80px;
  inset-inline-end: 24px;
  z-index: 15000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}

.tasking-toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  pointer-events: auto;
  animation: toastIn 300ms ease forwards;
  border-inline-start: 3px solid var(--color-accent);
}

.tasking-toast--success { border-inline-start-color: var(--color-success); }
.tasking-toast--warning { border-inline-start-color: var(--color-warning); }
.tasking-toast--error   { border-inline-start-color: var(--color-error); }
.tasking-toast--info    { border-inline-start-color: var(--color-info); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Glisse depuis au-delà du bord de fin de lecture (2026-09-04, support
   RTL) — même famille que .right-panel/.satview-toast : le conteneur est
   ancré en inset-inline-end (droite en LTR, gauche en RTL) ci-dessus, donc
   l'entrée doit venir d'encore plus loin dans cette direction (+X en LTR,
   -X en RTL), pas toujours vers la droite. */
@keyframes toastInRtl {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .tasking-toast { animation-name: toastInRtl; }

.tasking-toast__icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.tasking-toast__body {
  flex: 1;
}

.tasking-toast__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.tasking-toast__message {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.tasking-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.tasking-empty-state__icon {
  font-size: 40px;
  opacity: 0.5;
}

.tasking-empty-state__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-empty-state__desc {
  font-size: var(--text-sm);
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================================
   AOI SELECTION IN WIZARD — Mini Map Preview
   ============================================================ */

.tasking-aoi-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 240px;
  overflow-y: auto;
}

.tasking-aoi-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color 150ms, background 150ms;
}

.tasking-aoi-option:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.tasking-aoi-option.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.tasking-aoi-option__color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tasking-aoi-option__info {
  flex: 1;
}

.tasking-aoi-option__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.tasking-aoi-option__meta {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ============================================================
   LOADING / COMPUTING SPINNER
   ============================================================ */

.tasking-spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tasking-spinner__dot {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   SCROLLBAR STYLING (for tasking panels)
   ============================================================ */

.tasking-overlay *::-webkit-scrollbar,
.tasking-wizard *::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.tasking-overlay *::-webkit-scrollbar-track,
.tasking-wizard *::-webkit-scrollbar-track {
  background: transparent;
}

.tasking-overlay *::-webkit-scrollbar-thumb,
.tasking-wizard *::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.tasking-overlay *::-webkit-scrollbar-thumb:hover,
.tasking-wizard *::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 900px) {
  .tasking-sidebar {
    display: none;
  }

  .tasking-detail-panel.open {
    width: 280px;
  }
}

@media (max-width: 640px) {
  .tasking-view-tabs {
    gap: 1px;
  }

  .tasking-view-tab span {
    display: none;
  }

  .tasking-header__title {
    display: none;
  }

  .tasking-board {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .tasking-column {
    width: 180px;
  }

  .tasking-wizard {
    max-width: 100vw;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
    align-self: flex-end;
  }

  .tasking-wizard-overlay {
    align-items: flex-end;
  }
}

/* ============================================================
   HELPER UTILITIES
   ============================================================ */

.tasking-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

.tasking-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tasking-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ---- Band visualization in cards ---- */
.tasking-card--band {
  position: relative;
}
.tasking-card--band::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 0;
  height: 0;
  /* border-left → border-inline-start (2026-09-01, support RTL) : `left`
     correspond TOUJOURS à inline-start (identité en LTR), jamais
     inline-end — sans ce côté transparent qui suit le coin où le ruban
     se trouve, le triangle pointerait du mauvais côté une fois ce coin
     passé à gauche en RTL. */
  border-inline-start: 12px solid transparent;
  border-top: 12px solid #F59E0B;
}
.tasking-card--selected {
  outline: 2px solid #4FA8C9;
  outline-offset: -1px;
}
.tasking-card__band-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.tasking-card__mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  color: var(--color-text-muted, #8A949E);
  white-space: nowrap;
}
.tasking-card__mode-tag--band {
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
}
.tasking-card__band-aois {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 0;
}
.tasking-card__band-aoi-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(79,168,201,0.12);
  color: #4FA8C9;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}
.tasking-card__cb {
  display: flex;
  align-items: center;
  margin-inline-end: 2px;
  cursor: pointer;
}
.tasking-card__check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #4FA8C9;
}

/* ---- Multi-select toolbar ---- */
.tasking-multiselect-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border, #2D343C);
  background: var(--color-surface, #21272D);
  flex-shrink: 0;
}
.tasking-ms-btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
  gap: 4px;
  display: inline-flex;
  align-items: center;
}
.tasking-ms-count {
  font-size: 11px;
  color: #4FA8C9;
  font-weight: 600;
}
.tasking-ms-delete {
  background: rgba(239,68,68,0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.15s;
}
.tasking-ms-delete:hover {
  background: rgba(239,68,68,0.25) !important;
}

/* ================================================================
   BOARD DRAG & DROP
   ================================================================ */

.tasking-card[draggable] {
  cursor: grab;
}
.tasking-card[draggable]:active {
  cursor: grabbing;
}
.tasking-card--dragging {
  opacity: 0.35;
  transform: scale(0.97);
  box-shadow: 0 0 0 2px rgba(79,168,201,0.5);
}

/* Column drop targets — dashed border while dragging */
.tasking-column__cards--drop-target {
  outline: 2px dashed rgba(79,168,201,0.25);
  outline-offset: -2px;
  border-radius: 8px;
  transition: outline-color 0.15s, background 0.15s;
}

/* Column actively hovered — glow effect */
.tasking-column__cards--drag-over {
  outline-color: rgba(79,168,201,0.6) !important;
  background: rgba(79,168,201,0.06) !important;
}
.tasking-column__cards--drag-over::after {
  content: 'Drop here';
  display: block;
  text-align: center;
  padding: 10px 0;
  font-size: 11px;
  font-weight: 600;
  color: #4FA8C9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ================================================================
   ORDER EDIT OVERLAY (double-click)
   ================================================================ */

.tasking-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.tasking-edit-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.tasking-edit-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.tasking-edit-overlay__dialog {
  position: relative;
  background: var(--color-surface, #21272D);
  border: 1px solid var(--color-border, #2D343C);
  border-radius: 14px;
  max-width: 760px;
  width: 92%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transform: translateY(12px);
  transition: transform 0.22s ease;
}
.tasking-edit-overlay.visible .tasking-edit-overlay__dialog {
  transform: translateY(0);
}

/* Header */
.tasking-edit-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border, #2D343C);
}
.tasking-edit-overlay__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tasking-edit-overlay__id {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #E8EAED);
}
.tasking-edit-overlay__status {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-weight: 600;
}
.tasking-edit-overlay__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #8A949E);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.tasking-edit-overlay__close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--color-text, #E8EAED);
}

/* Body */
.tasking-edit-overlay__body {
  display: flex;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.tasking-edit-overlay__col-left {
  flex: 1;
  padding: 20px 24px;
  border-inline-end: 1px solid var(--color-border, #2D343C);
  overflow-y: auto;
}
.tasking-edit-overlay__col-right {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

/* Editable fields */
.tasking-edit-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tasking-edit-field label {
  flex-shrink: 0;
  width: 95px;
  font-size: 11px;
  color: var(--color-text-muted, #8A949E);
  font-weight: 500;
  text-align: end;
}
.tasking-edit-field input[type="text"],
.tasking-edit-field input[type="datetime-local"],
.tasking-edit-field select {
  flex: 1;
  background: var(--color-bg, #1A1F24);
  border: 1px solid var(--color-border, #2D343C);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-text, #E8EAED);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.tasking-edit-field input:focus,
.tasking-edit-field select:focus {
  border-color: #4FA8C9;
}
.tasking-edit-field__readonly {
  font-size: 12px;
  color: var(--color-text, #E8EAED);
  display: flex;
  align-items: center;
}

/* Footer */
.tasking-edit-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--color-border, #2D343C);
  gap: 8px;
}
.tasking-edit-overlay__footer-left {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tasking-edit-overlay__footer-right {
  display: flex;
  gap: 8px;
}

/* Pipeline in overlay — slightly different sizing */
.tasking-pipeline--overlay {
  flex-wrap: wrap;
}

/* Responsive overlay */
@media (max-width: 640px) {
  .tasking-edit-overlay__body {
    flex-direction: column;
  }
  .tasking-edit-overlay__col-left {
    border-inline-end: none;
    border-bottom: 1px solid var(--color-border, #2D343C);
  }
  .tasking-edit-overlay__dialog {
    max-width: 98%;
    max-height: 95vh;
  }
}