/* Tokens de diseño de Amar
 * =========================
 * Punto único donde se definen color, tipografía, espaciado, radios y sombras.
 * La idea es que ninguna pantalla vuelva a hardcodear un color: si algo necesita
 * el violeta de la marca, usa var(--amar-primary).
 *
 * Por qué existe: hasta ahora convivían DOS violetas de marca distintos
 * (#6918B6 y #6a0dad) repartidos por custom.css y por 296 atributos `style=`
 * inline en los templates. Ese es el motivo real de que las pantallas se vean
 * de familias distintas.
 *
 * Se carga ANTES que custom.css, así que custom.css puede usar las variables y
 * a la vez sigue pudiendo pisar lo que necesite mientras se migra.
 */

:root {
    /* --- Marca --------------------------------------------------------- */
    /* El violeta canónico es el #6918B6, que es el que usa el logo y la mayor
       parte de la UI. El #6a0dad que aparecía en algunos lugares era una
       variante suelta, no una decisión. */
    --amar-primary: #6918B6;
    --amar-primary-dark: #551294;
    --amar-primary-light: #8e4fd0;
    --amar-primary-soft: #f3ebfb;   /* fondos suaves, hover de filas */
    --amar-primary-pale: #f3d1fb;   /* estados deshabilitados (flechas, iconos) */

    /* --- Semánticos ---------------------------------------------------- */
    --amar-success: #2e7d32;
    --amar-success-soft: #e8f5e9;
    --amar-danger: #c62828;
    --amar-danger-soft: #fdecea;
    --amar-warning: #ef6c00;
    --amar-warning-soft: #fff4e5;
    --amar-info: #0277bd;
    --amar-info-soft: #e3f2fd;

    /* --- Texto y superficies ------------------------------------------- */
    --amar-text: #263238;
    --amar-text-muted: #6b7280;
    --amar-surface: #ffffff;
    --amar-surface-alt: #f4f6f9;    /* zebra de tablas, fondos de sección */
    --amar-border: #e3e6ec;

    /* --- Tipografía ---------------------------------------------------- */
    --amar-font-size: 14px;
    --amar-font-size-sm: 12.5px;
    --amar-line-height: 1.45;

    /* --- Espaciado (escala de 4) --------------------------------------- */
    --amar-space-1: 4px;
    --amar-space-2: 8px;
    --amar-space-3: 12px;
    --amar-space-4: 16px;
    --amar-space-5: 24px;

    /* --- Radios y sombras ---------------------------------------------- */
    --amar-radius: 6px;
    --amar-radius-lg: 10px;
    --amar-radius-pill: 999px;
    --amar-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --amar-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}


/* ===================================================================== *
 * Tabla de listado del CRUD genérico
 * ---------------------------------------------------------------------
 * Todos los listados del backoffice salen de `cruds/list.html`, así que lo
 * que se arregle acá se propaga a las 24 pantallas que lo extienden.
 * ===================================================================== */

/* El listado del CRUD genérico renderiza
   `<table id="datatable" class="table table-bordered table-hover">`.
   Se apunta a ese id, que es el que comparten las 24 pantallas. */
table#datatable {
    font-size: var(--amar-font-size-sm);
    color: var(--amar-text);
    border-color: var(--amar-border);
}

/* Encabezados: en el listado de solicitudes se partían en dos renglones
   ("CONS PEND", "TURNO CREADO") porque las flechas de ordenar entran en el
   mismo th. Se les da aire y se evita el corte. */
