/*
 * CSS único del panel (layouts/users/main + layouts/auth/auth).
 * SIN Tailwind ni WireUI: el diseño base lo aporta Vuexy/Bootstrap
 * (build-users/assets). Aquí solo van imports de vendors no-Tailwind
 * y ajustes propios sobre Vuexy.
 */

/* CSS de vendors (no dependen de Tailwind) */
@import "flatpickr/dist/flatpickr.min.css";          /* datepicker (filtros PowerGrid, etc.) */
@import "@dasundev/livewire-dropzone-styles";        /* dropzone de subida de archivos */
@import "sweetalert2/dist/sweetalert2.min.css";      /* estilos de las alertas (livewire-alert) */

/* Tipografías del proyecto (equivalente al @layer base de app.css, sin Tailwind) */
h1, h2 {
    font-family: 'Anton', serif;
    letter-spacing: 0.03em;
}

body, h3, h4, h5, h6, p, label, input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
}

.cursor-pointer { cursor: pointer; }

/* === Modal admin (wire-elements + Vuexy) ===
   El componente Livewire se renderiza ANIDADO dentro de .modal-content
   (.modal-content > [wrapper] > [root componente] > header/body/footer), por lo que
   modal-dialog-scrollable no alcanza el modal-body. Propagamos flex-column por los
   wrappers para que header/footer queden fijos y SOLO el modal-body haga scroll. */
#livewire-ui-modal.modal .modal-content {
    max-height: calc(100dvh - 3.5rem);
    overflow: hidden;
}
#livewire-ui-modal.modal .modal-content > div,
#livewire-ui-modal.modal .modal-content > div > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
#livewire-ui-modal.modal .modal-header,
#livewire-ui-modal.modal .modal-footer {
    flex: 0 0 auto;
}
#livewire-ui-modal.modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* === Avatar con iniciales del profile (user-profile-layout) ===
   Reemplaza la imagen genérica cuadrada por un círculo con gradiente Vuexy
   y las iniciales del usuario. */
.profile-avatar-initial {
    width: 110px;
    height: 110px;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.04em;
    /* Color del tema (Vuexy customizer setea --bs-primary / --bs-primary-rgb).
       El 2º stop con alpha sobre el fondo blanco de la card da el degradado claro. */
    background-image: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 1) 0%, rgba(var(--bs-primary-rgb), 0.7) 100%);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.4);
    user-select: none;
}

/* === SweetAlert2 (livewire-alert) por encima de TODO ===
   El navbar fixed de Vuexy y el modal de Bootstrap tienen z-index altos, por lo
   que el toast (.swal2-container, z-index 1060 por defecto) quedaba por debajo.
   Lo elevamos por encima de navbar/modales/offcanvas. */
.swal2-container {
    z-index: 100000 !important;
}

/* === SweetAlert2: separación entre botones de confirmación ===
   Los confirms usan reverseButtons + buttonsStyling:false con clases .btn de Bootstrap
   (sin margen propio). El `me-3` del confirmButton es margin-right y, con los botones
   invertidos ([Cancel] [Confirm]), queda en el borde derecho en vez de SEPARAR los dos
   botones -> se ven pegados. Neutralizamos los márgenes ad-hoc y usamos `gap` uniforme,
   que separa correctamente sin importar el orden. */
.swal2-actions {
    gap: .75rem;
}
.swal2-actions .btn {
    margin: 0 !important;
}

/* === Elementos Primary en modo oscuro ===
   Los títulos de sección (h6), iconos (badge) y botones outline que usan el primary (verde oscuro)
   pueden ser ilegibles en modo oscuro. Forzamos el color blanco en dark mode. */
