/* Dark Mode Styles - Colors Only */

/* CSS Variables */
:root {
    --color-bg-body: #dcdcdc;
    --color-bg-main: #f4f4f4;
    --color-text-main: #282828;
    --color-text-muted: #7f7f7f;
    --color-link: #0865b5;
    --color-link-hover: #268ce3;
    --color-border: #d6d6d6;
    --color-hr: #e4e4e4;
}

[data-theme="dark"] {
    --color-bg-body: #1a1a1a;
    --color-bg-main: #2d2d2d;
    --color-text-main: #e0e0e0;
    --color-text-muted: #b0b0b0;
    --color-link: #64b5f6;
    --color-link-hover: #90caf9;
    --color-border: #404040;
    --color-hr: #404040;
}

/* Apply color variables to body - DARK MODE ONLY */
[data-theme="dark"] body {
    color: var(--color-text-main) !important;
    background-color: var(--color-bg-body) !important;
}

/* Apply to main content area - DARK MODE ONLY */
[data-theme="dark"] #main {
    background-color: var(--color-bg-main) !important;
}

/* Links - DARK MODE ONLY (only in content areas, NOT footer or menus) */
[data-theme="dark"] #content a,
[data-theme="dark"] #content a:visited,
[data-theme="dark"] #maintext a,
[data-theme="dark"] #maintext a:visited {
    color: var(--color-link) !important;
}

[data-theme="dark"] #content a:hover,
[data-theme="dark"] #maintext a:hover {
    color: var(--color-link-hover) !important;
}

/* Headings - DARK MODE ONLY */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text-muted) !important;
}

/* HR elements - DARK MODE ONLY */
[data-theme="dark"] hr {
    background-color: var(--color-hr) !important;
    color: var(--color-border) !important;
}

/* Hide background images in dark mode */
[data-theme="dark"] #header {
    background-image: none !important;
    background-color: #2d2d2d !important;
}

[data-theme="dark"] #mainmenu {
    background-image: none !important;
    background-color: #333333 !important;
}

[data-theme="dark"] #content-inner-sidebar {
    background-image: none !important;
}

/* Dropdown Menu Colors - DARK MODE ONLY */
[data-theme="dark"] #menu ul {
    background-color: #3a3a3a !important;
}

[data-theme="dark"] #menu li ul a,
[data-theme="dark"] #menu li ul a:visited {
    color: #e0e0e0 !important;
}

[data-theme="dark"] #menu li ul a:hover {
    color: #ffffff !important;
    background-color: #4a4a4a !important;
}

[data-theme="dark"] #mainmenu ul li {
    color: #e0e0e0 !important;
}

[data-theme="dark"] #mainmenu ul li a,
[data-theme="dark"] #mainmenu ul li a:visited {
    color: #e0e0e0 !important;
}

[data-theme="dark"] #mainmenu ul li a:hover {
    color: #ffffff !important;
}

/* Fix for .bgwhite class in dark mode */
[data-theme="dark"] .bgwhite {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* jQuery UI Tabs - DARK MODE */
[data-theme="dark"] #tabs {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-nav {
    background-color: #333333 !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-nav li {
    background-color: #1a1a1a !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background-color: #3a3a3a !important;
    border-bottom-color: #2d2d2d !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-nav li a {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: var(--color-text-main) !important;
}

[data-theme="dark"] .ui-tabs .ui-tabs-panel {
    background-color: #2d2d2d !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
}

/* Screenshot tab headers - DARK MODE */
[data-theme="dark"] #iphoneheader,
[data-theme="dark"] #ipadheader,
[data-theme="dark"] #androidheader,
[data-theme="dark"] #ipadvideo {
    background-color: #2d2d2d !important;
}

/* Navigation slides - DARK MODE */
[data-theme="dark"] #nav-slide,
[data-theme="dark"] #nav-slide1,
[data-theme="dark"] #nav-slide2 {
    background-color: #4a4a4a !important;
    border-color: var(--color-border) !important;
}