table#datatable > thead > tr > th {
    background: var(--amar-surface-alt);
    /* Los títulos van con el color de texto pleno y no con el muted: a 11px,
       en mayúsculas y con letter-spacing, el gris (#6b7280 sobre #f4f6f9)
       quedaba lavado y costaba leerlos. Con el texto pleno el contraste pasa
       de ~4,6:1 a ~12:1 sin cambiar el peso visual del encabezado. */
    color: var(--amar-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* SIN `white-space: nowrap`: lo probé y forzaba el ancho intrínseco de los
       encabezados largos ("TURNO CREADO", "ATENDIDA POR" con sus flechas), la
       tabla se pasaba del viewport y la columna de acciones quedaba recortada
       (medido: última celda en 1774px con viewport de 1745). Que envuelvan es
       preferible a perder una columna. */
    vertical-align: middle;
    padding: var(--amar-space-2) var(--amar-space-3);
    border-bottom: 2px solid var(--amar-border) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

table#datatable > tbody > tr > td {
    /* 8px vertical y no 12: es un listado operativo, se scanean muchas filas de
       un vistazo. Con 12 entraban la mitad de las filas en pantalla. */
    padding: var(--amar-space-2) var(--amar-space-3);
    vertical-align: middle;
    border-top: 1px solid var(--amar-border);
}

table#datatable > tbody > tr:nth-child(2n) {
    background: var(--amar-surface-alt);
}

table#datatable > tbody > tr:hover {
    background: var(--amar-primary-soft);
}

/* Las flechas de ordenar competían visualmente con el título de la columna. */
table#datatable > thead > tr > th a,
table#datatable > thead > tr > th i {
    color: var(--amar-text-muted);
    opacity: .7;
}
table#datatable > thead > tr > th a:hover {
    color: var(--amar-primary);
    opacity: 1;
}


/* ===================================================================== *
 * Indicadores booleanos de los listados
 * ---------------------------------------------------------------------
 * Hoy son un ✓ verde o una ✗ roja sueltos, con tamaños distintos según la
 * pantalla. Como pastilla se leen de un vistazo y quedan alineados.
 * ===================================================================== */

