.ui-spreadsheet { min-width: 0; height: 100%; outline: none; font-family: var(--application-font); font-size: var(--font-size-compact); background: var(--color-surface); color: var(--color-text); }
.ui-spreadsheet-scroll { width: 100%; max-width: 100%; overflow: auto; position: relative; }
.ui-spreadsheet .ui-spreadsheet-spacer td { padding: 0; border: 0; min-height: 0; background: transparent; }
.ui-spreadsheet table { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ui-spreadsheet th, .ui-spreadsheet td { box-sizing: border-box; width: 116px; min-width: 64px; height: 32px; padding: 5px 8px; border-right: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); font: inherit; font-size: var(--font-size-compact); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-spreadsheet .ui-spreadsheet-row-col { width: 46px; min-width: 46px; }

.ui-spreadsheet thead th { position: sticky; top: 0; z-index: 4; background: var(--color-surface-muted); color: var(--color-text-muted); font-weight: 600; text-align: center; }
.ui-spreadsheet-column { position: relative; cursor: pointer; user-select: none; text-transform: uppercase; }
.ui-spreadsheet-column:hover, .ui-spreadsheet-column:focus { color: var(--color-primary); outline: none; }
.ui-spreadsheet-column.is-selected, .ui-spreadsheet-row-number.is-row-selected { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-muted)); }
.ui-spreadsheet-column-label { display: block; overflow: hidden; text-overflow: ellipsis; }

.ui-spreadsheet-column-resize {
  position: absolute;
  z-index: 8;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 15px;
  cursor: col-resize !important;
  touch-action: none;
}
.ui-spreadsheet-row-resize {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 15px;
  background: transparent !important;
  cursor: row-resize !important;
  touch-action: none;
}
.ui-spreadsheet-row-resize::before,
.ui-spreadsheet-row-resize::after {
  content: none !important;
  display: none !important;
}
.ui-spreadsheet-column:hover .ui-spreadsheet-column-resize::after,
.ui-spreadsheet.is-column-resizing .ui-spreadsheet-row-header, .ui-spreadsheet-row-number { position: sticky; left: 0; z-index: 3; width: 46px !important; min-width: 46px !important; padding: 5px !important; background: var(--color-surface-muted); color: var(--color-text-muted); text-align: center; font-weight: 500; user-select: none; }
.ui-spreadsheet-row-header { z-index: 6; }

.ui-spreadsheet-cell { background: var(--color-surface); text-align: left; cursor: cell; outline: none; }
.ui-spreadsheet-cell.is-numeric, .ui-spreadsheet-footer-cell.is-numeric { text-align: right; }
.ui-spreadsheet-cell.is-column-selected, .ui-spreadsheet-footer-cell.is-column-selected, .ui-spreadsheet-cell.is-row-selected { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.ui-spreadsheet-cell.is-selected { position: relative; z-index: 2; box-shadow: inset 0 0 0 2px var(--color-primary); background: var(--color-surface); }
.ui-spreadsheet-cell.is-editing { position: relative; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 2px var(--color-primary); }
.ui-spreadsheet-editor { position: absolute; inset: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 5px 8px; border: 0; border-radius: 0; background: var(--color-surface); color: inherit; font: inherit; line-height: inherit; text-align: left; white-space: pre-wrap; resize: none; overflow: hidden; outline: none; }

/* Footer : même principe fonctionnel que uitable */
.ui-spreadsheet-footer th, .ui-spreadsheet-footer td { position: sticky; bottom: 0; z-index: 4; height: 34px; padding: 8px 10px; border-top: 1px solid var(--color-border-soft); border-bottom: 0; background: var(--color-surface-muted); font-weight: 600; }
.ui-spreadsheet-footer .ui-spreadsheet-row-number { z-index: 6; }
.ui-spreadsheet-footer-cell { position: sticky !important; overflow: visible !important; }
.ui-spreadsheet-footer-value { display: block; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.ui-spreadsheet-footer-dropdown {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ui-spreadsheet-footer-trigger {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.ui-spreadsheet-footer-menu {
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-weight: 400;
  text-align: left;
  pointer-events: auto;
  z-index: 10000;
}
.ui-spreadsheet-footer-dropdown.is-open .ui-spreadsheet-footer-menu {
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-weight: 400;
  text-align: left;
  pointer-events: auto;
  z-index: 10000;
}
.ui-spreadsheet-footer-menu-option { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 7px; border-radius: var(--radius-control); cursor: pointer; }
.ui-spreadsheet-footer-menu-option:hover { background: var(--color-surface-muted); }
.ui-spreadsheet-footer-menu-option input { margin: 0; }
.ui-spreadsheet-footer-menu-separator { display: block; height: 1px; margin: 5px 4px; background: var(--color-border-soft); }

/* Menu de colonne : placé à côté de la colonne, jamais par-dessus */
.ui-spreadsheet-column-menu { min-width: 170px; padding: 5px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-menu); }
.ui-spreadsheet-column-menu button { display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-compact); text-align: left; cursor: pointer; }
.ui-spreadsheet-column-menu button:hover { background: var(--color-surface-muted); }


/* Column reorder ---------------------------------------------------------- */
.ui-spreadsheet-column.is-reorderable .ui-spreadsheet-column-label {
  cursor: grab;
  touch-action: pan-y;
}
.ui-spreadsheet.is-column-dragging,
.ui-spreadsheet.is-column-dragging * {
  user-select: none !important;
}
.ui-spreadsheet.is-column-dragging .ui-spreadsheet-column-label {
  cursor: grabbing;
}
.ui-spreadsheet-column.is-column-drag-source {
  opacity: .55;
}
.ui-spreadsheet-column.is-drop-before::before,
.ui-spreadsheet-column.is-drop-after::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  background: var(--color-primary);
}
.ui-spreadsheet-column.is-drop-before::before { left: -2px; }
.ui-spreadsheet-column.is-drop-after::after { right: -2px; }


/* Resize: uniquement le curseur, aucun trait vertical supplémentaire. */
.ui-spreadsheet-column-resize,
.ui-spreadsheet-column-resize:hover,
.ui-spreadsheet.is-column-resizing .ui-spreadsheet-column-resize {
  background: transparent !important;
}
.ui-spreadsheet-column-resize::before,
.ui-spreadsheet-column-resize::after {
  content: none !important;
  display: none !important;
}

/* Sélection de zone par glisser. */
.ui-spreadsheet-cell.is-range-selected {
  background: var(--color-primary-soft);
}
.ui-spreadsheet-cell.is-range-selected.is-selected {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}


/* Multi-selection : ne jamais sélectionner le texte contenu dans les cellules. */
.ui-spreadsheet-cell {
  -webkit-user-select: none;
  user-select: none;
}
.ui-spreadsheet.is-range-selecting,
.ui-spreadsheet.is-range-selecting *,
.ui-spreadsheet.is-range-selecting .ui-spreadsheet-cell {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
.ui-spreadsheet.is-range-selecting .ui-spreadsheet-cell {
  cursor: cell;
}

/* Le menu est collé au bord du header, sans marge artificielle. */
.ui-spreadsheet-column-menu {
  margin: 0 !important;
}