/*
 * LISTAS (changelist) — la tabla #result_list.
 *
 * Por qué existe: el sistema de diseño solo tocaba #content-main, o sea las
 * pantallas add/change. Las listas quedaron con el estilo viejo y la
 * diferencia se notaba: las tablas de un formulario se veían de una manera y
 * las de una lista de otra. Las listas son la otra mitad del día del contador.
 *
 * Va en su propio archivo (no dentro de components.css) por la misma razón
 * que tenía shell.css: ajusta markup que no es nuestro. Si hay que sacarlo,
 * se comenta UN <link> en templates/admin/base.html y nada más se entera.
 *
 * Markup real (templates/admin/change_list_results.html):
 *
 *   div#resultContainer
 *     <style> tr td/th { padding-top/bottom: 4px !important } </style>
 *     div.table-responsive
 *       table#result_list.table.table-hover
 *         thead.table-light > tr > th[scope=col]
 *           div.sortoptions > a.sortremove | span.sortpriority | a.toggle
 *           div.text > a               <- la etiqueta de la columna
 *           div.clear
 *         tbody > tr > td.field-<nombre>
 *
 * DOS DECISIONES QUE CONVIENE CONOCER
 *
 * 1. NO se toca el padding vertical. Esa plantilla lo fija en 4px con
 *    !important, y un !important escrito a mano no es un descuido: es una
 *    decisión. Dice "las listas las queremos apretadas", y en una pantalla
 *    donde se escanean cien filas es la decisión correcta. Las tablas de los
 *    formularios usan --sol-cell-padding-y (8px) porque ahí se LEE con
 *    detalle en vez de escanear. Que una lista sea más densa que un detalle
 *    está bien. Si igual las querés iguales, se agrega una regla con
 *    !important y listo, pero que sea a propósito.
 *
 * 2. Se estiliza por VARIABLES de Bootstrap (--bs-table-*) en vez de pisar
 *    selectores. `.table` de Bootstrap 5 se pinta a sí misma leyendo esas
 *    variables, así que redefinirlas en #result_list es entrar por la puerta
 *    que el framework dejó abierta: cero peleas de especificidad, cero
 *    !important, y si mañana actualizan Bootstrap sigue funcionando.
 */

/* ====================================================================
   LA TABLA
   ==================================================================== */

#result_list {
  /* Entrada idiomática: la tabla se repinta sola con estas variables. */
  --bs-table-bg: var(--sol-surface);
  --bs-table-color: var(--sol-ink);
  --bs-table-border-color: var(--sol-border-subtle);
  --bs-table-hover-bg: var(--sol-surface-sunken);
  --bs-table-hover-color: var(--sol-ink);

  font-size: var(--sol-text-sm);
  line-height: var(--sol-leading-tight);
  margin-bottom: 0;
}

/* Padding horizontal sí, vertical no (ver decisión 1 en la cabecera). Sin
   esto las columnas quedan pegadas entre sí cuando la letra se achica. */
#result_list > thead > tr > th,
#result_list > tbody > tr > td {
  padding-left: var(--sol-cell-padding-x);
  padding-right: var(--sol-cell-padding-x);
  vertical-align: middle;
}

/* ====================================================================
   ENCABEZADOS
   ==================================================================== */

/* .table-light de Bootstrap pinta el thead con su propio gris; se reemplaza
   por el hundido del sistema para que sea el MISMO gris que el de las tablas
   de los formularios. Dos grises casi iguales en pantallas distintas es de
   las cosas que nadie sabe señalar pero todos perciben como descuido. */
#result_list > thead,
#result_list > thead.table-light {
  --bs-table-bg: var(--sol-surface-sunken);
  --bs-table-color: var(--sol-ink-muted);
}

#result_list > thead > tr > th {
  font-size: var(--sol-text-xs);
  font-weight: var(--sol-weight-medium);
  color: var(--sol-ink-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--sol-border);
}

/* El texto de la columna es un <a> dentro de div.text: hereda el gris del
   encabezado y solo se oscurece al pasar por encima, que es cuando importa
   saber que es clickeable para ordenar. */
#result_list > thead > tr > th .text a {
  color: inherit;
  text-decoration: none;
}
#result_list > thead > tr > th .text a:hover {
  color: var(--sol-ink);
  text-decoration: underline;
}

/* Prioridad de ordenamiento (el numerito cuando ordenás por varias columnas):
   pasa a ser un chip chiquito en vez de un número suelto, para que se lea
   como una marca del sistema y no como parte del nombre de la columna. */
#result_list .sortpriority {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 var(--sol-space-1);
  border-radius: var(--sol-radius-sm);
  background-color: var(--sol-border);
  color: var(--sol-ink-secondary);
  font-size: var(--sol-text-2xs);
  font-weight: var(--sol-weight-medium);
  text-align: center;
}

/* ====================================================================
   CELDAS
   ==================================================================== */

/* La columna de los checkboxes de acciones no tiene por qué ocupar el ancho
   de una columna de datos. */
#result_list .action-checkbox-column,
#result_list td.action-checkbox {
  width: 1%;
  white-space: nowrap;
}

/* El primer enlace de cada fila es el que abre el registro: es la ACCIÓN de
   la fila, así que se lee como texto principal y no como un link de color.
   Cien links azules apilados convierten la lista en una sopa. */
#result_list > tbody > tr > td a {
  color: var(--sol-ink);
  text-decoration: none;
}
#result_list > tbody > tr > td a:hover {
  text-decoration: underline;
}

/* Campos vacíos: Django imprime "-" o "None"; el gris apagado los manda al
   fondo para que el ojo solo enganche lo que tiene dato. */
#result_list > tbody > tr > td .quiet,
#result_list > tbody > tr > td .empty-value {
  color: var(--sol-ink-muted);
}

/* ====================================================================
   CLASES OPCIONALES, PARA USAR DESDE list_display
   ====================================================================

   Django deja poner clases por columna, así que un ModelAdmin puede pedir el
   tratamiento numérico donde corresponda. No se puede aplicar solo: desde CSS
   no hay forma de saber qué columna trae importes y cuál trae un código.

   Uso, en el ModelAdmin:

       @admin.display(description="Total")
       def total_col(self, obj):
           return format_html('<span class="sol-num">${}</span>', obj.total)

   .sol-num y .sol-code viven en components.css y funcionan igual acá. */