/* Shared changelist toolkit (see .claude/rules/DJANGO_CHANGELIST.md) -- a module only gets this look by using these classes. */

.epricing-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-base-200);
    border-radius: 0.5rem;
}

.epricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.epricing-table thead th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-base-500);
    background-color: var(--color-base-50);
    border-bottom: 1px solid var(--color-base-200);
}

.epricing-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-base-100);
    color: var(--color-base-700);
}

.epricing-table tbody tr:hover td {
    background-color: var(--color-base-50);
}

.epricing-th {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Opt-in para columnas de texto libre (ej. "Motivo" en tablas de auditoría)
   -- .epricing-table hereda white-space: nowrap por defecto, esto lo
   revierte solo en la celda que lo pida. pre-line respeta los saltos de
   linea de form.errors.as_text() y ademas envuelve el texto largo. */
.epricing-wrap-cell {
    white-space: pre-line;
    overflow-wrap: break-word;
    min-width: 220px;
    max-width: 420px;
}

/* Opt-in para tablas de muchas columnas con texto libre (historial de
   cliente/usuario) -- a diferencia de .epricing-wrap-cell (una celda
   puntual), esto vuelve a envolver TODAS las celdas y fija el ancho de
   columna vía <colgroup> en vez de dejar que cada columna crezca según su
   contenido más largo (lo que hacía crecer la tabla sin límite con valores
   extensos). Mismo comportamiento que una tabla estándar del admin (ej. el
   listado de Usuarios), que nunca fuerza nowrap. */
.epricing-table--wrap {
    table-layout: fixed;
}

.epricing-table--wrap th,
.epricing-table--wrap td {
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: top;
}

/* Opt-in inverso a .epricing-wrap-cell: dentro de una .epricing-table--wrap
   (que envuelve todo por defecto), esto marca la columna puntual que debe
   mostrarse siempre en una sola línea (ej. "Acción"/"Resultado" -- valores
   cortos de un vocabulario cerrado, donde un salto de línea a mitad de
   palabra se ve peor que ensanchar la columna). */
.epricing-nowrap-cell {
    white-space: nowrap;
}

.epricing-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    color: var(--color-base-400);
    cursor: pointer;
}

.epricing-filter-trigger:hover {
    background-color: var(--color-base-200);
    color: var(--color-base-700);
}

.epricing-filter-trigger.is-active {
    color: var(--color-primary-600);
}

/* position:fixed, computed in JS -- a table cell would clip position:absolute here, same reason as .chain-pills-tooltip. */
.epricing-filter-panel {
    position: fixed;
    z-index: 9999;
    width: 16rem;
    max-width: calc(100vw - 1rem);
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border: 1px solid var(--color-base-200);
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.epricing-filter-panel__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-base-200);
}

.epricing-filter-panel__search input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-base-200);
    border-radius: 0.375rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
}

.epricing-filter-panel__quick {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-base-200);
}

.epricing-filter-panel__quick button {
    font-size: 0.75rem;
    color: var(--color-primary-600);
    cursor: pointer;
}

.epricing-filter-panel__quick button:hover {
    text-decoration: underline;
}

.epricing-filter-panel__list {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.epricing-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-base-700);
}

.epricing-filter-option:hover {
    background-color: var(--color-base-100);
}

.epricing-filter-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epricing-filter-empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--color-base-400);
}

.epricing-filter-panel__actions {
    padding: 0.5rem;
    border-top: 1px solid var(--color-base-200);
}

.epricing-filter-apply {
    width: 100%;
    padding: 0.35rem 0;
    border-radius: 0.375rem;
    background-color: var(--color-primary-600);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.epricing-filter-apply:hover {
    background-color: var(--color-primary-700);
}

/* Editable columns: double click for text, click for a boolean icon. */
.epricing-col-editable {
    background-color: var(--color-yellow-50, #fefce8);
}

.epricing-col-editable[data-editable-field] {
    cursor: pointer;
}

.epricing-inline-edit-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-primary-600);
    border-radius: 0.25rem;
    padding: 0.15rem 0.4rem;
    font-size: inherit;
    font-family: inherit;
}

/* Disables the cell while its request is in flight (see saveField in admin-changelist.js). */
.epricing-col-editable.is-saving {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* A brief green flash confirms a successful save. */
@keyframes epricing-flash-success {
    from {
        background-color: var(--color-green-100, #dcfce7);
    }
    to {
        background-color: transparent;
    }
}

@keyframes epricing-flash-success-dark {
    from {
        background-color: color-mix(in srgb, var(--color-green-500, #22c55e) 35%, transparent);
    }
    to {
        background-color: transparent;
    }
}

.epricing-flash-success {
    animation: epricing-flash-success 800ms ease-out;
}

/* Dark mode: every override in this file, in one block. */
html.dark {
    .epricing-table-wrap {
        border-color: var(--color-base-800);
    }

    .epricing-table thead th {
        color: var(--color-base-400);
        background-color: var(--color-base-800);
        border-color: var(--color-base-700);
    }

    .epricing-table tbody td {
        border-color: var(--color-base-800);
        color: var(--color-base-200);
    }

    .epricing-table tbody tr:hover td {
        background-color: color-mix(in srgb, var(--color-base-700) 40%, transparent);
    }

    .epricing-filter-trigger:hover {
        background-color: var(--color-base-700);
        color: var(--color-base-100);
    }

    .epricing-filter-trigger.is-active {
        color: var(--color-primary-400);
    }

    .epricing-filter-panel {
        border-color: var(--color-base-700);
        background-color: var(--color-base-900);
    }

    .epricing-filter-panel__search {
        border-color: var(--color-base-700);

        input {
            border-color: var(--color-base-700);
            background-color: var(--color-base-800);
            color: var(--color-base-100);
        }
    }

    .epricing-filter-panel__quick {
        border-color: var(--color-base-700);

        button {
            color: var(--color-primary-400);
        }
    }

    .epricing-filter-option {
        color: var(--color-base-200);

        &:hover {
            background-color: var(--color-base-800);
        }
    }

    .epricing-filter-panel__actions {
        border-color: var(--color-base-700);
    }

    .epricing-col-editable {
        background-color: color-mix(in srgb, var(--color-yellow-500, #eab308) 12%, transparent);
    }

    .epricing-flash-success {
        animation-name: epricing-flash-success-dark;
    }
}