/* ============================================================================
   Plant Toolbox - Theme System
   File: ptbThemes.css
   Purpose: CSS Custom Properties for Light and Dark Themes

   Usage: Applied via data-theme attribute on body tag
   - data-theme="light" - Light theme (default)
   - data-theme="dark" - Dark theme
   - data-theme="auto" - System preference
   ============================================================================ */

/* ============================================================================
   LIGHT THEME (Default)
   Applied to :root and [data-theme="light"]
   ============================================================================ */
:root, [data-theme="light"] {
    /* Primary Colors */
    --primary: #255697;
    --primary-hover: #1d4478;
    --primary-light: #4a90e2;
    --primary-dark: #1a3f6b;

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #f6f6f6;
    --bg-tertiary: #eeeeee;
    --bg-header: #DDE7FF;
    --bg-nav-left: #255697;
    --bg-nav-left-hover: #1d4478;
    --bg-modal: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-disabled: #e0e0e0;

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-inverse: #FFFFFF;
    --text-link: #255697;
    --text-link-hover: #1d4478;

    /* Border Colors */
    --border-color: #cccccc;
    --border-color-light: #e0e0e0;
    --border-color-dark: #999999;
    --border-color-focus: #255697;

    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);

    /* Status Colors - Success */
    --success: #3ebf46;
    --success-light: #e8f5e9;
    --success-dark: #2e8b34;

    /* Status Colors - Error/Danger */
    --error: #d07575;
    --error-light: #fdeaea;
    --error-dark: #b94a48;

    /* Status Colors - Warning */
    --warning: #f0ad4e;
    --warning-light: #fef8e7;
    --warning-dark: #c58c3c;

    /* Status Colors - Info */
    --info: #4c8bff;
    --info-light: #e3f2fd;
    --info-dark: #3a6fcc;

    /* Chart/Graph Colors */
    --chart-green: #60d267;
    --chart-red: #E57272;
    --chart-blue: #4c8bff;
    --chart-yellow: #ffd966;
    --chart-orange: #ff9933;

    /* Form Elements */
    --form-bg: #FFFFFF;
    --form-border: #bbbbbb;
    --form-border-focus: #255697;
    --form-text: #333333;
    --form-placeholder: #999999;

    /* Table Colors */
    --table-header-bg: #f5f5f5;
    --table-header-text: #333333;
    --table-row-even: #FFFFFF;
    --table-row-odd: #f9f9f9;
    --table-row-hover: #e1e8f3;
    --table-border: #e0e0e0;

    /* Button Colors */
    --btn-primary-bg: #255697;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #1d4478;
    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-text: #333333;
    --btn-secondary-hover: #e0e0e0;

    /* Navigation */
    --nav-bg: #255697;
    --nav-text: #FFFFFF;
    --nav-hover-bg: #1d4478;
    --nav-active-bg: #3b6fa7;

    /* KPI/Metrics Colors */
    --kpi-bg: #FFFFFF;
    --kpi-border: #cccccc;
    --kpi-text-label: #666666;
    --kpi-text-value: #333333;

    /* Collapsible Elements */
    --collapsible-header-bg: var(--collapsableOuterBGColor-base);
    --collapsible-content-bg: #FFFFFF;

    /* Modal/Popup */
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #FFFFFF;
    --modal-border: #cccccc;
}

/* ============================================================================
   DARK THEME
   Applied to [data-theme="dark"]
   ============================================================================ */