.amar-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--amar-space-2);
    border-radius: var(--amar-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.amar-flag--yes { background: var(--amar-success-soft); color: var(--amar-success); }
.amar-flag--no { background: var(--amar-danger-soft); color: var(--amar-danger); }
.amar-flag--unknown { background: var(--amar-surface-alt); color: var(--amar-text-muted); }


/* ===================================================================== *
 * Pastillas de estado (texto)
 * ===================================================================== */

.amar-badge {
    display: inline-block;
    padding: 3px var(--amar-space-2);
    border-radius: var(--amar-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.amar-badge--neutral { background: var(--amar-surface-alt); color: var(--amar-text-muted); }
.amar-badge--primary { background: var(--amar-primary-soft); color: var(--amar-primary); }
.amar-badge--success { background: var(--amar-success-soft); color: var(--amar-success); }
.amar-badge--danger { background: var(--amar-danger-soft); color: var(--amar-danger); }
.amar-badge--warning { background: var(--amar-warning-soft); color: var(--amar-warning); }


/* ===================================================================== *
 * Tarjetas de estadísticas del encabezado de los listados
 * ===================================================================== */

.amar-card,
.info-box,
.small-box {
    border-radius: var(--amar-radius-lg);
    box-shadow: var(--amar-shadow-sm);
    border: 1px solid var(--amar-border);
}


/* ===================================================================== *
 * ETAPA 1 — componentes normalizados sobre los tokens
 * ---------------------------------------------------------------------
 * Botones, cajas y formularios son lo que se repite en todas las pantallas.
 * Al colgar los tres de las mismas variables, dejan de verse de familias
 * distintas sin tener que tocar template por template.
 * ===================================================================== */

/* --- Botones -------------------------------------------------------- */
.btn {
    border-radius: var(--amar-radius);
    font-weight: 500;
    padding: 6px 14px;
    transition: background-color .12s ease, border-color .12s ease;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--amar-primary);
    border-color: var(--amar-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--amar-primary-dark);
    border-color: var(--amar-primary-dark);
    color: #fff;
}

/* El outline se usaba con violetas sueltos en varias pantallas. */
.btn-outline-primary,
.btn-default.btn-amar {
    background: transparent;
    border: 1px solid var(--amar-primary);
    color: var(--amar-primary);
}
.btn-outline-primary:hover,
.btn-default.btn-amar:hover {
    background: var(--amar-primary-soft);
    color: var(--amar-primary-dark);
}

.btn-success { background-color: var(--amar-success); border-color: var(--amar-success); }
.btn-danger { background-color: var(--amar-danger); border-color: var(--amar-danger); }
.btn-warning { background-color: var(--amar-warning); border-color: var(--amar-warning); color: #fff; }

/* Foco accesible y con el color de la marca, en vez del azul del navegador. */
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--amar-primary-light);
    outline-offset: 1px;
}

/* --- Cajas y paneles ------------------------------------------------ */
/* AdminLTE 2 usa `.box`, Bootstrap 4 usa `.card` y en el proyecto conviven las
   dos porque el tema es de BS3 y el framework es BS4. Se las empareja. */
.box,
.card,
.panel,
.info-box,
.small-box {
    border-radius: var(--amar-radius-lg);
    box-shadow: var(--amar-shadow-sm);
    border: 1px solid var(--amar-border);
    background: var(--amar-surface);
}

.box > .box-header,
.card > .card-header,
.panel > .panel-heading {
    border-bottom: 1px solid var(--amar-border);
    background: transparent;
    padding: var(--amar-space-3) var(--amar-space-4);
    font-weight: 600;
    color: var(--amar-text);
}

/* La barra de color de arriba de las cajas de AdminLTE quedaba azul por defecto. */
.box.box-primary,
.box.box-solid.box-primary > .box-header {
    border-top-color: var(--amar-primary);
}

/* --- Formularios ---------------------------------------------------- */
.form-control {
    border-radius: var(--amar-radius);
    border-color: var(--amar-border);
    color: var(--amar-text);
    box-shadow: none;
}
.form-control:focus {
    border-color: var(--amar-primary-light);
    box-shadow: 0 0 0 3px var(--amar-primary-soft);
}
.form-control::placeholder { color: var(--amar-text-muted); }

label,
.control-label {
    color: var(--amar-text);
    font-weight: 600;
    font-size: var(--amar-font-size-sm);
}

.help-block,
.form-text {
    color: var(--amar-text-muted);
    font-size: var(--amar-font-size-sm);
}

/* select2 se dibuja aparte y quedaba con otra altura y otro radio que los
   inputs de al lado; era una de las cosas que más se notaba en los filtros. */
.select2-container--default .select2-selection--single {
    border-radius: var(--amar-radius);
    border-color: var(--amar-border);
    height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--amar-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--amar-primary);
}

/* --- Detalle pendiente de la etapa 0 -------------------------------- */
/* La columna de servicios envuelve en cinco renglones y estira toda la fila.
   Se la acota y se corta con puntos suspensivos; el texto completo queda en el
   `title` que ya arma el CRUD genérico. */
table#datatable td.td-field-services_request_display,
table#datatable td.field-services_request_display {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Botones dentro del listado: compactos.
   El padding general de `.btn` (14px lateral) ensanchaba los botones de acción
   de cada fila y empujaba la columna fuera del contenedor: en stage quedaban
   cortados contra el borde derecho. Acá son iconos, no botones de formulario. */
table#datatable .btn {
    padding: 4px 8px;
    line-height: 1.2;
}
/* Las acciones de cada fila son iconos, no botones de formulario: con el relleno
   violeta de `.btn-primary` se ensanchaban y las DOS columnas de acción
   (`extra_detail` + el menú) terminaban pasándose del ancho de la ventana
   (medido en stage: la última celda llegaba a 1774px en un viewport de 1745). */
table#datatable .btn-primary {
    background: transparent;
    border-color: transparent;
    color: var(--amar-primary);
    padding: 2px 6px;
    box-shadow: none;
}
table#datatable .btn-primary:hover,
table#datatable .btn-primary:focus {
    background: var(--amar-primary-soft);
    border-color: transparent;
    color: var(--amar-primary-dark);
}

