/* Dark Mode CSS for Quantify */

/* Dark theme CSS variables - Modern IDE-Inspired Theme (Default) */
html[data-theme="dark"] {
    --body-bg: #0C0C0C; /* Slightly lighter than the darkest black */
    --card-bg: #101010; /* Increased contrast for cards */
    --card-border: #181818; /* Slightly darker border for better definition */
    --card-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    --text-color: #80D080; /* Soft green for text */
    --text-bright: #00C000; /* Brighter green for important elements */
    --text-muted: rgba(128, 208, 128, 0.7);
    --sidebar-bg: #070707; /* Slightly darker than content */
    --sidebar-border: #151515; /* Subtle border */
    --nav-item-hover: rgba(0, 184, 0, 0.08); /* Very subtle hover effect */
    --nav-item-active-bg: rgba(0, 184, 0, 0.12);
    --nav-item-active-color: #00C000;
    --btn-primary-bg: #00C000;
    --btn-primary-hover: #00D400;
    --input-bg: #080808; /* Dark inputs on lighter background */
    --input-border: #1C1C1C; /* Subtle border */
    --input-focus-border: #00B800; /* Keep green for focus states */
    --table-border: #151515;
    --table-stripe: rgba(0, 0, 0, 0.15); /* Just slightly darker */
    --hover-bg: #101010; /* Slightly lighter for hover states */
    --table-header-bg: #0A0A0A;
    --highlight-accent: #A0FFA0;
    --accent-green: #00C000;
    --card-header-bg: #141414; /* Adjusted header for new card bg */
    --card-footer-bg: #0F0F0F; /* Adjusted footer for new card bg */
    
    /* IDE-inspired syntax colors */
    --ide-white: #E6E6E6; /* Base text color */
    --ide-comment: #7C8A98; /* Muted text/metadata */
    --ide-string: #98C379; /* Strings, descriptions */
    --ide-number: #61AFEF; /* Numbers, amounts */
    --ide-keyword: #C792EA; /* Keywords, special fields */
    --ide-variable: #E6C07B; /* Variables, client names */
    --ide-function: #56B6C2; /* Functions, actions */
    --ide-error: #F07178; /* Errors, negative values */
}

/* Retro Nightvision Green Theme Variables */
html[data-theme="dark"][data-dark-style="retro"] {
    --body-bg: #080808; /* Darker background */
    --card-bg: rgba(8, 8, 8, 0.95); /* Slightly transparent card background */
    --card-border: #00F200; /* Bright green borders */
    --card-shadow: 0 0 20px rgba(0, 242, 0, 0.2);
    --text-color: #00F200; /* Bright green text */
    --text-bright: #00F200; /* Everything is bright green */
    --text-muted: rgba(0, 242, 0, 0.7); /* Slightly transparent green */
    --sidebar-bg: #050505;
    --sidebar-border: #00F200;
    --nav-item-hover: rgba(0, 242, 0, 0.1);
    --nav-item-active-bg: rgba(0, 242, 0, 0.15);
    --nav-item-active-color: #00F200;
    --btn-primary-bg: #00F200;
    --btn-primary-hover: #00D400;
    --input-bg: rgba(8, 8, 8, 0.95);
    --input-border: #333333;
    --input-focus-border: #00F200;
    --table-border: #333333;
    --table-stripe: rgba(0, 242, 0, 0.05);
    --hover-bg: #0A0A0A;
    --table-header-bg: #111111;
    --highlight-accent: #00FF00;
    --accent-green: #00F200;
    --card-header-bg: rgba(5, 5, 5, 0.8);
    --card-footer-bg: rgba(5, 5, 5, 0.8);
    
    /* Override the IDE colors with bright green for retro mode */
    --ide-white: #00F200;
    --ide-comment: #00F200;
    --ide-string: #00F200;
    --ide-number: #00F200;
    --ide-keyword: #00F200;
    --ide-variable: #00F200;
    --ide-function: #00F200;
    --ide-error: #FF6B6B;
}

/* Dark mode body styles */
html[data-theme="dark"] body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

/* Dark mode navbar styling */
html[data-theme="dark"] .navbar {
    background-color: rgba(8, 8, 8, 0.97) !important;
    border-bottom: 1px solid var(--card-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: var(--card-border) !important;
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1) sepia(100%) hue-rotate(68deg) saturate(10000%) brightness(1);
}

/* Search input and icon styling for dark mode */
html[data-theme="dark"] .search-icon {
    color: var(--text-bright) !important;
    opacity: 0.8 !important;
}

html[data-theme="dark"] #quoteSearch {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] #quoteSearch:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] #quoteSearch::placeholder {
    color: rgba(128, 208, 128, 0.5) !important;
}

/* Override placeholder for retro theme */
html[data-theme="dark"][data-dark-style="retro"] #quoteSearch::placeholder {
    color: rgba(0, 242, 0, 0.5) !important;
}

