/* SQiWeb Dark Mode Theme */
/* Overrides light theme with dark colors using !important for minified CSS precedence */

body.dark-mode {
    background-color: #1a1f2e !important;
    color: #c8cdd5 !important;
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
    color: #e8eaed;
}

body.dark-mode p {
    color: #c8cdd5;
}

body.dark-mode a {
    color: #4db8ff;
}

body.dark-mode a:hover {
    color: #7accff;
}

body.dark-mode small,
body.dark-mode .text-color-gray {
    color: #7a8599 !important;
}

body.dark-mode .text-color-dark {
    color: #e8eaed !important;
}

body.dark-mode .text-color-light {
    color: #fff !important;
}

body.dark-mode mark {
    color: #1a1f2e;
    background-color: #fc3;
}

/* Header */
body.dark-mode #header {
    background-color: #151a27 !important;
    border-bottom: 1px solid #2c3645;
}

body.dark-mode #header.header-shadow-scroll {
    -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

body.dark-mode #header .nav-primary > li > a {
    color: #c8cdd5;
}

body.dark-mode #header .nav-primary > li > a:hover {
    color: #fff;
}

body.dark-mode #header .nav-primary > li ul {
    background-color: #1e2433 !important;
    border: 1px solid #2c3645;
}

body.dark-mode #header .nav-primary > li ul li a {
    color: #c8cdd5 !important;
}

body.dark-mode #header .nav-primary > li ul li a:hover {
    color: #fff !important;
    background-color: #2c3645 !important;
}

body.dark-mode #header .nav-secondary > li a {
    color: #7a8599;
}

body.dark-mode #header .nav-secondary > li a:hover {
    color: #c8cdd5;
}

/* Notification bar */
body.dark-mode #notification {
    background-color: #1e2433 !important;
    border-bottom: 1px solid #2c3645;
}

body.dark-mode #notification p {
    color: #c8cdd5;
}

/* Content rows */
body.dark-mode #content > .content-row {
    background-color: #1a1f2e;
}

body.dark-mode #content > .content-row.content-row-gray {
    background-color: #151a27;
}

body.dark-mode #content > .content-row.content-row-color {
    background-color: #0098ef;
}

body.dark-mode #content > .content-row.content-row-dark {
    background-color: #0f131c;
}

body.dark-mode #content > .content-row.content-row-clouds::before,
body.dark-mode #content > .content-row.content-row-clouds::after {
    display: none;
}

/* Content headers */
body.dark-mode #content > .content-row h1,
body.dark-mode #content > .content-row h2,
body.dark-mode #content > .content-row h3,
body.dark-mode #content > .content-row h4,
body.dark-mode #content > .content-row h5 {
    color: #e8eaed;
}

body.dark-mode #content > .content-row p {
    color: #c8cdd5;
}

body.dark-mode #content > .content-row.content-row-color h1,
body.dark-mode #content > .content-row.content-row-color h2,
body.dark-mode #content > .content-row.content-row-color h3,
body.dark-mode #content > .content-row.content-row-color h4,
body.dark-mode #content > .content-row.content-row-color p,
body.dark-mode #content > .content-row.content-row-color mark {
    color: #fff;
}

/* Cards & boxes */
body.dark-mode .product-box,
body.dark-mode .content-box,
body.dark-mode .feature-box .feature-content,
body.dark-mode .product-slider,
body.dark-mode .product-configurator {
    background-color: #1e2433 !important;
    border: 1px solid #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode .product-box .product-header h4 {
    color: #e8eaed;
}

body.dark-mode .product-box .product-header p {
    color: #7a8599;
}

body.dark-mode .product-box .product-price {
    color: #4db8ff !important;
}

body.dark-mode .product-box .product-features ul li {
    color: #c8cdd5;
}

body.dark-mode .product-box .product-popular {
    background-color: #fc3 !important;
    color: #1a1f2e !important;
}

body.dark-mode .feature-box .feature-header {
    background-color: #2c3645 !important;
}

/* Tab groups */
body.dark-mode .tab-group.tab-group-switch-style > ul {
    background-color: #1e2433 !important;
}

