/** EXSIM Cyberpunk Dark Theme **/

/* ── CSS Variables Override ── */
body.cyberpunk-dark {
    --color1: #e0e0ff;
    --color2: #0a0e17;
    --color3: #00ffd5;
    --color4: #ff2a6d;
    --primary: #05d9e8;
    --color-secundario: #1a1a2e;
    --color-submit: #00ffd5;
    --color-hover: #ff6e27;
    --color-oscuro: #0d0d1a;
    --color-claro: #2a2a40;

    --cp-bg: #0a0e17;
    --cp-surface: #12122a;
    --cp-surface2: #1a1a2e;
    --cp-border: rgba(0, 255, 213, 0.15);
    --cp-text: #d8daf0;
    --cp-text-bright: #f0f0ff;
    --cp-text-muted: #8a8aaa;
    --cp-cyan: #00ffd5;
    --cp-pink: #ff2a6d;
    --cp-blue: #05d9e8;
    --cp-orange: #ff6e27;
    --cp-glow-cyan: 0 0 10px rgba(0, 255, 213, 0.4);
    --cp-glow-pink: 0 0 10px rgba(255, 42, 109, 0.4);
    --cp-glow-blue: 0 0 10px rgba(5, 217, 232, 0.4);
}

/* ── Body & Global ── */
body.cyberpunk-dark {
    background-color: var(--cp-bg) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark a,
body.cyberpunk-dark a:focus,
body.cyberpunk-dark a:active,
body.cyberpunk-dark .btn-link {
    color: var(--cp-cyan);
}

body.cyberpunk-dark a:hover,
body.cyberpunk-dark .btn-link:hover {
    color: var(--cp-blue);
}

body.cyberpunk-dark hr {
    border-color: var(--cp-border);
}

/* ── Scrollbar ── */
body.cyberpunk-dark ::-webkit-scrollbar-thumb,
body.cyberpunk-dark ::-webkit-scrollbar-thumb:hover {
    background-color: #2a2a50 !important;
}

body.cyberpunk-dark ::-webkit-scrollbar-track {
    background-color: var(--cp-bg);
}

/* ── Topbar ── */
body.cyberpunk-dark .topbar,
body.cyberpunk-dark .topbar-mobile {
    background-color: #0d0f1a !important;
    border-bottom: 1px solid var(--cp-border) !important;
}

body.cyberpunk-dark .topbar .infobar .nav-link,
body.cyberpunk-dark .topbar a,
body.cyberpunk-dark .topbar .togglebar a {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .topbar .infobar .flag {
    background-color: #1a1a2e;
}

body.cyberpunk-dark .topbar .infobar .infobar-icon:hover,
body.cyberpunk-dark .topbar .infobar .languagebar a:hover {
    background-color: rgba(0, 255, 213, 0.08) !important;
}

body.cyberpunk-dark .topbar .infobar .infobar-icon img {
    filter: invert(0.8) sepia(1) saturate(3) hue-rotate(140deg);
}

/* ── Sidebar ── */
body.cyberpunk-dark #sidebar-container {
    background-color: #0b0f1c !important;
    box-shadow: 2px 0 20px rgba(0, 255, 213, 0.05) !important;
}

body.cyberpunk-dark #sidebar-container .navbar-brand img {
    filter: brightness(0.9) contrast(1.1);
}

body.cyberpunk-dark #sidebar-container ul li a {
    color: var(--cp-text-muted) !important;
}

body.cyberpunk-dark #sidebar-container ul li a:hover {
    color: var(--cp-cyan) !important;
    background-color: rgba(0, 255, 213, 0.06) !important;
}

body.cyberpunk-dark #sidebar-container ul li.active>a {
    color: var(--cp-cyan) !important;
    border-left: 3px solid var(--cp-cyan);
    text-shadow: var(--cp-glow-cyan);
}

body.cyberpunk-dark #sidebar-container .sidebar-separator {
    border-color: var(--cp-border) !important;
}

/* ── Main Content Area ── */
body.cyberpunk-dark .rightbar,
body.cyberpunk-dark .central_area,
body.cyberpunk-dark #maincontent {
    background-color: var(--cp-bg) !important;
}