/* Switch logo to nightvision version in dark mode */
html[data-theme="dark"] .navbar-brand img[alt="Introl Logo"] {
    content: url('/static/images/introl_nightvision.svg');
}

/* Hide the default SVG logo in sidebar when in dark mode and show nightvision version */
html[data-theme="dark"] .logo-container svg {
    display: none !important;
}

html[data-theme="dark"] .logo-container .nightvision-logo {
    display: block !important;
}

/* Dark mode sidebar */
html[data-theme="dark"] .sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}

/* Dark mode nav items */
html[data-theme="dark"] .sidebar-nav-item {
    color: var(--text-color);
}

html[data-theme="dark"] .sidebar-nav-item:hover {
    background-color: var(--nav-item-hover);
    color: var(--text-bright);
}

html[data-theme="dark"] .sidebar-nav-item.active {
    background-color: var(--nav-item-active-bg);
    color: var(--nav-item-active-color);
}

/* Dark mode headings */
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
    color: var(--text-bright);
}

/* Dark mode cards */
html[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow);
}

/* Override border width for retro theme */
html[data-theme="dark"][data-dark-style="retro"] .card {
    border-width: 2px !important;
}

html[data-theme="dark"] .card .card-header {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text-bright) !important;
}

/* Override border width for retro theme */
html[data-theme="dark"][data-dark-style="retro"] .card .card-header {
    border-bottom-width: 2px !important;
}

html[data-theme="dark"] .card .card-footer {
    background-color: var(--card-footer-bg) !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

/* Override border width for retro theme */
html[data-theme="dark"][data-dark-style="retro"] .card .card-footer {
    border-top-width: 2px !important;
}

/* Target cards in specific templates to ensure consistency */
html[data-theme="dark"] .quote-card .card,
html[data-theme="dark"] .container > .card,
html[data-theme="dark"] form > .card {
    border: 1px solid var(--card-border) !important;
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

/* Override border width for retro theme */
html[data-theme="dark"][data-dark-style="retro"] .quote-card .card,
html[data-theme="dark"][data-dark-style="retro"] .container > .card,
html[data-theme="dark"][data-dark-style="retro"] form > .card {
    border-width: 2px !important;
}

html[data-theme="dark"] .card:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* Enhanced dark mode forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border) !important;
    border-radius: 6px;
    color: var(--text-color) !important;
    transition: all 0.2s ease;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Override border width for retro theme */
html[data-theme="dark"][data-dark-style="retro"] .form-control,
html[data-theme="dark"][data-dark-style="retro"] .form-select {
    border-width: 2px !important;
}

/* Form control focus styles */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Date inputs need special handling */
html[data-theme="dark"] input[type="date"] {
    color-scheme: dark !important; /* Affects the calendar dropdown */
    position: relative;
}

/* Target all card headers in forms with high specificity */
html[data-theme="dark"] form .card .card-header,
html[data-theme="dark"] #quoteForm .card .card-header,
html[data-theme="dark"] .card-header.bg-light,
html[data-theme="dark"] form .card-header.bg-light,
html[data-theme="dark"] [data-header="form-section"],
html[data-theme="dark"] .card-header {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text-bright) !important;
}

/* Important override with maximum specificity for quote form */
html[data-theme="dark"] #quoteForm .card > .card-header {
    border-bottom: 1px solid var(--card-border) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--card-border) !important;
}

/* Target form card header headings specifically */
html[data-theme="dark"] form .card-header h4,
html[data-theme="dark"] #quoteForm .card-header h4,
html[data-theme="dark"] .card-header.bg-light h4,
html[data-theme="dark"] [data-header="form-section"] h4,
html[data-theme="dark"] .card-header h4 {
    color: var(--text-bright) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 0 5px rgba(0, 184, 0, 0.3);
}

/* Enhanced form label styling */
html[data-theme="dark"] .form-label {
    color: var(--text-color) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Enhanced checkboxes and radio buttons */
html[data-theme="dark"] .form-check-input {
    background-color: var(--card-bg);
    border: 1px solid var(--input-border) !important;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    cursor: pointer;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--card-bg);
    border-color: var(--accent-green) !important;
}

/* Custom check style for radio buttons */
html[data-theme="dark"] .form-check-input[type="radio"]:checked {
    background-image: radial-gradient(var(--ide-function) 40%, transparent 50%) !important;
}

/* Custom check style for checkboxes */
html[data-theme="dark"] .form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2300B800' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 184, 0, 0.25);
    outline: none;
}

html[data-theme="dark"] .form-check-label {
    color: var(--text-color) !important;
    cursor: pointer;
    padding-left: 4px;
}

/* Style the alert info box */
html[data-theme="dark"] .alert-info {
    background-color: rgba(0, 184, 0, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-color);
}