/* Red de seguridad: si aun así una tabla es más ancha que su caja, que scrollee
   ella y no se corte el contenido. */
.box-body > .table-responsive,
.box-body > div > .table-responsive {
    overflow-x: auto;
}

/* El "Cerrar sesión" del sidebar tiene que ir dentro de un <form> porque el
   logout de Django es POST, así que no puede ser un <a> como el resto del menú.
   Sin clases, el navegador le da su estilo de botón (borde, fondo, ancho propio)
   y desentonaba con las demás opciones. Acá se lo iguala. */
.sidebar-menu li form { margin: 0; }
.sidebar-menu li .sidebar-logout {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 5px 12px 15px;
    color: inherit;
    font: inherit;
}
.sidebar-menu li .sidebar-logout:hover { background: var(--amar-primary-soft); color: var(--amar-primary); }
.sidebar-menu li .sidebar-logout i { width: 20px; text-align: center; }

/* ===================================================================== *
 * Barra de búsqueda y paginación de los listados
 * ---------------------------------------------------------------------
 * Las secciones (config | buscador | resultados | paginación) se separaban
 * con `border-right` y padding distinto en cada una, así que quedaban a
 * distintas alturas y sobraba una línea vertical suelta al final de la fila.
 * ===================================================================== */

/* Los filtros van ARRIBA de la barra de búsqueda. En el HTML el orden es al
   revés, pero el contenedor es un flex column, así que se reordena por CSS en
   lugar de mover bloques grandes de template. */
.search-and-filters-container { display: flex; flex-direction: column; }
.filters-container { order: 1; margin-bottom: var(--amar-space-3); }
.search-container { order: 2; }

/* La barra queda PEGADA a la tabla: redondeada solo arriba, sin borde ni
   separación abajo. La tabla cierra el redondeo. */
.search-container {
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid var(--amar-border);
    border-bottom: 0;
    border-radius: var(--amar-radius-lg) var(--amar-radius-lg) 0 0;
    background: var(--amar-surface);
    overflow: hidden;
}

/* Separadores uniformes. Ya no hace falta excluir a `custom-filter-container`:
   ese botón suelto se eliminó y su función vive ahora en la primera celda de la
   barra, donde estaba la rueda de configuración. */
.search-container > div {
    border-right: 1px solid var(--amar-border);
    display: flex;
    align-items: center;
    padding: var(--amar-space-2) var(--amar-space-3);
}
.search-container > .paginate-container { border-right: 0; }

/* Botón de limpiar filtros, primera celda de la barra. */
.config-container .btn_remove_filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--amar-radius);
    color: var(--amar-primary);
    font-size: 16px;
    padding: 0;
}
.config-container .btn_remove_filter:hover {
    background: var(--amar-primary-soft);
    color: var(--amar-primary-dark);
}

.config-container,
.search-bar,
.items-container,
.paginate-container { border-right-color: var(--amar-border) !important; }

.search-bar { text-align: left; flex: 1 1 auto; }
.search-bar form,
.search-bar .input-group { width: 100%; margin: 0; }

.form-control.search-bar-item {
    font-size: var(--amar-font-size);
    color: var(--amar-text);
    box-shadow: none;
    padding-left: 0;
}
.form-control.search-bar-item::placeholder { color: var(--amar-text-muted); }

/* El conteo y la paginación son datos de apoyo: en violeta competían con el
   contenido de la tabla. */
.items-container-details {
    font-size: var(--amar-font-size-sm);
    color: var(--amar-text-muted);
    align-items: center;
    gap: var(--amar-space-2);
}
.items-container-details .pagination { margin: 0; display: flex; align-items: center; gap: var(--amar-space-1); }
.items-container-details .pagination > li { list-style: none; }
.items-container-details .pagination a { color: var(--amar-primary); padding: 0 var(--amar-space-1); }


/* ===================================================================== *
 * La lista continúa la caja de la barra
 * ===================================================================== */