[data-theme="dark"] {
    /* Primary Colors - Brighter for better visibility */
    --primary: #4a90e2;
    --primary-hover: #5fa3ff;
    --primary-light: #6bb3ff;
    --primary-dark: #3a76c2;

    /* Background Colors - Dark grays, not pure black */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-header: #181e25;
    --bg-nav-left: #1f2937;
    --bg-nav-left-hover: #2d3748;
    --bg-modal: #2d2d2d;
    --bg-input: #3a3a3a;
    --bg-disabled: #4a4a4a;

    /* Text Colors - Light grays for readability */
    --text-primary: #e5e5e5;
    --text-secondary: #a0a0a0;
    --text-tertiary: #6b6b6b;
    --text-inverse: #1a1a1a;
    --text-link: #6bb3ff;
    --text-link-hover: #8fc7ff;

    /* Border Colors */
    --border-color: #404040;
    --border-color-light: #353535;
    --border-color-dark: #505050;
    --border-color-focus: #4a90e2;

    /* Shadow Colors - Deeper shadows for dark mode */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);

    /* Status Colors - Success (brighter for visibility) */
    --success: #4ade80;
    --success-light: #1f3a2b;
    --success-dark: #38b764;

    /* Status Colors - Error/Danger (softer red) */
    --error: #f87171;
    --error-light: #3a1f1f;
    --error-dark: #dc5f5f;

    /* Status Colors - Warning (brighter) */
    --warning: #fbbf24;
    --warning-light: #3a3120;
    --warning-dark: #d9a521;

    /* Status Colors - Info (brighter) */
    --info: #60a5fa;
    --info-light: #1f2d3a;
    --info-dark: #4a8fd8;

    /* Chart/Graph Colors - Adjusted for dark backgrounds */
    --chart-green: #4ade80;
    --chart-red: #f87171;
    --chart-blue: #60a5fa;
    --chart-yellow: #fbbf24;
    --chart-orange: #fb923c;

    /* Form Elements */
    --form-bg: #3a3a3a;
    --form-border: #505050;
    --form-border-focus: #4a90e2;
    --form-text: #e5e5e5;
    --form-placeholder: #6b6b6b;

    /* Table Colors */
    --table-header-bg: #2d2d2d;
    --table-header-text: #e5e5e5;
    --table-row-even: #1a1a1a;
    --table-row-odd: #232323;
    --table-row-hover: #2d3748;
    --table-border: #404040;

    /* Button Colors */
    --btn-primary-bg: #4a90e2;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #5fa3ff;
    --btn-secondary-bg: #3a3a3a;
    --btn-secondary-text: #e5e5e5;
    --btn-secondary-hover: #4a4a4a;

    /* Navigation */
    --nav-bg: #1f2937;
    --nav-text: #e5e5e5;
    --nav-hover-bg: #2d3748;
    --nav-active-bg: #374151;

    /* KPI/Metrics Colors */
    --kpi-bg: #2d2d2d;
    --kpi-border: #404040;
    --kpi-text-label: #a0a0a0;
    --kpi-text-value: #e5e5e5;

    /* Collapsible Elements */
    --collapsible-header-bg: #2d2d2d;
    --collapsible-content-bg: #1a1a1a;

    /* Modal/Popup */
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --modal-bg: #2d2d2d;
    --modal-border: #404040;
}