/* Screenshot cycle containers - DARK MODE */
[data-theme="dark"] .cycle {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] #con-cycle,
[data-theme="dark"] #con-cycle1,
[data-theme="dark"] #con-cycle2 {
    background-color: #2d2d2d !important;
}

/* Additional overrides for jQuery UI widgets - DARK MODE */
[data-theme="dark"] .ui-widget-content {
    background-color: #2d2d2d !important;
    background-image: none !important;
}

[data-theme="dark"] .ui-widget {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .ui-corner-all {
    background-color: #2d2d2d !important;
}

/* Fix for jQuery UI Header Background (Tab Bar) - DARK MODE */
[data-theme="dark"] .ui-widget-header {
    background-color: #333333 !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
}

/* Pricing/Product boxes - DARK MODE */
[data-theme="dark"] #pricing-boxe,
[data-theme="dark"] #MainContent_product_table {
    background-color: #2d2d2d !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .row {
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .col1,
[data-theme="dark"] .col2,
[data-theme="dark"] .col3 {
    background-color: transparent !important;
    color: var(--color-text-main) !important;
}

[data-theme="dark"] .col2 {
    background-image: none !important;
}

[data-theme="dark"] .col3 {
    background-color: #333333 !important;
    background-image: none !important;
}

/* Box grey elements - DARK MODE */
[data-theme="dark"] .box-grey {
    background-color: #333333 !important;
}

[data-theme="dark"] .box-grey-text {
    color: var(--color-text-muted) !important;
}

/* Buttons - DARK MODE */
[data-theme="dark"] .button,
[data-theme="dark"] .button-alt,
[data-theme="dark"] .buttonsmall {
    background-color: #1565c0 !important;
    background-image: none !important;
    color: #ffffff !important;
}

[data-theme="dark"] .button2,
[data-theme="dark"] .buttongreysmall {
    background-color: #555555 !important;
    background-image: none !important;
    color: #ffffff !important;
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .button-alt:hover,
[data-theme="dark"] .button2:hover,
[data-theme="dark"] .buttonsmall:hover,
[data-theme="dark"] .buttongreysmall:hover {
    background-color: #1976d2 !important;
}

/* Tables - DARK MODE */
[data-theme="dark"] table {
    color: var(--color-text-main) !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    border-color: var(--color-border) !important;
}

/* Price and special text - DARK MODE */
[data-theme="dark"] .price,
[data-theme="dark"] .boxtitle-hosting {
    color: var(--color-text-main) !important;
}

/* UI State elements - DARK MODE */
[data-theme="dark"] .ui-state-default,
[data-theme="dark"] .ui-widget-content .ui-state-default,
[data-theme="dark"] .ui-widget-header .ui-state-default {
    background-color: #3a3a3a !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
}

[data-theme="dark"] .ui-state-hover,
[data-theme="dark"] .ui-widget-content .ui-state-hover,
[data-theme="dark"] .ui-state-focus,
[data-theme="dark"] .ui-widget-content .ui-state-focus {
    background-color: #4a4a4a !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
}

[data-theme="dark"] .ui-state-active,
[data-theme="dark"] .ui-widget-content .ui-state-active {
    background-color: #2d2d2d !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-main) !important;
}

/* Pager elements - DARK MODE */
[data-theme="dark"] #pager,
[data-theme="dark"] #pager1,
[data-theme="dark"] #pager2 {
    background-color: transparent !important;
}

[data-theme="dark"] #pager a,
[data-theme="dark"] #pager1 a,
[data-theme="dark"] #pager2 a {
    background-color: #4a4a4a !important;
    color: var(--color-text-main) !important;
}

[data-theme="dark"] #pager a.activeSlide,
[data-theme="dark"] #pager1 a.activeSlide,
[data-theme="dark"] #pager2 a.activeSlide {
    background-color: #1565c0 !important;
    color: #ffffff !important;
}