/* `border-collapse: separate` es lo que permite redondear las esquinas de
   abajo: con `collapse` los bordes de las celdas se comen el radio. */
table#datatable {
    border: 1px solid var(--amar-border);
    border-top: 0;
    border-radius: 0 0 var(--amar-radius-lg) var(--amar-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--amar-space-4);
}
table#datatable > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--amar-radius-lg); }
table#datatable > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--amar-radius-lg); }

/* ===================================================================== *
 * Encabezados ordenables
 * ---------------------------------------------------------------------
 * El título es el link. La flecha sale solo en la columna activa, así que
 * los encabezados dejan de ensancharse por dos flechas que estaban siempre.
 * ===================================================================== */

table#datatable > thead > tr > th { padding: var(--amar-space-2) var(--amar-space-3); }

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}
.th-sort:hover { color: var(--amar-primary); }
.th-sort i { font-size: 9px; opacity: .9; }
.th-sort--active { color: var(--amar-primary); }

/* ===================================================================== *
 * Iconos de descarga y acciones de la barra
 * ===================================================================== */

.download-container { padding: var(--amar-space-2) !important; }
.download-container a,
.config-container a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--amar-radius);
    color: var(--amar-primary);
    font-size: 15px;
    padding: 0;
    text-decoration: none;
}
.download-container a:hover,
.config-container a:hover {
    background: var(--amar-primary-soft);
    color: var(--amar-primary-dark);
}
/* Los de descarga se agrupan a la derecha, sin separador entre ellos. */
.search-container > .download-container + .download-container { border-left: 0; }

/* La barra y la tabla son hermanas, pero entre las dos había 40px de aire: el
   `padding` del `.box-body` que envuelve la tabla más el de un segundo
   `.box-body` anidado adentro (el template abre un <div class="box-body"> y otra
   <table> dentro de la primera tabla). Se anulan para que queden pegadas. */
.search-and-filters-container { margin-bottom: 0; }
.search-and-filters-container + .box-body { padding-top: 0; margin-top: 0; }
.box-body .box-body { padding: 0; }
table#datatable { margin-top: 0; }

/* ===================================================================== *
 * Especificidad: tokens.css se carga ANTES que custom.css
 * ---------------------------------------------------------------------
 * Se eligió ese orden para que custom.css pudiera seguir pisando durante la
 * migración, pero eso significa que sus reglas viejas GANAN a igual
 * especificidad. `.search-container` trae ahí un `margin-bottom: 10px` que
 * despegaba la barra de la tabla. Se sube la especificidad para ganarle sin
 * tener que tocar custom.css ni invertir el orden de carga (que arriesgaría
 * regresiones en otras pantallas).
 * ===================================================================== */

.search-and-filters-container > .search-container {
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: var(--amar-radius-lg) var(--amar-radius-lg) 0 0;
}

/* La barra pasa a leerse como el header de la tabla: mismo fondo que los
   encabezados, para que se vean como un solo bloque. */
.search-and-filters-container > .search-container + * { margin-top: 0; }

/* Ancho: la barra sobresalía 10px de cada lado respecto de la lista, porque el
   `.box-body` que envuelve la tabla tiene padding lateral y la barra —que está
   afuera de ese div— no. Medido en stage: barra 262→1873, tabla 272→1863.
   Se le saca el padding lateral a ese box-body para que las dos ocupen
   exactamente el mismo ancho y el bloque se lea como una sola caja. */
.search-and-filters-container + .box-body {
    padding-left: 0;
    padding-right: 0;
}

/* ===================================================================== *
 * Altura de la barra de búsqueda
 * ---------------------------------------------------------------------
 * Medida en stage: 59px, contra 47 del encabezado de la tabla y 50 de una
 * fila. Quedaba más alta que todo lo que tiene alrededor. Lo que la estiraba
 * era el input (38px, con tipografía de 16px cuando el resto de la pantalla
 * usa 14) más 8px de padding arriba y abajo en cada celda.
 *
 * Los selectores llevan `.search-bar`/`.search-container` adelante para ganarle
 * a custom.css, que define lo mismo y se carga DESPUÉS que este archivo.
 * ===================================================================== */

