/* ==========================================================================
   Inspinia 2.7 Admin Template - Dark Mode Theme Overrides
   Sistema Livaur Ecosystem
   ========================================================================== */

/* 1. Root & Document Level Anti-Flicker Base */
html.dark-mode,
html.dark-mode body {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* 2. Wrappers & Main Layout Regions */
html.dark-mode #wrapper {
    background-color: #0f172a !important;
}

html.dark-mode #page-wrapper,
html.dark-mode .gray-bg {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

html.dark-mode .white-bg {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* 3. Page Heading Header & Breadcrumb */
html.dark-mode .page-heading {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-heading h2,
html.dark-mode .page-heading strong {
    color: #f8fafc !important;
}

html.dark-mode .page-heading .breadcrumb {
    background-color: transparent !important;
}

html.dark-mode .page-heading .breadcrumb > li > a {
    color: #38bdf8 !important;
}

html.dark-mode .page-heading .breadcrumb > .active {
    color: #94a3b8 !important;
}

/* 4. Top Navigation Bar */
html.dark-mode .navbar-static-top {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

html.dark-mode .navbar-top-links li a {
    color: #cbd5e1 !important;
}

html.dark-mode .navbar-top-links li a:hover,
html.dark-mode .navbar-top-links li a:focus {
    background-color: #334155 !important;
    color: #ffffff !important;
}

html.dark-mode .welcome-message {
    color: #94a3b8 !important;
}

/* 5. Sidebar Navigation Menu */
html.dark-mode .navbar-default.navbar-static-side,
html.dark-mode #side-menu {
    background-color: #0b0f19 !important;
    border-right: 1px solid #1e293b !important;
}

html.dark-mode .nav-header {
    background-color: #1e293b !important;
    background-image: none !important;
}

html.dark-mode .nav-header a {
    color: #f8fafc !important;
}

html.dark-mode .nav-header .text-muted {
    color: #94a3b8 !important;
}

html.dark-mode .metismenu > li > a {
    color: #94a3b8 !important;
}

html.dark-mode .metismenu > li > a:hover,
html.dark-mode .metismenu > li > a:focus,
html.dark-mode .metismenu > li.active > a {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

html.dark-mode .metismenu > li.active {
    border-left: 4px solid #38bdf8 !important;
}

html.dark-mode .metismenu .nav-second-level li a {
    background-color: #0b0f19 !important;
    color: #cbd5e1 !important;
}

html.dark-mode .metismenu .nav-second-level li a:hover,
html.dark-mode .metismenu .nav-second-level li.active a {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* Mini navbar state */
html.dark-mode.mini-navbar .nav-header {
    background-color: #0b0f19 !important;
}

/* 6. ibox Containers & Cards */
html.dark-mode .ibox {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .ibox-title {
    background-color: #182232 !important;
    border-bottom: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .ibox-title h5 {
    color: #f8fafc !important;
}

html.dark-mode .ibox-tools a {
    color: #94a3b8 !important;
}

html.dark-mode .ibox-tools a:hover {
    color: #f8fafc !important;
}

html.dark-mode .ibox-content {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark-mode .ibox-footer {
    background-color: #182232 !important;
    border-top: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

/* 7. Typography & Basic Elements */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #f8fafc !important;
}

html.dark-mode hr {
    border-color: #334155 !important;
}

html.dark-mode .well {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

/* 8. Form Controls & Inputs */
html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .input-group-addon {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .form-control:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

html.dark-mode .form-control::placeholder {
    color: #64748b !important;
}

html.dark-mode label,
html.dark-mode .control-label {
    color: #e2e8f0 !important;
}

/* 9. Tables & DataTables */
html.dark-mode .table {
    color: #cbd5e1 !important;
    background-color: #1e293b !important;
}

html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .table > tfoot > tr > th {
    background-color: #182232 !important;
    color: #f8fafc !important;
    border-bottom: 2px solid #334155 !important;
    border-top: 1px solid #334155 !important;
}

html.dark-mode .table > thead > tr > td,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tfoot > tr > td {
    border-top: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

html.dark-mode .table-bordered,
html.dark-mode .table-bordered > thead > tr > th,
html.dark-mode .table-bordered > tbody > tr > th,
html.dark-mode .table-bordered > tfoot > tr > th,
html.dark-mode .table-bordered > thead > tr > td,
html.dark-mode .table-bordered > tbody > tr > td,
html.dark-mode .table-bordered > tfoot > tr > td {
    border: 1px solid #334155 !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #162032 !important;
}

html.dark-mode .table-hover > tbody > tr:hover {
    background-color: #24334a !important;
    color: #ffffff !important;
}

/* 10. Buttons & Interactive Controls */
html.dark-mode .btn-default,
html.dark-mode .btn-white {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html.dark-mode .btn-default:hover,
html.dark-mode .btn-white:hover,
html.dark-mode .btn-default:focus,
html.dark-mode .btn-white:focus {
    background-color: #475569 !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

/* 11. Dropdowns, Modals & Footers */
html.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-menu > li > a {
    color: #cbd5e1 !important;
}

html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
    background-color: #334155 !important;
    color: #ffffff !important;
}

html.dark-mode .dropdown-divider,
html.dark-mode .dropdown-menu .divider {
    background-color: #334155 !important;
}

html.dark-mode .modal-content {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .modal-header {
    border-bottom: 1px solid #334155 !important;
    background-color: #182232 !important;
    color: #f8fafc !important;
}

html.dark-mode .modal-footer {
    border-top: 1px solid #334155 !important;
    background-color: #182232 !important;
}

html.dark-mode .footer {
    background-color: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    color: #94a3b8 !important;
}

/* 12. Badges & Status Pills */
html.dark-mode .label-default,
html.dark-mode .badge-default {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* 13. Tabs & Panel Body Overrides */
html.dark-mode .tabs-container,
html.dark-mode .tabs-container .tab-content,
html.dark-mode .tabs-container .panel-body,
html.dark-mode .tabs-container .tab-pane,
html.dark-mode .tab-pane,
html.dark-mode .panel-body {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark-mode .tabs-container .nav-tabs {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .tabs-container .nav-tabs > li > a {
    background-color: #0f172a !important;
    border-color: transparent !important;
    color: #94a3b8 !important;
}

html.dark-mode .tabs-container .nav-tabs > li.active > a,
html.dark-mode .tabs-container .nav-tabs > li.active > a:hover,
html.dark-mode .tabs-container .nav-tabs > li.active > a:focus {
    background-color: #1e293b !important;
    border-color: #334155 #334155 #1e293b !important;
    color: #38bdf8 !important;
}

/* 14. Network Diagram & Interactive Tools Overrides */
html.dark-mode #diagrama #conector-cargas,
html.dark-mode #diagrama .linea-enlace-modem,
html.dark-mode #diagrama div[style*="background-color: black"],
html.dark-mode #diagrama div[style*="background-color:black"] {
    background-color: #64748b !important;
}

html.dark-mode .interfaz-lan div[style*="background-color: white"],
html.dark-mode .interfaz-lan div[style*="background-color:white"] {
    background-color: transparent !important;
}