body.dark-mode .tab-group.tab-group-switch-style > ul li {
    color: #7a8599;
}

body.dark-mode .tab-group.tab-group-switch-style > ul li.active {
    background-color: #0098ef !important;
    color: #fff !important;
}

body.dark-mode .tab-group:not(.tab-group-switch-style) .tab-item .tab-item-title {
    background-color: #1e2433 !important;
    color: #c8cdd5;
}

body.dark-mode .tab-group:not(.tab-group-switch-style) .tab-item.active .tab-item-title {
    background-color: #0098ef !important;
    color: #fff !important;
}

body.dark-mode .tab-group:not(.tab-group-switch-style) .tab-item .tab-item-inner {
    background-color: #1a1f2e !important;
    color: #c8cdd5;
}

/* Tables */
body.dark-mode table {
    background-color: #1e2433 !important;
    border: 1px solid #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode table thead tr th {
    background-color: #151a27 !important;
    color: #7a8599;
    border-bottom: 1px solid #2c3645 !important;
}

body.dark-mode table tr td,
body.dark-mode table tr th {
    border-bottom: 1px solid #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode table tr .highlight {
    color: #4db8ff !important;
}

body.dark-mode table.table-layout-product-comparison tr.product-feature-group td {
    background-color: #151a27 !important;
}

body.dark-mode table.table-layout-product-comparison tr.product-header td p:not(.product-price) {
    color: #7a8599;
}

body.dark-mode table.table-layout-product-comparison tr.product-header td p.product-price {
    color: #4db8ff !important;
}

/* Forms */
body.dark-mode input:not(.no-custom-style):not([type="checkbox"]):not([type="radio"]),
body.dark-mode select:not(.no-custom-style),
body.dark-mode textarea:not(.no-custom-style) {
    background-color: #151a27 !important;
    border: 2px solid #2c3645 !important;
    color: #c8cdd5 !important;
}

body.dark-mode input:not(.no-custom-style):not([type="checkbox"]):not([type="radio"]):focus,
body.dark-mode select:not(.no-custom-style):focus,
body.dark-mode textarea:not(.no-custom-style):focus {
    border-color: #0098ef !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #4a5669;
}

body.dark-mode form fieldset {
    border-color: #2c3645 !important;
}

body.dark-mode form label {
    color: #c8cdd5;
}

body.dark-mode form .checkbox-style,
body.dark-mode form .radio-style {
    background-color: #151a27 !important;
    border-color: #2c3645 !important;
}

/* Buttons */
body.dark-mode button,
body.dark-mode .button {
    background-color: #1e2433 !important;
    border: 2px solid #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode button:hover,
body.dark-mode .button:hover {
    color: #fff;
    border-color: #3a4659 !important;
}

body.dark-mode button.button-primary,
body.dark-mode .button.button-primary {
    background-color: #0098ef !important;
    color: #fff !important;
    border: 0 !important;
}

body.dark-mode button.button-primary:hover,
body.dark-mode .button.button-primary:hover {
    background-color: #0078c5 !important;
}

body.dark-mode button.button-secondary,
body.dark-mode .button.button-secondary {
    background-color: #fc3 !important;
    color: #1a1f2e !important;
    border: 0 !important;
}

body.dark-mode button.button-secondary:hover,
body.dark-mode .button.button-secondary:hover {
    background-color: #e6b200 !important;
}

/* Lists */
body.dark-mode ul.list-style-nav {
    background-color: #1e2433 !important;
    border: 2px solid #2c3645 !important;
}

body.dark-mode ul.list-style-nav > li {
    border-bottom-color: #2c3645 !important;
}

body.dark-mode ul.list-style-nav > li:hover {
    background-color: #252b3b !important;
}

body.dark-mode ul.list-style-nav > li a {
    color: #c8cdd5 !important;
}

/* Blockquote */
body.dark-mode blockquote::before {
    border-color: #2c3645 !important;
}

body.dark-mode blockquote footer {
    color: #7a8599;
}

body.dark-mode hr {
    border-top-color: #2c3645 !important;
}

/* Code & Pre */
body.dark-mode code {
    background-color: rgba(255,255,255,0.1);
    color: #4db8ff;
}

body.dark-mode pre {
    background-color: #151a27 !important;
    border: 2px solid #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode .pre-code {
    background-color: #151a27 !important;
    border-color: #2c3645 !important;
}

body.dark-mode .pre-code ul {
    background-color: #1e2433 !important;
    border-right-color: #2c3645 !important;
}

body.dark-mode .pre-code ul li {
    color: #4a5669;
}

/* Testimonials */
body.dark-mode .testimonial .testimonial-content {
    background-color: #1e2433 !important;
    color: #c8cdd5;
}

body.dark-mode .testimonial .testimonial-author small {
    color: #7a8599;
}

/* Footer */
body.dark-mode .footer-dark {
    background-color: #0f131c !important;
}

body.dark-mode #footer {
    color: #7a8599;
}