.search-container > div { padding: var(--amar-space-1) var(--amar-space-3); }

.search-bar .form-control.search-bar-item {
    height: 32px;
    font-size: var(--amar-font-size);
    line-height: 1.4;
    padding: 0;
}

/* Los iconos acompañan la altura nueva. */
.download-container a,
.config-container a { width: 28px; height: 28px; font-size: 14px; }
.download-container { padding: var(--amar-space-1) var(--amar-space-2) !important; }


/* ===================================================================== *
 * Listados anchos: que entre todo sin scroll ni zoom out
 * ---------------------------------------------------------------------
 * El listado de solicitudes se pasaba del viewport en pantallas angostas
 * (en producción la columna PAGADO quedaba cortada contra el borde) y se
 * resolvía haciendo zoom out, que achica toda la letra: el "la letra queda
 * muy pequeña" que se reporta es en realidad eso.
 *
 * Nada de scroll horizontal: se hace entrar la tabla cediendo ancho donde
 * sobra. La tabla se fija al 100% del contenedor y cada tipo de columna
 * declara cuánto pide.
 * ===================================================================== */

table#datatable {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

/* Texto largo (emails, nombres, servicios): envuelve en vez de estirar. */
table#datatable > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Las columnas de un ícono o un valor corto no necesitan ancho propio. */
table#datatable td.td-field-atendido,
table#datatable th.th-field-atendido,
table#datatable td.td-field-pagado,
table#datatable th.th-field-pagado,
table#datatable td.td-field-cons_pend,
table#datatable th.th-field-cons_pend,
table#datatable td.td-field-tiene_vet,
table#datatable th.th-field-tiene_vet,
table#datatable td.td-field-turno_creado,
table#datatable th.th-field-turno_creado {
    width: 5%;
    text-align: center;
}

/* ===================================================================== *
 * Acciones de fila: iconos, no botones sólidos
 * ---------------------------------------------------------------------
 * En Ventas de cobertura cada fila trae cuatro `.btn-xs` rellenos (primary,
 * default, info, danger): cuatro bloques de color por fila, que le ganan al
 * contenido de la tabla. Encima el de editar quedaba violeta sobre violeta,
 * casi sin contraste (bg #6918B6 con el icono en #470083).
 *
 * En una celda de acciones lo que se lee es el icono; el fondo sólido no aporta
 * y suma ruido. Van transparentes, cada uno con su color semántico, y el relleno
 * aparece solo en hover. Se apunta a los botones dentro de `td` para no tocar
 * los de las barras de herramientas.
 * ===================================================================== */

table td .btn.btn-xs,
table td .btn.btn-sm {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 4px 7px;
}
table td .btn.btn-xs.btn-primary,
table td .btn.btn-sm.btn-primary { color: var(--amar-primary); }
table td .btn.btn-xs.btn-info,
table td .btn.btn-sm.btn-info { color: var(--amar-info); }
table td .btn.btn-xs.btn-danger,
table td .btn.btn-sm.btn-danger { color: var(--amar-danger); }
table td .btn.btn-xs.btn-success,
table td .btn.btn-sm.btn-success { color: var(--amar-success); }
table td .btn.btn-xs.btn-warning,
table td .btn.btn-sm.btn-warning { color: var(--amar-warning); }
table td .btn.btn-xs.btn-default,
table td .btn.btn-sm.btn-default { color: var(--amar-text-muted); }

table td .btn.btn-xs:hover,
table td .btn.btn-sm:hover {
    background: var(--amar-surface-alt);
    border-color: transparent;
}
table td .btn.btn-xs.btn-danger:hover { background: var(--amar-danger-soft); }
table td .btn.btn-xs.btn-primary:hover { background: var(--amar-primary-soft); }