/* ==========================================================================
   Dark Theme Overrides - ERP_Admin
   Aplica cuando html tiene class="dark-mode" y/o data-bs-theme="dark".
   Bootstrap 5.3 maneja gran parte de los componentes vía data-bs-theme;
   este archivo cubre el layout propio de Admin (page/sidebar/top-row) y
   ajustes finos de paleta para mantener consistencia con ERP_Frontend.

   Paleta (igual que ERP_Frontend):
   - Body bg:           #1a1d23
   - Surface (cards):   #22262e
   - Elevated (modals): #2a2e38
   - Borders:           #3a3f4b
   - Text primary:      #e0e0e0
   - Text secondary:    #a0a0a0
   ========================================================================== */

html.dark-mode,
html.dark-mode body {
    background-color: #1a1d23;
    color: #e0e0e0;
}

/* Layout principal (MainLayout.razor) */
html.dark-mode .page {
    background-color: #1a1d23;
}

html.dark-mode main {
    background-color: #1a1d23;
}

/* Sidebar — mantiene el degradado pero más oscuro */
html.dark-mode .sidebar {
    background-image: linear-gradient(180deg, #02163d 0%, #1d0224 70%);
}

/* Top row */
html.dark-mode .top-row {
    background-color: #22262e !important;
    border-bottom: 1px solid #3a3f4b !important;
    color: #e0e0e0;
}

html.dark-mode .top-row a,
html.dark-mode .top-row .btn-link {
    color: #9bb8e3;
}

html.dark-mode .top-row a:hover,
html.dark-mode .top-row .btn-link:hover {
    color: #cfdcf2;
}

/* Botón de toggle dark mode */
html.dark-mode .dark-toggle-btn,
.dark-toggle-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

.dark-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.35);
    border-radius: 4px;
}

.dark-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mostrar luna en modo claro, sol en modo oscuro */
.dark-toggle-icon-dark { display: none; }
.dark-toggle-icon-light { display: inline; }

html.dark-mode .dark-toggle-icon-dark { display: inline; }
html.dark-mode .dark-toggle-icon-light { display: none; }

/* Links / botones genéricos */
html.dark-mode a {
    color: #6ea8fe;
}

html.dark-mode a:hover {
    color: #9bc4ff;
}

html.dark-mode .btn-link {
    color: #6ea8fe;
}

html.dark-mode .btn-primary {
    background-color: #1f5fa8;
    border-color: #1a528f;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
    background-color: #2570c1;
    border-color: #1f5fa8;
}

/* Cards / contenedores Bootstrap (refuerzo además de data-bs-theme) */
html.dark-mode .card {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .card-header,
html.dark-mode .card-footer {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

/* Tablas */
html.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e0e0e0;
    --bs-table-striped-bg: #252930;
    --bs-table-striped-color: #e0e0e0;
    --bs-table-hover-bg: #2e333b;
    --bs-table-hover-color: #ffffff;
    --bs-table-border-color: #3a3f4b;
    color: #e0e0e0;
    border-color: #3a3f4b;
}

html.dark-mode .table thead th,
html.dark-mode .table > :not(caption) > * > * {
    border-color: #3a3f4b;
    background-color: transparent;
    color: #e0e0e0;
}

/* Forms */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #2a2e38;
    border-color: #5b8def;
    color: #e0e0e0;
    box-shadow: 0 0 0 0.2rem rgba(91, 141, 239, 0.25);
}

html.dark-mode .form-control::placeholder {
    color: #808080;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-select:disabled {
    background-color: #1f2229;
    color: #808080;
}

html.dark-mode .form-label {
    color: #e0e0e0;
}

html.dark-mode .form-check-input {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

html.dark-mode .form-check-input:checked {
    background-color: #1f5fa8;
    border-color: #1f5fa8;
}

html.dark-mode .input-group-text {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

/* Modales */
html.dark-mode .modal-content {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #3a3f4b;
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

html.dark-mode .dropdown-item {
    color: #e0e0e0;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: #3a3f4b;
    color: #ffffff;
}

html.dark-mode .dropdown-divider {
    border-color: #3a3f4b;
}

/* Alertas */
html.dark-mode .alert-warning {
    background-color: #4a3d1d;
    border-color: #6b5826;
    color: #ffe7a3;
}

html.dark-mode .alert-danger {
    background-color: #4a1d22;
    border-color: #6b262d;
    color: #ffadb4;
}

html.dark-mode .alert-success {
    background-color: #1e3d27;
    border-color: #275532;
    color: #a3e6b4;
}

html.dark-mode .alert-info {
    background-color: #1d3a4a;
    border-color: #26536b;
    color: #a3d6ff;
}

/* Listas y borders */
html.dark-mode .list-group-item {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode hr {
    border-color: #3a3f4b;
}

/* Scrollbar (WebKit) */
html.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #1a1d23;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 5px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a505d;
}

/* Validation states */
html.dark-mode .valid.modified:not([type=checkbox]) {
    outline-color: #2d8047;
}

html.dark-mode .invalid {
    outline-color: #c42b2b;
}

html.dark-mode .validation-message {
    color: #ff7b7b;
}

/* Badges */
html.dark-mode .badge.bg-light {
    background-color: #3a3f4b !important;
    color: #e0e0e0 !important;
}

/* Pre/Code blocks — bg-light queda blanco en dark mode (Bootstrap no
   redefine --bs-light-rgb), causando texto claro sobre fondo claro.
   Forzamos surface oscuro y texto legible. */
html.dark-mode pre.bg-light,
html.dark-mode pre {
    background-color: #1a1d23 !important;
    color: #d4d4d4 !important;
    border: 1px solid #3a3f4b;
}

html.dark-mode code {
    color: #f08d8d;
    background-color: #2a2e38;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

html.dark-mode pre code {
    color: inherit;
    background-color: transparent;
    padding: 0;
}

/* Pagination */
html.dark-mode .page-link {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #6ea8fe;
}

html.dark-mode .page-link:hover {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #9bc4ff;
}

html.dark-mode .page-item.active .page-link {
    background-color: #1f5fa8;
    border-color: #1f5fa8;
    color: #ffffff;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: #1f2229;
    border-color: #3a3f4b;
    color: #6c757d;
}