/* ============================================================================
   AUTO THEME - Follows System Preference
   Uses CSS media query to detect OS dark mode setting
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* Apply same variables as dark theme */
        --primary: #4a90e2;
        --primary-hover: #5fa3ff;
        --primary-light: #6bb3ff;
        --primary-dark: #3a76c2;

        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #3a3a3a;
        --bg-header: #1f2937;
        --bg-nav-left: #1f2937;
        --bg-nav-left-hover: #2d3748;
        --bg-modal: #2d2d2d;
        --bg-input: #3a3a3a;
        --bg-disabled: #4a4a4a;

        --text-primary: #e5e5e5;
        --text-secondary: #a0a0a0;
        --text-tertiary: #6b6b6b;
        --text-inverse: #1a1a1a;
        --text-link: #6bb3ff;
        --text-link-hover: #8fc7ff;

        --border-color: #404040;
        --border-color-light: #353535;
        --border-color-dark: #505050;
        --border-color-focus: #4a90e2;

        --shadow-sm: rgba(0, 0, 0, 0.3);
        --shadow-md: rgba(0, 0, 0, 0.4);
        --shadow-lg: rgba(0, 0, 0, 0.5);

        --success: #4ade80;
        --success-light: #1f3a2b;
        --success-dark: #38b764;

        --error: #f87171;
        --error-light: #3a1f1f;
        --error-dark: #dc5f5f;

        --warning: #fbbf24;
        --warning-light: #3a3120;
        --warning-dark: #d9a521;

        --info: #60a5fa;
        --info-light: #1f2d3a;
        --info-dark: #4a8fd8;

        --chart-green: #4ade80;
        --chart-red: #f87171;
        --chart-blue: #60a5fa;
        --chart-yellow: #fbbf24;
        --chart-orange: #fb923c;

        --form-bg: #3a3a3a;
        --form-border: #505050;
        --form-border-focus: #4a90e2;
        --form-text: #e5e5e5;
        --form-placeholder: #6b6b6b;

        --table-header-bg: #2d2d2d;
        --table-header-text: #e5e5e5;
        --table-row-even: #1a1a1a;
        --table-row-odd: #232323;
        --table-row-hover: #2d3748;
        --table-border: #404040;

        --btn-primary-bg: #4a90e2;
        --btn-primary-text: #FFFFFF;
        --btn-primary-hover: #5fa3ff;
        --btn-secondary-bg: #3a3a3a;
        --btn-secondary-text: #e5e5e5;
        --btn-secondary-hover: #4a4a4a;

        --nav-bg: #1f2937;
        --nav-text: #e5e5e5;
        --nav-hover-bg: #2d3748;
        --nav-active-bg: #374151;

        --kpi-bg: #2d2d2d;
        --kpi-border: #404040;
        --kpi-text-label: #a0a0a0;
        --kpi-text-value: #e5e5e5;

        --collapsible-header-bg: #2d2d2d;
        --collapsible-content-bg: #1a1a1a;

        --modal-overlay: rgba(0, 0, 0, 0.75);
        --modal-bg: #2d2d2d;
        --modal-border: #404040;
    }
}

/* ============================================================================
   THEME TRANSITION
   Smooth transition when switching themes (optional)
   ============================================================================ */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================================
   DARK THEME SPECIFIC OVERRIDES
   Additional component-level overrides for dark theme
   ============================================================================ */