html[data-theme="dark"] .alert-info i {
    color: var(--text-bright);
    margin-right: 8px;
}

/* Style required asterisks */
html[data-theme="dark"] .text-danger {
    color: #ff6b6b !important;
}

/* Focus effect for inputs */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-check-input:focus {
    border-color: #00B800 !important;
    box-shadow: 0 0 8px rgba(0, 184, 0, 0.4);
}

/* Better placeholder styling */
html[data-theme="dark"] .form-control::placeholder {
    color: rgba(128, 208, 128, 0.5);
    opacity: 0.7;
}

/* Loading spinner styling */
html[data-theme="dark"] .spinner-border.text-primary {
    border-color: #00B800;
    border-right-color: transparent;
}

/* Custom styling for form sections */
html[data-theme="dark"] .card .card-body {
    border-top: none;
    border-radius: 0 0 16px 16px;
}

/* Form button styling */
html[data-theme="dark"] #generate-quote-btn {
    background-color: var(--btn-primary-bg);
    border-color: transparent;
    color: #080808;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

html[data-theme="dark"] #generate-quote-btn:hover {
    background-color: var(--btn-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

html[data-theme="dark"] #generate-quote-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 184, 0, 0.3);
}

/* HTMX indicator text */
html[data-theme="dark"] #loading p {
    color: var(--text-color) !important;
}

/* Dark mode tables - Comprehensive fixes */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table tr,
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table tbody {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--table-border) !important;
}

html[data-theme="dark"] .table-light, 
html[data-theme="dark"] .table-light td, 
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] tr.table-light {
    background-color: rgba(20, 20, 20, 0.9) !important;
    position: relative;
}

html[data-theme="dark"] tr.table-light td {
    background: linear-gradient(to right, rgba(86, 182, 194, 0.05), transparent 70%) !important;
    border-left: 2px solid var(--ide-function) !important;
    padding-left: 12px !important;
    color: var(--ide-function) !important;
    font-weight: 600 !important;
}

html[data-theme="dark"] .data-row,
html[data-theme="dark"] .data-row td {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .data-row:hover td {
    background-color: rgba(30, 30, 30, 0.7) !important;
    box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.15);
}

html[data-theme="dark"] .total-amount-row td {
    color: var(--text-bright) !important;
    border-top-color: var(--input-border) !important;
}

html[data-theme="dark"] .total-amount-row td[style*="border-top"] {
    border-top-color: rgba(97, 175, 239, 0.3) !important; /* IDE-number color for border */
}

/* Fix for the text danger class in tables */
html[data-theme="dark"] .text-danger {
    color: #ff6b6b !important;
}

/* Fix for tables with striped rows */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--card-header-bg) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .table th {
    background-color: var(--card-header-bg) !important;
}

/* Dark mode buttons */
html[data-theme="dark"] .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: transparent;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--btn-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

html[data-theme="dark"] .btn-outline-primary {
    color: var(--text-bright);
    border-color: var(--input-border);
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--btn-primary-bg);
    border-color: transparent;
    color: #080808;
}

/* Replace elite-green with nightvision green for all elements */
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] [class*="bg-elite"],
html[data-theme="dark"] [style*="var(--elite-green)"] {
    background-color: #00B800 !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] [class*="text-elite"],
html[data-theme="dark"] [style*="var(--elite-green)"] {
    color: #00B800 !important;
}

html[data-theme="dark"] .border-primary,
html[data-theme="dark"] [class*="border-elite"],
html[data-theme="dark"] [style*="var(--elite-green)"] {
    border-color: #00B800 !important;
}

/* Dark mode dropdown menus */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text-color);
}

html[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--nav-item-hover);
    color: var(--text-bright);
}

html[data-theme="dark"] .dropdown-item i {
    color: var(--text-bright) !important;
}

/* Dark mode text */
html[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Dark mode tooltips */
html[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: #000;
    border: 1px solid var(--card-border);
    color: var(--text-bright);
    border-radius: 16px;
}

/* Dark mode badges */
html[data-theme="dark"] .badge.bg-primary {
    background-color: #00B800 !important;
    color: #080808 !important;
}

html[data-theme="dark"] .badge.bg-secondary {
    background-color: #1A1A1A !important;
    color: var(--text-color) !important;
}

/* Force all links to be nightvision green but softer than before */
html[data-theme="dark"] a {
    color: var(--text-bright);
}

html[data-theme="dark"] a:hover {
    color: var(--highlight-accent);
}

/* Dark mode pagination */
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

html[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--hover-bg);
    color: #00B800;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #00B800;
    border-color: #00B800;
    color: #080808;
}

/* Dark mode modal */
html[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--card-border);
    background-color: var(--card-header-bg);
}