html[data-bs-theme="dark"] h6.text-primary,
html[data-bs-theme="dark"] .badge.bg-label-primary,
html[data-bs-theme="dark"] .btn-label-primary {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .btn-outline-primary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
html[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* El verde de marca (primary/success) usado como TEXTO en títulos, labels y
   acentos es ilegible sobre el fondo oscuro. En dark mode lo pasamos a blanco. */
html[data-bs-theme="dark"] .text-primary,
html[data-bs-theme="dark"] .text-success,
html[data-bs-theme="dark"] .card-title.text-primary,
html[data-bs-theme="dark"] .badge.bg-label-success {
    color: #ffffff !important;
}

/* "Label" backgrounds (bg-label-*) e iconos dentro: el texto verde de marca
   queda ilegible en dark. Lo forzamos a blanco (cubre iconos heredando color). */
html[data-bs-theme="dark"] .bg-label-primary,
html[data-bs-theme="dark"] .bg-label-success,
html[data-bs-theme="dark"] .bg-label-primary i,
html[data-bs-theme="dark"] .bg-label-success i {
    color: #ffffff !important;
}

/* Estados HOVER/FOCUS/ACTIVE que Vuexy pinta de verde (primary) y que en dark
   se vuelven invisibles: nav-pills del panel "Machine Setup", nav-links y
   breadcrumbs del navbar de las vistas edit/show. Todo a blanco. */
html[data-bs-theme="dark"] .nav-pills .nav-link.active,
html[data-bs-theme="dark"] .nav-pills .nav-link.active .text-primary,
html[data-bs-theme="dark"] .nav-link:hover,
html[data-bs-theme="dark"] .nav-link:focus,
html[data-bs-theme="dark"] .nav-link.active,
html[data-bs-theme="dark"] .nav-link:hover i,
html[data-bs-theme="dark"] .nav-link:focus i,
html[data-bs-theme="dark"] .breadcrumb-item a,
html[data-bs-theme="dark"] .breadcrumb-item a:hover,
html[data-bs-theme="dark"] .breadcrumb-item.active,
html[data-bs-theme="dark"] a.text-primary:hover,
html[data-bs-theme="dark"] a:hover > .text-primary {
    color: #ffffff !important;
}
/* Links del breadcrumb NO seleccionados: blanco atenuado para mantener jerarquía
   con el item activo (blanco pleno), sin quedar en verde ilegible. */
html[data-bs-theme="dark"] .breadcrumb-item:not(.active) a {
    color: rgba(255, 255, 255, 0.7) !important;
}
html[data-bs-theme="dark"] .breadcrumb-item:not(.active) a:hover {
    color: #ffffff !important;
}

/* === Host offcanvas admin (wire-elements + Vuexy) ===
   Igual que el host modal: el componente Livewire se renderiza ANIDADO dentro del
   .offcanvas (.offcanvas > [wrapper x-show] > [root componente] > offcanvas-header/body).
   Propagamos flex-column por los wrappers para que el header quede fijo y SOLO el
   offcanvas-body haga scroll. */
#livewire-ui-offcanvas > div,
#livewire-ui-offcanvas > div > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
#livewire-ui-offcanvas .offcanvas-header {
    flex: 0 0 auto;
}
#livewire-ui-offcanvas .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* === Alpine x-cloak ===
   Evita el "flash" de los pasos del wizard antes de que Alpine inicialice. */
[x-cloak] { display: none !important; }

/* === Wizard de specs (edit machine) / stepper de tickets (sale & purchase) ===
   Usa el VERDE MAIN de la app (--main-color, definido en new-style-admin.css),
   NO --bs-primary (que sigue siendo el morado por defecto de Vuexy). */
.specs-stepper .step-item { cursor: pointer; }
.specs-stepper .step-item .step-icon {
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid transparent;
    transition: all .2s ease-in-out;
}

/* Paso actual: círculo verde main relleno + realce para que se vea "activo" */
.specs-stepper .step-item.active .step-icon {
    background-color: var(--main-color, #014023) !important;
    color: #fff !important;
    border-color: var(--main-color, #014023);
    box-shadow: 0 0.25rem 0.75rem rgba(var(--main-color-rgb, 1, 64, 35), 0.4);
    transform: scale(1.08);
}

/* Pasos completados: verde main tenue con borde */
.specs-stepper .step-item.done .step-icon {
    background-color: rgba(var(--main-color-rgb, 1, 64, 35), 0.12) !important;
    color: var(--main-color, #014023) !important;
    border-color: var(--main-color, #014023);
}
html[data-bs-theme="dark"] .specs-stepper .step-item.done .step-icon { color: #fff !important; }

/* Etiqueta del paso: gris por defecto, verde main + bold en el paso actual */
.specs-stepper .step-label { color: var(--bs-secondary-color); transition: color .2s ease-in-out; }
.specs-stepper .step-item.active .step-label { color: var(--main-color, #014023); font-weight: 600 !important; }
.specs-stepper .step-item.done .step-label { color: var(--main-color, #014023); }
/* Dark: el verde main no contrasta sobre el card oscuro → texto blanco. */
html[data-bs-theme="dark"] .specs-stepper .step-item.active .step-label,
html[data-bs-theme="dark"] .specs-stepper .step-item.done .step-label { color: #fff !important; }

/* Badge numérico del paso */
.specs-stepper .step-badge { background-color: var(--bs-secondary) !important; transition: background-color .2s ease-in-out; }
.specs-stepper .step-item.active .step-badge,
.specs-stepper .step-item.done .step-badge { background-color: var(--main-color, #014023) !important; }

/* Línea conectora: gris por defecto; verde main y más gruesa hasta el paso actual */
.specs-stepper .step-line {
    height: 3px;
    border-radius: 2px;
    background-color: var(--bs-border-color);
    flex: 1 1 auto;
    transition: background-color .2s ease-in-out, height .2s ease-in-out;
}
.specs-stepper .step-line.done {
    height: 4px;
    background-color: var(--main-color, #014023);
}

/* === Campanita de notificaciones: scroll nativo ===
   Vuexy define `max-block-size` en `.dropdown-notifications-list` pero delega el scroll a
   PerfectScrollbar (no incluido en admin.js). Sin él la lista se recorta sin poder desplazarse.
   Se agrega overflow nativo para que scrollee cuando hay muchas notificaciones. */
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list {
    overflow-y: auto;
}

/* Items más compactos (menos padding vertical para que no se vean tan grandes). */
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item {
    padding-block: 0.5rem;
}

/* No leídas: acento sutil a la izquierda para destacar. */
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item:not(.marked-as-read) {
    border-inline-start: 2px solid var(--bs-danger);
}

/* Leídas: fondo más tenue para indicar que ya fueron abiertas. */
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item.marked-as-read {
    background-color: var(--bs-secondary-bg);
    opacity: 0.75;
}
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item.marked-as-read:hover {
    opacity: 1;
}

/* === Cards de selección (tipo de máquina, etc.) === */
.type-select-card { transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out; }
.type-select-card:hover { border-color: var(--bs-primary) !important; box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-primary-rgb), 0.18); }
.btn-check:focus-visible + .type-select-card { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25); }

/* === Wizard used-machine: card maestro con secciones aplanadas ===
   Dentro de .um-form-card las tarjetas de sección pierden borde, sombra, fondo y padding
   lateral/inferior → todo el formulario se lee como una sola tarjeta (la maestra). */
.um-form-card .card {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
}
.um-form-card .card > .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}