/*
* ==========================================================================
* 0. CORRECCIONES DE TEMA (Anulaciones para Modo Claro)
* ==========================================================================
*/

/* Forzar fondo claro para el cuerpo y el contenido cuando el tema es claro */
[data-bs-theme="light"] body {
    background-color: #f5f5f9 !important;
}

/* Forzar fondo claro para la barra de navegación cuando el tema es claro */
[data-bs-theme="light"] .layout-navbar {
    background-color: #fff !important;
}

/*
* ==========================================================================
* 1. PAGINACIÓN (List.js / Bootstrap Fixes)
* ==========================================================================
*/

.pagination li a.page {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.pagination li:not(:first-child) a.page {
    margin-left: -1px;
}

.pagination li:first-child a.page {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.pagination li:last-child a.page {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination li a.page:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}

.pagination li.active a.page {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}

/*
* ==========================================================================
* 2. LAYOUT & GLOBAL
* ==========================================================================
*/

/* Asegura que el área de contenido principal siempre ocupe todo el ancho disponible */
.layout-page {
  width: 100% !important;
  max-width: none !important;
}

/*
* ==========================================================================
* 3. MODO OSCURO (Dark Mode Overrides)
* ==========================================================================
*/

/* Estilos Globales */
html.dark-style body,
[data-bs-theme="dark"] body {
    background-color: #232333;
    color: #a3a4cc;
}

/* Navbar */
html.dark-style .layout-navbar,
html.dark-style .layout-navbar .text-body,
[data-bs-theme="dark"] .layout-navbar,
[data-bs-theme="dark"] .layout-navbar .text-body {
    background-color: #2b2c40 !important;
    color: #c4c9d3 !important;
}

html.dark-style .layout-navbar .text-muted,
html.dark-style .layout-navbar a,
[data-bs-theme="dark"] .layout-navbar .text-muted,
[data-bs-theme="dark"] .layout-navbar a {
    color: #c4c9d3 !important;
}

/* Cards */
html.dark-style .card,
[data-bs-theme="dark"] .card {
    background-color: #2b2c40;
    color: #c4c9d3;
}

html.dark-style .card .card-body,
[data-bs-theme="dark"] .card .card-body {
    /* Asegura que el texto dentro de las tarjetas que no tiene un color específico sea legible */
    color: #c4c9d3;
}

html.dark-style .card-header,
html.dark-style .card-footer,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    border-color: #444564;
    background-color: transparent;
}

/* Typography & Global Colors */
html.dark-style h1, html.dark-style h2, html.dark-style h3, 
html.dark-style h4, html.dark-style h5, html.dark-style h6,
html.dark-style .h1, html.dark-style .h2, html.dark-style .h3, 
html.dark-style .h4, html.dark-style .h5, html.dark-style .h6,
html.dark-style .fw-bold,
html.dark-style .form-label,
html.dark-style th,
html.dark-style td strong,
html.dark-style .text-body,
html.dark-style .text-heading,
html.dark-style .text-muted,
html.dark-style .small,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3, 
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .fw-bold,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] th,
[data-bs-theme="dark"] td strong,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-heading,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small {
    color: #c4c9d3 !important;
}

/* Forms */
html.dark-style .form-control, 
html.dark-style .form-select,
html.dark-style .input-group-text,
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #32344c;
    border-color: #444564;
    color: #c4c9d3;
}

html.dark-style .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: #7a7b91;
}

/* Tables */
html.dark-style .table,
[data-bs-theme="dark"] .table {
    color: #c4c9d3;
    border-color: #444564;
}

html.dark-style .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    color: #c4c9d3;
    background-color: #32344c;
}

html.dark-style .table th,
[data-bs-theme="dark"] .table th {
    color: #c4c9d3 !important;
}

/* Footer */
html.dark-style .bg-footer-theme,
[data-bs-theme="dark"] .bg-footer-theme {
    background-color: #2b2c40 !important;
    color: #a3a4cc;
}