html[data-theme="dark"] .modal-footer {
    border-top-color: var(--card-border);
    background-color: var(--card-footer-bg);
}

/* Dark mode alerts */
html[data-theme="dark"] .alert-primary {
    background-color: rgba(0, 184, 0, 0.08);
    border-color: rgba(0, 184, 0, 0.15);
    color: var(--text-bright);
}

html[data-theme="dark"] .alert-secondary {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--card-border);
    color: var(--text-color);
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
}

/* Dark mode theme toggle button */
.theme-toggle {
    position: relative;
    width: 64px;
    height: 28px;
    border-radius: 16px;
    background-color: #DDD;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.theme-toggle.dark {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

.theme-toggle .toggle-handle {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 16px;
    background-color: #FFF;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 2;
}

.theme-toggle.dark .toggle-handle {
    transform: translateX(36px);
    background-color: var(--accent-green);
}

/* Icon styling for the toggle button */
.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
    font-size: 16px;
    z-index: 1;
    position: absolute;
    transition: opacity 0.3s ease;
}

/* Position sun icon 30px from the left */
.theme-toggle .sun-icon {
    color: #555;
    left: 30px;
    opacity: 1;
}

/* Position moon icon on the left side */
.theme-toggle .moon-icon {
    color: #CCC;
    left: 12px;
    opacity: 0; /* Hidden in light mode */
}

/* Adjustments for dark mode state */
.theme-toggle.dark .sun-icon {
    opacity: 0; /* Hidden in dark mode */
}

.theme-toggle.dark .moon-icon {
    color: var(--accent-green); /* Bright in dark mode */
    opacity: 1; /* Visible in dark mode */
}

/* Special effects for dark mode */
html[data-theme="dark"] .card {
    position: relative;
    isolation: isolate;
}

html[data-theme="dark"] .card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(0, 184, 0, 0.03), transparent);
    border-radius: inherit;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

/* Fix for dark mode form input placeholders */
html[data-theme="dark"] .form-control::placeholder {
    color: rgba(128, 208, 128, 0.5);
}

/* Dark mode code and preformatted text */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background-color: #0A0A0A;
    color: #00B800;
    border-color: #333;
}

/* Additional dark mode touches */
html[data-theme="dark"] .default-avatar {
    background-color: var(--card-bg) !important;
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .user-name {
    color: var(--text-color);
}

html[data-theme="dark"] .price-container {
    /* This will now be controlled by the IDE-inspired color scheme section */
}

html[data-theme="dark"] .quote-amount {
    /* This will now be controlled by the IDE-inspired color scheme section */
}

html[data-theme="dark"] .mobile-sidebar-toggle {
    border-radius: 16px;
    background-color: var(--btn-primary-bg);
    color: #080808;
}

html[data-theme="dark"] .mobile-sidebar-toggle:hover {
    background-color: var(--btn-primary-hover);
}

/* Target Bootstrap components with white backgrounds */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

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

/* Style specific element sections */
html[data-theme="dark"] h5, 
html[data-theme="dark"] .fw-bold,
html[data-theme="dark"] .fw-medium,
html[data-theme="dark"] .component-name {
    color: #00B800 !important;
}

/* Target inline styles that specify tactical black */
html[data-theme="dark"] [style*="color: var(--tactical-black)"],
html[data-theme="dark"] [style*="color:#"],
html[data-theme="dark"] [style*="color: #"] {
    color: inherit !important; /* Let our IDE-inspired scheme take over */
}

/* Ensure all Bootstrap components use our colors */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white {
    background-color: #111 !important;
    border-color: #333 !important;
    color: #00B800 !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: #080808;
    border-color: #333;
    color: #00B800;
}

/* Make sure all inputs and form elements follow the scheme */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control-plaintext {
    background-color: #080808 !important;
    color: var(--text-color) !important;
}

/* Ensure any white text is changed to nightvision green */
html[data-theme="dark"] .text-white,
html[data-theme="dark"] .text-light {
    color: #00B800 !important;
}

/* Target empty spacing rows in table */
html[data-theme="dark"] tr[style*="height: 40px"] td {
    background-color: #080808 !important;
}

/* Make sure no Bootstrap utility classes use white */
html[data-theme="dark"] [class*="bg-white"],
html[data-theme="dark"] [class*="bg-light"] {
    background-color: #080808 !important;
}

/* Style quote cards specifically for dark mode */
html[data-theme="dark"] .quote-card .badge.bg-secondary {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .quote-card .quote-number,
html[data-theme="dark"] .quote-card .text-secondary,
html[data-theme="dark"] .client-name,
html[data-theme="dark"] .card-title {
    /* This will now be controlled by the IDE-inspired color scheme section */
}

/* Fix total amount row to have nightvision green underline */
html[data-theme="dark"] .total-amount-row td[style*="border-top"] {
    border-top: 2px solid var(--input-border) !important;
}

html[data-theme="dark"] .quote-card .badge.bg-dark {
    background-color: #111 !important;
    color: #00B800 !important;
}

html[data-theme="dark"] .quote-card .rounded-circle.bg-light {
    background-color: #111 !important;
}

/* Specifically target the quote_detail bg elements */
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table thead tr {
    background-color: var(--card-bg) !important;
}

/* Fix table section headers */
html[data-theme="dark"] .table-responsive {
    background-color: var(--card-bg) !important;
}

/* Monospace font for prices in modern theme */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .price-container,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-body .price-container {
    font-family: "Source Code Pro", monospace !important;
}

/* Enhanced scanline for retro theme */
html[data-theme="dark"][data-dark-style="retro"] body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 50%, 
        rgba(0, 242, 0, 0.05) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.3;
}

/* Ensure theme toggle colors match the theme */
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle-container i.bi-circle-half,
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle-container span,
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle.dark .moon-icon {
    color: #00F200 !important;
}

html[data-theme="dark"][data-dark-style="retro"] .theme-toggle.dark .toggle-handle {
    background-color: #00F200 !important;
}

/* Prevent FOUC (Flash of Unstyled Content) during theme switch */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Due date styling in dark mode */
html[data-theme="dark"] .due-date {
    /* This will now be controlled by the IDE-inspired color scheme section */
}

/* Dark mode skeleton UI - enhanced for better contrast */
html[data-theme="dark"] .skeleton-line,
html[data-theme="dark"] .skeleton-circle {
    background-color: #181818 !important; 
    opacity: 0.7;
}

html[data-theme="dark"] .skeleton-quote-card .card,
html[data-theme="dark"] .skeleton-card .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow);
}