body.dark-mode #footer .footer-primary h5 {
    color: #e8eaed;
}

body.dark-mode #footer .footer-primary p {
    color: #7a8599;
}

body.dark-mode #footer .footer-primary ul li a {
    color: #c8cdd5;
}

body.dark-mode #footer .footer-primary ul li a:hover {
    color: #fff;
    background-color: #1e2433 !important;
}

body.dark-mode #footer .footer-secondary:not(:first-child) {
    border-top-color: #2c3645 !important;
}

body.dark-mode .footer-gray {
    background-color: #151a27 !important;
}

/* Icons */
body.dark-mode .icon-feature,
body.dark-mode .icon-feature-inline {
    color: #4db8ff !important;
}

body.dark-mode .icon-feature-large {
    color: #4db8ff !important;
}

/* Content slider nav */
body.dark-mode #content > .content-row .content-slider > ul li {
    background-color: #2c3645;
}

body.dark-mode #content > .content-row .content-slider > ul li.active {
    background-color: #0098ef;
}

body.dark-mode #content > .content-row .content-slider > i {
    color: #7a8599;
}

body.dark-mode #content > .content-row .content-slider > i:hover {
    color: #c8cdd5;
}

/* Content sidebar dividers */
body.dark-mode #content > .content-row .column-row > .content-sidebar-left::before,
body.dark-mode #content > .content-row .column-row > .content-sidebar-right::before {
    border-color: #2c3645 !important;
}

/* Pagination */
body.dark-mode .pagination > li a {
    background-color: #1e2433 !important;
    border-color: #2c3645 !important;
    color: #c8cdd5;
}

body.dark-mode .pagination > li.active a {
    background-color: #0098ef !important;
    color: #fff !important;
}

/* Tags */
body.dark-mode ul.tags li a {
    background-color: #0098ef;
    color: #fff;
}

/* Logo swap in dark mode */
body.dark-mode #header .logo img,
body.dark-mode #nav-overlay .logo img {
    content: url('../img/logos/header-dark.png') !important;
}

/* Nav overlay (mobile) */
body.dark-mode #nav-overlay {
    background-color: #151a27 !important;
}

body.dark-mode #nav-overlay .nav-primary > li > a {
    color: #c8cdd5;
}

body.dark-mode #nav-overlay .nav-primary > li ul {
    background-color: #1e2433 !important;
}

/* Gallery */
body.dark-mode .gallery-overlay {
    background-color: rgba(15,19,28,0.95);
}

/* Dark mode toggle button */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 15px;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #e6e9ee;
    border-radius: 50%;
    color: #4a5669;
    font-size: 18px;
    transition: all 0.3s ease;
    vertical-align: middle;
}

.dark-mode-toggle:hover {
    border-color: #0098ef;
    color: #0098ef;
}

body.dark-mode .dark-mode-toggle {
    background-color: #1e2433;
    border-color: #2c3645;
    color: #fc3;
}

body.dark-mode .dark-mode-toggle:hover {
    border-color: #fc3;
}

/* Responsive: place toggle in header */
@media (max-width: 1024px) {
    .dark-mode-toggle {
        position: absolute;
        top: 15px;
        right: 60px;
        z-index: 10;
    }
}