/* ===========================================
   NERCA Admin — CSS global para todo el sistema
   Un solo archivo, un solo lugar.
   =========================================== */

/* --- Links en tablas (naranja NERCA) --- */
#result_list a,
#result_list td a,
#result_list th a,
.results a,
table td a,
table th a:not(.section) {
    color: rgb(230, 90, 30);
}
#result_list a:hover,
#result_list td a:hover,
table td a:hover {
    color: rgb(191, 72, 20);
}

/* --- Scrollbar naranja NERCA (todo el sistema) --- */
*::-webkit-scrollbar { width: 12px !important; height: 12px !important; }
*::-webkit-scrollbar-track { background: #fff7f3 !important; }
*::-webkit-scrollbar-thumb { background: #E65A1E !important; border-radius: 4px !important; }
*::-webkit-scrollbar-thumb:hover { background: #c44d18 !important; }
* { scrollbar-width: thin !important; scrollbar-color: #E65A1E #fff7f3 !important; }

/* Sidebar, contenido principal, tablas con scroll horizontal */
nav, aside, main, .simplebar-content-wrapper,
.simplebar-track, [data-simplebar],
#nav-sidebar, #content, #content-main,
.overflow-x-auto, .overflow-y-auto,
.overflow-auto, [style*="overflow"] {
    scrollbar-width: thin !important;
    scrollbar-color: #E65A1E #fff7f3 !important;
}
nav::-webkit-scrollbar, aside::-webkit-scrollbar,
main::-webkit-scrollbar, .simplebar-content-wrapper::-webkit-scrollbar,
#nav-sidebar::-webkit-scrollbar, #content::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
    width: 12px !important; height: 12px !important;
}
nav::-webkit-scrollbar-thumb, aside::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb, .simplebar-content-wrapper::-webkit-scrollbar-thumb,
#nav-sidebar::-webkit-scrollbar-thumb, #content::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
    background: #E65A1E !important; border-radius: 4px !important;
}
nav::-webkit-scrollbar-track, aside::-webkit-scrollbar-track,
main::-webkit-scrollbar-track, .simplebar-content-wrapper::-webkit-scrollbar-track,
#nav-sidebar::-webkit-scrollbar-track, #content::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track, .overflow-y-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
    background: #fff7f3 !important;
}

/* Iframes */
iframe { scrollbar-color: #E65A1E #fff7f3 !important; }

/* SimpleBar (scrollbars custom de Unfold en tablas/contenedores con
   data-simplebar): igualar tono/grosor con la scrollbar nativa NERCA. */
.simplebar-scrollbar:before {
    background-color: #E65A1E !important;
    border-radius: 4px !important;
}
.simplebar-scrollbar.simplebar-visible:before {
    opacity: 1 !important;
}
.simplebar-track.simplebar-horizontal {
    height: 12px !important;
    background: #fff7f3 !important;
}
.simplebar-track.simplebar-vertical {
    width: 12px !important;
    background: #fff7f3 !important;
}


/* --- Campos de formulario: borde visible sin necesidad de foco --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select:not([multiple]) {
    border: 1px solid #c5c5c5 !important;
    border-radius: 6px;
}

/* --- Título de pestaña limpio (via JS inyectado desde STYLES) --- */
/* El JS real está en nerca-admin-title.js */

/* --- Sidebar: ocultar separadores horizontales entre grupos top-level ---
   Unfold renderiza <hr class="border-t..."> antes de cada grupo con
   "separator": True en UNFOLD["SIDEBAR"]["navigation"]. Visualmente
   recargan en notebooks. Override quirúrgico sin tocar settings.py. */
#nav-sidebar-apps hr {
    display: none !important;
}

/* --- Contenido full-width: usar todo el ancho de la pantalla 2026-06-02 ---
   Unfold envuelve #content con clase Tailwind 'container' que mete un
   max-width por breakpoint (~1280px en xl). Sobre pantallas anchas (e
   incluso notebooks 14"+) eso deja un cinturón gris a cada lado. Forzamos
   el ancho real para aprovechar todo el viewport, especialmente cuando
   el operador colapsa el sidebar. */
#content,
#content.container {
    max-width: 100% !important;
    width: 100% !important;
}

/* --- Changelist: sacar bordes verticales de celdas y borde exterior de la tabla ---
   En notebooks/pantallas con scroll horizontal aparecian tracitos verticales
   fragmentados en el borde izquierdo de cada fila. Son border-left/right de
   las <td>/<th> de Unfold + el borde exterior de la <table>. Mantenemos
   solo el border-bottom horizontal de cada fila para legibilidad. */
#result_list,
#result_list th,
#result_list td {
    border-left: 0 !important;
    border-right: 0 !important;
}
#result_list {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* --- Sidebar: barrita vertical naranja a la izquierda de items de seccion expandida --- */
#nav-sidebar-apps ol {
    position: relative;
    margin-left: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
#nav-sidebar-apps ol::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background-color: #E65A1E;
    border-radius: 1px;
    opacity: 0.6;
}

/* --- Sidebar: primer grupo sin título → items con estilo de sección --- */
#nav-sidebar-apps > div:first-child ol a {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--font-important-light, #1a1a1a);
}
#nav-sidebar-apps > div:first-child ol a.active,
#nav-sidebar-apps > div:first-child ol a:hover {
    color: rgb(230, 90, 30) !important;
}

