/* ================================
   MCT Live Dark Mode CSS
   Based on Designer Screenshots
   ================================ */

/* CSS Variables for Dark Mode - EXACT ORIGINAL FROM MCT-535 */
:root {
    /* Dark Mode Color Palette - EXACT from your original file */
    --dark-bg-primary: #0b132b;          /* Main background - exact original */
    --dark-bg-secondary: #18213c;        /* Secondary areas - lighter navy */
    --dark-bg-accent: #18213c;           /* Table headers and form areas */
    --dark-bg-hover: #4a5a78;            /* Hover state */
    
    /* Premium gradient backgrounds - using EXACT ORIGINAL colors */
    --dark-gradient-primary: linear-gradient(135deg, #0b132b 0%, #18213c 100%);
    --dark-gradient-secondary: linear-gradient(135deg, #18213c 0%, #1e2738 100%);
    --dark-gradient-accent: linear-gradient(135deg, #18213c 0%, #2a3a5c 100%);
    --dark-gradient-hover: linear-gradient(135deg, #4a5a78 0%, #5a6a88 100%);
    
    /* Text colors - softer for reduced eye strain */
    --dark-text-primary: #e0e0e0;        /* Soft off-white - comfortable but readable */
    --dark-text-secondary: #d0d0d0;      /* Slightly dimmer for secondary text */
    --dark-text-muted: #b8b8b8;
    
    /* Orange colors - EXACT ORIGINAL */
    --dark-accent-orange: #ff8c42;       /* Orange from table highlights in screenshot */
    --dark-accent-orange-light: #ffb366; /* Lighter orange variant */
    --dark-accent-orange-dark: #e67c00;  /* Darker orange variant */
    --dark-accent-orange-glow: rgba(255, 140, 66, 0.3); /* Glow effect */
    
    /* Blue accent - EXACT ORIGINAL */
    --dark-accent-blue: #081fbd;         /* EXACT: Blue for selected buttons */
    --dark-accent-blue-light: #6fb3ff;   
    --dark-accent-blue-dark: #2d85e8;
    --dark-accent-blue-glow: rgba(8, 31, 189, 0.25);
    
    /* Semantic colors - EXACT ORIGINAL */
    --dark-success: #28a745;
    --dark-success-glow: rgba(40, 167, 69, 0.2);
    --dark-error: #dc3545;
    --dark-error-glow: rgba(220, 53, 69, 0.2);
    --dark-warning: #ffc107;
    --dark-info: #60a5fa;
    
    /* Border colors - EXACT ORIGINAL */
    --dark-border-primary: #3a4458;
    --dark-border-secondary: #4a5a78;
    --dark-border-light: #5a6a88;
    
    /* Table colors - EXACT ORIGINAL */
    --dark-table-bg: #18213c;
    --dark-table-header: #18213c;
    --dark-table-row-odd: #2f3e5c;
    --dark-table-row-even: #18213c;
    --dark-table-row-hover: #4a5a78;
    --dark-table-highlight: #ff8c42;
    
    /* Input colors - EXACT ORIGINAL */
    --dark-input-bg: #18213c;
    --dark-input-border: #4a5a78;
    --dark-input-focus: #4a90e2;
    
    /* Shadow system - depth layers */
    --dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --dark-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5);
    --dark-shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, 0.6);
    --dark-shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.7);
    --dark-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    
    /* Glow effects */
    --dark-glow-orange: 0 0 20px var(--dark-accent-orange-glow);
    --dark-glow-blue: 0 0 20px var(--dark-accent-blue-glow);
    --dark-glow-success: 0 0 20px var(--dark-success-glow);
}

/* Dark Mode Body and Base Styles - Modern Premium */
body.dark-mode {
    background: var(--dark-gradient-primary);
    background-attachment: fixed;
    color: var(--dark-text-primary);
    transition: background 0.3s ease;
}

body.dark-mode * {
    color: inherit;
}

/* Add subtle texture overlay for depth - darker version */
body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(74, 158, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 140, 66, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Header and Navigation - Match screenshot styling */
body.dark-mode .header {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .menu {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .menu li label {
    background-color: var(--dark-accent-orange) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-primary) !important;
    background-image: none !important;
}

/* Fix for top navigation buttons (Admin, Notifications, etc.) */
body.dark-mode .rightmenu a,
body.dark-mode .menu a {
    background: linear-gradient(135deg, var(--dark-bg-accent) 0%, #2a3a5c 100%) !important;
    background-image: linear-gradient(135deg, var(--dark-bg-accent) 0%, #2a3a5c 100%) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode .rightmenu a:hover,
body.dark-mode .menu a:hover {
    background: linear-gradient(135deg, var(--dark-bg-hover) 0%, #5a6a88 100%) !important;
    background-image: linear-gradient(135deg, var(--dark-bg-hover) 0%, #5a6a88 100%) !important;
    border-color: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .rightmenu a {
    color: var(--dark-text-secondary);
}

body.dark-mode .rightmenu a:hover {
    color: var(--dark-accent-orange);
}

/* Modern flat tabs styling for main navigation (Dashboard, Pipeline Coverage, etc.) */
body.dark-mode .menu {
    background: var(--dark-bg-primary) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--dark-border-primary) !important;
}

body.dark-mode .menu ul {
    background: transparent !important;
    background-image: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
}

body.dark-mode .menu li {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    height: auto !important;
    padding: 0 !important;
    margin-right: 2px !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: flex-end !important;
}

body.dark-mode .menu li a {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 20px !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--dark-shadow-sm), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(8px);
    display: inline-block !important;
    vertical-align: bottom !important;
    margin-bottom: -2px !important;
}

body.dark-mode .menu li a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transition: left 0.6s ease !important;
}

body.dark-mode .menu li a:hover::before {
    left: 100% !important;
}

body.dark-mode .menu li a:hover {
    background: var(--dark-gradient-hover) !important;
    color: var(--dark-accent-orange) !important;
    border: 1px solid var(--dark-accent-orange) !important;
    border-bottom: none !important;
    box-shadow: var(--dark-shadow-md),
                var(--dark-glow-orange),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Active/Current tab styling - Orange border box and orange text - MUST COME AFTER GENERAL STYLES */
/* Clear any borders on the li element itself */
body.dark-mode .menu li#current,
body.dark-mode .menu li.current,
body.dark-mode .menu .current {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* Apply orange border and text to the link inside current/selected item */
body.dark-mode .menu li#current a,
body.dark-mode .menu li#current > a,
body.dark-mode .menu li.current a,
body.dark-mode .menu li.current > a,
body.dark-mode .menu .current a,
body.dark-mode .menu .current > a,
body.dark-mode .menu #current a {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-accent-orange) !important;
    border: 2px solid var(--dark-accent-orange) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    box-shadow: var(--dark-shadow-md),
                var(--dark-glow-orange),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
                 0 0 10px var(--dark-accent-orange-glow) !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    margin-bottom: -2px !important;
}

/* Remove any remaining background images */
body.dark-mode .menu li,
body.dark-mode .menu ul li {
    background-image: none !important;
    background: transparent !important;
}

/* Ensure proper spacing and alignment */
body.dark-mode .menu ul li:first-child {
    margin-left: 10px !important;
}

body.dark-mode .menu ul li:last-child {
    margin-right: 10px !important;
}

body.dark-mode .clientname {
    color: var(--dark-text-secondary);
}

/* Tables - Modern Premium Styling */
body.dark-mode table,
body.dark-mode .maintable,
body.dark-mode .tinytable,
body.dark-mode table.sortable,
body.dark-mode table.historical {
    background: var(--dark-gradient-secondary);
    border: 1px solid var(--dark-border-secondary);
    color: var(--dark-text-primary);
    box-shadow: var(--dark-shadow-md),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
}

/* Table Headers - Modern with gradient */
body.dark-mode th,
body.dark-mode .maintable th,
body.dark-mode .tinytable th,
body.dark-mode table.sortable th,
body.dark-mode table.historical th {
    background: var(--dark-gradient-accent);
    color: var(--dark-text-secondary);
    border: 1px solid var(--dark-border-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

/* Make jTable sorting icons visible in dark mode */
body.dark-mode .jtable-column-header-sortable div.jtable-column-header-container,
body.dark-mode th.jtable-column-header-sortable div.jtable-column-header-container {
    filter: invert(1) brightness(1.5) !important;
}

body.dark-mode .jtable-column-header-sorted-asc div.jtable-column-header-container,
body.dark-mode th.jtable-column-header-sorted-asc div.jtable-column-header-container {
    filter: invert(1) brightness(1.5) hue-rotate(180deg) !important;
}

body.dark-mode .jtable-column-header-sorted-desc div.jtable-column-header-container,
body.dark-mode th.jtable-column-header-sorted-desc div.jtable-column-header-container {
    filter: invert(1) brightness(1.5) hue-rotate(180deg) !important;
}

/* Keep the text inside the header readable */
body.dark-mode .jtable-column-header-sortable div.jtable-column-header-container span.jtable-column-header-text,
body.dark-mode .jtable-column-header-sorted-asc div.jtable-column-header-container span.jtable-column-header-text,
body.dark-mode .jtable-column-header-sorted-desc div.jtable-column-header-container span.jtable-column-header-text {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Sortable.js table headers - Add visible sort indicators */
body.dark-mode table.sortable th .sortheader {
    position: relative;
    display: inline-block;
    padding-right: 20px;
    text-decoration: none;
    color: inherit;
}

body.dark-mode table.sortable th .sortheader::after {
    content: '⇅';
    position: absolute;
    right: 0;
    font-size: 14px;
    color: var(--dark-text-muted);
    opacity: 0.5;
}

body.dark-mode table.sortable th .sortheader:hover::after {
    opacity: 1;
    color: var(--dark-accent-orange);
}

/* Hide the blank gif images */
body.dark-mode table.sortable th .sortarrow img {
    display: none !important;
}

/* Sort ascending */
body.dark-mode table.sortable th .sortheader .sortarrow img[alt="↑"]::before,
body.dark-mode table.sortable th .sortheader .sortarrow img[alt="↑"]::before {
    content: '↑';
    position: absolute;
    right: 0;
    font-size: 16px;
    color: var(--dark-accent-orange);
    font-weight: bold;
}

/* Sort descending */  
body.dark-mode table.sortable th .sortheader .sortarrow img[alt="↓"]::before,
body.dark-mode table.sortable th .sortheader .sortarrow img[alt="↓"]::before {
    content: '↓';
    position: absolute;
    right: 0;
    font-size: 16px;
    color: var(--dark-accent-orange);
    font-weight: bold;
}

/* Alternative: Use the parent span to show arrows */
body.dark-mode table.sortable th span.sortarrow {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

body.dark-mode table.sortable th span.sortarrow::before {
    content: '';
    position: absolute;
    left: 0;
    font-size: 16px;
    color: var(--dark-accent-orange);
    font-weight: bold;
}

/* When image alt contains up arrow */
body.dark-mode table.sortable th span.sortarrow:has(img[alt="↑"])::before,
body.dark-mode table.sortable th span.sortarrow:has(img[alt="↑"])::before {
    content: '▲';
}

/* When image alt contains down arrow */
body.dark-mode table.sortable th span.sortarrow:has(img[alt="↓"])::before,
body.dark-mode table.sortable th span.sortarrow:has(img[alt="↓"])::before {
    content: '▼';
}

/* TableSorter plugin - Make sort icons visible in dark mode */
body.dark-mode th.tablesorter-header {
    position: relative;
}

/* Ensure consistent padding already applied by original tablesorter CSS */
body.dark-mode th.tablesorter-header .tablesorter-header-inner {
    display: inline-block;
}

/* Show sort icons on sortable headers (exclude sorter-false and title classes) */
body.dark-mode th.tablesorter-header:not(.sorter-false):not(.title)::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 11px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 9px;
    filter: invert(1) brightness(2);
    opacity: 0.7;
}

body.dark-mode th.tablesorter-header:not(.sorter-false):not(.title):hover::after {
    opacity: 1;
    filter: invert(1) brightness(2.5) sepia(1) saturate(4) hue-rotate(340deg);
}

/* Sort ascending - only on sorted columns */
body.dark-mode th.tablesorter-headerAsc:not(.sorter-false):not(.title)::after,
body.dark-mode th.tablesorter-headerSortUp:not(.sorter-false):not(.title)::after {
    content: '▲';
    font-size: 11px;
    color: var(--dark-accent-orange);
    filter: none;
    opacity: 1;
    background: none;
    width: auto;
    height: auto;
    line-height: 1;
    font-weight: bold;
}

/* Sort descending - only on sorted columns */
body.dark-mode th.tablesorter-headerDesc:not(.sorter-false):not(.title)::after,
body.dark-mode th.tablesorter-headerSortDown:not(.sorter-false):not(.title)::after {
    content: '▼';
    font-size: 11px;
    color: var(--dark-accent-orange);
    filter: none;
    opacity: 1;
    background: none;
    width: auto;
    height: auto;
    line-height: 1;
    font-weight: bold;
}

/* Colored Table Headers - Modern gradient with orange text */
body.dark-mode th.blue-header,
body.dark-mode .maintable th.blue-header,
body.dark-mode .tinytable th.blue-header {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-accent-orange) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6),
                 0 0 10px var(--dark-accent-orange-glow) !important;
    box-shadow: var(--dark-shadow-sm),
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    font-weight: bold !important;
    border-color: var(--dark-border-secondary) !important;
    position: relative !important;
}

body.dark-mode th.blue-header::after,
body.dark-mode .maintable th.blue-header::after,
body.dark-mode .tinytable th.blue-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--dark-accent-orange), 
        transparent);
    opacity: 0.5;
}

body.dark-mode th.orange-header,
body.dark-mode .maintable th.orange-header,
body.dark-mode .tinytable th.orange-header {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.06) 0%, 
        rgba(255, 140, 66, 0.03) 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-left: 1px solid var(--dark-border-primary) !important;
    border-right: 1px solid var(--dark-border-primary) !important;
    border-top: 1px solid var(--dark-border-primary) !important;
    border-bottom: 1px solid var(--dark-border-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.03) !important;
    font-weight: bold !important;
}

/* Additional colored headers for different sections */
body.dark-mode th.green-header,
body.dark-mode .maintable th.green-header,
body.dark-mode .tinytable th.green-header {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
}

body.dark-mode th.purple-header,
body.dark-mode .maintable th.purple-header,
body.dark-mode .tinytable th.purple-header {
    background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.2) !important;
}

body.dark-mode th.red-header,
body.dark-mode .maintable th.red-header,
body.dark-mode .tinytable th.red-header {
    background: linear-gradient(135deg, #dc3545 0%, #a71e2a 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important;
}

body.dark-mode th.teal-header,
body.dark-mode .maintable th.teal-header,
body.dark-mode .tinytable th.teal-header {
    background: linear-gradient(135deg, #20c997 0%, #17a085 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(32, 201, 151, 0.2) !important;
}

body.dark-mode th.yellow-header,
body.dark-mode .maintable th.yellow-header,
body.dark-mode .tinytable th.yellow-header {
    background: linear-gradient(135deg, #ffc107 0%, #d39e00 100%) !important;
    color: #212529 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
}

body.dark-mode th.indigo-header,
body.dark-mode .maintable th.indigo-header,
body.dark-mode .tinytable th.indigo-header {
    background: linear-gradient(135deg, #6610f2 0%, #520dc2 100%) !important;
    color: var(--dark-text-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(102, 16, 242, 0.2) !important;
}

/* Section headers with different colors - Orange text instead of blue background */
body.dark-mode .section-header-blue {
    background: linear-gradient(135deg, var(--dark-bg-accent) 0%, #2a3a5c 100%) !important;
    color: var(--dark-accent-orange) !important;
    font-weight: bold !important;
}

body.dark-mode .section-header-orange {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.06) 0%, 
        rgba(255, 140, 66, 0.03) 100%) !important;
    color: var(--dark-text-primary) !important;
    border-left: 1px solid var(--dark-border-primary) !important;
    border-right: 1px solid var(--dark-border-primary) !important;
    border-top: 1px solid var(--dark-border-primary) !important;
    border-bottom: 1px solid var(--dark-border-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.03) !important;
    font-weight: bold !important;
}

body.dark-mode .title {
    background-color: var(--dark-bg-accent);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-primary);
}

/* Table headers with title class - Orange text */
body.dark-mode th.title,
body.dark-mode table th.title,
body.dark-mode .maintable th.title,
body.dark-mode .tinytable th.title,
body.dark-mode table.report th.title,
body.dark-mode th.title.dashboard {
    color: var(--dark-accent-orange) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6),
                 0 0 10px var(--dark-accent-orange-glow) !important;
    font-weight: bold !important;
}

/* Exception: Market Pricing table timestamp headers should be normal gray */
body.dark-mode #market_pricing_table th.title {
    color: var(--dark-text-secondary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Override inline background colors (like #ddd, #eee, etc.) in table cells for dark mode */
body.dark-mode td[style*="background-color:#ddd"],
body.dark-mode td[style*="background-color: #ddd"],
body.dark-mode td[style*="background-color:#eee"],
body.dark-mode td[style*="background-color: #eee"],
body.dark-mode td[style*="background-color:#f0f0f0"],
body.dark-mode td[style*="background-color: #f0f0f0"],
body.dark-mode td[style*="background-color:#ccc"],
body.dark-mode td[style*="background-color: #ccc"],
body.dark-mode td[style*="background-color:#e0e0e0"],
body.dark-mode td[style*="background-color: #e0e0e0"] {
    background-color: var(--dark-table-row-odd) !important;
}

/* Ensure links in these cells are visible */
body.dark-mode td[style*="background-color"] a {
    color: var(--dark-accent-orange) !important;
}

/* Table Cells - Remove thick borders */
body.dark-mode td,
body.dark-mode .maintable td,
body.dark-mode .tinytable td,
body.dark-mode .pttable td,
body.dark-mode table.sortable td,
body.dark-mode table.historical td {
    background-color: var(--dark-table-row-even);
    color: var(--dark-text-primary) !important;
    border-left: 1px solid rgba(58, 68, 88, 0.3) !important; /* Very subtle border */
    border-right: 1px solid rgba(58, 68, 88, 0.3) !important;
    border-top: 0px !important;
    border-bottom: 1px solid rgba(58, 68, 88, 0.3) !important;
}

/* Table Headers - subtle borders */
body.dark-mode th,
body.dark-mode .maintable th,
body.dark-mode .tinytable th {
    border-left: 1px solid rgba(58, 68, 88, 0.5) !important;
    border-right: 1px solid rgba(58, 68, 88, 0.5) !important;
    border-top: 0px !important;
    border-bottom: 2px solid rgba(102, 153, 204, 0.3) !important;
}

/* Force all text in tables to be visible */
body.dark-mode table td *,
body.dark-mode .maintable td *,
body.dark-mode .tinytable td *,
body.dark-mode table.sortable td *,
body.dark-mode table td span,
body.dark-mode table td div,
body.dark-mode table td p,
body.dark-mode table td a {
    color: var(--dark-text-primary) !important;
}

/* Table Row Striping */
body.dark-mode .sortable tr:nth-child(odd) > td {
    background-color: var(--dark-table-row-odd);
}

body.dark-mode .sortable tr:nth-child(even) > td {
    background-color: var(--dark-table-row-even);
}

/* Enable positioning for shine animation */
body.dark-mode table td,
body.dark-mode .maintable td,
body.dark-mode .tinytable td {
    position: relative !important;
    overflow: hidden !important;
}

/* Table Row Hover - Modern with orange text and gradient - EXCLUDE cells with nested tables */
body.dark-mode table.sortable tr:hover td:not(:has(table)),
body.dark-mode .maintable tr:hover td:not(:has(table)),
body.dark-mode .tinytable tr:hover td:not(:has(table)) {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    transform: translateX(2px) !important;
}

/* Ensure all direct text and links in hovered rows change color, but NOT nested tables */
body.dark-mode table.sortable tr:hover > td:not(:has(table)) > a,
body.dark-mode .maintable tr:hover > td:not(:has(table)) > a,
body.dark-mode .tinytable tr:hover > td:not(:has(table)) > a,
body.dark-mode table.sortable tr:hover > td:not(:has(table)) > span,
body.dark-mode .maintable tr:hover > td:not(:has(table)) > span,
body.dark-mode .tinytable tr:hover > td:not(:has(table)) > span,
body.dark-mode table.sortable tr:hover > td:not(:has(table)) > div,
body.dark-mode .maintable tr:hover > td:not(:has(table)) > div,
body.dark-mode .tinytable tr:hover > td:not(:has(table)) > div {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Prevent nested tables from being affected by parent hover */
body.dark-mode table tr:hover td table,
body.dark-mode table tr:hover td table.aligntable,
body.dark-mode table tr:hover td table tr,
body.dark-mode table tr:hover td table td,
body.dark-mode table tr:hover td table th {
    background: none !important;
    color: var(--dark-text-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Reset links in nested tables when parent is hovered */
body.dark-mode table tr:hover td table a,
body.dark-mode table tr:hover td table.aligntable a,
body.dark-mode table tr:hover td table * {
    color: var(--dark-accent-orange) !important;
    text-shadow: none !important;
    background: transparent !important;
}

/* Prevent hover ::before effect on nested tables */
body.dark-mode table tr:hover td table td::before,
body.dark-mode table tr:hover td table.aligntable td::before {
    display: none !important;
}

/* Prevent parent td cells containing nested tables from getting hover background */
body.dark-mode table tr:hover > td:has(> table),
body.dark-mode table tr:hover > td:has(> table.aligntable) {
    background: transparent !important;
}

body.dark-mode table tr:hover > td:has(> table)::before,
body.dark-mode table tr:hover > td:has(> table.aligntable)::before {
    display: none !important;
}

/* Handle multiple levels of nesting - prevent ALL descendants from inheriting hover */
body.dark-mode table tr:hover td table table,
body.dark-mode table tr:hover td table table *,
body.dark-mode table tr:hover td table table tr,
body.dark-mode table tr:hover td table table td,
body.dark-mode table tr:hover td table table th,
body.dark-mode table tr:hover td table table a {
    background: transparent !important;
    color: var(--dark-text-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Prevent hover effects from cascading through any level of nested tables */
body.dark-mode table tr:hover td table table td::before {
    display: none !important;
}

/* Keep links in deeply nested tables the normal orange color */
body.dark-mode table tr:hover td table table a {
    color: var(--dark-accent-orange) !important;
    text-shadow: none !important;
}

/* Specifically prevent dashboard and dashtop tables from having hover effects on rows with nested tables */
body.dark-mode table.dashboard tr:has(td > table) td,
body.dark-mode table.dashtop tr:has(td > table) td,
body.dark-mode .dashboard tr:has(td > table) td,
body.dark-mode .dashtop tr:has(td > table) td {
    background: transparent !important;
    color: var(--dark-text-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode table.dashboard tr:has(td > table):hover td,
body.dark-mode table.dashtop tr:has(td > table):hover td,
body.dark-mode .dashboard tr:has(td > table):hover td,
body.dark-mode .dashtop tr:has(td > table):hover td {
    background: transparent !important;
    color: var(--dark-text-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode table.dashboard tr:has(td > table):hover td::before,
body.dark-mode table.dashtop tr:has(td > table):hover td::before,
body.dark-mode .dashboard tr:has(td > table):hover td::before,
body.dark-mode .dashtop tr:has(td > table):hover td::before {
    display: none !important;
}

body.dark-mode table.dashboard tr:has(td > table):hover td a,
body.dark-mode table.dashtop tr:has(td > table):hover td a,
body.dark-mode .dashboard tr:has(td > table):hover td a,
body.dark-mode .dashtop tr:has(td > table):hover td a {
    color: var(--dark-accent-orange) !important;
    text-shadow: none !important;
}

/* Disable hover effects on aligntable wrapper rows - but only direct children */
body.dark-mode table.aligntable > tbody > tr:hover > td {
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode table.aligntable > tbody > tr:hover > td::before {
    display: none !important;
}

/* Prevent aligntable hover from cascading text color to nested tables */
body.dark-mode table.aligntable tr:hover td table.dashboard,
body.dark-mode table.aligntable tr:hover td table.dashtop,
body.dark-mode table.aligntable tr:hover td table.dashboard *,
body.dark-mode table.aligntable tr:hover td table.dashtop * {
    color: inherit !important;
}


/* Re-enable normal text colors in nested tables - including links */
body.dark-mode table.aligntable td table.dashboard td,
body.dark-mode table.aligntable td table.dashtop td,
body.dark-mode table.aligntable td table.dashboard td *,
body.dark-mode table.aligntable td table.dashtop td *,
body.dark-mode table.aligntable td table.dashboard td a,
body.dark-mode table.aligntable td table.dashtop td a {
    color: var(--dark-text-primary) !important;
}

/* On hover over nested table rows, links should become bright orange */
body.dark-mode table.aligntable td table.dashboard tr:hover td a,
body.dark-mode table.aligntable td table.dashtop tr:hover td a,
body.dark-mode table.dashboard tr:hover td a,
body.dark-mode table.dashtop tr:hover td a {
    color: #ff9d5c !important;
}


/* Force ALL nested table content to maintain normal colors */
body.dark-mode table.dashboard tr:hover td table *,
body.dark-mode table.dashtop tr:hover td table *,
body.dark-mode .dashboard tr:hover td table *,
body.dark-mode .dashtop tr:hover td table *,
body.dark-mode table.dashboard tr:hover td table td,
body.dark-mode table.dashtop tr:hover td table td,
body.dark-mode .dashboard tr:hover td table td,
body.dark-mode .dashtop tr:hover td table td,
body.dark-mode table.dashboard tr:hover td table span,
body.dark-mode table.dashtop tr:hover td table span,
body.dark-mode .dashboard tr:hover td table span,
body.dark-mode .dashtop tr:hover td table span,
body.dark-mode table.dashboard tr:hover td table div,
body.dark-mode table.dashtop tr:hover td table div,
body.dark-mode .dashboard tr:hover td table div,
body.dark-mode .dashtop tr:hover td table div {
    color: var(--dark-text-primary) !important;
    text-shadow: none !important;
    background: transparent !important;
}

body.dark-mode table.dashboard tr:hover td table a,
body.dark-mode table.dashtop tr:hover td table a,
body.dark-mode .dashboard tr:hover td table a,
body.dark-mode .dashtop tr:hover td table a {
    color: var(--dark-accent-orange) !important;
    text-shadow: none !important;
}

/* Prevent any color changes from cascading */
body.dark-mode table.dashboard tr:hover td table tr td,
body.dark-mode table.dashtop tr:hover td table tr td {
    color: var(--dark-text-primary) !important;
}

body.dark-mode table.dashboard tr:hover td table tr td a,
body.dark-mode table.dashtop tr:hover td table tr td a {
    color: var(--dark-accent-orange) !important;
}

/* Ensure links in nested tables maintain orange color when parent is hovered */
body.dark-mode table tr:hover td table tbody tr:not(:hover) td a {
    color: var(--dark-accent-orange) !important;
    text-shadow: none !important;
}

/* Nested tables should have their own independent hover */
body.dark-mode table td table tr:hover td {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Only change link color in the CURRENTLY hovered row of nested table */
body.dark-mode table td table tr:hover td a {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Override any yellow hover effects on commit_loans_table */
body.dark-mode table#commit_loans_table > tbody > tr:hover > td {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.05) !important;
}

/* Change text color on hover for commit_loans_table */
body.dark-mode table#commit_loans_table > tbody > tr:hover > td > a,
body.dark-mode table#commit_loans_table > tbody > tr:hover > td > span,
body.dark-mode table#commit_loans_table > tbody > tr:hover > td > div {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Fix BAM investor rows - improve contrast with blue background */
body.dark-mode table#commit_loans_table tr.new-loan > td {
    background: linear-gradient(90deg, #1e3a5f 0%, #2a4a6f 100%) !important; /* Darker blue gradient */
    color: #ffffff !important; /* White text for excellent contrast */
    font-weight: 600 !important; /* Bolder for better readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(30, 58, 95, 0.5) !important; /* Blended border matching background */
}

/* Ensure links in BAM investor rows are visible on blue background */
body.dark-mode table#commit_loans_table tr.new-loan > td a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode table#commit_loans_table tr.new-loan > td a:hover {
    color: #a3d4ff !important; /* Light blue on hover */
}

/* Remove any yellow/light hover effects from jQuery UI and other sources */
body.dark-mode .ui-state-hover,
body.dark-mode .ui-widget-content .ui-state-hover,
body.dark-mode .ui-widget-header .ui-state-hover,
body.dark-mode .ui-state-focus,
body.dark-mode .ui-widget-content .ui-state-focus,
body.dark-mode .ui-widget-header .ui-state-focus {
    background: var(--dark-bg-hover) !important;
    background-color: var(--dark-bg-hover) !important;
    background-image: none !important;
    border-color: var(--dark-border-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Override any table hover effects - Modern with gradient and orange text - EXCLUDE cells with nested tables */
body.dark-mode table tr:hover td:not(:has(table)) {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    transform: translateX(2px) !important;
}

/* All child elements in hovered table rows - EXCLUDE nested tables */
body.dark-mode table tr:hover td:not(:has(table)) *,
body.dark-mode table tr:hover td:not(:has(table)) a {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Additional hover effects for specific table types - but exclude wrapper tables that only contain nested tables */
body.dark-mode .pttable tr:hover td:not(:has(table)),
body.dark-mode table.historical tr:hover td:not(:has(table)) {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    transform: translateX(2px) !important;
}

/* All child elements in hovered rows for specific table types - EXCLUDE nested tables */
body.dark-mode .pttable tr:hover td:not(:has(table)) *,
body.dark-mode table.historical tr:hover td:not(:has(table)) *,
body.dark-mode .pttable tr:hover td:not(:has(table)) a,
body.dark-mode table.historical tr:hover td:not(:has(table)) a {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Disable hover on table.report wrapper tables that contain nested tables */
body.dark-mode table.report tr:hover td:has(> table) {
    background: none !important;
    color: inherit !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Disable hover effect on Pipeline Activity Summary wrapper table rows */
body.dark-mode table#pipeline_activity_summary_table > tbody > tr:hover > td {
    background: transparent !important;
    color: inherit !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode table#pipeline_activity_summary_table > tbody > tr:hover > td::before {
    display: none !important;
}


/* Add subtle shine animation on hover - EXCLUDE cells with nested tables */
body.dark-mode table tr:hover td:not(:has(table))::before,
body.dark-mode .maintable tr:hover td:not(:has(table))::before,
body.dark-mode .tinytable tr:hover td:not(:has(table))::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    animation: tableRowShine 1.5s ease-in-out;
    pointer-events: none;
}

@keyframes tableRowShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Special Table Cell Classes - Always use hover state colors for prominence */
body.dark-mode td.light,
body.dark-mode .maintable td.light,
body.dark-mode .tinytable td.light,
body.dark-mode .maintable tr.light,
body.dark-mode .tinytable tr.light {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    font-weight: 700 !important;
    border-left: 1px solid rgba(58, 68, 88, 0.3) !important; /* Subtle border */
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    border-right: 1px solid rgba(58, 68, 88, 0.3) !important;
    border-top: 0px !important;
    border-bottom: 1px solid rgba(58, 68, 88, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

body.dark-mode .maintable tr.light td,
body.dark-mode .tinytable tr.light td {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%) !important;
    color: var(--dark-accent-orange-light) !important;
    font-weight: 700 !important;
    border-left: 1px solid rgba(58, 68, 88, 0.3) !important; /* Subtle border */
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    border-right: 1px solid rgba(58, 68, 88, 0.3) !important;
    border-top: 0px !important;
    border-bottom: 1px solid rgba(58, 68, 88, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .maintable tr.light td:first-child,
body.dark-mode .tinytable tr.light td:first-child {
    border-left: 1px solid rgba(58, 68, 88, 0.3) !important; /* Subtle border */
}

/* Ensure links in .light rows are also orange to match hover state */
body.dark-mode .maintable tr.light td a,
body.dark-mode .tinytable tr.light td a,
body.dark-mode td.light a {
    color: var(--dark-accent-orange-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* On hover, make .light rows slightly lighter orange background */
body.dark-mode td.light:hover,
body.dark-mode .maintable td.light:hover,
body.dark-mode .tinytable td.light:hover,
body.dark-mode .maintable tr.light:hover,
body.dark-mode .maintable tr.light:hover td,
body.dark-mode .tinytable tr.light:hover,
body.dark-mode .tinytable tr.light:hover td,
body.dark-mode table.maintable tr.light:hover td,
body.dark-mode table.dashboard tr.light:hover td,
body.dark-mode table.dashtop tr.light:hover td,
body.dark-mode tr:hover > td.light,
body.dark-mode .maintable tr:hover > td.light,
body.dark-mode .tinytable tr:hover > td.light,
body.dark-mode table.maintable tr:hover > td.light,
body.dark-mode table.dashboard tr:hover > td.light,
body.dark-mode table.dashtop tr:hover > td.light,
body.dark-mode table.maintable.dashboard tr:hover > td.light,
body.dark-mode table.maintable.dashtop tr:hover > td.light,
body.dark-mode table.maintable.dashboard.dashtop tr:hover > td.light,
body.dark-mode table.maintable > tbody > tr:hover > td.light,
body.dark-mode table.dashboard > tbody > tr:hover > td.light,
body.dark-mode table.dashtop > tbody > tr:hover > td.light,
body.dark-mode table.maintable.dashboard > tbody > tr:hover > td.light,
body.dark-mode table.maintable.dashtop > tbody > tr:hover > td.light,
body.dark-mode table.maintable.dashboard.dashtop > tbody > tr:hover > td.light {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.30) 0%, 
        rgba(255, 140, 66, 0.20) 50%,
        rgba(255, 140, 66, 0.30) 100%) !important;
    transition: background 0.2s ease !important;
}


body.dark-mode td.lightnormal {
    /* No special styling for lightnormal - should look like regular cells when no change occurs */
    background: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    border: inherit !important;
    box-shadow: inherit !important;
}

body.dark-mode td.smalllight {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.06) 0%, 
        rgba(255, 140, 66, 0.03) 100%) !important;
    border-left: 1px solid var(--dark-border-primary) !important;
    border-right: 1px solid var(--dark-border-primary) !important;
    border-top: 1px solid var(--dark-border-primary) !important;
    border-bottom: 1px solid var(--dark-border-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.03) !important;
    font-weight: 600 !important;
}

body.dark-mode td.first {
    background-color: var(--dark-success);
    color: var(--dark-text-primary);
}

body.dark-mode td.err {
    background-color: var(--dark-error);
    color: var(--dark-text-primary);
    border-color: var(--dark-error);
}

body.dark-mode td.errtext {
    color: var(--dark-error);
}

body.dark-mode td.errlight {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.06) 0%, 
        rgba(255, 140, 66, 0.03) 100%);
    color: var(--dark-error);
    border-left: 1px solid var(--dark-border-primary) !important;
    border-right: 1px solid var(--dark-border-primary) !important;
    border-top: 1px solid var(--dark-border-primary);
    border-bottom: 1px solid var(--dark-border-primary);
    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.03);
    font-weight: 600;
}

body.dark-mode .historical .light {
    background: linear-gradient(90deg, 
        rgba(255, 140, 66, 0.15) 0%, 
        rgba(255, 140, 66, 0.08) 50%,
        rgba(255, 140, 66, 0.15) 100%);
    color: var(--dark-accent-orange-light) !important;
    font-weight: 700 !important;
    border-left: 1px solid var(--dark-border-primary) !important;
    border-right: 1px solid var(--dark-border-primary) !important;
    box-shadow: inset 0 0 20px rgba(255, 140, 66, 0.1),
                0 2px 8px rgba(255, 140, 66, 0.15) !important;
    border-top: 1px solid var(--dark-border-primary);
    border-bottom: 1px solid var(--dark-border-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs and Forms - Modern Premium Design */
body.dark-mode form,
body.dark-mode #ptform1,
body.dark-mode #ptcontainer {
    background: transparent !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .inputbox {
    background: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-input-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .inputbox:focus {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-accent-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--dark-accent-orange-glow),
                inset 0 1px 2px rgba(0, 0, 0, 0.2),
                var(--dark-shadow-sm) !important;
}

body.dark-mode input:hover,
body.dark-mode select:hover,
body.dark-mode textarea:hover,
body.dark-mode .inputbox:hover {
    border-color: var(--dark-border-accent) !important;
    background: var(--dark-bg-tertiary) !important;
}

/* Fix for multiselect and other jQuery UI elements */
body.dark-mode .ui-multiselect,
body.dark-mode .ui-widget,
body.dark-mode .ui-widget-content,
body.dark-mode .ui-widget-header {
    background-color: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-input-border) !important;
    background-image: none !important;
}

/* Enhanced popup/dialog borders with light gray accent and glow */
body.dark-mode .ui-dialog {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 3px solid var(--dark-border-light) !important;
    border-radius: 8px !important;
    background-image: none !important;
    box-shadow: 0 0 20px rgba(90, 106, 136, 0.5),
                0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Popup titles - Orange color */
body.dark-mode .ui-dialog-title,
body.dark-mode .ui-dialog-titlebar {
    color: var(--dark-accent-orange) !important;
}

body.dark-mode .ui-dialog-content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: transparent !important;
    background-image: none !important;
}

body.dark-mode .ui-state-default,
body.dark-mode .ui-button {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-secondary) !important;
    background-image: none !important;
    text-shadow: none !important;
}

body.dark-mode .ui-state-hover,
body.dark-mode .ui-state-focus,
body.dark-mode .ui-button:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-accent-orange) !important;
    border-color: var(--dark-accent-orange) !important;
    background-image: none !important;
}

body.dark-mode .ui-state-active {
    background-color: var(--dark-accent-orange) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-accent-orange) !important;
    background-image: none !important;
}

/* jQuery UI Tabs - Modern Premium Styling */
body.dark-mode .ui-tabs,
body.dark-mode .ui-tabs-panel {
    background: transparent !important;
    border-color: var(--dark-border-secondary) !important;
}

body.dark-mode .ui-tabs-nav {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 2px solid var(--dark-border-secondary) !important;
    padding: 0 !important;
}

body.dark-mode .ui-tabs-nav li {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    margin: 0 2px -2px 0 !important;
}

body.dark-mode .ui-tabs-nav li a,
body.dark-mode .ui-tabs-anchor {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 16px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    box-shadow: var(--dark-shadow-sm),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

body.dark-mode .ui-tabs-nav li:hover a,
body.dark-mode .ui-tabs-anchor:hover {
    background: var(--dark-gradient-hover) !important;
    color: var(--dark-accent-orange) !important;
    border-color: var(--dark-accent-orange) !important;
    border-bottom: none !important;
    box-shadow: var(--dark-shadow-md),
                var(--dark-glow-orange) !important;
}

body.dark-mode .ui-tabs-nav li.ui-tabs-active a,
body.dark-mode .ui-tabs-nav li.ui-state-active a,
body.dark-mode .ui-tabs-nav li.ui-tabs-selected a,
body.dark-mode .ui-tabs-active .ui-tabs-anchor {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-accent-orange) !important;
    border: 2px solid var(--dark-accent-orange) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    box-shadow: var(--dark-shadow-md),
                var(--dark-glow-orange),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
                 0 0 10px var(--dark-accent-orange-glow) !important;
    position: relative !important;
    z-index: 2 !important;
}

body.dark-mode .ui-tabs-panel {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-radius: 0 8px 8px 8px !important;
    box-shadow: var(--dark-shadow-md) !important;
    padding: 15px !important;
}

/* Fix dropdown menus */
body.dark-mode .ui-menu,
body.dark-mode .ui-menu-item {
    background-color: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-input-border) !important;
}

body.dark-mode .ui-menu-item:hover,
body.dark-mode .ui-menu-item-wrapper:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix multiselect specific elements */
body.dark-mode .ui-multiselect-menu,
body.dark-mode .ui-multiselect-checkboxes {
    background-color: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-input-border) !important;
}

body.dark-mode .ui-multiselect-checkboxes li {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ui-multiselect-checkboxes li:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* Table Header Inputs */
body.dark-mode .maintable th input,
body.dark-mode .tinytable th input {
    background-color: var(--dark-table-header);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-secondary);
}

body.dark-mode .maintable th input:hover,
body.dark-mode .maintable th input:focus {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-input-focus);
}

/* Buttons - Modern Premium Design */
body.dark-mode .buttonlink,
body.dark-mode .smallbuttonlink,
body.dark-mode .redbuttonlink,
body.dark-mode .standard-button {
    background: var(--dark-gradient-accent);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-secondary);
    box-shadow: var(--dark-shadow-sm),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

body.dark-mode .buttonlink::before,
body.dark-mode .smallbuttonlink::before,
body.dark-mode .standard-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

body.dark-mode .buttonlink:hover::before,
body.dark-mode .smallbuttonlink:hover::before,
body.dark-mode .standard-button:hover::before {
    left: 100%;
}

body.dark-mode .buttonlink:hover,
body.dark-mode .smallbuttonlink:hover,
body.dark-mode .standard-button:hover {
    background: var(--dark-gradient-hover);
    border-color: var(--dark-accent-orange);
    color: var(--dark-accent-orange);
    box-shadow: var(--dark-shadow-md),
                var(--dark-glow-orange);
    transform: translateY(-2px);
}

body.dark-mode .redbuttonlink {
    border-color: var(--dark-error);
}

body.dark-mode .redbuttonlink:hover {
    border-color: var(--dark-error);
    color: var(--dark-error);
    box-shadow: var(--dark-shadow-md),
                var(--dark-error-glow);
}

/* Dialog and Form Elements - Modern with gradient and enhanced borders */
body.dark-mode .formdialog {
    background: var(--dark-gradient-secondary);
    border: 3px solid var(--dark-border-light);
    box-shadow: 0 0 20px rgba(90, 106, 136, 0.5),
                0 8px 32px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

body.dark-mode .formdialog h1 {
    color: var(--dark-accent-orange);
}

body.dark-mode .formdialog p {
    color: var(--dark-text-muted);
    border-color: var(--dark-border-primary);
}

body.dark-mode .formdialog label {
    color: var(--dark-text-secondary);
}

body.dark-mode .formdialog input,
body.dark-mode .formdialog select {
    background-color: var(--dark-input-bg);
    color: var(--dark-text-primary);
    border-color: var(--dark-input-border);
}

body.dark-mode .formdialog input.submit {
    background-color: var(--dark-accent-orange);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-primary);
}

/* Fieldsets */
body.dark-mode fieldset {
    border-color: var(--dark-border-primary);
}

body.dark-mode fieldset legend {
    color: var(--dark-accent-orange);
}

/* Messages and Alerts */
body.dark-mode .info,
body.dark-mode .errmsg {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-secondary);
}

body.dark-mode .errmsg {
    color: var(--dark-error);
    border-color: var(--dark-error);
}

body.dark-mode .infomsg {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-secondary);
}

body.dark-mode .warning {
    color: var(--dark-warning);
}

body.dark-mode .searcherr {
    color: var(--dark-error);
}

/* Box Elements - Modern with gradients */
body.dark-mode .brownbox {
    background: var(--dark-gradient-secondary);
    border: 1px solid var(--dark-border-secondary);
    border-radius: 6px;
    box-shadow: var(--dark-shadow-sm);
}

body.dark-mode .box td,
body.dark-mode .box table {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-secondary);
}

body.dark-mode .dialogtable td {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

/* Small elements and text */
body.dark-mode p.small {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-primary);
    color: var(--dark-text-primary);
}

body.dark-mode p.smallmessage {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-primary);
    color: var(--dark-text-primary);
}

body.dark-mode .gray,
body.dark-mode span.gray {
    color: var(--dark-text-muted);
}

/* Links */
body.dark-mode a {
    color: var(--dark-accent-orange);
}

body.dark-mode a:hover {
    color: var(--dark-accent-orange-light);
}

body.dark-mode a.tiny {
    color: var(--dark-text-primary);
}

body.dark-mode a.tiny:hover {
    color: var(--dark-accent-orange);
}

body.dark-mode table.sortable tr > td > a[href] {
    color: var(--dark-accent-orange);
}

body.dark-mode table.sortable tr > td > a[href]:hover {
    color: var(--dark-accent-orange-light);
}

/* Report Tables */
body.dark-mode table.report {
    border-color: var(--dark-border-primary);
}

body.dark-mode table.report th,
body.dark-mode table.report td {
    border-color: var(--dark-border-primary);
}

body.dark-mode table.report th {
    background-color: var(--dark-table-header);
    color: var(--dark-text-primary);
}

body.dark-mode table.report th.title {
    background-color: var(--dark-bg-accent);
}

body.dark-mode table.report td {
    background-color: var(--dark-table-bg);
    color: var(--dark-text-primary);
}

body.dark-mode table.report tr.highlight td,
body.dark-mode table.report td.highlight,
body.dark-mode table.maintable tr.highlight td,
body.dark-mode table.maintable td.highlight,
body.dark-mode table.sortable tr.highlight td,
body.dark-mode table.sortable td.highlight {
    background: linear-gradient(90deg, #1e3a5f 0%, #2a4a6f 100%) !important; /* Darker blue gradient */
    color: #ffffff !important; /* White text for excellent contrast */
    border: 1px solid rgba(30, 58, 95, 0.5) !important; /* Blended border matching background */
    box-shadow: inset 0 1px 0 rgba(74, 144, 226, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure links in highlighted rows are visible on blue background */
body.dark-mode table.report tr.highlight td a,
body.dark-mode table.maintable tr.highlight td a,
body.dark-mode table.sortable tr.highlight td a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode table.report tr.highlight td a:hover,
body.dark-mode table.maintable tr.highlight td a:hover,
body.dark-mode table.sortable tr.highlight td a:hover {
    color: #a3d4ff !important; /* Light blue on hover */
}

/* Fix blue-highlight rows - improve contrast */
body.dark-mode tr.blue-highlight td,
body.dark-mode td.blue-highlight {
    background-color: #0077cc !important; /* Darker blue for better contrast */
    color: #ffffff !important; /* White text */
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 100, 170, 0.4) !important; /* Blended border matching blue background */
}

/* Commitment table tfoot totals row - blended borders */
body.dark-mode table#commitment_table > tfoot > tr.total td,
body.dark-mode table#commitment_table > tfoot > tr.highlight td {
    border: 1px solid rgba(30, 58, 95, 0.5) !important; /* Blended border matching highlight background */
}

/* Fix queued rows (rapid commit) - improve contrast in dark mode */
body.dark-mode tr.queued > td {
    background: #0077cc !important; /* Darker blue instead of lightblue */
    color: #ffffff !important; /* White text for visibility */
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure all text elements in queued rows are visible */
body.dark-mode tr.queued > td a,
body.dark-mode tr.queued > td span,
body.dark-mode tr.queued > td input {
    color: #ffffff !important;
}

/* Buttons in queued rows */
body.dark-mode tr.queued > td .standard-button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode tr.queued > td .standard-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Fix committed rows (rapid commit) - improve contrast in dark mode */
body.dark-mode tr.committed > td,
body.dark-mode tr.lightgreen-highlight td,
body.dark-mode td.lightgreen-highlight {
    background: #2d7a3e !important; /* Darker green instead of lightgreen */
    color: #ffffff !important; /* White text for visibility */
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    border-left: 1px solid #256633 !important;
    border-right: 1px solid #256633 !important;
    border-top: 1px solid #256633 !important;
    border-bottom: 1px solid #256633 !important;
}

/* Ensure all text elements in committed/green rows are visible */
body.dark-mode tr.committed > td a,
body.dark-mode tr.lightgreen-highlight td a,
body.dark-mode td.lightgreen-highlight a,
body.dark-mode tr.committed > td span,
body.dark-mode tr.lightgreen-highlight td span,
body.dark-mode td.lightgreen-highlight span,
body.dark-mode tr.committed > td input,
body.dark-mode tr.lightgreen-highlight td input,
body.dark-mode td.lightgreen-highlight input {
    color: #ffffff !important;
}

/* Buttons in committed/green rows */
body.dark-mode tr.committed > td .standard-button,
body.dark-mode tr.lightgreen-highlight td .standard-button,
body.dark-mode td.lightgreen-highlight .standard-button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode tr.committed > td .standard-button:hover,
body.dark-mode tr.lightgreen-highlight td .standard-button:hover,
body.dark-mode td.lightgreen-highlight .standard-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Fix failed rows (rapid commit) - improve contrast in dark mode */
body.dark-mode tr.failed > td {
    background: #b71c1c !important; /* Darker red instead of light pink */
    color: #ffffff !important; /* White text for visibility */
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure all text elements in failed rows are visible */
body.dark-mode tr.failed > td a,
body.dark-mode tr.failed > td span,
body.dark-mode tr.failed > td input {
    color: #ffffff !important;
}

/* Buttons in failed rows */
body.dark-mode tr.failed > td .standard-button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode tr.failed > td .standard-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure links in blue-highlighted rows are also visible */
body.dark-mode tr.blue-highlight td a,
body.dark-mode td.blue-highlight a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* Buttons in blue-highlighted rows */
body.dark-mode tr.blue-highlight td .standard-button,
body.dark-mode td.blue-highlight .standard-button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode tr.blue-highlight td .standard-button:hover,
body.dark-mode td.blue-highlight .standard-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode table.report td.error {
    background-color: var(--dark-error);
}

/* Special States */
body.dark-mode .disabled {
    background-color: var(--dark-bg-primary);
    border-color: var(--dark-border-primary);
    color: var(--dark-text-muted);
}

body.dark-mode td.review_marked {
    background-color: var(--dark-bg-accent) !important;
}

/* Loading and Spinner */
body.dark-mode #spinner {
    filter: invert(1);
}

/* CSV Widget */
body.dark-mode .csv_widget {
    color: var(--dark-text-primary);
}

/* Odd/Even rows for general tables */
body.dark-mode .odd {
    background-color: var(--dark-table-row-odd);
}

body.dark-mode .even {
    background-color: var(--dark-table-row-even);
}

/* Dark Mode Toggle Button - Integrated into rightmenu only */
#dark-mode-toggle {
    color: #676753;
    font-size: 12px;
    text-decoration: none;
    padding-left: 10px;
}

#dark-mode-toggle:hover {
    color: #000;
}

body.dark-mode #dark-mode-toggle {
    color: var(--dark-text-secondary);
}

body.dark-mode #dark-mode-toggle:hover {
    color: var(--dark-accent-orange);
}

/* Floating dark mode toggle button styling */
.floating-dark-mode-toggle {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 9999 !important;
    padding: 8px 12px !important;
    border: 1px solid #dcdce9 !important;
    background: #fff !important;
    color: #0d2474 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-family: Arial !important;
    border-radius: 4px !important;
}

.floating-dark-mode-toggle:hover {
    border-color: #BDB76B !important;
    background: #f0f0f0 !important;
}

body.dark-mode .floating-dark-mode-toggle {
    background: var(--dark-accent-orange) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-secondary) !important;
}

body.dark-mode .floating-dark-mode-toggle:hover {
    background: var(--dark-accent-orange-light) !important;
    border-color: var(--dark-border-light) !important;
}

/* Ensure text is readable in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-text-primary);
}

body.dark-mode label {
    color: var(--dark-text-secondary);
}

/* Form specific styling for PT Analyzer and similar forms */
body.dark-mode #ptform1 label,
body.dark-mode form label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #ptform1 button,
body.dark-mode form button {
    background: var(--dark-gradient-accent) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    box-shadow: var(--dark-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode #ptform1 button:hover,
body.dark-mode form button:hover {
    background: var(--dark-gradient-hover) !important;
    border-color: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
    box-shadow: var(--dark-shadow-md), var(--dark-glow-orange) !important;
    transform: translateY(-2px);
}

body.dark-mode #ptspanbottom {
    background: transparent !important;
}

body.dark-mode .pull-left,
body.dark-mode .pull-right,
body.dark-mode #datefieldsdiv,
body.dark-mode #marketfieldsdiv {
    background: transparent !important;
}

/* Specific adjustments for dashboard elements */
body.dark-mode .dashboard th,
body.dark-mode .dashboard td {
    background-color: var(--dark-table-header);
    color: var(--dark-text-primary);
}

/* JTable specific dark mode styles */
body.dark-mode .jtable-main-container {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-primary);
}

body.dark-mode .jtable-title {
    background-color: var(--dark-table-header);
    color: var(--dark-text-primary);
}

body.dark-mode .jtable-toolbar {
    background-color: var(--dark-bg-accent);
}

/* Ensure all text elements are visible */
body.dark-mode span,
body.dark-mode div,
body.dark-mode p {
    color: inherit;
}

/* Override any specific color declarations that might interfere */
body.dark-mode .maintable td.colnum,
body.dark-mode .tinytable td.colnum {
    color: var(--dark-text-primary);
}

body.dark-mode .maintable td.colleft,
body.dark-mode .tinytable td.colleft {
    color: var(--dark-text-primary);
}

body.dark-mode .maintable td.coltext,
body.dark-mode .tinytable td.coltext {
    color: var(--dark-text-primary);
}

/* Additional fixes for better visibility */

/* Fix text in filter sections and checkboxes */
body.dark-mode label,
body.dark-mode .checkbox label {
    color: var(--dark-text-primary) !important;
}

/* Fix dropdown and select options */
body.dark-mode option {
    background-color: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix date inputs and other input types */
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"] {
    background-color: var(--dark-input-bg) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-input-border) !important;
}

/* Fix file input buttons (Choose File buttons) */
body.dark-mode input[type="file"],
body.dark-mode input.ajax-file {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.dark-mode input[type="file"]:hover,
body.dark-mode input.ajax-file:hover {
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
}

body.dark-mode input[type="file"]:focus,
body.dark-mode input.ajax-file:focus {
    outline: 2px solid var(--dark-accent-blue) !important;
    outline-offset: 2px !important;
    border-color: var(--dark-accent-blue) !important;
}

/* Style the file input button text */
body.dark-mode input[type="file"]::file-selector-button,
body.dark-mode input.ajax-file::file-selector-button {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.dark-mode input[type="file"]::file-selector-button:hover,
body.dark-mode input.ajax-file::file-selector-button:hover {
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
}

/* Fix file description text (No file selected, etc.) */
body.dark-mode span[id*="file_desc"],
body.dark-mode span.file-desc {
    color: var(--dark-text-secondary) !important;
    font-style: italic !important;
    margin-left: 8px !important;
}

/* Fix checkboxes and radio buttons */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    background-color: var(--dark-input-bg) !important;
    border: 1px solid var(--dark-input-border) !important;
    accent-color: var(--dark-accent-orange) !important;
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
    background-color: var(--dark-accent-orange) !important;
    border-color: var(--dark-accent-orange) !important;
}

body.dark-mode input[type="checkbox"]:focus,
body.dark-mode input[type="radio"]:focus {
    outline: 2px solid var(--dark-accent-blue) !important;
    outline-offset: 2px !important;
}

/* Fix checkbox labels */
body.dark-mode input[type="checkbox"] + label,
body.dark-mode input[type="radio"] + label {
    color: var(--dark-text-primary) !important;
}

/* Fix button styling */
body.dark-mode button,
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"] {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    vertical-align: middle !important;
}

body.dark-mode button:hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="submit"]:hover {
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent-orange) !important;
}

/* Fix for top navigation buttons (Admin, Notifications, Training Center, etc.) */
body.dark-mode #buttons_container .standard-button,
body.dark-mode .standard-button {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border: 0.1em solid var(--dark-border-secondary) !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

body.dark-mode #buttons_container .standard-button:hover,
body.dark-mode .standard-button:hover {
    background-color: var(--dark-bg-hover) !important;
    border: 0.1em solid var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
}

/* Fix for specific filter sections */
body.dark-mode .filter-section,
body.dark-mode .form-section {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix text visibility in all divs and spans */
body.dark-mode div,
body.dark-mode span,
body.dark-mode p {
    color: var(--dark-text-primary);
}

/* Fix for any remaining white text on white background issues */
body.dark-mode * {
    color: var(--dark-text-primary);
}

/* Override any inline styles that might be causing issues */
body.dark-mode [style*="color"] {
    color: var(--dark-text-primary) !important;
}

/* Comprehensive text visibility fix for all table content */
body.dark-mode table,
body.dark-mode table *,
body.dark-mode .maintable,
body.dark-mode .maintable *,
body.dark-mode .tinytable,
body.dark-mode .tinytable * {
    color: var(--dark-text-primary) !important;
}

/* Specific fixes for common text elements that might be invisible */
body.dark-mode table td font,
body.dark-mode table td b,
body.dark-mode table td strong,
body.dark-mode table td i,
body.dark-mode table td em,
body.dark-mode table td small {
    color: var(--dark-text-primary) !important;
}

/* Fix for table headers with specific styling */
body.dark-mode th.title,
body.dark-mode .title {
    background-color: var(--dark-bg-accent) !important;
    border-color: var(--dark-border-primary) !important;
}

/* Override to ensure th.title gets orange text */
body.dark-mode th.title {
    color: var(--dark-accent-orange) !important;
}

/* jAlert Dark Mode Styles - Enhanced with light gray border and glow */
body.dark-mode .jAlert {
    background-color: var(--dark-bg-secondary) !important;
    border: 3px solid var(--dark-border-light) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 20px rgba(90, 106, 136, 0.5),
                0 8px 32px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .ja_title {
    background-color: var(--dark-table-header) !important;
    border-color: var(--dark-border-primary) !important;
}

body.dark-mode .ja_title > div {
    color: var(--dark-accent-orange) !important;
    background: transparent !important;
}

body.dark-mode .ja_body {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_body * {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_close {
    background-color: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-secondary) !important;
}

body.dark-mode .ja_close:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_btn_wrap {
    background-color: var(--dark-bg-accent) !important;
}

body.dark-mode .ja_btn_wrap.optBack {
    background-color: var(--dark-bg-accent) !important;
}

body.dark-mode .ja_btn,
body.dark-mode .ja_btn:link,
body.dark-mode .ja_btn:visited,
body.dark-mode .ja_btn:active {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_btn_green,
body.dark-mode .ja_btn_green:link,
body.dark-mode .ja_btn_green:visited {
    background-color: var(--dark-success) !important;
    border-color: var(--dark-success) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_btn_green:hover {
    background-color: #34ce57 !important;
    border-color: #34ce57 !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_btn_red,
body.dark-mode .ja_btn_red:link,
body.dark-mode .ja_btn_red:visited {
    background-color: var(--dark-error) !important;
    border-color: var(--dark-error) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_btn_red:hover {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .ja_wrap {
	background: rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .ja_wrap.ja_wrap_black {
	background: rgba(0, 0, 0, 0.9) !important;
}

/* Glowing animation for Best Ex Analysis button in dark mode - More prominent orange */
@keyframes glowing-dark-mode {
	0% { 
		background: linear-gradient(135deg, #ff5722 0%, #ff7043 100%) !important;
		box-shadow: 0 0 10px #ff7043, 0 0 20px rgba(255, 112, 67, 0.7), 0 0 30px rgba(255, 87, 34, 0.4);
		transform: scale(1);
	}
	50% { 
		background: linear-gradient(135deg, #ff7043 0%, #ff9966 100%) !important;
		box-shadow: 0 0 15px #ff8c42, 0 0 30px rgba(255, 140, 66, 0.9), 0 0 45px rgba(255, 112, 67, 0.6);
		transform: scale(1.02);
	}
	100% { 
		background: linear-gradient(135deg, #ff5722 0%, #ff7043 100%) !important;
		box-shadow: 0 0 10px #ff7043, 0 0 20px rgba(255, 112, 67, 0.7), 0 0 30px rgba(255, 87, 34, 0.4);
		transform: scale(1);
	}
}

body.dark-mode .smallbuttonlink.glowing {
	-webkit-animation: glowing-dark-mode 1500ms infinite !important;
	-moz-animation: glowing-dark-mode 1500ms infinite !important;
	-o-animation: glowing-dark-mode 1500ms infinite !important;
	animation: glowing-dark-mode 1500ms infinite !important;
	color: #ffffff !important;
	border: 2px solid #ff8c42 !important;
	font-weight: 600 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

@keyframes synced-pulse-red {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 14px rgba(255, 61, 0, 0.55);
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
        box-shadow: 0 0 28px rgba(255, 61, 0, 0.95);
    }
}

body.dark-mode #market_pricing_table th.title.timestamp-warning-critical {
    position: relative !important;
    z-index: 1 !important;
    border: none !important;
    background: linear-gradient(180deg, rgba(30,40,60,0.8), rgba(20,25,35,0.9)) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
    overflow: visible !important;
    animation: synced-pulse-red 2s infinite ease-in-out !important;
    transform-origin: center !important;
    margin-bottom: 4px !important;
}

body.dark-mode #market_pricing_table th.title.timestamp-warning-critical::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    border: 2px solid #ff3d00;
    animation: synced-pulse-red 2s infinite ease-in-out !important;
    z-index: 0;
    margin: 2px;
}

body.dark-mode #market_pricing_table,
body.dark-mode #market_pricing_container,
body.dark-mode #market_pricing_box,
body.dark-mode .box_container,
body.dark-mode .box_content {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

body.dark-mode #market_pricing_table th.title.timestamp-warning,
body.dark-mode #market_pricing_table th.title.timestamp-warning-critical {
    z-index: 10 !important;
}

/* MCTBI Logo - Show/Hide based on mode */
/* In light mode, show light logo and hide dark logo */
.mctbi-logo-dark,
img.mctbi-logo-dark {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
}

.mctbi-logo-light,
img.mctbi-logo-light {
	display: inline !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 35px !important;
}

/* In dark mode, show dark logo and hide light logo */
body.dark-mode .mctbi-logo-dark,
body.dark-mode img.mctbi-logo-dark {
	display: inline !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 35px !important;
}

body.dark-mode .mctbi-logo-light,
body.dark-mode img.mctbi-logo-light {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
}

/* Fix jAlert popup buttons in dark mode */
body.dark-mode .ajs-button,
body.dark-mode .ajs-ok,
body.dark-mode .ajs-cancel,
body.dark-mode #popup_ok,
body.dark-mode .ja_btn,
body.dark-mode button[type="button"] {
	background: var(--dark-gradient-accent) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .ajs-button:hover,
body.dark-mode .ajs-ok:hover,
body.dark-mode .ajs-cancel:hover,
body.dark-mode #popup_ok:hover,
body.dark-mode .ja_btn:hover {
	background: var(--dark-gradient-hover) !important;
	border-color: var(--dark-accent-orange) !important;
	color: var(--dark-accent-orange) !important;
	box-shadow: 0 4px 8px rgba(255, 140, 66, 0.3) !important;
}

/* ================================
   Atlas AI Chat Dark Mode Styling
   ================================ */

/* Dialog container - Enhanced with light gray border and glow */
body.dark-mode .ai-dialog.ui-dialog {
	background: var(--dark-bg-secondary) !important;
	border: 3px solid var(--dark-border-light) !important;
	border-radius: 8px !important;
	box-shadow: 0 0 20px rgba(90, 106, 136, 0.5),
	            0 12px 40px rgba(0, 0, 0, 0.8) !important;
}

/* Dialog title bar - Keep orange background for AI chat */
body.dark-mode .ai-dialog.ui-dialog .ui-dialog-titlebar {
	background: linear-gradient(135deg, #ff8c42 0%, #ffb366 100%) !important;
	color: #ffffff !important;
	border-bottom: 1px solid rgba(255, 140, 66, 0.3) !important;
}

/* Dialog title text - Keep white for AI chat (has orange background) */
body.dark-mode .ai-dialog.ui-dialog .ui-dialog-title {
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Dialog content area */
body.dark-mode .ai-dialog.ui-dialog .ui-dialog-content {
	background: var(--dark-bg-primary) !important;
	scrollbar-color: var(--dark-border-secondary) var(--dark-bg-secondary) !important;
}

body.dark-mode .ai-dialog.ui-dialog .ui-dialog-content::-webkit-scrollbar-track {
	background: var(--dark-bg-secondary) !important;
}

body.dark-mode .ai-dialog.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb {
	background-color: var(--dark-border-secondary) !important;
	border-radius: 6px !important;
}

body.dark-mode .ai-dialog.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb:hover {
	background-color: var(--dark-border-light) !important;
}

/* Close button */
body.dark-mode .ai-dialog.ui-dialog .ui-dialog-titlebar-close:hover {
	background: rgba(0, 0, 0, 0.2) !important;
}

/* Chat container */
body.dark-mode .chat_container {
	background: var(--dark-bg-primary) !important;
}

body.dark-mode #message_container {
	background: linear-gradient(180deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%) !important;
}

/* Message styling */
body.dark-mode .user-message {
	background: linear-gradient(135deg, #ff8c42 0%, #ffb366 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3) !important;
}

body.dark-mode .bot-message {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Time indicator */
body.dark-mode .user-message span.time_small {
	color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .bot-message span.time_small {
	color: var(--dark-text-muted) !important;
}

/* Footer styling */
body.dark-mode .chat-footer {
	background: var(--dark-bg-secondary) !important;
	border-top: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .chat-input {
	background: var(--dark-bg-primary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .chat-input::placeholder {
	color: var(--dark-text-muted) !important;
}

body.dark-mode .chat-input:focus {
	border-color: var(--dark-accent-orange) !important;
	background: var(--dark-bg-secondary) !important;
	box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2) !important;
}

body.dark-mode .chat-send {
	background: linear-gradient(135deg, #ff8c42 0%, #ffb366 100%) !important;
	box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4) !important;
}

body.dark-mode .chat-send:hover:not(:disabled) {
	box-shadow: 0 4px 12px rgba(255, 140, 66, 0.6) !important;
}

body.dark-mode .chat-send:disabled {
	background: var(--dark-bg-hover) !important;
	opacity: 0.5 !important;
}

/* Notes section */
body.dark-mode .chat-notes {
	background: var(--dark-bg-secondary) !important;
	border-top: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .chat-notes .icons-container a {
	color: var(--dark-accent-orange) !important;
}

body.dark-mode .chat-notes .icons-container a:hover {
	background: rgba(255, 140, 66, 0.15) !important;
}

/* Dropdown and select elements in chat */
body.dark-mode .ai-dialog select,
body.dark-mode .ai-dialog input[type="text"],
body.dark-mode .ai-dialog textarea {
	background: var(--dark-bg-primary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .ai-dialog select:focus,
body.dark-mode .ai-dialog input[type="text"]:focus,
body.dark-mode .ai-dialog textarea:focus {
	border-color: var(--dark-accent-orange) !important;
	box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.2) !important;
}

/* Chat section dropdown */
body.dark-mode .ai-dialog select option {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* Any labels or text in the dialog */
body.dark-mode .ai-dialog label,
body.dark-mode .ai-dialog .chat-section-label {
	color: var(--dark-text-primary) !important;
}

/* Contact information section */
body.dark-mode .ai-dialog .contact-info,
body.dark-mode .ai-dialog .info-section {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .ai-dialog .contact-info a {
	color: var(--dark-accent-orange) !important;
}

body.dark-mode .ai-dialog .contact-info a:hover {
	color: var(--dark-accent-orange-light) !important;
}

/* Menu dropdown options (hamburger menu) */
body.dark-mode .dropdown-menu {
	background: var(--dark-bg-secondary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .dropdown-menu a,
body.dark-mode .new-chat-option,
body.dark-mode .chat-history-option,
body.dark-mode .close-option {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
	border-bottom: 1px solid var(--dark-border-primary) !important;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .new-chat-option:hover,
body.dark-mode .chat-history-option:hover,
body.dark-mode .close-option:hover {
	background: var(--dark-bg-hover) !important;
	color: var(--dark-accent-orange) !important;
}

/* Hamburger icon button */
body.dark-mode .menu-toggle,
body.dark-mode .hamburger-icon,
body.dark-mode .menu-icon {
	color: #ffffff !important;
}

body.dark-mode .menu-toggle:hover,
body.dark-mode .hamburger-icon:hover,
body.dark-mode .menu-icon:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* Chat History UI elements */
body.dark-mode .chat-room-header {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
	border-bottom: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .back-button {
	background: var(--dark-bg-primary) !important;
	color: var(--dark-accent-orange) !important;
	border: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .back-button:hover {
	background: var(--dark-bg-hover) !important;
	color: var(--dark-accent-orange-light) !important;
}

body.dark-mode .chat-room-item {
	background: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-primary) !important;
}

body.dark-mode .chat-room-item:hover {
	background: var(--dark-bg-hover) !important;
	border-color: var(--dark-accent-orange) !important;
}

/* Message comment sections */
body.dark-mode .message-comment-input {
	background: var(--dark-bg-primary) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .message-comment-input:focus {
	border-color: var(--dark-accent-orange) !important;
	box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.2) !important;
}

body.dark-mode .message-comment-send,
body.dark-mode .message-comment-cancel {
	background: var(--dark-gradient-accent) !important;
	color: var(--dark-text-primary) !important;
	border: 1px solid var(--dark-border-secondary) !important;
}

body.dark-mode .message-comment-send:hover,
body.dark-mode .message-comment-cancel:hover {
	background: var(--dark-gradient-hover) !important;
	color: var(--dark-accent-orange) !important;
}

/* ================================
   Highcharts Dark Mode Styling
   ================================ */

/* Chart container and background */
body.dark-mode .chart,
body.dark-mode .highcharts-container {
    background: transparent !important;
}

/* Main chart background - change from white to dark */
body.dark-mode .highcharts-container rect[fill="#FFFFFF"],
body.dark-mode .highcharts-container rect[fill="#ffffff"],
body.dark-mode .highcharts-container rect[fill="rgb(255,255,255)"],
body.dark-mode .highcharts-container rect[fill="white"] {
    fill: var(--dark-bg-secondary) !important;
}

/* Grid lines - change from light gray to darker */
body.dark-mode .highcharts-grid path[stroke="#e0e0e0"],
body.dark-mode .highcharts-grid path[stroke="#d0d0d0"],
body.dark-mode .highcharts-grid path[stroke="#C0D0E0"] {
    stroke: var(--dark-border-primary) !important;
    stroke-opacity: 0.3 !important;
}

/* Axis lines */
body.dark-mode .highcharts-axis path {
    stroke: var(--dark-border-secondary) !important;
}

/* Chart title */
body.dark-mode .highcharts-title,
body.dark-mode .highcharts-title tspan {
    fill: var(--dark-text-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Axis labels (numbers and dates) */
body.dark-mode .highcharts-axis-labels text,
body.dark-mode .highcharts-axis-labels tspan {
    fill: var(--dark-text-secondary) !important;
    color: var(--dark-text-secondary) !important;
}

/* Y-axis title */
body.dark-mode .highcharts-axis text[text-anchor="middle"],
body.dark-mode .highcharts-axis text tspan {
    fill: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
}

/* Legend background */
body.dark-mode .highcharts-legend rect[fill="none"] {
    fill: var(--dark-bg-accent) !important;
    fill-opacity: 0.8 !important;
    stroke: var(--dark-border-secondary) !important;
}

/* Legend text */
body.dark-mode .highcharts-legend-item text,
body.dark-mode .highcharts-legend-item tspan {
    fill: var(--dark-text-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Tooltip background */
body.dark-mode .highcharts-tooltip rect[fill="rgb(255,255,255)"],
body.dark-mode .highcharts-tooltip rect[fill="#ffffff"],
body.dark-mode .highcharts-tooltip rect[fill="white"] {
    fill: var(--dark-bg-accent) !important;
    fill-opacity: 0.95 !important;
    stroke: var(--dark-accent-orange) !important;
}

/* Tooltip text */
body.dark-mode .highcharts-tooltip span,
body.dark-mode .highcharts-tooltip {
    color: var(--dark-text-primary) !important;
}

/* Tooltip content styling */
body.dark-mode .highcharts-tooltip > div {
    background: var(--dark-bg-accent) !important;
    border: 1px solid var(--dark-accent-orange) !important;
    border-radius: 4px !important;
    box-shadow: var(--dark-shadow-md) !important;
}

body.dark-mode .highcharts-tooltip span {
    background: transparent !important;
    color: var(--dark-text-primary) !important;
}

/* Chart bars and data series - keep original colors but adjust for dark mode */
body.dark-mode .highcharts-series rect[fill="rgb(48,128,208)"] {
    fill: rgb(72, 158, 255) !important;
    fill-opacity: 0.7 !important;
}

/* Plot background */
body.dark-mode .highcharts-plot-background {
    fill: var(--dark-bg-primary) !important;
}

/* Crosshair */
body.dark-mode .highcharts-crosshair {
    stroke: var(--dark-accent-orange) !important;
}

/* Data labels */
body.dark-mode .highcharts-data-label text,
body.dark-mode .highcharts-data-label tspan {
    fill: var(--dark-text-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Highcharts credits link */
body.dark-mode .highcharts-credits,
body.dark-mode .highcharts-credits text {
    fill: var(--dark-text-muted) !important;
    color: var(--dark-text-muted) !important;
}

/* Plot bands and lines */
body.dark-mode .highcharts-plot-band {
    fill: var(--dark-bg-hover) !important;
    fill-opacity: 0.1 !important;
}

body.dark-mode .highcharts-plot-line {
    stroke: var(--dark-accent-orange) !important;
}

/* Series hover state */
body.dark-mode .highcharts-series:hover rect {
    fill-opacity: 0.9 !important;
}

/* Button styling for chart export buttons */
body.dark-mode .highcharts-button rect {
    fill: var(--dark-bg-accent) !important;
    stroke: var(--dark-border-secondary) !important;
}

body.dark-mode .highcharts-button text {
    fill: var(--dark-text-primary) !important;
}

body.dark-mode .highcharts-button:hover rect {
    fill: var(--dark-bg-hover) !important;
}

body.dark-mode .highcharts-button:hover text {
	fill: var(--dark-accent-orange) !important;
}

/* Warning box styling */
.warning-box {
	background-color: #fff3cd;
	border: 1px solid #ffeaa7;
	color: #856404;
}

body.dark-mode .warning-box {
	background-color: rgba(255, 193, 7, 0.15);
	border: 1px solid var(--dark-warning);
	color: var(--dark-warning);
}

/* Warning bar styling for dark mode (Invalid Trade Settlement Dates) */
body.dark-mode .warning-bar {
	background: linear-gradient(135deg, 
		var(--dark-bg-secondary) 0%, 
		var(--dark-bg-accent) 100%) !important;
	color: var(--dark-error) !important;
	border: 1px solid rgba(220, 53, 69, 0.3) !important;
	text-shadow: 0 0 6px rgba(220, 53, 69, 0.2) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .warning-bar:hover {
	background: linear-gradient(135deg, 
		var(--dark-bg-accent) 0%, 
		var(--dark-bg-hover) 100%) !important;
	border-color: rgba(220, 53, 69, 0.5) !important;
	text-shadow: 0 0 8px rgba(220, 53, 69, 0.3) !important;
	transform: translateY(-1px) !important;
	transition: all 0.3s ease !important;
}

/* TAM winning bid highlighting (highest-price) for dark mode */
body.dark-mode tr.highest-price > td,
body.dark-mode td.highest-price {
	background-color: rgba(40, 167, 69, 0.25) !important;
	border: 1px solid rgba(40, 167, 69, 0.2) !important;
	font-weight: 600 !important;
	box-shadow: inset 0 0 10px rgba(40, 167, 69, 0.15) !important;
}

/* Ensure highest-price highlighting is visible on hover */
body.dark-mode tr.highest-price:hover > td,
body.dark-mode tr:hover > td.highest-price {
	background-color: rgba(40, 167, 69, 0.35) !important;
	border: 1px solid rgba(40, 167, 69, 0.25) !important;
	font-weight: 600 !important;
	box-shadow: inset 0 0 15px rgba(40, 167, 69, 0.2) !important;
}

/* AOT trades table - Today's trades highlighting for dark mode */
body.dark-mode table tr.today-aot td {
	background: transparent !important; /* Use standard table background */
}

/* Let standard hover effects apply to today-aot rows */
body.dark-mode table tr.today-aot:hover td:not(:has(table)) {
	background: linear-gradient(90deg, 
		rgba(255, 140, 66, 0.15) 0%, 
		rgba(255, 140, 66, 0.08) 50%,
		rgba(255, 140, 66, 0.15) 100%) !important;
	color: var(--dark-accent-orange-light) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Zero Values highlighting in Exception Summary - Dark Mode */
/* Match both hex (#ff0000 from PHP) and rgb(255, 0, 0) from JavaScript CSSOM serialization */
body.dark-mode #zero_values_info[style*="color: #ff0000"],
body.dark-mode #zero_values_info[style*="color: rgb(255, 0, 0)"] {
    color: #ff9500 !important; /* Use orange color */
    text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important; /* Add orange glow effect */
    font-weight: bold !important;
}

/* Orange highlighting for Zero Values on hover */
body.dark-mode #zero_values_info[style*="color: #ff0000"]:hover,
body.dark-mode #zero_values_info[style*="color: rgb(255, 0, 0)"]:hover {
    color: #ffb347 !important; /* Lighter orange on hover */
    text-shadow: 0 0 12px rgba(255, 149, 0, 0.6) !important;
    transition: all 0.3s ease !important;
}

/* Make the entire Zero Values row more prominent when there are issues */
body.dark-mode #exception_summary_table tr:has(#zero_values_info[style*="color: #ff0000"]),
body.dark-mode #exception_summary_table tr:has(#zero_values_info[style*="color: rgb(255, 0, 0)"]) {
    background: linear-gradient(90deg, 
        rgba(255, 149, 0, 0.1) 0%, 
        rgba(255, 149, 0, 0.05) 50%,
        rgba(255, 149, 0, 0.1) 100%) !important;
}

/* Remove all borders from Zero Values row cells */
body.dark-mode #exception_summary_table tr:has(#zero_values_info[style*="color: #ff0000"]) td,
body.dark-mode #exception_summary_table tr:has(#zero_values_info[style*="color: rgb(255, 0, 0)"]) td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Disable hover effects on best execution filters table */
body.dark-mode table#best_execution_filters tr:hover td,
body.dark-mode table#best_execution_filters tr:hover td:not(:has(table)),
body.dark-mode .maintable#best_execution_filters tr:hover td,
body.dark-mode .maintable#best_execution_filters tr:hover td:not(:has(table)) {
	background: none !important;
	color: inherit !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Disable ::before pseudo-element on hover for best execution filters */
body.dark-mode table#best_execution_filters tr:hover td::before,
body.dark-mode table#best_execution_filters tr:hover td:not(:has(table))::before,
body.dark-mode .maintable#best_execution_filters tr:hover td::before,
body.dark-mode .maintable#best_execution_filters tr:hover td:not(:has(table))::before {
	display: none !important;
}

/* Ensure all child elements in best execution filters maintain normal colors on hover */
body.dark-mode table#best_execution_filters tr:hover td *,
body.dark-mode table#best_execution_filters tr:hover td a,
body.dark-mode table#best_execution_filters tr:hover td span,
body.dark-mode table#best_execution_filters tr:hover td div,
body.dark-mode table#best_execution_filters tr:hover td label {
	color: inherit !important;
	text-shadow: none !important;
}

/* =============================================
   Execution Analysis Optimizer - Light Mode (Base)
   ============================================= */

/* Light mode sticky headers */
#execution-analysis-optimizer-popup th.sticky-header,
#execution-analysis-optimizer-popup .optimization-table th,
#execution-analysis-optimizer-popup .optimizer-table-container th,
#execution-analysis-optimizer-popup #optimizer-data-table th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10;
	background: #f0f0f0;
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #ddd;
}

/* Second row headers need different top offset - Light mode */
#execution-analysis-optimizer-popup #optimizer-data-table thead tr:nth-child(2) th {
	top: 25px;
	z-index: 9;
}

/* Ensure scroll containers work properly for sticky - Light mode */
#execution-analysis-optimizer-popup .optimizer-table-container,
#execution-analysis-optimizer-popup .spec-table-wrapper,
#execution-analysis-optimizer-popup .pool-table-wrapper {
	overflow: auto;
	position: relative;
}

/* Override table overflow for sticky headers - Light mode */
#execution-analysis-optimizer-popup table,
#execution-analysis-optimizer-popup .optimizer-table-container table,
#execution-analysis-optimizer-popup .spec-table-wrapper table,
#execution-analysis-optimizer-popup .pool-table-wrapper table,
#execution-analysis-optimizer-popup .optimization-table,
#execution-analysis-optimizer-popup #optimizer-data-table table {
	overflow: visible;
	border-radius: 0;
}

/* Total row styling - Light mode */
#execution-analysis-optimizer-popup .optimization-table tr.total-row td,
#execution-analysis-optimizer-popup .pool-breakdown-table tr.total-row td {
	background: #4a90d9;
	color: #fff;
	font-weight: bold;
}

/* Table cell borders - Light mode */
#execution-analysis-optimizer-popup .optimizer-main-table td,
#execution-analysis-optimizer-popup .optimization-table td,
#execution-analysis-optimizer-popup .pool-breakdown-table td {
	border: 1px solid #ddd;
}

/* =============================================
   Execution Analysis Optimizer - Dark Mode
   ============================================= */

/* Dark mode sticky headers */
/* Note: z-index is NOT set here - it's intentionally set by JavaScript with different values */
/* (z-index 12 for rowspan=2 fixed columns, 11 for investor headers, 10 for spec headers) */
body.dark-mode #execution-analysis-optimizer-popup th.sticky-header,
body.dark-mode #execution-analysis-optimizer-popup .optimization-table th,
body.dark-mode #execution-analysis-optimizer-popup .optimizer-table-container th,
body.dark-mode #execution-analysis-optimizer-popup #optimizer-data-table th {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	background: #1a1a2e !important;
	background-color: #1a1a2e !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Second row headers need different top offset */
body.dark-mode #execution-analysis-optimizer-popup #optimizer-data-table thead tr:nth-child(2) th {
	top: 25px !important;
	z-index: 9 !important;
}

/* Ensure scroll containers work properly for sticky */
body.dark-mode #execution-analysis-optimizer-popup .optimizer-table-container,
body.dark-mode #execution-analysis-optimizer-popup .spec-table-wrapper,
body.dark-mode #execution-analysis-optimizer-popup .pool-table-wrapper {
	overflow: auto !important;
	position: relative !important;
}

/* CRITICAL: Override the default table overflow:hidden which breaks sticky headers */
body.dark-mode #execution-analysis-optimizer-popup table,
body.dark-mode #execution-analysis-optimizer-popup .optimizer-table-container table,
body.dark-mode #execution-analysis-optimizer-popup .spec-table-wrapper table,
body.dark-mode #execution-analysis-optimizer-popup .pool-table-wrapper table,
body.dark-mode #execution-analysis-optimizer-popup .optimization-table,
body.dark-mode #execution-analysis-optimizer-popup #optimizer-data-table table {
	overflow: visible !important;
	border-radius: 0 !important;
}

/* Total row styling for dark mode */
body.dark-mode #execution-analysis-optimizer-popup .optimization-table tr.total-row td,
body.dark-mode #execution-analysis-optimizer-popup .pool-breakdown-table tr.total-row td {
	background: #3d5a80 !important;
	color: #fff !important;
	font-weight: bold !important;
}

/* Table cell borders - Dark mode */
body.dark-mode #execution-analysis-optimizer-popup .optimizer-main-table td,
body.dark-mode #execution-analysis-optimizer-popup .optimization-table td,
body.dark-mode #execution-analysis-optimizer-popup .pool-breakdown-table td {
	border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Disable the transform on hover for optimizer summary tables (prevents horizontal scrollbar) */
body.dark-mode #execution-analysis-optimizer-popup .optimization-table tr:hover td,
body.dark-mode #execution-analysis-optimizer-popup .pool-breakdown-table tr:hover td,
body.dark-mode #execution-analysis-optimizer-popup .spec-table-wrapper table tr:hover td,
body.dark-mode #execution-analysis-optimizer-popup .pool-table-wrapper table tr:hover td {
	transform: none !important;
	box-shadow: none !important;
}