[data-theme="dark"] {
    /* Navigation Overrides */
    .navLeft,
    .navRight {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    .navLeft.active {
        background-color: var(--bg-secondary) !important;
    }

    /* Page Headers */
    .pageHeaderV2,
    .pageHeader,
    section.pageHeaderV2,
    section.pageHeader {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Modals and Popups */
    .popUpBox {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--modal-border) !important;
    }

    /* Form Sections */
    section.block.form,
    .block.form {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Form Inputs */
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]),
    select,
    textarea {
        background-color: transparent !important;
        /*background-color: var(--form-bg) !important;*/
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--form-placeholder) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--form-border-focus) !important;
    }

    /* KPI Boxes */
    .sectionBox.kpiV3,
    section.sectionBox.kpiV3 {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .kpiV3 .circle {
        background-color: var(--bg-tertiary) !important;
        border-color: var(--border-color) !important;
    }

    .kpiV3 .circle.light {
        background-color: #4a4a4a !important;
    }

    .kpiV3 .circle.midTone {
        background-color: #3a3a3a !important;
    }

    .kpiV3 .circle.dark {
        background-color: #2a2a2a !important;
    }

    /* Section Boxes */
    .sectionBox,
    section.sectionBox {
        background-color: transparent !important;
        color: var(--text-primary) !important;
    }

    /* Table Headers */
    .column-header {
        background-color: var(--table-header-bg) !important;
        color: var(--table-header-text) !important;
    }

    /* Breadcrumbs */
    .breadcrumb {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* Toast/Notification Messages */
    .toast {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* General Block Elements */
    .block {
        background-color: var(--bg-primary) !important;
    }

    .block.long,
    .block.narrow {
        background-color: var(--bg-primary) !important;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Navigation Tooltips */
    .navLeft .btn.withChild .navTooltip {
        background-color: var(--primary) !important;
        color: var(--text-inverse) !important;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.35) !important;
    }

    .navLeft .btn.withChild .navTooltip::after {
        background: var(--primary) !important;
    }

    .navLeft:not(.active) .btn.withChild:hover .navTooltip {
        box-shadow: 0 2px 10px rgba(74, 144, 226, 0.45), 0 0 20px rgba(74, 144, 226, 0.25) !important;
    }

    /* Tab Containers */
    .tab-content {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Header Bar */
    .headerBar {
        background-color: var(--bg-header) !important;
        border-bottom-color: var(--btn-secondary-bg) !important;
    }

    /* KPI Blocks - Borders and Shadows */
    section.block.short.kpiBlockV2 > div.kpiBox {
        border-color: var(--kpi-border) !important;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4) !important;
        background-color: var(--kpi-bg) !important;
    }

    section.block.short.kpiBlockV2 .kpiBox h1 {
        color: var(--text-primary) !important;
    }

    section.block.short.kpiBlockV2 .kpiBox h4 {
        color: var(--text-secondary) !important;
    }

    section.block.short.kpiBlockV2 .kpiBox.flashRed {
        background-color: #dc2626 !important;
    }

    section.block.short.kpiBlockV2 .kpiBox.flashRed span {
        color: #93c5fd !important;
    }

    section.block.short.kpiBlockV2 .kpiBox.flashRed h1 {
        color: var(--text-inverse) !important;
    }

    section.block.short.kpiBlockV2 .kpiBox.flashRed h4 {
        color: #e5e5e5 !important;
    }

    /* RF Tag Retrieve */
    .rfTagRetrieve {
        background-color: var(--bg-secondary) !important;
        border-color: var(--border-color-dark) !important;
    }

    .rfTagRetrieve.active {
        background-color: #1f3a2b !important;
        border-color: var(--success) !important;
    }

    .rfTagRetrieve #statusText {
        color: var(--primary) !important;
    }

    /* Schedule Grid */
    .scheduleMain .row {
        border-top-color: var(--border-color) !important;
    }

    .scheduleMain .row > div .text {
        border-color: var(--border-color-dark) !important;
    }

    .scheduleMain .row > div .text:hover {
        border-color: var(--border-color) !important;
    }

    .scheduleMain .row .label {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    .scheduleMain .rowBG > div.odd {
        background-color: var(--bg-secondary) !important;
    }

    .scheduleMain .rowBG > div .date {
        background-color: var(--bg-primary) !important;
        border-bottom-color: var(--border-color) !important;
    }

    .scheduleMain .row div.Created .text {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .scheduleMain .row div.Planned .text {
        background-color: #3b6fa7 !important;
        color: var(--text-inverse) !important;
    }

    .scheduleMain .row div.Released .text {
        background-color: #2d4f70 !important;
        color: var(--text-inverse) !important;
    }

    .scheduleMain .row div.Completed .text {
        background-color: #38b764 !important;
        color: var(--text-inverse) !important;
    }

    .scheduleMain .row div.tan .text {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .scheduleMain .row div.lightBlue .text {
        background-color: rgba(74, 144, 226, 0.7) !important;
        color: var(--text-inverse) !important;
    }

    .scheduleMain .row div.blue .text {
        background-color: rgba(58, 118, 194, 0.7) !important;
        color: var(--text-inverse) !important;
    }

    .scheduleMain .row div.lightGreen .text {
        background-color: #4ade80 !important;
        color: var(--text-inverse) !important;
    }

    /* Form Input Overrides */
    section.block.long.textBoxBorder .longBlock.formInput input[type='text'] {
        background-color: var(--form-bg) !important;
        color: var(--form-text) !important;
    }

    /* Canvas Elements */
    #peopleSignatureCanvas canvas {
        border-color: var(--form-border) !important;
    }

    #peopleSignatureCanvas canvas:hover {
        border-color: var(--primary) !important;
    }

    /* Assistant/Recommendations */
    .assistant .recommendations {
        border-color: var(--border-color-dark) !important;
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* Navigation Groups */
    section.block.short.nav .nav-group-header {
        color: var(--text-primary) !important;
        border-bottom-color: var(--border-color) !important;
    }

    section.block.short.nav .shortBlockBtn {
        border-color: var(--border-color-light) !important;
        color: var(--text-primary) !important;
        background-color: var(--bg-primary) !important;
    }

    section.block.short.nav .shortBlockBtn:hover {
        background-color: var(--bg-secondary) !important;
    }

    section.block.short.nav .shortBlockBtn div .shortBlockBtn-subTitle {
        color: var(--text-secondary) !important;
    }

    /* Action Planning */
    .main .sectionBox.actionPlanGeneralTasks {
        background-color: var(--bg-primary) !important;
        border-top-color: var(--border-color) !important;
    }

    section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2 {
        border-color: var(--form-border) !important;
    }

    .apModalSelect {
        background-color: var(--form-bg) !important;
        color: var(--form-text) !important;
    }

    /* Modal Content */
    .modal-content {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
    }

    /* Navigation Columns */
    .nav-column {
        border-right-color: var(--border-color) !important;
    }

    .column-header {
        color: var(--text-primary) !important;
        border-bottom-color: var(--border-color) !important;
    }

    .nav-list {
        border-bottom-color: var(--border-color-light) !important;
    }

    .nav-item {
        border-bottom-color: var(--border-color-light) !important;
    }

    .nav-link {
        color: var(--text-link) !important;
    }

    .nav-link:hover {
        color: var(--text-link-hover) !important;
    }

    .nav-link.active {
        color: var(--primary) !important;
        border-left-color: var(--primary) !important;
    }

    /* Location Options */
    .locationOptions {
        background-color: var(--modal-bg) !important;
    }

    /* Header Bar Buttons */
    .headerBar .btn.locationSelection {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* General Text Colors */
    .success-text {
        color: var(--success) !important;
    }

    .warning-text {
        color: var(--warning) !important;
    }

    .error-text {
        color: var(--error) !important;
    }

    /* Popup Boxes - Additional Specificity */
    .popUpBox.smallV2 {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
    }

    /* Main Container */
    .main {
        background-color: var(--bg-primary) !important;
    }

    /* Section Boxes - Ensure all variants are covered */
    section.sectionBox {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* Loading Overlay */
    .loading {
        background-color: var(--bg-primary) !important;
    }

    /* HR elements */
    hr {
        border-color: var(--border-color) !important;
    }

    /* Dev Banner - Dark Warning Stripe */
    .devBanner {
        background: repeating-linear-gradient(-45deg, #b8860b, #b8860b 10px, #2d2d2d 10px, #2d2d2d 20px) !important;
    }

    /* Main Content Wrapper */
    .main.filled > div {
        background-color: transparent !important;
    }

    /* Page Sections */
    .pageSections,
    .pageSection {
        background-color: var(--bg-primary) !important;
    }

    /* Chart Containers */
    .chart-container {
        background-color: var(--bg-secondary) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }

    .chart-title {
        color: var(--text-primary) !important;
        border-bottom-color: var(--border-color) !important;
    }

    .chart-title a.chart-title-link {
        color: var(--text-primary) !important;
    }

    .chart-title a.chart-title-link:hover {
        color: var(--primary) !important;
    }

    /* ApexCharts Dark Theme */
    .apexcharts-canvas {
        background-color: transparent !important;
    }

    .apexcharts-text,
    .apexcharts-legend-text {
        fill: var(--text-primary) !important;
    }

    .apexcharts-gridline,
    .apexcharts-xaxis-tick,
    .apexcharts-yaxis-tick {
        stroke: var(--border-color) !important;
    }

    .apexcharts-tooltip {
        background-color: var(--bg-tertiary) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* Filter Forms and Search */
    .filterForm,
    .searchForm {
        background-color: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
    }

    .searchInput,
    .filterInput {
        background-color: var(--form-bg) !important;
        color: var(--form-text) !important;
        border-color: var(--form-border) !important;
    }

    /* Table Elements */
    table {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }

    table thead,
    table thead th {
        background-color: var(--table-header-bg) !important;
        color: var(--table-header-text) !important;
        border-color: var(--table-border) !important;
    }

    table tbody tr {
        border-color: var(--table-border) !important;
    }

    table tbody tr:nth-child(even) {
        background-color: var(--table-row-even) !important;
    }

    table tbody tr:nth-child(odd) {
        background-color: var(--table-row-odd) !important;
    }

    table tbody tr:hover {
        background-color: var(--table-row-hover) !important;
    }

    table td {
        color: var(--text-primary) !important;
        border-color: var(--table-border) !important;
    }

    /* Collapsible Headers */
    .collapsibleHeader,
    .collapsible-header {
        background-color: var(--collapsible-header-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .collapsibleContent,
    .collapsible-content {
        background-color: var(--collapsible-content-bg) !important;
    }

    /* Dashboard Grid */
    .dashboard-grid,
    .dashboard-grid-main {
        background-color: var(--bg-primary) !important;
    }

    /* Buttons */
    button,
    .btn {
        border-color: var(--border-color) !important;
    }

    button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
    .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
        background-color: var(--btn-secondary-bg) !important;
        color: var(--btn-secondary-text) !important;
    }

    button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
    .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover {
        background-color: var(--btn-secondary-hover) !important;
    }

    /* Labels */
    label {
        color: var(--text-primary) !important;
    }

    /* Legends */
    .legend,
    .chart-legend {
        color: var(--text-primary) !important;
    }

    /* Grid Lines */
    .gridline,
    .grid-line {
        stroke: var(--border-color-light) !important;
    }

    /* Tooltips */
    .tooltip,
    .chart-tooltip {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Select Dropdowns */
    select option {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* Links */
    a {
        color: var(--text-link) !important;
    }

    a:hover {
        color: var(--text-link-hover) !important;
    }

    /* Link Objects */
    .linkObjects {
        color: var(--text-primary) !important;
    }

    .linkObjects:hover {
        color: var(--primary) !important;
        background-color: rgba(74, 144, 226, 0.1) !important;
    }

    .linkObjects i {
        color: var(--primary) !important;
    }

    .linkObjects:hover i {
        color: var(--primary-hover) !important;
    }

    /* Badges */
    .badge {
        border-color: var(--border-color) !important;
    }

    /* Cards */
    .card,
    .card-body {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Panels */
    .panel,
    .panel-body {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Well */
    .well {
        background-color: var(--bg-tertiary) !important;
        border-color: var(--border-color) !important;
    }

    /* Action Planning - Added in v5.1.9 */

    /* Table Header Filter Box */
    .headerFilterFlexBox {
        background-color: var(--table-header-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Form Row Headers */
    .formRow.head,
    .formRow.head div {
        background-color: var(--table-header-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Form Rows in Tables */
    .formRow {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    .formRow:nth-child(even) {
        background-color: var(--table-row-even) !important;
    }

    .formRow:nth-child(odd) {
        background-color: var(--table-row-odd) !important;
    }

    .formRow:hover {
        background-color: var(--table-row-hover) !important;
    }

    /* Combobox / Select Dropdowns */
    select,
    select option {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    select:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    /* Text Inputs */
    input[type="text"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    input[type="text"]:focus,
    input[type="date"]:focus,
    input[type="datetime-local"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    textarea:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    /* Horizontal Scrollable */
    .horizontalScrollable {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Action Plan Specific */
    .actionPlanTasks,
    .actionPlanTaskContainer {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }

    .actionPlanGeneralTasks {
        background-color: var(--bg-primary) !important;
        border-top-color: var(--border-color) !important;
    }

    /* Scroll Indicator */
    .scrollIndicator {
        color: var(--text-secondary) !important;
    }

    /* Form Row Colors - Added in v5.1.11 */

    /* Green "Add Record" Row */
    .formRow.addRecordRow,
    .formRow.addRecordRow > div,
    .formRow.green,
    .formRow.green > div {
        background-color: rgba(76, 175, 80, 0.15) !important;
        color: var(--text-primary) !important;
        border-color: rgba(76, 175, 80, 0.3) !important;
    }

    .formRow.addRecordRow input,
    .formRow.green input {
        background-color: rgba(76, 175, 80, 0.1) !important;
        color: var(--text-primary) !important;
    }

    /* Search Results & Dropdowns */
    .searchResult {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .searchResult:hover {
        background-color: var(--bg-secondary) !important;
    }

    /* FormV2 Menu Help */
    .formV2MenuHelp {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    /* Member/Side Panels */
    .memberPanel,
    .sidePanel,
    .detailPanel {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Action Planning Table - FormRow Cells */
    .formRow > div {
        background-color: transparent !important;
        color: var(--text-primary) !important;
    }

    .formRow.head > div {
        background-color: var(--table-header-bg) !important;
    }

    /* FormRow Select Elements */
    .formRow select {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .formRow select:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    /* FormRow Textareas */
    .formRow textarea {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .formRow textarea:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    /* FormRow Input Fields */
    .formRow input[type="text"],
    .formRow input[type="date"],
    .formRow input[type="datetime-local"] {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .formRow input[type="text"]:focus,
    .formRow input[type="date"]:focus,
    .formRow input[type="datetime-local"]:focus {
        background-color: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    /* Search Dependant V2 Elements in FormRow */
    .formRow .searchDependantV2,
    .formRow .popUpSearchSelectOptions {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Red/Yellow Row Overrides for Action Planning */
    .formRow.red {
        background-color: rgba(220, 38, 38, 0.15) !important;
    }

    .formRow.yellow {
        background-color: rgba(251, 191, 36, 0.15) !important;
    }

    .formRow.red select,
    .formRow.red textarea,
    .formRow.red input {
        background-color: rgba(220, 38, 38, 0.1) !important;
    }

    .formRow.yellow select,
    .formRow.yellow textarea,
    .formRow.yellow input {
        background-color: rgba(251, 191, 36, 0.1) !important;
    }

    /* User Profile Popup Menu */
    #headerMenuUser-searchResult.searchResult.filterHeadResult {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .headerMenuWelcome {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .headerMenuWelcome span {
        color: var(--text-primary) !important;
    }

    .headerMenuObject {
        color: var(--text-primary) !important;
        background-color: var(--modal-bg) !important;
    }

    .headerMenuObject:hover {
        background-color: var(--bg-tertiary) !important;
    }

    .headerMenuObject i {
        color: var(--primary) !important;
    }

    /* Filter Dropdowns (Plant, Department, Resource, etc.) */
    .searchResult[popover] {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
    }

    .searchResult .noLink.multiSelect {
        color: var(--text-primary) !important;
        background-color: var(--modal-bg) !important;
    }

    .searchResult .noLink.multiSelect:hover {
        background-color: var(--bg-tertiary) !important;
    }

    .searchResult .noLink.multiSelect span {
        color: var(--text-primary) !important;
    }

    .searchResult .noLink.multiSelect input[type="checkbox"] {
        accent-color: var(--primary) !important;
    }
}