/* --- Selects / dropdowns: highlight naranja NERCA en vez de azul --- */
select option:checked,
select option:active,
select:focus option:checked,
select option:hover {
    background: #E65A1E linear-gradient(0deg, #E65A1E 0%, #E65A1E 100%) !important;
    color: white !important;
}
select {
    scrollbar-color: #E65A1E #fff7f3 !important;
}
/* Highlight de selección de texto y elementos focuseados */
::selection { background: rgba(230, 90, 30, 0.3); }
::-moz-selection { background: rgba(230, 90, 30, 0.3); }
/* Focus outline naranja */
select:focus,
input:focus,
textarea:focus {
    outline-color: #E65A1E !important;
    border-color: #E65A1E !important;
}
/* Checkboxes y radios accent */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #E65A1E !important;
}

/* --- Action bar: alinear dropdowns custom y campos --- */
#changelist-actions {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
#changelist-actions .flex.flex-col,
#changelist-actions .flex.flex-row {
    align-items: center !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
#changelist-actions label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
#changelist-actions input[type="number"],
#changelist-actions input[type="text"] {
    border: none !important;
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    width: 120px !important;
}
#changelist-actions input::placeholder {
    color: rgba(255,255,255,.6) !important;
}
/* Selects nativos de la barra de acciones (no envueltos por dropdown custom):
   estilizar para que matcheen el fondo naranja. El popup nativo (Chromium)
   sigue siendo azul — limitacion del browser. */
#changelist-actions select {
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px !important;
}
#changelist-actions select option {
    background: #fff !important;
    color: #333 !important;
}
/* Boton Run: tono naranja oscuro NERCA en vez del bg-primary-900 default */
#changelist-actions button[type="submit"] {
    background-color: #c44d18 !important;
    transition: background-color .15s !important;
}
#changelist-actions button[type="submit"]:hover {
    background-color: #a8410f !important;
}

/* --- Botón Filtros: contorno naranja NERCA (estilo delicado) --- */
button.border.border-base-200,
a.border.border-base-200 {
    border-color: #E65A1E !important;
    color: #E65A1E !important;
    background-color: transparent !important;
}
button.border.border-base-200:hover,
a.border.border-base-200:hover {
    background-color: rgba(230, 90, 30, 0.1) !important;
    color: #E65A1E !important;
}

/* --- Panel de filtros: overlay tenue en vez de oscuro --- */
#changelist-filter {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* --- Headers de inline (Seleccione un Producto / Método) ---
   Y headers de fieldset (Sucursal, Política, Factura A/B/C, etc).
   Mismo estilo naranja claro para mejor jerarquía visual. */
.tabular .module h2,
.inline-group h2,
fieldset.module > h2,
fieldset.module > details > summary {
    background: #fff3ec !important;
    color: #2C2C2C !important;
    border-bottom: 2px solid #E65A1E !important;
    padding: 8px 12px !important;
}

/* --- Description de fieldsets (texto de ayuda bajo el header) ---
   Unfold por default lo deja apretado al header gris. Le damos respiro y
   el mismo tono cremoso para que se lea como continuación del bloque. */
fieldset.module > .description,
fieldset.module .help {
    background: #fffaf6 !important;
    padding: 6px 12px !important;
    color: #5a5a5a !important;
    font-size: 0.875rem !important;
}

/* --- Eliminar botón Delete grande del submit-row en change_form ---
   El botón rojo al pie izquierdo provocaba clicks accidentales al scrollear
   hacia Guardar. Para borrar, usar el bulk action "Eliminar" desde la lista. */
#submit-row a[href$="/delete/"],
#submit-row a.deletelink {
    display: none !important;
}

/* --- Submit row alineado a la IZQUIERDA (Guardar primero) ---
   Unfold por defecto usa flex-row-reverse → botones a la derecha. Lo
   invertimos a flex-row para que Guardar quede a la izquierda. */
#submit-row > div > div {
    flex-direction: column-reverse !important;
}
@media (min-width: 1024px) {
    #submit-row > div > div {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}

/* --- "Guardar y añadir otro" oculto: patrón viejo de Django admin que
   en un ERP moderno casi nunca se usa. En su lugar inyectamos "Cancelar"
   vía JS (ver nerca-title.js). */
#submit-row button[name="_addanother"],
#submit-row input[name="_addanother"] {
    display: none !important;
}

/* --- "+" flotante arriba-derecha del change form oculto: redundante con el
   "+" que aparece junto al search en el changelist (mismo destino /add/) y
   confunde durante la edición. body.change-form lo pone Unfold automático. */
body.change-form a.addlink {
    display: none !important;
}

/* TS FASE 10 UI REFACTOR (2026-05-18): action bar uniforme.
   Antes el ActionForm de "Transferir entre Depósitos" tenía 5 campos visibles
   (destino + kg + unidades + sucursal_destino_otra + deposito_destino_otra),
   lo que llenaba todo el ancho del bg-primary. Al refactorizar a wizard
   modal-like, el ActionForm quedó con solo dropdown + Run y el bg colapsó al
   tamaño del contenido — visual inconsistente con otros admins NERCA.
   Forzamos w-full + flex-1 al bg-primary del action bar para que ocupe todo el
   ancho de la tabla y el contador "1 de N seleccionado" quede pegado a la
   derecha como en el resto de los listados con muchas acciones. */
#changelist-actions > div[class*="bg-primary"] {
    width: 100%;
    flex: 1 1 auto;
}