/* ─────────────────────────────────────────────────────────────────────────────
   ops-instalaciones.css  —  OPS - Instalaciones dashboard styles
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Root container ─────────────────────────────────────────────────────────── */
#ops-ins-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-size: 11px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────────── */
.ops-ins-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
}

.ops-ins-toolbar .ops-ins-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-right: 8px;
  white-space: nowrap;
}

.ops-ins-toolbar input[type="text"],
.ops-ins-toolbar select {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  background-color: #E6F1FD !important;
}

.ops-ins-toolbar .ops-ins-spacer { flex: 1; }

.ops-ins-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Table wrapper — main scroll container ───────────────────────────────────── */
.ops-ins-table-wrap {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  position: relative;
}

/* ── Footer stats (machines per group) ───────────────────────────────────────── */
.ops-ins-footer-stats {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  background: var(--panel, #f8fafc);
  border-top: 1px solid var(--line, #b0bec5);
  font-size: 11px;
  color: var(--text, #1e293b);
}
.ops-foot-title { white-space: nowrap; color: var(--ink-2, #475569); }
.ops-foot-items { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-foot-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, #b0bec5);
}
.ops-foot-stat-label { font-weight: 600; color: #334155; font-size: 10px; }
.ops-foot-stat-value { font-weight: 700; color: #2563eb; font-size: 12px; min-width: 14px; text-align: right; }
.ops-foot-total {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2, #475569);
  letter-spacing: 0.4px;
}
.ops-foot-total span {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ── Paginación en cliente (mismo look que Pedidos: .wo-pagination-bar) ───────── */
.ops-ins-pagination {
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 14px;
  background: var(--panel, #f8fafc);
  border-top: 1px solid var(--line, #b0bec5);
  font-size: 12px;
}
.ops-pg-info { color: var(--ink-2, #475569); font-size: 12px; white-space: nowrap; }
.ops-pg-btns { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ops-pg-btn {
  padding: 4px 10px;
  border: 1px solid var(--line, #b0bec5);
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  transition: all .15s ease;
  min-width: 28px;
}
.ops-pg-btn:hover:not(:disabled) { background: var(--row-hover, #f1f5f9); border-color: #90a4ae; }
.ops-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.ops-pg-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; font-weight: 600; }
.ops-pg-all { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-left: 8px; font-weight: 600; padding: 4px 12px; font-size: 12px; }
html[data-theme="dark"] .ops-ins-pagination { background: #1f2a3d; border-top-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .ops-pg-btn { background: #2a3654; border-color: #45475a; color: #cdd6f4; }
html[data-theme="dark"] .ops-pg-btn:hover:not(:disabled) { background: #3b4868; }

/* ── Table ───────────────────────────────────────────────────────────────────── */
.ops-ins-table {
  border-collapse: collapse;
  /* auto → cada columna se ajusta al contenido (fit-to-data); los anchos que el
     usuario fija a mano se respetan vía width/min/max inline en el <th>. */
  table-layout: auto;
  font-size: 11px;
  width: max-content;
  min-width: 100%;
  /* Fondo opaco: las celdas con tinte translúcido (filas modificadas) ya no dejan ver
     el gris de la página por detrás, así no se ven "huecos" grises al desplazarse. */
  background-color: var(--panel);
}
/* Tras el primer resize: layout FIJO → el ancho arrastrado ES el ancho y las columnas se
   pueden estrechar (con 'auto' no). Todas las columnas llevan ancho explícito en el <th>. */
.ops-ins-table.ops-fixed {
  table-layout: fixed;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.ops-ins-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.ops-ins-table thead th {
  /* OLA 2 (10/07): cabecera al ESTÁNDAR Tablero (idéntica a Logística): #f8fafc / #475569 / 11px /
     sin mayúsculas. Antes var(--head) azulado. El header del estándar es claro también en dark
     (igual que Logística, que no tiene variante oscura de cabecera). */
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  text-align: left;            /* como Logística (antes centrado, se veía distinto) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 10px;           /* mismo padding que Logística */
  /* SIN border-right: la rejilla vertical era lo que hacía OPS "fatal". Solo separación
     horizontal de filas, igual que Logística/Pedidos/Otros Pedidos. */
  border-bottom: 2px solid var(--line-strong);
  position: relative;
  user-select: none;
}

/* Rownum + checkbox first column (mirrors Pedidos style) */
.ops-ins-table thead th.ops-col-rownum,
.ops-ins-table tbody td.ops-col-rownum {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 4px 2px !important;
  text-align: center;
}
.ops-ins-table thead th.ops-col-rownum {
  background: var(--head);
  position: sticky;
  left: 0;
  z-index: 11;
}
.ops-ins-table tbody td.ops-col-rownum {
  background: var(--panel);
  position: sticky;
  left: 0;
  z-index: 1;
  font-size: 10px;
  color: #64748b;
}
.ops-ins-table tbody tr.ops-row-checked > td {
  background: rgba(0, 115, 234, 0.08) !important;
}
.ops-ins-table tbody tr.ops-row-checked > td.ops-col-rownum {
  background: rgba(0, 115, 234, 0.14) !important;
}

/* Fila modificada desde Pedidos de Instalacion. La barra naranja indicadora va SOLO en la
   primera columna (no en cada celda) para no dibujar líneas verticales naranjas entre todas
   las columnas — eso es lo que se veía como "línea" al desplazarse. */
/* Sin resaltado de fila "modificada" (Marcos 09/07): ni tinte ámbar de fila ni barra
   izquierda — ponían OPS entera amarilla (casi todas las filas están marcadas). El único
   indicador que queda es el botón ✱ de la columna nº (discreto). Fondo limpio como los demás. */
.ops-ack-btn:hover { transform: scale(1.25); }

/* ── Columnas fijas al hacer scroll horizontal (NºPedido + Salón y bloque inicial) ── */
/* El offset 'left' lo calcula el JS (_applyStickyCols) porque las columnas son redimensionables. */
/* IMPORTANTE: las celdas fijas necesitan fondo OPACO (background-color) o el contenido que
   scrollea por detrás se transparenta. El tinte de fila (modificado/seleccionado) se pone como
   background-image encima del color base, así sigue siendo opaco y respeta el tema. */
.ops-ins-table thead th.ops-sticky-col { position: sticky; z-index: 11; background-color: var(--head); }
.ops-ins-table tbody td.ops-sticky-col { position: sticky; z-index: 2;  background-color: var(--panel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Filas resaltadas: las reglas generales 'tr.ops-row-* > td' usan rgba !important y se
   transparentarían sobre la celda fija. Repintamos con color base opaco + tinte (más específico). */
.ops-ins-table tbody tr.ops-row-checked  > td.ops-sticky-col,
.ops-ins-table tbody tr.ops-row-checked  > td.ops-col-rownum {
  background-color: var(--panel) !important;
  background-image: linear-gradient(rgba(0, 115, 234, 0.08), rgba(0, 115, 234, 0.08)) !important;
}
/* Celdas fijas de filas modificadas: sin tinte ámbar, fondo opaco limpio. */
.ops-ins-table tbody tr.ops-row-modified > td.ops-sticky-col,
.ops-ins-table tbody tr.ops-row-modified > td.ops-col-rownum {
  background-color: var(--panel) !important;
  background-image: none !important;
}
.ops-ins-table tbody tr.ops-row-modified.ops-row-checked > td.ops-sticky-col,
.ops-ins-table tbody tr.ops-row-modified.ops-row-checked > td.ops-col-rownum {
  background-color: var(--panel) !important;
  background-image: linear-gradient(rgba(0, 115, 234, 0.08), rgba(0, 115, 234, 0.08)) !important;
}
/* Borde/sombra a la derecha del bloque fijo para separarlo visualmente del scroll.
   El primer valor (1px sólido var(--panel)) TAPA la rendija sub-pixel que el navegador
   deja entre la columna fija y el contenido que scrollea (el "minihueco al moverse"). */
/* Separador del bloque fijo: SOLO un relleno sólido de 1px que tapa la rendija sub-pixel
   ("minihueco") que el navegador deja al desplazarse. Sin sombra gris suave (se percibía
   como un hueco). El color del relleno debe coincidir con el de la fila (crema/azul si está
   modificada/seleccionada) para que sea invisible. */
/* Sin borde de rejilla en la última fija + relleno sólido de 2px del color de la fila:
   así el borde derecho del bloque fijo no deja ninguna línea ni rendija al desplazarse. */
.ops-ins-table th.ops-sticky-last,
.ops-ins-table td.ops-sticky-last { border-right: 0 !important; }
.ops-ins-table th.ops-sticky-last,
.ops-ins-table td.ops-sticky-last { box-shadow: 2px 0 0 0 var(--panel); }
.ops-ins-table tbody tr.ops-row-checked  > td.ops-sticky-last { box-shadow: 2px 0 0 0 #ebf4fd; }
.ops-ins-table tbody tr.ops-row-modified.ops-row-checked > td.ops-sticky-last { box-shadow: 2px 0 0 0 #ebf4fd; }

/* Resize handle on <th> */
.ops-ins-table thead th .ops-col-resize {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 1;
}
.ops-ins-table thead th .ops-col-resize:hover,
.ops-ins-table thead th.ops-resizing .ops-col-resize {
  background: var(--brand, #2563eb);
  opacity: 0.5;
}

/* Sort indicator on header label */
.ops-ins-table thead th .ops-th-sort {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}
.ops-ins-table thead th .ops-th-sort:hover { color: var(--brand, #2563eb); }
.ops-ins-table thead th .ops-sort-arrow {
  font-size: 8px;
  opacity: 0.45;
  line-height: 1;
}
.ops-ins-table thead th.ops-sorted {
  background: color-mix(in srgb, var(--brand, #2563eb) 12%, var(--head));
}
.ops-ins-table thead th.ops-sorted .ops-sort-arrow {
  opacity: 1;
  color: var(--brand, #2563eb);
  font-size: 9px;
}

/* ── Body cells ─────────────────────────────────────────────────────────────── */
.ops-ins-table tbody tr {
  border-bottom: 1px solid var(--gridline);
}
.ops-ins-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}
.ops-ins-table tbody tr:hover {
  background: var(--row-hover) !important;
}

.ops-ins-table tbody td {
  padding: 6px 10px; /* +10% alto de fila (10/07); antes 3px */
  /* SIN border-right (rejilla). Solo separación horizontal de filas, como Logística. */
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}
.ops-ins-table tbody tr:hover td { background: #f0f7ff; }

/* Editable cell indicator */
.ops-ins-table tbody td[data-editable="true"] {
  cursor: pointer;
}
.ops-ins-table tbody td[data-editable="true"]:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Celdas de solo-lectura: SIN tinte azul ni zebra (Marcos 09/07: hacía que OPS pareciera una
   rejilla azul recargada). Fondo limpio como Logística; el hover general de fila ya aplica. */

/* Number cells — right-aligned */
.ops-ins-table tbody td.ops-num,
.ops-ins-table thead th.ops-num {
  text-align: right;
}

/* Date cells */
.ops-ins-table tbody td.ops-date {
  font-variant-numeric: tabular-nums;
  text-align: left;
}
/* El input type=date (.tstd-date, compartido con Pedidos) trae min-width:104px; dentro de una
   celda estrecha eso lo hacía DESBORDAR y el overflow:hidden de la celda recortaba la fecha/icono.
   Aquí el input LLENA la celda exactamente (width:100% + box-sizing) y puede encoger con ella
   (min-width:0), así nunca desborda. El ancho por defecto de la columna (BASE_COLS, ~124px) ya
   deja área suficiente para "dd/mm/aaaa" + icono; si el usuario estrecha la columna, el input
   se ajusta sin recortar por fuera. */
.ops-ins-table tbody td.ops-date .tstd-date {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Remesa — bold when has value */
.ops-ins-table tbody td[data-col="remesa"]:not(:empty) {
  font-weight: 700;
  color: var(--text);
}

/* ID cell */
.ops-ins-table tbody td.ops-id {
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: var(--brand, #2563eb);
}

/* ── Inline editor overlay ───────────────────────────────────────────────────── */
.ops-cell-editor {
  position: fixed;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  border-radius: 5px;
  background: var(--surface);
  border: 2px solid var(--brand, #2563eb);
  min-width: 120px;
  overflow: hidden;
}

/* Text / number / date inputs inside editor */
.ops-cell-editor input[type="text"],
.ops-cell-editor input[type="number"],
.ops-cell-editor input[type="date"] {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  font-size: 11px;
  border: none;
  background: #E6F1FD;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
/* Date input needs enough width to show the full date value */
.ops-cell-editor input[type="date"] {
  min-width: 140px;
  cursor: pointer;
}

/* ── Custom dropdown (replaces native <select>) ──────────────────────────────── */
.ops-custom-dropdown {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}

.ops-custom-dropdown-item {
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--gridline);
  transition: filter 0.08s;
}
.ops-custom-dropdown-item:last-child { border-bottom: none; }
.ops-custom-dropdown-item:hover { filter: brightness(0.88); }
.ops-custom-dropdown-item.ops-dd-selected {
  outline: 2px solid rgba(255,255,255,0.5) inset;
}
.ops-custom-dropdown-item.ops-dd-empty {
  color: var(--muted);
  font-style: italic;
  background: var(--surface);
}

/* ── Select badge colors ─────────────────────────────────────────────────────── */

/* asignada */
.ops-badge[data-field="asignada"][data-val="Si"]    { background:#16a34a; color:#fff; }
.ops-badge[data-field="asignada"][data-val="N/A"]   { background:#64748b; color:#fff; }

/* documentacion */
.ops-badge[data-field="documentacion"][data-val="En Proceso"] { background:#ea580c; color:#fff; }
.ops-badge[data-field="documentacion"][data-val="Enviada"]    { background:#2563eb; color:#fff; }
.ops-badge[data-field="documentacion"][data-val="Aprobada"]   { background:#16a34a; color:#fff; }

/* estado_ops */
.ops-badge[data-field="estado_ops"][data-val="Cliente"]      { background:#dc2626; color:#fff; }
.ops-badge[data-field="estado_ops"][data-val="Sin maq/kit"]  { background:#d97706; color:#fff; }
.ops-badge[data-field="estado_ops"][data-val="Confirmado"]   { background:#2563eb; color:#fff; }
.ops-badge[data-field="estado_ops"][data-val="Concretado"]   { background:#16a34a; color:#fff; }

/* ruta_ops */
.ops-badge[data-field="ruta_ops"][data-val="Lista"]        { background:#16a34a; color:#fff; }
.ops-badge[data-field="ruta_ops"][data-val="Pte. Pasar"]   { background:#d97706; color:#fff; }

/* homologacion */
.ops-badge[data-field="homologacion"][data-val="OK"]        { background:#16a34a; color:#fff; }
.ops-badge[data-field="homologacion"][data-val="Verificar"] { background:#d97706; color:#fff; }

/* ctto_marco / anexp_ctto */
.ops-badge[data-field="ctto_marco"][data-val="Pendiente"],
.ops-badge[data-field="anexp_ctto"][data-val="Pendiente"]  { background:#64748b; color:#fff; }
.ops-badge[data-field="ctto_marco"][data-val="Firmado"],
.ops-badge[data-field="anexp_ctto"][data-val="Firmado"]    { background:#16a34a; color:#fff; }
.ops-badge[data-field="ctto_marco"][data-val="Enviado"],
.ops-badge[data-field="anexp_ctto"][data-val="Enviado"]    { background:#2563eb; color:#fff; }

/* servicio */
.ops-badge[data-field="servicio"][data-val="EGT"]       { background:#1d4ed8; color:#fff; }
.ops-badge[data-field="servicio"][data-val="Telefonica"]{ background:#7c3aed; color:#fff; }

/* Grupo column (color matches the chip in the group bar) */
.ops-grupo-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.1px;
}

/* Generic badge base */
.ops-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 16px;
  background: var(--surface);
  color: var(--text);
}

/* ── Group filter bar ─────────────────────────────────────────────────────────── */
/* Barra de categorías replicando la de Pedidos (io-stat-chip): pill con punto→✓,
   relleno del color de la categoría al seleccionar y multiselección. Cambios
   Operaciones 27/06 (punto 5). */
.ops-ins-group-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 7px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  min-height: 36px;
  background: var(--panel);
  /* No encoger: si los chips pasan a 2+ filas la barra debe CRECER (no recortar la
     fila de abajo). El que cede altura es la tabla (flex:1, con scroll interno). */
  flex: 0 0 auto;
  box-sizing: border-box;
}
.ops-group-bar-title {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-2);
  margin-right: 4px;
}

/* Grupos de categorías (Pendientes / No pendientes): cada grupo en su propia fila
   con etiqueta, separados por una línea discontinua, como en Pedidos (.io-stat-group). */
.ops-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
  width: 100%;
  padding: 3px 0;
}
.ops-group-row + .ops-group-row {
  border-top: 1px dashed var(--line);
  margin-top: 3px;
  padding-top: 8px;
}
.ops-group-section-label {
  flex: 0 0 auto;
  min-width: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-2);
}

/* Minimizar/expandir el panel de categorías (como Pedidos). */
.ops-group-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ops-group-toggle .ops-cat-arrow { font-size: 10px; color: var(--ink-2); }
.ops-ins-group-bar.collapsed .ops-group-row,
.ops-ins-group-bar.collapsed .ops-group-total { display: none; }
.ops-ins-group-bar.collapsed { min-height: 0; padding-bottom: 10px; }

.ops-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 12px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ops-group-chip:hover {
  border-color: var(--chip-color, var(--line-strong));
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.ops-group-chip.active {
  background: var(--chip-color, var(--brand));
  border-color: var(--chip-color, var(--brand));
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
}
.ops-group-chip.active .ops-group-label,
.ops-group-chip.active .ops-group-count { color: var(--chip-text, #fff) !important; }

.ops-group-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--chip-color, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ops-group-dot .ops-group-check { display: none; }
.ops-group-chip.active .ops-group-dot { width: auto; height: auto; background: transparent; }
.ops-group-chip.active .ops-group-check {
  display: inline;
  color: var(--chip-text, #fff);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.ops-group-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-group-count {
  font-size: 14px;
  font-weight: 800;
  min-width: 15px;
  text-align: center;
  color: var(--chip-color, var(--text));
}

.ops-group-total {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: 0.03em;
  padding-left: 8px;
}
.ops-group-total span {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.ops-ins-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Config panel ─────────────────────────────────────────────────────────────── */
.ops-cfg-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ops-cfg-overlay[hidden] { display: none; }

.ops-cfg-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 580px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ops-cfg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.ops-cfg-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 3px;
}
.ops-cfg-close-btn:hover { background: var(--row-hover); color: var(--text); }

.ops-cfg-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ops-cfg-fields {
  width: 150px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  flex-shrink: 0;
  padding: 6px 0;
}
.ops-cfg-field-item {
  padding: 7px 12px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-cfg-field-item:hover { background: var(--row-hover); }
.ops-cfg-field-item.active { background: var(--brand); color: #fff; font-weight: 600; }

.ops-cfg-opts-panel {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-cfg-opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-cfg-color-wrap {
  position: relative;
  width: 28px;
  height: 26px;
  flex-shrink: 0;
}
.ops-cfg-color-swatch {
  width: 28px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.ops-cfg-color-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
}

.ops-cfg-opt-label {
  flex: 1;
  font-size: 11px;
  border: 1px solid var(--field-border);
  border-radius: 3px;
  padding: 2px 7px;
  height: 26px;
  background: var(--surface);
  color: var(--text);
}
.ops-cfg-opt-label:focus { outline: none; border-color: var(--brand); }

.ops-cfg-opt-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--danger);
  font-size: 14px;
  padding: 0 2px;
  opacity: 0.7;
  line-height: 1;
}
.ops-cfg-opt-del:hover { opacity: 1; }

.ops-cfg-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ops-cfg-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Loading spinner row ─────────────────────────────────────────────────────── */
.ops-ins-loading td {
  text-align: center;
  color: var(--muted);
  padding: 24px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Advanced filter panel
   ───────────────────────────────────────────────────────────────────────────── */
.ops-adv-btn .ops-adv-icon { font-size: 9px; opacity: 0.7; }
.ops-adv-btn.active,
.ops-adv-btn.has-filters {
  background: color-mix(in srgb, var(--brand, #2563eb) 15%, var(--panel));
  border-color: var(--brand, #2563eb);
  color: var(--brand, #2563eb);
}
.ops-adv-badge {
  display: inline-block;
  background: var(--brand, #2563eb);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  min-width: 16px;
  text-align: center;
}
.ops-adv-panel {
  background: var(--bg-deep, #0f172a);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 12px;
  font-size: 12px;
  flex-shrink: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.ops-adv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ops-adv-title { font-weight: 600; font-size: 13px; color: var(--text); }
.ops-adv-count { font-size: 11px; color: var(--ink-3, #94a3b8); }
.ops-adv-spacer { flex: 1; }
.ops-adv-clear {
  background: transparent;
  border: none;
  color: var(--ink-3, #94a3b8);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.ops-adv-clear:hover { color: var(--danger, #dc2626); background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent); }
.ops-adv-empty { color: var(--ink-3, #94a3b8); font-size: 11px; padding: 8px 0; }
.ops-adv-group {
  background: color-mix(in srgb, var(--panel, #1e293b) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ops-adv-group-sep {
  display: flex;
  justify-content: center;
  margin: 6px 0 8px;
}
.ops-adv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ops-adv-row:last-child { margin-bottom: 0; }
.ops-adv-where {
  display: inline-block;
  min-width: 50px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #94a3b8);
}
.ops-adv-logic-pill {
  min-width: 50px;
  height: 26px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: lowercase;
}
.ops-adv-logic-pill:hover {
  border-color: var(--brand, #2563eb);
  color: var(--brand, #2563eb);
}
.ops-adv-row select.ops-adv-col,
.ops-adv-row select.ops-adv-cond,
.ops-adv-row .ops-adv-val {
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid var(--field-border, var(--line));
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}
.ops-adv-row select.ops-adv-col { min-width: 160px; }
.ops-adv-row select.ops-adv-cond { min-width: 130px; }
.ops-adv-row input.ops-adv-val,
.ops-adv-row select.ops-adv-val { min-width: 180px; flex: 1; max-width: 280px; }
.ops-adv-row input.ops-adv-val[type="text"] { background-color: var(--panel) !important; }
.ops-adv-arrow { color: var(--ink-3, #94a3b8); font-size: 11px; }
.ops-adv-val-empty { color: var(--ink-3, #94a3b8); font-size: 11px; flex: 1; }
.ops-adv-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-3, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.ops-adv-remove:hover { background: color-mix(in srgb, var(--danger, #dc2626) 15%, transparent); color: var(--danger, #dc2626); }
.ops-adv-group-actions { margin-top: 4px; }
.ops-adv-add-row,
.ops-adv-add-group {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--brand, #2563eb);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}
.ops-adv-add-row:hover,
.ops-adv-add-group:hover {
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, transparent);
  border-style: solid;
}
.ops-adv-footer { padding-top: 4px; }

.ops-adv-search {
  background: var(--brand, #2563eb);
  color: #fff;
  border: 1px solid var(--brand, #2563eb);
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 6px;
}
.ops-adv-search:hover { filter: brightness(1.1); }
.ops-adv-search.dirty {
  animation: ops-adv-pulse 1.5s ease-in-out infinite;
}
@keyframes ops-adv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #2563eb) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand, #2563eb) 0%, transparent); }
}