/* ── Cards ── */
body.cyberpunk-dark .card {
    background-color: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .card-header,
body.cyberpunk-dark .panel-default>.card-header {
    background-color: var(--cp-surface2) !important;
    border-bottom: 1px solid var(--cp-border) !important;
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark .card-body {
    background-color: var(--cp-surface) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .card-footer {
    background-color: var(--cp-surface2) !important;
    border-top: 1px solid var(--cp-border) !important;
}

/* ── Tabs ── */
body.cyberpunk-dark .tab-pane {
    background: var(--cp-surface) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .nav-tabs {
    border-bottom-color: var(--cp-border) !important;
}

body.cyberpunk-dark .nav-tabs .nav-link {
    color: var(--cp-text-muted) !important;
}

body.cyberpunk-dark .nav-tabs .nav-link:hover {
    border-color: var(--cp-border) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .nav-tabs .nav-link.active,
body.cyberpunk-dark .nav-tabs>li.active>a {
    background-color: var(--cp-surface) !important;
    border-color: var(--cp-border) var(--cp-border) var(--cp-surface) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .nav-pills .nav-link {
    background-color: rgba(255, 42, 109, 0.1) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .nav-pills .nav-link.active,
body.cyberpunk-dark .nav-pills .show>.nav-link,
body.cyberpunk-dark #projects .nav-pills .nav-link:hover {
    background-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
    box-shadow: var(--cp-glow-cyan);
}

body.cyberpunk-dark #projects .nav-pills li a {
    background: var(--cp-surface2) !important;
    color: var(--cp-text) !important;
}

/* ── Tables & DataTables ── */
body.cyberpunk-dark table,
body.cyberpunk-dark table td,
body.cyberpunk-dark table tbody {
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark table thead th,
body.cyberpunk-dark table.dataTable thead th {
    background-color: var(--cp-surface2) !important;
    color: var(--cp-cyan) !important;
    border-bottom-color: var(--cp-border) !important;
}

body.cyberpunk-dark table tbody tr {
    background-color: var(--cp-surface) !important;
}

body.cyberpunk-dark table tbody tr:nth-child(even),
body.cyberpunk-dark table.dataTable tbody tr:nth-child(even) {
    background-color: rgba(18, 18, 42, 0.7) !important;
}

body.cyberpunk-dark table tbody tr:hover,
body.cyberpunk-dark table.dataTable tbody tr:hover {
    background-color: rgba(0, 255, 213, 0.06) !important;
}

body.cyberpunk-dark table td,
body.cyberpunk-dark table th {
    border-color: var(--cp-border) !important;
}

body.cyberpunk-dark .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button,
body.cyberpunk-dark .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button:hover {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button:hover {
    background-color: var(--cp-surface2) !important;
}

body.cyberpunk-dark .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.current,
body.cyberpunk-dark .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.current:hover {
    color: var(--cp-bg) !important;
    background-color: var(--cp-cyan) !important;
    border-color: var(--cp-cyan) !important;
    box-shadow: var(--cp-glow-cyan);
}

body.cyberpunk-dark .dataTables_info,
body.cyberpunk-dark .dataTables_length,
body.cyberpunk-dark .dataTables_filter,
body.cyberpunk-dark .dataTables_wrapper label {
    color: var(--cp-text-muted) !important;
}

body.cyberpunk-dark td.row-editable {
    background-color: rgba(0, 255, 213, 0.08) !important;
}

body.cyberpunk-dark td.row-editable:hover {
    background-color: rgba(0, 255, 213, 0.15) !important;
}

body.cyberpunk-dark .DTE_Field_InputControl .form-control {
    background-color: rgba(5, 217, 232, 0.15) !important;
    color: var(--cp-text-bright) !important;
}

/* ── Buttons ── */
body.cyberpunk-dark .btn-primary,
body.cyberpunk-dark .btn-primary svg {
    background-color: var(--cp-cyan) !important;
    border-color: var(--cp-cyan) !important;
    color: #0a0e17 !important;
    fill: #0a0e17 !important;
    box-shadow: var(--cp-glow-cyan);
}

body.cyberpunk-dark .btn-primary:hover,
body.cyberpunk-dark .btn-primary:hover svg {
    background-color: #00e6bf !important;
    color: #0a0e17 !important;
    fill: #0a0e17 !important;
    box-shadow: 0 0 20px rgba(0, 255, 213, 0.6);
}

body.cyberpunk-dark .btn-secondary {
    background-color: var(--cp-surface2) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .btn-secondary:hover {
    background-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
    box-shadow: var(--cp-glow-cyan);
}

body.cyberpunk-dark .btn-secondary:disabled,
body.cyberpunk-dark .btn-secondary:disabled:hover {
    color: var(--cp-text-muted) !important;
    background-color: var(--cp-surface2) !important;
    box-shadow: none !important;
}

body.cyberpunk-dark .btn-success {
    background-color: #00cc88 !important;
    border-color: #00cc88 !important;
    box-shadow: 0 0 10px rgba(0, 204, 136, 0.4);
}

body.cyberpunk-dark .btn-danger {
    background-color: var(--cp-pink) !important;
    border-color: var(--cp-pink) !important;
    box-shadow: var(--cp-glow-pink);
}

body.cyberpunk-dark .btn-warning {
    background-color: var(--cp-orange) !important;
    border-color: var(--cp-orange) !important;
    color: #fff !important;
}

body.cyberpunk-dark .btn-info {
    background-color: var(--cp-blue) !important;
    border-color: var(--cp-blue) !important;
    color: var(--cp-bg) !important;
    box-shadow: var(--cp-glow-blue);
}

body.cyberpunk-dark .btn-outline-primary {
    color: var(--cp-cyan) !important;
    border-color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .btn-outline-primary:hover {
    background-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
}

/* ── Forms ── */
body.cyberpunk-dark .form-control,
body.cyberpunk-dark input[type="text"],
body.cyberpunk-dark input[type="number"],
body.cyberpunk-dark input[type="email"],
body.cyberpunk-dark input[type="password"],
body.cyberpunk-dark select,
body.cyberpunk-dark textarea {
    background-color: var(--cp-surface2) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark .form-control:focus,
body.cyberpunk-dark input:focus,
body.cyberpunk-dark select:focus,
body.cyberpunk-dark textarea:focus {
    border-color: var(--cp-cyan) !important;
    box-shadow: var(--cp-glow-cyan) !important;
    background-color: var(--cp-surface) !important;
}

body.cyberpunk-dark .form-control::placeholder {
    color: var(--cp-text-muted) !important;
}

body.cyberpunk-dark .custom-select {
    background-color: var(--cp-surface2) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-text) !important;
}

/* ── Dropdowns ── */
body.cyberpunk-dark .dropdown-menu {
    background-color: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.cyberpunk-dark .dropdown-item {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .dropdown-item:hover,
body.cyberpunk-dark .dropdown-item:focus {
    background-color: rgba(0, 255, 213, 0.08) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .dropdown-divider {
    border-color: var(--cp-border) !important;
}

/* ── Modals ── */
body.cyberpunk-dark .modal-content {
    background-color: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .modal-header {
    background-color: var(--cp-surface2) !important;
    border-bottom-color: var(--cp-border) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .modal-header .close,
body.cyberpunk-dark .modal-header button {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .modal-footer {
    border-top-color: var(--cp-border) !important;
}

body.cyberpunk-dark .modal-body {
    color: var(--cp-text) !important;
}

/* ── Alerts ── */
body.cyberpunk-dark .alert-info {
    background-color: rgba(5, 217, 232, 0.12) !important;
    border-color: rgba(5, 217, 232, 0.25) !important;
    color: var(--cp-blue) !important;
}

body.cyberpunk-dark .alert-warning {
    background-color: rgba(255, 110, 39, 0.12) !important;
    border-color: rgba(255, 110, 39, 0.25) !important;
    color: var(--cp-orange) !important;
}

body.cyberpunk-dark .alert-danger {
    background-color: rgba(255, 42, 109, 0.12) !important;
    border-color: rgba(255, 42, 109, 0.25) !important;
    color: var(--cp-pink) !important;
}

body.cyberpunk-dark .alert-success {
    background-color: rgba(0, 204, 136, 0.12) !important;
    border-color: rgba(0, 204, 136, 0.25) !important;
    color: #00cc88 !important;
}

/* ── Projects / Contact sections ── */
body.cyberpunk-dark #projects {
    background: var(--cp-surface) !important;
}

body.cyberpunk-dark #projects .text-center {
    background-color: var(--cp-surface2) !important;
}

body.cyberpunk-dark #contact.page-section {
    background: var(--cp-surface2) !important;
}

body.cyberpunk-dark #contact.page-section a {
    background: var(--cp-surface) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark #contact.page-section p {
    color: var(--cp-text) !important;
}

/* ── Text classes ── */
body.cyberpunk-dark .text-primary {
    color: #39ff14 !important;
}

body.cyberpunk-dark .text-secondary {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .text-muted {
    color: var(--cp-text-muted) !important;
}

body.cyberpunk-dark .text-dark {
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark .text-white {
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark h1,
body.cyberpunk-dark h2,
body.cyberpunk-dark h3,
body.cyberpunk-dark h4,
body.cyberpunk-dark h5,
body.cyberpunk-dark h6 {
    color: var(--cp-text-bright) !important;
}

body.cyberpunk-dark .enhance {
    color: var(--cp-cyan) !important;
}

/* ── Badges & Labels ── */
body.cyberpunk-dark .badge-primary {
    background-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
}

body.cyberpunk-dark .badge-secondary {
    background-color: var(--cp-surface2) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .badge-danger {
    background-color: var(--cp-pink) !important;
}

/* ── Backgrounds ── */
body.cyberpunk-dark .bg-white,
body.cyberpunk-dark .bg-light {
    background-color: var(--cp-surface) !important;
}

body.cyberpunk-dark .bg-login_form {
    background-color: var(--cp-surface) !important;
    border-right: 0;
}

/* ── Fieldsets ── */
body.cyberpunk-dark fieldset {
    border-color: var(--cp-border) !important;
}

body.cyberpunk-dark fieldset legend {
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark fieldset a,
body.cyberpunk-dark fieldset a:hover {
    color: var(--cp-cyan) !important;
}

/* ── Progress bars ── */
body.cyberpunk-dark .progress {
    background-color: var(--cp-surface2) !important;
}

body.cyberpunk-dark .progress-bar {
    background-color: var(--cp-cyan) !important;
    box-shadow: var(--cp-glow-cyan);
}

/* ── List Groups ── */
body.cyberpunk-dark .list-group-item {
    background-color: var(--cp-surface) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .list-group-item.active {
    background-color: var(--cp-cyan) !important;
    border-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
}

/* ── Borders & Separators ── */
body.cyberpunk-dark .border,
body.cyberpunk-dark .border-top,
body.cyberpunk-dark .border-bottom,
body.cyberpunk-dark .border-left,
body.cyberpunk-dark .border-right {
    border-color: var(--cp-border) !important;
}

/* ── Engine Progress Overlay ── */
body.cyberpunk-dark .engine-progress-overlay {
    background-color: rgba(10, 14, 23, 0.95) !important;
}

body.cyberpunk-dark .engine-progress-overlay .progress-bar {
    background-color: var(--cp-cyan) !important;
}

/* ── Cyberpunk Toggle Button ── */
#cyberpunk-toggle {
    color: #555 !important;
    transition: color 0.3s ease;
}

#cyberpunk-toggle:hover {
    color: yellow !important;
}

body.cyberpunk-dark #cyberpunk-toggle {
    color: var(--cp-cyan) !important;
    filter: drop-shadow(0 0 6px rgba(0, 255, 213, 0.6));
}

body.cyberpunk-dark #cyberpunk-toggle:hover {
    color: var(--cp-pink) !important;
    filter: drop-shadow(0 0 6px rgba(255, 42, 109, 0.6));
}

/* ── Neon accents & Glow effects ── */
body.cyberpunk-dark .card:hover {
    border-color: rgba(0, 255, 213, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 255, 213, 0.08);
}

body.cyberpunk-dark .modal-header {
    border-bottom: 1px solid var(--cp-cyan) !important;
    box-shadow: 0 1px 15px rgba(0, 255, 213, 0.1);
}

/* Subtle scanline effect on the background */
body.cyberpunk-dark::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 213, 0.01) 2px,
            rgba(0, 255, 213, 0.01) 4px);
}

/* ── Login Page ── */
body.cyberpunk-dark .login-heading,
body.cyberpunk-dark .login .form-label-group input:not(:placeholder-shown)~label,
body.cyberpunk-dark .login label,
body.cyberpunk-dark .pass_show .ptxt {
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .login .card {
    background-color: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
}

/* ── jQuery UI ── */
body.cyberpunk-dark .ui-widget-content {
    background-color: var(--cp-surface) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-text) !important;
}

body.cyberpunk-dark .ui-widget-header {
    background-color: var(--cp-surface2) !important;
    border-color: var(--cp-border) !important;
    color: var(--cp-cyan) !important;
}

body.cyberpunk-dark .ui-state-active {
    background-color: var(--cp-cyan) !important;
    color: var(--cp-bg) !important;
}

/* ── Hover effect on editable table cells ── */
body.cyberpunk-dark #tablepricing tbody td:nth-child(3):hover,
body.cyberpunk-dark #tablepricing tbody td:nth-child(4):hover,
body.cyberpunk-dark #tabledistributor tbody td:nth-child(2):hover,
body.cyberpunk-dark #tabledistributor tbody td:nth-child(3):hover,
body.cyberpunk-dark #tabledemand tbody td:nth-child(2):hover {
    background-color: rgba(0, 255, 213, 0.1) !important;
}

/* ── Tooltip ── */
body.cyberpunk-dark .tooltip-inner {
    background-color: var(--cp-surface2) !important;
    color: var(--cp-text) !important;
    border: 1px solid var(--cp-border);
}

/* ── Print reset ── */
@media print {
    body.cyberpunk-dark {
        background-color: #fff !important;
        color: #000 !important;
    }

    body.cyberpunk-dark::after {
        display: none !important;
    }

    body.cyberpunk-dark .card,
    body.cyberpunk-dark table,
    body.cyberpunk-dark .tab-pane {
        background-color: #fff !important;
        color: #000 !important;
        border-color: #ccc !important;
    }
}