/* More visible shimmer effect for dark mode */
html[data-theme="dark"] .shimmer-overlay {
    background: linear-gradient(90deg, transparent, rgba(128, 208, 128, 0.04), transparent) !important;
}

/* Override the shimmer animation in dark mode */
html[data-theme="dark"] .skeleton-card .skeleton-line::after,
html[data-theme="dark"] .skeleton-card .skeleton-pill::after,
html[data-theme="dark"] .skeleton-card .skeleton-circle::after {
    background-image: linear-gradient(
        90deg,
        rgba(16, 16, 16, 0) 0%,
        rgba(80, 184, 80, 0.08) 50%,
        rgba(16, 16, 16, 0) 100%
    ) !important;
    animation-duration: 2s !important;
}

/* Override skeleton card headers/footers */
html[data-theme="dark"] .skeleton-quote-card .card-header,
html[data-theme="dark"] [class*="skeleton"] .card-header,
html[data-theme="dark"] .card.skeleton .card-header,
html[data-theme="dark"] .skeleton .card .card-header,
html[data-theme="dark"] .skeleton-card .card-header {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .skeleton-quote-card .card-footer,
html[data-theme="dark"] [class*="skeleton"] .card-footer,
html[data-theme="dark"] .card.skeleton .card-footer,
html[data-theme="dark"] .skeleton .card .card-footer,
html[data-theme="dark"] .skeleton-card .card-footer {
    background-color: var(--card-footer-bg) !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

/* Force all skeleton elements to use dark backgrounds in dark mode */
html[data-theme="dark"] [class*="skeleton"] *,
html[data-theme="dark"] .skeleton * {
    background-color: var(--card-bg) !important;
    color: #00B800 !important;
}

html[data-theme="dark"] [class*="skeleton"] .card,
html[data-theme="dark"] .skeleton .card {
    border: 1px solid var(--card-border) !important;
}

/* Override any inline styles in skeleton cards */
html[data-theme="dark"] .skeleton-card .card.bg-white,
html[data-theme="dark"] .skeleton-card .card[class*="bg-white"],
html[data-theme="dark"] .skeleton-card .card[style*="background-color: #fff"],
html[data-theme="dark"] .skeleton-card .card[style*="background-color:#fff"] {
    background-color: var(--card-bg) !important;
}

/* Override bg-light completely for all form elements */
html[data-theme="dark"] form .bg-light,
html[data-theme="dark"] form [class*="bg-light"],
html[data-theme="dark"] form [class^="bg-light"] {
    background-color: rgba(5, 5, 5, 0.8) !important;
    color: #00B800 !important;
}

/* Account tab border in dark mode */
html[data-theme="dark"] .sidebar-footer {
    border-top: 1px solid var(--sidebar-border) !important;
}

/* Custom scrollbar for dark mode - horizontal only */
html[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: #333 var(--card-bg);
}

html[data-theme="dark"]::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

html[data-theme="dark"]::-webkit-scrollbar-track {
    background: #080808;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 8px;
    border: 2px solid var(--card-bg);
}

/* Target specific elements with scrollbars */
html[data-theme="dark"] .table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 0;  /* Hide vertical scrollbar */
}

html[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: #0A0A0A;
}

html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 8px;
    border: 2px solid #0A0A0A;
}