/* Dropdowns */
html.dark-style .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2b2c40;
    border-color: #444564;
}
html.dark-style .dropdown-item,
[data-bs-theme="dark"] .dropdown-item {
    color: #c4c9d3;
}
html.dark-style .dropdown-item:hover, 
html.dark-style .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item:hover, 
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #32344c;
    color: #c4c9d3;
}

/*
* ==========================================================================
* 4. COMPONENTS (Modals, Tooltips, Popovers)
* ==========================================================================
*/

/* Modals */
html.dark-style .modal-content,
[data-bs-theme="dark"] .modal-content {
    background-color: #2b2c40;
    color: #c4c9d3;
    border-color: #444564;
}

html.dark-style .modal-header,
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #444564;
}

html.dark-style .modal-footer,
[data-bs-theme="dark"] .modal-footer {
    border-top-color: #444564;
}

html.dark-style .modal-header .btn-close,
[data-bs-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tooltips */
html.dark-style .tooltip .tooltip-inner,
[data-bs-theme="dark"] .tooltip .tooltip-inner {
    background-color: #32344c;
    color: #c4c9d3;
}

html.dark-style .tooltip .tooltip-arrow::before,
[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: #32344c;
    border-bottom-color: #32344c;
    border-left-color: #32344c;
    border-right-color: #32344c;
}

/* Popovers (Específico para la tabla de nómina) */
html.dark-style .popover .table,
[data-bs-theme="dark"] .popover .table {
    color: #c4c9d3 !important; /* !important para sobreescribir estilo en línea */
}

html.dark-style .popover .table-light,
[data-bs-theme="dark"] .popover .table-light {
    --bs-table-bg: #32344c;
    --bs-table-border-color: #444564;
    --bs-table-color: #c4c9d3;
}

/*
* ==========================================================================
* 5. CHARTS & GRAPHS (Dark Mode Overrides)
* ==========================================================================
*/

/* Paleta de colores más brillantes para ApexCharts en modo oscuro */
html.dark-style .apexcharts-canvas,
[data-bs-theme="dark"] .apexcharts-canvas {
    /* Estas variables son usadas por la configuración JS de los gráficos */
    --bs-primary: #8A8DFF;
    --bs-success: #82F74F;
    --bs-info:    #34D5F5;
    --bs-warning: #FFB82B;
    --bs-danger:  #FF5F45;
    --bs-secondary: #a1acb8; /* Para ejes y etiquetas */
}

/* Asegura que el texto de los gráficos (ejes, etiquetas) sea legible */
html.dark-style .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-text {
    fill: #a1acb8;
}

html.dark-style .apexcharts-title-text,
html.dark-style .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-title-text,
[data-bs-theme="dark"] .apexcharts-legend-text {
    color: #c4c9d3 !important;
    fill: #c4c9d3 !important;
}

/* Ajustes para Tooltips */
html.dark-style .apexcharts-tooltip.apexcharts-theme-dark,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
    background: #3f415c;
    border-color: #444564;
}

html.dark-style .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
    background: #2b2c40;
    border-bottom-color: #444564;
}

/* Líneas de la cuadrícula */
html.dark-style .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-gridline {
    stroke: #444564;
}

/*
* ==========================================================================
* 6. DRAG & DROP (SortableJS)
* ==========================================================================
*/
.sortable-ghost {
    opacity: 0.4;
    background-color: rgba(105, 108, 255, 0.1); /* Color primario suave */
    border: 2px dashed #696cff;
}

html.dark-style .sortable-ghost,
[data-bs-theme="dark"] .sortable-ghost {
    background-color: rgba(105, 108, 255, 0.2);
    border-color: #696cff;
}

/* Cursor de agarre para las tarjetas en el dashboard */
#sortable-dashboard .card {
    cursor: grab;
}

#sortable-dashboard .card:active {
    cursor: grabbing;
}

/*
* ==========================================================================
* 7. FORM INPUTS FEEDBACK
* ==========================================================================
*/
.input-success-flash {
    background-color: #d1e7dd !important;
    border-color: #badbcc !important;
    transition: background-color 0.3s ease-in-out;
}
html.dark-style .input-success-flash, [data-bs-theme="dark"] .input-success-flash {
    background-color: #0f5132 !important;
    border-color: #0f5132 !important;
}