html[data-theme="dark"] .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #333 #0A0A0A;
    overflow-y: hidden; /* Ensure only horizontal scrolling */
    background-color: var(--card-bg) !important;
}

/* Ensure quote number styling is consistent */
html[data-theme="dark"] .quote-number,
html[data-theme="dark"] span.quote-number,
html[data-theme="dark"] .quote-card .quote-number,
html[data-theme="dark"] .card-header .quote-number {
    /* This will now be controlled by the IDE-inspired color scheme section */
}

/* Overflow menu button and icons */
html[data-theme="dark"] .dropdown .btn-light,
html[data-theme="dark"] .dropdown .btn-sm.btn-light,
html[data-theme="dark"] button[data-bs-toggle="dropdown"] {
    background-color: var(--card-header-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-bright) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem !important;
    width: 32px !important;
    height: 32px !important;
}

html[data-theme="dark"] .dropdown .btn:hover {
    background-color: var(--hover-bg) !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}

/* Overflow icons in dark mode */
html[data-theme="dark"] .bi-three-dots,
html[data-theme="dark"] .bi-three-dots-vertical {
    color: var(--text-bright) !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dropdown menu item divider */
html[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--card-border) !important;
}

/* Account page styling for dark mode */
html[data-theme="dark"] .card-header.bg-white,
html[data-theme="dark"] .card-header.py-3.bg-white {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .card-footer.bg-white,
html[data-theme="dark"] .card-footer.py-3.bg-white {
    background-color: var(--card-footer-bg) !important;
    border-top: 1px solid var(--sidebar-border) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .alert-light {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .alert-light .bi-info-circle {
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .border-white,
html[data-theme="dark"] .border-2.border-white {
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] [style*="color: var(--tactical-black)"] {
    color: #00B800 !important;
}

html[data-theme="dark"] .badge.bg-secondary.bg-opacity-10.text-secondary {
    background-color: rgba(0, 184, 0, 0.1) !important;
    color: #00B800 !important;
}

/* Avatar and profile image styling for dark mode */
html[data-theme="dark"] .avatar-container img {
    border-color: var(--card-border) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .avatar-container .default-avatar {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

html[data-theme="dark"] .avatar-container .default-avatar .bi-person {
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

html[data-theme="dark"] .btn-outline-danger:hover {
    background-color: rgba(255, 107, 107, 0.1) !important;
    color: #ff6b6b !important;
}

html[data-theme="dark"] .btn-outline-danger .bi {
    color: #ff6b6b !important;
}

/* Sidebar header border in dark mode */
html[data-theme="dark"] .sidebar-header {
    border-bottom: 1px solid var(--sidebar-border) !important;
}

/* Ghost/Outline button styling for dark mode */
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-bright) !important;
    border-color: var(--input-border) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    color: var(--text-bright) !important;
    background-color: rgba(12, 12, 12, 0.5) !important;
    border-color: var(--input-border) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .btn-outline-secondary:active,
html[data-theme="dark"] .btn-outline-secondary:focus {
    color: var(--text-bright) !important;
    background-color: rgba(0, 184, 0, 0.3) !important;
    border-color: var(--input-border) !important;
    box-shadow: 0 0 8px rgba(0, 184, 0, 0.25) inset !important;
}

html[data-theme="dark"] .btn-outline-secondary i {
    color: var(--text-bright) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover i {
    color: var(--text-bright) !important;
}

/* Special override for signin page to always use dark theme - simplified */
html[data-page="signin"],
.signin-page {
    /* Don't use !important here as the signin page has self-contained styles */
    color-scheme: dark;
}

/* Explicitly exclude the signin page from dark mode toggles */
html:not([data-page="signin"]) [data-theme="dark"] .card,
html:not([data-page="signin"]) [data-theme="dark"] .card-header {
    background-color: var(--card-bg);
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

/* Remove redundant style overrides for signin page */
html[data-theme="light"] .signin-page .card,
html[data-theme="light"] .signin-page .card-header,
html[data-theme="light"][data-page="signin"] .card,
html[data-theme="light"][data-page="signin"] .card-header {
    /* These styles are now handled directly in signin.html */
}

/* Standard text elements */
html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.badge):not(.btn),
html[data-theme="dark"] div.text-content {
    color: var(--text-color) !important;
}

/* IDE-inspired color scheme for quote cards and details - only apply to modern theme */
/* Quote cards - IDs and metadata */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .quote-number,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-header .quote-number {
    color: var(--ide-comment) !important; /* #7C8A98 - Muted gray for metadata */
}

/* Quote cards - Client names and titles */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .client-name,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-header .client-name,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-title {
    color: var(--ide-variable) !important; /* #E6C07B - Gold for client/variable names */
}

/* Badge styling for product types */
html[data-theme="dark"]:not([data-dark-style="retro"]) .badge.bg-dark {
    background-color: rgba(10, 10, 10, 0.6) !important;
    color: var(--ide-function) !important; /* #56B6C2 - Cyan for function-like elements */
    border: 1px solid rgba(86, 182, 194, 0.2);
}

/* Price amounts styling */
html[data-theme="dark"]:not([data-dark-style="retro"]) .price-container,
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-amount,
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td:last-child,
html[data-theme="dark"]:not([data-dark-style="retro"]) .total-amount-row td:last-child,
html[data-theme="dark"]:not([data-dark-style="retro"]) [style*="font-size: clamp"] {
    color: var(--ide-number) !important; /* #61AFEF - Blue for numerical values */
    font-weight: 600 !important;
    font-family: "Source Code Pro", monospace !important;
    letter-spacing: -0.02em;
}

/* Delivery dates and time-related info */
html[data-theme="dark"]:not([data-dark-style="retro"]) .due-date {
    color: var(--ide-keyword) !important; /* #C792EA - Purple for special keywords */
}

/* Component names and descriptions */
html[data-theme="dark"]:not([data-dark-style="retro"]) .component-name,
html[data-theme="dark"]:not([data-dark-style="retro"]) .component-item {
    color: var(--ide-string) !important; /* #98C379 - Green for strings/text content */
}

/* Timestamps and secondary info */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .text-muted,
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-date,
html[data-theme="dark"]:not([data-dark-style="retro"]) .relative-time,
html[data-theme="dark"]:not([data-dark-style="retro"]) small.text-muted {
    color: var(--ide-comment) !important; /* #7C8A98 - Muted gray for metadata */
}

/* User/creator names */
html[data-theme="dark"]:not([data-dark-style="retro"]) .small.fw-medium,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-footer .small.fw-medium {
    color: var(--ide-white) !important; /* #E6E6E6 - Base white text */
}

/* Quote detail tables */
html[data-theme="dark"]:not([data-dark-style="retro"]) .table th {
    color: var(--ide-comment) !important; /* Table headers */
    font-weight: 600;
}

/* Table section headers (HARDWARE COMPONENTS, etc) */
html[data-theme="dark"]:not([data-dark-style="retro"]) tr.table-light {
    background-color: rgba(20, 20, 20, 0.9) !important;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) tr.table-light td {
    background: linear-gradient(to right, rgba(86, 182, 194, 0.05), transparent 70%) !important;
    border-left: 2px solid var(--ide-function) !important;
    padding-left: 12px !important;
}

/* Regular table rows - item descriptions */
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td:first-child {
    color: var(--ide-string) !important;
}

/* Regular table rows - monetary values */
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td:last-child {
    color: var(--ide-number) !important;
}

/* Subtotal labels */
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.fw-bold:first-child,
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.text-start.pt-2.fw-bold {
    color: var(--ide-white) !important;
}

/* Subtotal values */
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.fw-bold:last-child,
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.fw-bold + td.fw-bold,
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.text-end.fw-bold,
html[data-theme="dark"]:not([data-dark-style="retro"]) .data-row td.text-end.pt-2.fw-bold {
    color: var(--ide-number) !important;
    font-weight: 600 !important;
}

/* Add comment marker to quote number in modern theme */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .quote-number::before,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-header .quote-number::before {
    content: "// ";
    opacity: 0.6;
}

/* Monospace font for prices in modern theme */
html[data-theme="dark"]:not([data-dark-style="retro"]) .quote-card .price-container,
html[data-theme="dark"]:not([data-dark-style="retro"]) .card-body .price-container {
    font-family: "Source Code Pro", monospace !important;
}

/* Grid overlay for retro theme */
html[data-theme="dark"][data-dark-style="retro"] body::before {
    /* Removing grid overlay as requested */
    display: none;
}

/* Ensure theme toggle colors match the theme */
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle-container i.bi-circle-half,
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle-container span,
html[data-theme="dark"][data-dark-style="retro"] .theme-toggle.dark .moon-icon {
    color: #00F200 !important;
}

html[data-theme="dark"][data-dark-style="retro"] .theme-toggle.dark .toggle-handle {
    background-color: #00F200 !important;
} 


.style-option-card .option-card-content {
    color: #00F200 !important;
}

/* Quote Form Enhancements for Modern IDE Theme */
html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .card-header h4 {
    color: var(--ide-function) !important; /* #56B6C2 - Cyan for section headers */
    font-weight: 600;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .form-label {
    color: var(--ide-variable) !important; /* #E6C07B - Gold for form labels (variables) */
    font-weight: 500;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .form-check-label {
    color: var(--ide-string) !important; /* #98C379 - Green for radio options (strings) */
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .text-danger {
    color: var(--ide-error) !important; /* #F07178 - Red for required asterisks */
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm input[type="number"] {
    color: var(--ide-number) !important; /* #61AFEF - Blue for numerical inputs */
    font-family: "Source Code Pro", monospace !important;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm input[type="text"] {
    color: var(--ide-white) !important; /* #E6E6E6 - Bright white for text inputs */
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm input[type="date"] {
    color: var(--ide-keyword) !important; /* #C792EA - Purple for dates */
    font-family: "Source Code Pro", monospace !important;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm textarea {
    color: var(--ide-comment) !important; /* #7C8A98 - Muted gray for comments/notes */
    font-style: italic;
}

/* Alert box styling */
html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .alert-info {
    background-color: rgba(86, 182, 194, 0.1) !important;
    border-color: rgba(86, 182, 194, 0.2) !important;
}

html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .alert-info i {
    color: var(--ide-function) !important;
}

/* Generate button - keep green */
html[data-theme="dark"]:not([data-dark-style="retro"]) #generate-quote-btn {
    background-color: var(--btn-primary-bg) !important;
    border-color: transparent !important;
    color: #080808 !important;
}

/* Form check hover state */
html[data-theme="dark"]:not([data-dark-style="retro"]) #quoteForm .form-check:hover .form-check-label {
    color: var(--ide-white) !important;
}

/* Dark mode buttons - ensure black text on green buttons */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn.bg-success,
html[data-theme="dark"] .btn[style*="background-color: var(--btn-primary-bg)"],
html[data-theme="dark"] .btn[style*="background-color: var(--accent-green)"],
html[data-theme="dark"] .btn[style*="background-color: #00C000"],
html[data-theme="dark"] .btn[style*="background-color: #00F200"],
html[data-theme="dark"] .btn[style*="background-color:#00C000"],
html[data-theme="dark"] .btn[style*="background-color:#00F200"] {
    color: #080808 !important;
    font-weight: 600 !important;
}

/* Specific override for the generate quote button */
html[data-theme="dark"] #generate-quote-btn,
html[data-theme="dark"] button[type="submit"].btn-primary,
html[data-theme="dark"] [type="submit"].btn-primary {
    color: #080808 !important;
    font-weight: 600 !important;
}

/* Mobile sidebar toggle button when in dark mode */
html[data-theme="dark"] .mobile-sidebar-toggle {
    color: #080808 !important;
}

/* Badge styling in dark mode */
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge[style*="background-color: var(--btn-primary-bg)"],
html[data-theme="dark"] .badge[style*="background-color: var(--accent-green)"],
html[data-theme="dark"] .badge[style*="background-color: #00C000"],
html[data-theme="dark"] .badge[style*="background-color: #00F200"] {
    color: #080808 !important;
}

/* Green elements in dropdown menus */
html[data-theme="dark"] .dropdown-menu .dropdown-item.bg-success,
html[data-theme="dark"] .dropdown-menu .dropdown-item.bg-primary {
    color: #080808 !important;
}

/* Card buttons with accent colors */
html[data-theme="dark"] .card .btn-primary,
html[data-theme="dark"] .card-footer .btn-primary,
html[data-theme="dark"] .card-header .btn-primary {
    color: #080808 !important;
}

/* Button hover states - ensure they stay black on hover */
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn.bg-success:hover,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-success:active,
html[data-theme="dark"] .btn.bg-success:active,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn.bg-success:focus {
    color: #080808 !important;
}

/* Form and HTMx-generated buttons */
html[data-theme="dark"] form button[type="submit"],
html[data-theme="dark"] [hx-post] button[type="submit"],
html[data-theme="dark"] [hx-get] button[type="submit"],
html[data-theme="dark"] button.btn-primary[hx-target],
html[data-theme="dark"] a.btn-primary[hx-target],
html[data-theme="dark"] button[style*="color: white"][style*="background-color: var(--btn-primary-bg)"],
html[data-theme="dark"] button[style*="color: white"][style*="background-color: var(--accent-green)"],
html[data-theme="dark"] button[style*="color: #fff"][style*="background-color: var(--btn-primary-bg)"],
html[data-theme="dark"] button[style*="color: #fff"][style*="background-color: var(--accent-green)"] {
    color: #080808 !important;
    font-weight: 600 !important;
}

/* Specific overrides for retro theme's brighter green */
html[data-theme="dark"][data-dark-style="retro"] .btn-primary,
html[data-theme="dark"][data-dark-style="retro"] .btn-success,
html[data-theme="dark"][data-dark-style="retro"] button[type="submit"],
html[data-theme="dark"][data-dark-style="retro"] #generate-quote-btn,
html[data-theme="dark"][data-dark-style="retro"] .mobile-sidebar-toggle {
    color: #080808 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}