/* Light mode theme
 * 
 * CSS Custom Properties for light theme
 * Usage: Apply these variables to ensure consistent theming across all components
 * 
 * Base colors: Use --bg-color, --text-color, --border-color for primary surfaces
 * Brand colors: Use --primary-color, --success-color, etc. for semantic meanings
 * Component colors: Use specific component variables for UI elements
 * Health indicators: Use --health-status-* for status indication
 * Loading UI: Use --loading-overlay-bg and --spinner-* for loading states
 * 
 * Example usage:
 *   .my-component { background-color: var(--bg-color); color: var(--text-color); }
 *   .status.online { color: var(--health-status-online); }
 */

:root {
    /* Base colors */
    --bg-color: #ffffff;
    --bg-color-rgb: 255, 255, 255;
    --bg-lighter: #e8ecf1;
    --bg-lightest: #f9fafc;
    --bg-darker: #eef0f3;
    --text-color: #333333;
    --text-color-rgb: 51, 51, 51;
    --text-muted: #666666;
    --border-color: #e1e4e8;
    --border-color-rgb: 225, 228, 232;
    --border-light: #f0f0f0;
    --light-button-border: #b0b0b0;
    --light-button-border-rgb: 176, 176, 176;
    /* Brand colors */
    --primary-color: #3273dc;
    --primary-color-rgb: 50, 115, 220;
    --primary-color-dark: #2160c4;
    --secondary-color: #4a4a4a;
    --secondary-color-rgb: 74, 74, 74;
    --success-color: #23d160;
    --success-color-rgb: 35, 209, 96;
    --warning-color: #b8860b;
    --warning-color-rgb: 184, 134, 11;
    --danger-color: #ff3860;
    --danger-color-rgb: 255, 56, 96;
    --info-color: #17a2b8;
    --info-color-rgb: 23, 162, 184;
    /* Component colors */
    --card-bg: #f5f7fa;
    --input-bg: #ffffff;
    --input-border: #dbdbdb;
    --input-text: #333333;
    --button-bg: #f5f7fa;
    --button-text: #333333;
    --button-text-inverse: #ffffff;
    --navbar-bg: #3273dc;
    --navbar-text: #ffffff;
    --footer-bg: #f5f7fa;
    --footer-text: #4a4a4a;
    --table-header-bg: #f5f7fa;
    --table-row-even: #f9fafc;
    --table-border: #e1e4e8;
    --code-bg: #f5f7fa;
    --code-text: #333333;
    --secondary-bg-color: #f5f7fa;
    
    /* Health status indicators */
    --health-status-online: #48c774;
    --health-status-offline: #f14668;
    --health-status-checking: #ffdd57;
    --health-status-error: #ff9f43;
    
    /* Loading overlay and spinner */
    --loading-overlay-bg: rgba(255, 255, 255, 0.8);
    --spinner-primary-color: #3498db;
    --spinner-secondary-color: #f3f3f3;

    /* Additional theme compatibility variables */
    --card-background-color: #ffffff;
    --link-color: #3273dc;
    --hover-background-color: #f5f5f5;
    --border-hover-color: #b5b5b5;
    --button-background-color: #f5f5f5;
    --button-hover-background-color: #eeeeee;
    --code-background-color: #f5f5f5;
    --code-text-color: #1a1a2e;
    --input-background-color: #ffffff;
    --input-focus-border-color: #3273dc;
    --input-focus-shadow-color: rgba(50, 115, 220, 0.25);
    
    /* Shadows */
    --shadow-color-rgb: 0, 0, 0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Light mode specific overrides */
html:not(.dark-mode) body {
    background-color: var(--bg-lighter);
    color: var(--text-color);
}

html:not(.dark-mode) a {
    color: var(--primary-color);
}

    html:not(.dark-mode) a:hover {
        color: var(--primary-color-dark);
    }

html:not(.dark-mode) .navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
}

/* Navbar items for light mode */
html:not(.dark-mode) .navbar-item,
html:not(.dark-mode) .navbar-link {
    color: var(--navbar-text);
}

    html:not(.dark-mode) .navbar-item:hover,
    html:not(.dark-mode) .navbar-item.is-active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--navbar-text);
    }

    html:not(.dark-mode) .navbar-item.is-active {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

/* Navbar buttons */
html:not(.dark-mode) .navbar-item .button.is-light {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--navbar-text);
    border: none;
}

    html:not(.dark-mode) .navbar-item .button.is-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: var(--navbar-text);
    }

/* Theme toggle button in navbar */
html:not(.dark-mode) .navbar-item .theme-toggle-button {
    background: none;
    border: none;
    color: var(--navbar-text);
}

    html:not(.dark-mode) .navbar-item .theme-toggle-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--navbar-text);
    }

html:not(.dark-mode) .footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

html:not(.dark-mode) .card,
html:not(.dark-mode) .box {
    background-color: var(--card-bg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* Card headers */
html:not(.dark-mode) .card-header {
    background-color: var(--bg-lighter);
    border-bottom: 1px solid var(--border-color);
}

html:not(.dark-mode) .card-header-title {
    color: var(--text-color);
    font-weight: 600;
}

/* Card content */
html:not(.dark-mode) .card-content {
    background-color: var(--card-bg);
    color: var(--text-color);
}

html:not(.dark-mode) input,
html:not(.dark-mode) select,
html:not(.dark-mode) textarea {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

html:not(.dark-mode) button,
html:not(.dark-mode) .button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--border-color);
}

/* Specific button variants for light mode */
html:not(.dark-mode) .button.is-primary {
    background-color: var(--primary-color);
    color: var(--button-text-inverse);
    border-color: var(--primary-color);
}

html:not(.dark-mode) .button.is-primary.is-outlined {
    background-color: transparent !important;
    color: #3273dc !important;
    border-color: #3273dc !important;
}

html:not(.dark-mode) .button.is-primary.is-outlined .icon,
html:not(.dark-mode) .button.is-primary.is-outlined .icon i,
html:not(.dark-mode) .button.is-primary.is-outlined i.fas,
html:not(.dark-mode) .button.is-primary.is-outlined i.fa {
    color: #3273dc !important;
}

html:not(.dark-mode) .button.is-primary.is-outlined:hover,
html:not(.dark-mode) .button.is-primary.is-outlined:hover .icon,
html:not(.dark-mode) .button.is-primary.is-outlined:hover i {
    background-color: var(--primary-color);
    color: var(--button-text-inverse) !important;
}

html:not(.dark-mode) .button.is-light {
    background-color: var(--bg-lighter);
    color: var(--text-color);
    border-color: var(--border-color);
}

    html:not(.dark-mode) .button.is-light:hover {
        background-color: var(--bg-lightest);
        border-color: var(--border-color);
    }

html:not(.dark-mode) .button.is-ghost {
    background-color: transparent;
    color: var(--text-color);
    border: none;
}

    html:not(.dark-mode) .button.is-ghost:hover {
        background-color: var(--bg-lighter);
        color: var(--text-color);
    }

/* Button styles for light mode */
html:not(.dark-mode) .btn-primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

html:not(.dark-mode) .btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

html:not(.dark-mode) .btn-danger {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

/* Outlined button variants for light mode */
html:not(.dark-mode) .btn-outline-primary {
    background-color: #ffffff;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

html:not(.dark-mode) .btn-outline-secondary {
    background-color: #ffffff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

html:not(.dark-mode) .btn-outline-primary:hover {
    background-color: #f0f5ff;
}

html:not(.dark-mode) .btn-outline-secondary:hover {
    background-color: #f5f5f5;
}

/* Action buttons for light mode */
html:not(.dark-mode) .btn-outline-view,
html:not(.dark-mode) .btn-back,
html:not(.dark-mode) .item-actions .btn-secondary,
html:not(.dark-mode) .title-actions .btn-secondary,
html:not(.dark-mode) .section-container .header .btn-secondary,
html:not(.dark-mode) .modal-footer .btn-secondary {
    background-color: #ffffff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

html:not(.dark-mode) .btn-manage-portfolios,
html:not(.dark-mode) .btn-add,
html:not(.dark-mode) .item-actions .btn-primary,
html:not(.dark-mode) .title-actions .btn-primary,
html:not(.dark-mode) .section-container .header .btn-primary,
html:not(.dark-mode) .modal-footer .btn-primary {
    background-color: #f0f5ff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

html:not(.dark-mode) .btn-delete-account,
html:not(.dark-mode) .item-actions .btn-danger,
html:not(.dark-mode) .title-actions .btn-danger,
html:not(.dark-mode) .section-container .header .btn-danger,
html:not(.dark-mode) .modal-footer .btn-danger {
    background-color: #ffffff;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

html:not(.dark-mode) .btn-outline-view:hover,
html:not(.dark-mode) .btn-back:hover,
html:not(.dark-mode) .item-actions .btn-secondary:hover,
html:not(.dark-mode) .title-actions .btn-secondary:hover,
html:not(.dark-mode) .section-container .header .btn-secondary:hover,
html:not(.dark-mode) .modal-footer .btn-secondary:hover {
    background-color: #f0f5ff;
}

html:not(.dark-mode) .btn-manage-portfolios:hover,
html:not(.dark-mode) .btn-add:hover,
html:not(.dark-mode) .item-actions .btn-primary:hover,
html:not(.dark-mode) .title-actions .btn-primary:hover,
html:not(.dark-mode) .section-container .header .btn-primary:hover,
html:not(.dark-mode) .modal-footer .btn-primary:hover {
    background-color: #e0ebff;
}

html:not(.dark-mode) .btn-delete-account:hover,
html:not(.dark-mode) .item-actions .btn-danger:hover,
html:not(.dark-mode) .title-actions .btn-danger:hover,
html:not(.dark-mode) .section-container .header .btn-danger:hover,
html:not(.dark-mode) .modal-footer .btn-danger:hover {
    background-color: #fff0f0;
}

/* Table styles for light mode */
html:not(.dark-mode) .data-table th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html:not(.dark-mode) .data-table td {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

html:not(.dark-mode) .data-table tr:nth-child(even) {
    background-color: var(--table-row-even);
}

html:not(.dark-mode) .data-table tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Numeric values in light mode */
html:not(.dark-mode) .numeric-cell,
html:not(.dark-mode) .money-value {
    color: var(--primary-color);
}

/* Container styling */
html:not(.dark-mode) .container {
    background-color: var(--card-bg);
    box-shadow: var(--shadow-md);
}

/* Empty state */
html:not(.dark-mode) .empty-state {
    background-color: var(--bg-lighter);
}

/* Breadcrumb styling for light mode */
html:not(.dark-mode) .breadcrumb a {
    color: var(--primary-color);
}

html:not(.dark-mode) .breadcrumb li.is-active a {
    color: var(--text-muted);
}

html:not(.dark-mode) .breadcrumb li::before {
    color: var(--text-muted);
}

/* Status badge - using strategies domain style */
html:not(.dark-mode) .status-badge.status-active {
    background-color: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

html:not(.dark-mode) .status-badge.status-inactive {
    background-color: rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}

/* Item card styling for light mode */
html:not(.dark-mode) .item-card {
    background-color: white;
    border: 1px solid var(--border-color);
}

html:not(.dark-mode) .item-id {
    color: var(--text-color);
}

html:not(.dark-mode) .item-type {
    color: var(--text-muted);
}

/* Item summary */
html:not(.dark-mode) .item-summary {
    background-color: var(--bg-lighter);
}

html:not(.dark-mode) .stats-table td:nth-child(odd) {
    color: var(--text-muted);
}

html:not(.dark-mode) .stats-table td:nth-child(even) {
    color: var(--primary-color);
}

html:not(.dark-mode) .stats-table .status {
    color: var(--text-color);
    font-family: inherit;
}

/* Edit form */
html:not(.dark-mode) .edit-form {
    background-color: white;
}

html:not(.dark-mode) .form-input {
    background-color: white;
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Section container */
html:not(.dark-mode) .section-container {
    background-color: white;
    border: 1px solid var(--border-color);
}

    html:not(.dark-mode) .section-container .header {
        background-color: var(--bg-lighter);
        border-bottom: 1px solid var(--border-color);
    }

/* Generic content list styles (formerly doc-item) */
html:not(.dark-mode) .content-item {
    background: white;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

    html:not(.dark-mode) .content-item:hover {
        background-color: #f8f9fa;
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
    }

html:not(.dark-mode) .content-link {
    color: var(--primary-color);
}

html:not(.dark-mode) .section-title {
    color: var(--primary-color);
    border-bottom-color: var(--border-color);
}

/* Generic content container (formerly doc-content) */
html:not(.dark-mode) .content-container {
    background: white;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

    html:not(.dark-mode) .content-container h1 {
        border-bottom-color: var(--border-color);
    }

    html:not(.dark-mode) .content-container h2 {
        border-bottom-color: var(--border-light);
    }

    html:not(.dark-mode) .content-container pre {
        background: #f5f5f5;
        border: 1px solid #ddd;
    }

    html:not(.dark-mode) .content-container code {
        background: #f5f5f5;
        color: #333;
    }

    html:not(.dark-mode) .content-container blockquote {
        color: #555;
    }

/* Mermaid diagram styling */
html:not(.dark-mode) .svg-container {
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

html:not(.dark-mode) .svg-pan-zoom-control {
    background-color: #fff;
    border: 1px solid #ddd;
}

html:not(.dark-mode) .svg-pan-zoom-control-background {
    fill: #fff;
}
/* Risk badge - light mode */
html:not(.dark-mode) .risk-low {
    background-color: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

html:not(.dark-mode) .risk-medium {
    background-color: rgba(var(--warning-color-rgb), 0.2);
    color: #806600; /* Darker yellow for better contrast */
}

html:not(.dark-mode) .risk-high {
    background-color: rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}

/* Status badges - light mode */
html:not(.dark-mode) .status-badge {
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

html:not(.dark-mode) .status-active {
    background-color: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

html:not(.dark-mode) .status-inactive {
    background-color: rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}

html:not(.dark-mode) .status-warning {
    background-color: rgba(var(--warning-color-rgb), 0.2);
    color: #806600; /* Darker yellow for better contrast */
}

/* Risk level selector - light mode */
html:not(.dark-mode) .risk-option {
    background-color: white;
    border-color: var(--border-color);
    color: var(--text-color);
}

    html:not(.dark-mode) .risk-option:hover {
        background-color: var(--bg-lighter);
    }

    html:not(.dark-mode) .risk-option.selected {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    html:not(.dark-mode) .risk-option.low {
        border-color: var(--success-color);
    }

        html:not(.dark-mode) .risk-option.low.selected {
            background-color: var(--success-color);
            color: white;
        }

    html:not(.dark-mode) .risk-option.medium {
        border-color: var(--warning-color);
    }

        html:not(.dark-mode) .risk-option.medium.selected {
            background-color: var(--warning-color);
            color: black;
        }

    html:not(.dark-mode) .risk-option.high {
        border-color: var(--danger-color);
    }

        html:not(.dark-mode) .risk-option.high.selected {
            background-color: var(--danger-color);
            color: white;
        }

/* Info details - light mode */
html:not(.dark-mode) .info-details {
    background-color: var(--bg-lighter);
    border-color: var(--border-color);
}

html:not(.dark-mode) .info-details-table .info-label {
    color: var(--text-muted);
}

html:not(.dark-mode) .info-details-table .info-value {
    color: var(--text-color);
}

html:not(.dark-mode) .info-details-table .money-value {
    color: var(--primary-color);
}
/* Category badge - light mode */
html:not(.dark-mode) .category-badge {
    background-color: var(--bg-lighter);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Entity search results - light mode */
html:not(.dark-mode) .entity-search-results {
    background-color: white;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

html:not(.dark-mode) .entity-search-item {
    border-bottom: 1px solid var(--border-color);
}

    html:not(.dark-mode) .entity-search-item:hover {
        background-color: var(--bg-lighter);
    }
/* Add these styles to the end of your existing light-mode.css file */

/* Portfolio styles for light mode - consolidated from portfolios-light-mode.css */

/* Tag colors - translucent backgrounds, no borders */
html:not(.dark-mode) .tag.is-success {
    background-color: rgba(var(--success-color-rgb), 0.15) !important;
    color: var(--success-color) !important;
    border: none !important;
}

html:not(.dark-mode) .tag.is-warning {
    background-color: rgba(var(--warning-color-rgb), 0.15) !important;
    color: var(--warning-color) !important;
    border: none !important;
}

html:not(.dark-mode) .tag.is-info {
    background-color: rgba(var(--info-color-rgb), 0.15) !important;
    color: var(--info-color) !important;
    border: none !important;
}

html:not(.dark-mode) .tag.is-danger {
    background-color: rgba(var(--danger-color-rgb), 0.15) !important;
    color: var(--danger-color) !important;
    border: none !important;
}

/* Chart section */
html:not(.dark-mode) .chart-section {
    background-color: white;
    border: 1px solid var(--border-color);
}

html:not(.dark-mode) .chart-container {
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
}

/* Content section */
html:not(.dark-mode) .content-section {
    background-color: white;
    border: 1px solid var(--border-color);
}

/* Button hover enhancements */
html:not(.dark-mode) .btn-outline-view:hover {
    background-color: #e0ebff;
}

html:not(.dark-mode) .btn-add:hover {
    background-color: #d0e0ff;
}

html:not(.dark-mode) .btn-primary:hover {
    background-color: #e0ebff;
}
/* Test results styling for light mode */
html:not(.dark-mode) .test-item.status-active {
    background-color: rgba(var(--success-color-rgb), 0.2);
    border: 1px solid var(--success-color);
}

html:not(.dark-mode) .test-item.status-inactive {
    background-color: rgba(var(--danger-color-rgb), 0.2);
    border: 1px solid var(--danger-color);
}

html:not(.dark-mode) .test-message {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

/* Bulma form elements - light mode support */
html:not(.dark-mode) .field .label {
    color: var(--text-color);
    font-weight: 600;
}

html:not(.dark-mode) .input,
html:not(.dark-mode) .textarea,
html:not(.dark-mode) .select select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

    html:not(.dark-mode) .input:focus,
    html:not(.dark-mode) .textarea:focus,
    html:not(.dark-mode) .select select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb), 0.25);
    }

    html:not(.dark-mode) .input::placeholder,
    html:not(.dark-mode) .textarea::placeholder {
        color: var(--text-muted);
    }

/* Bulma table elements - light mode support */
html:not(.dark-mode) .table {
    background-color: var(--card-bg);
    color: var(--text-color);
}

html:not(.dark-mode) .table td,
html:not(.dark-mode) .table th {
    border-color: var(--border-color);
    color: var(--text-color);
}

html:not(.dark-mode) .table th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
    font-weight: 600;
}

html:not(.dark-mode) .table tr:nth-child(even) {
    background-color: var(--table-row-even);
}

html:not(.dark-mode) .table tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Bulma table containers */
html:not(.dark-mode) .table-container {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Help text and form hints */
html:not(.dark-mode) .help {
    color: var(--text-muted);
}

html:not(.dark-mode) .help.is-danger {
    color: var(--danger-color);
}

html:not(.dark-mode) .help.is-success {
    color: var(--success-color);
}

/* FontAwesome icon spacing */
html:not(.dark-mode) .fas,
html:not(.dark-mode) .far,
html:not(.dark-mode) .fab {
    margin-right: 0.5em;
}

/* Icons at end of text */
html:not(.dark-mode) .fas:last-child,
html:not(.dark-mode) .far:last-child,
html:not(.dark-mode) .fab:last-child {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Icons in titles and headers */
html:not(.dark-mode) .title .fas,
html:not(.dark-mode) .title .far,
html:not(.dark-mode) .title .fab,
html:not(.dark-mode) .card-header-title .fas,
html:not(.dark-mode) .card-header-title .far,
html:not(.dark-mode) .card-header-title .fab {
    margin-right: 0.75em;
}

/* Icons in buttons */
html:not(.dark-mode) .button .fas,
html:not(.dark-mode) .button .far,
html:not(.dark-mode) .button .fab {
    margin-right: 0.5em !important;
}

html:not(.dark-mode) .button .fas:last-child,
html:not(.dark-mode) .button .far:last-child,
html:not(.dark-mode) .button .fab:last-child {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Icons in navbar items */
html:not(.dark-mode) .navbar-item .fas,
html:not(.dark-mode) .navbar-item .far,
html:not(.dark-mode) .navbar-item .fab {
    margin-right: 0.5em;
}

/* Icons in tags and badges */
html:not(.dark-mode) .tag .fas,
html:not(.dark-mode) .tag .far,
html:not(.dark-mode) .tag .fab {
    margin-right: 0.5em !important;
}

html:not(.dark-mode) .tag .fas:last-child,
html:not(.dark-mode) .tag .far:last-child,
html:not(.dark-mode) .tag .fab:last-child {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Icons in all span elements */
html:not(.dark-mode) span .fas,
html:not(.dark-mode) span .far,
html:not(.dark-mode) span .fab {
    margin-right: 0.5em !important;
}

html:not(.dark-mode) span .fas:last-child,
html:not(.dark-mode) span .far:last-child,
html:not(.dark-mode) span .fab:last-child {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Override for icon containers to prevent double spacing */
html:not(.dark-mode) .icon .fas,
html:not(.dark-mode) .icon .far,
html:not(.dark-mode) .icon .fab {
    margin-right: 0;
    margin-left: 0;
}

/* Code element styling for light mode - fixes red text on License IDs, versions, keys */
html:not(.dark-mode) code,
html:not(.dark-mode) code:not([class]) {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.875em;
}

html:not(.dark-mode) table code,
html:not(.dark-mode) .table code {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
}

html:not(.dark-mode) td code,
html:not(.dark-mode) th code,
html:not(.dark-mode) tbody code {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
}

/* Override Bulma's default code color */
html:not(.dark-mode) .content code,
html:not(.dark-mode) .box code,
html:not(.dark-mode) .card code {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
}

/* Code box styling for light mode */
html:not(.dark-mode) .code-box {
    background-color: var(--code-bg);
    color: var(--code-text);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow: auto;
}


/* VirtualDataGrid light mode support */
html:not(.dark-mode) .grid-row {
    background-color: var(--bg-color, #ffffff) !important;
    color: var(--text-color, #333333) !important;
}

html:not(.dark-mode) .grid-row.grid-row-striped,
html:not(.dark-mode) .grid-row.grid-row-odd {
    background-color: var(--table-row-even, #f9fafc) !important;
}

html:not(.dark-mode) .grid-row:hover {
    background-color: var(--hover-background-color, #f5f5f5) !important;
}

html:not(.dark-mode) .grid-header {
    background-color: var(--table-header-bg, #f5f7fa) !important;
}

html:not(.dark-mode) .grid-header-cell {
    background-color: var(--table-header-bg, #f5f7fa) !important;
    color: var(--text-color, #333333) !important;
}

html:not(.dark-mode) .grid-footer {
    background-color: var(--table-header-bg, #f5f7fa) !important;
    color: var(--text-color, #333333) !important;
}

html:not(.dark-mode) .grid-cell {
    color: var(--text-color, #333333) !important;
}

html:not(.dark-mode) .grid-cell code {
    background-color: var(--code-bg, #f5f7fa) !important;
    color: var(--code-text, #1a1a2e) !important;
}


/* License ID display - light mode */
html:not(.dark-mode) .license-id-display {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.85em;
    padding: 0.2em 0.5em;
    background-color: var(--bg-lighter, #e8ecf1);
    color: var(--primary-color, #3273dc);
    border-radius: 4px;
    border: 1px solid var(--border-color, #e1e4e8);
}

/* Stacked info styling - for any two-line stacked content */
.stacked-info,
.stacked-dates {
    line-height: 1.3;
}

.stacked-info .stacked-primary,
.stacked-dates .date-created {
    font-weight: 500;
}

.stacked-info .stacked-secondary,
.stacked-dates .date-expires {
    font-size: 0.85em;
}

/* Fix table hover in light mode - ensure it's not black */
html:not(.dark-mode) .table.is-hoverable tbody tr:hover,
html:not(.dark-mode) .table tbody tr:hover {
    background-color: rgba(50, 115, 220, 0.05) !important;
    color: var(--text-color) !important;
}

html:not(.dark-mode) .table.is-hoverable tbody tr:hover td,
html:not(.dark-mode) .table tbody tr:hover td {
    color: var(--text-color) !important;
}

/* Fix navbar burger hover in light mode */
html:not(.dark-mode) .navbar-burger:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--navbar-text, #ffffff) !important;
}

html:not(.dark-mode) .navbar-burger span {
    background-color: var(--navbar-text, #ffffff) !important;
}

/* Fix tabs in light mode */
html:not(.dark-mode) .tabs a {
    color: var(--text-color, #333333);
    border-bottom-color: var(--border-color, #dbdbdb);
}

html:not(.dark-mode) .tabs a:hover {
    color: var(--primary-color, #3273dc);
    border-bottom-color: var(--primary-color, #3273dc);
}

html:not(.dark-mode) .tabs li.is-active a {
    color: var(--primary-color, #3273dc);
    border-bottom-color: var(--primary-color, #3273dc);
}

html:not(.dark-mode) .tabs.is-boxed a {
    background-color: var(--bg-lighter, #f5f5f5);
    border-color: var(--border-color, #dbdbdb);
}

html:not(.dark-mode) .tabs.is-boxed li.is-active a {
    background-color: var(--card-bg, #ffffff);
    border-bottom-color: transparent;
}

/* VirtualDataGrid scrollbar styling for light mode */
html:not(.dark-mode) .grid-viewport::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:not(.dark-mode) .grid-viewport::-webkit-scrollbar-track {
    background: var(--bg-lighter, #f5f5f5);
    border-radius: 5px;
}

html:not(.dark-mode) .grid-viewport::-webkit-scrollbar-thumb {
    background: var(--border-color, #dbdbdb);
    border-radius: 5px;
}

html:not(.dark-mode) .grid-viewport::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}


/* Title and subtitle contrast fixes for light mode */
/* Exclude titles with semantic color classes (has-text-success, has-text-info, etc.) */
html:not(.dark-mode) .title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h1.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h2.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h3.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h4.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h5.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) h6.title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link) {
    color: #1a1a2e !important; /* Very dark blue-black for high contrast */
}

html:not(.dark-mode) .subtitle,
html:not(.dark-mode) p.subtitle {
    color: #4a4a4a !important; /* Dark gray for good contrast on light backgrounds */
}

/* Page title section styling */
html:not(.dark-mode) .page-title .title {
    color: #1a1a2e !important;
}

html:not(.dark-mode) .page-title .subtitle {
    color: #4a4a4a !important;
}

/* Content area text - ensure proper contrast */
html:not(.dark-mode) .content,
html:not(.dark-mode) .content p,
html:not(.dark-mode) .content li {
    color: var(--text-color, #333333);
}

/* Section headers */
html:not(.dark-mode) .section-title,
html:not(.dark-mode) .box-title,
html:not(.dark-mode) .panel-heading {
    color: #1a1a2e !important;
}

/* Modal titles */
html:not(.dark-mode) .modal-card-title {
    color: #1a1a2e !important;
}

/* Card titles in light mode - exclude semantic color classes */
html:not(.dark-mode) .card .title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link),
html:not(.dark-mode) .box .title:not(.has-text-success):not(.has-text-info):not(.has-text-warning):not(.has-text-danger):not(.has-text-primary):not(.has-text-link) {
    color: #1a1a2e !important;
}


/* ============================================
   NAVBAR MOBILE MENU - LIGHT MODE FIXES
   ============================================ */

/* Mobile navbar menu background when expanded */
html:not(.dark-mode) .navbar-menu {
    background-color: var(--navbar-bg, #3273dc) !important;
}

html:not(.dark-mode) .navbar-menu.is-active {
    background-color: var(--navbar-bg, #3273dc) !important;
}

/* All navbar items in mobile menu */
html:not(.dark-mode) .navbar-menu .navbar-item {
    color: var(--navbar-text, #ffffff) !important;
    background-color: transparent !important;
}

html:not(.dark-mode) .navbar-menu .navbar-item:hover,
html:not(.dark-mode) .navbar-menu .navbar-item:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--navbar-text, #ffffff) !important;
}

html:not(.dark-mode) .navbar-menu .navbar-item.is-active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--navbar-text, #ffffff) !important;
}

/* Navbar dropdown in light mode */
html:not(.dark-mode) .navbar-dropdown {
    background-color: #ffffff !important;
    border-top: 2px solid var(--primary-color, #3273dc) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-item,
html:not(.dark-mode) .navbar-dropdown a.navbar-item,
html:not(.dark-mode) .navbar.is-dark .navbar-dropdown .navbar-item,
html:not(.dark-mode) .navbar.is-dark .navbar-dropdown a.navbar-item {
    color: #333333 !important;
    background-color: #ffffff !important;
}

/* Explicit text color for all spans in navbar dropdown items */
html:not(.dark-mode) .navbar-dropdown .navbar-item span,
html:not(.dark-mode) .navbar-dropdown .navbar-item > span:not(.icon),
html:not(.dark-mode) .navbar-dropdown a.navbar-item span,
html:not(.dark-mode) .navbar.is-dark .navbar-dropdown .navbar-item span,
html:not(.dark-mode) .navbar.is-dark .navbar-dropdown a.navbar-item span {
    color: #333333 !important;
}

/* Force all text content in dropdown to be dark */
html:not(.dark-mode) .navbar-dropdown .navbar-item *,
html:not(.dark-mode) .navbar.is-dark .navbar-dropdown .navbar-item * {
    color: #333333 !important;
}

/* But keep icons styled separately */
html:not(.dark-mode) .navbar-dropdown .navbar-item .icon,
html:not(.dark-mode) .navbar-dropdown .navbar-item .icon i {
    color: #666666 !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-item .icon,
html:not(.dark-mode) .navbar-dropdown .navbar-item i,
html:not(.dark-mode) .navbar-dropdown .navbar-item .fas,
html:not(.dark-mode) .navbar-dropdown .navbar-item .far,
html:not(.dark-mode) .navbar-dropdown .navbar-item .fab {
    color: var(--text-color, #333333) !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-item:hover,
html:not(.dark-mode) .navbar-dropdown .navbar-item:focus {
    background-color: var(--bg-lighter, #f5f5f5) !important;
    color: #3273dc !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-item:hover span,
html:not(.dark-mode) .navbar-dropdown .navbar-item:focus span {
    color: #3273dc !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-item:hover .icon,
html:not(.dark-mode) .navbar-dropdown .navbar-item:hover i,
html:not(.dark-mode) .navbar-dropdown .navbar-item:focus .icon,
html:not(.dark-mode) .navbar-dropdown .navbar-item:focus i {
    color: var(--primary-color, #3273dc) !important;
}

/* Navbar divider in dropdown */
html:not(.dark-mode) .navbar-divider {
    background-color: var(--border-color, #e1e4e8) !important;
}

/* Navbar link with dropdown arrow */
html:not(.dark-mode) .navbar-link:not(.is-arrowless)::after {
    border-color: var(--navbar-text, #ffffff) !important;
}

html:not(.dark-mode) .navbar-dropdown .navbar-link:not(.is-arrowless)::after {
    border-color: var(--text-color, #333333) !important;
}

/* Fix navbar end items */
html:not(.dark-mode) .navbar-end .navbar-item {
    color: var(--navbar-text, #ffffff) !important;
}

html:not(.dark-mode) .navbar-end .navbar-item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--navbar-text, #ffffff) !important;
}


/* ============================================
   GLOBAL SCROLLBAR STYLING - LIGHT MODE
   ============================================ */

/* Global scrollbar styling for all elements in light mode */
html:not(.dark-mode) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html:not(.dark-mode) ::-webkit-scrollbar-track {
    background: var(--bg-lighter, #e8ecf1);
    border-radius: 6px;
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background: var(--border-color, #c0c4cc);
    border-radius: 6px;
    border: 2px solid var(--bg-lighter, #e8ecf1);
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background: #a0a4ac;
}

html:not(.dark-mode) ::-webkit-scrollbar-corner {
    background: var(--bg-lighter, #e8ecf1);
}

/* Firefox scrollbar styling */
html:not(.dark-mode) * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #c0c4cc) var(--bg-lighter, #e8ecf1);
}

/* Body and main containers */
html:not(.dark-mode) body::-webkit-scrollbar,
html:not(.dark-mode) .main-content::-webkit-scrollbar,
html:not(.dark-mode) .container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html:not(.dark-mode) body::-webkit-scrollbar-track,
html:not(.dark-mode) .main-content::-webkit-scrollbar-track,
html:not(.dark-mode) .container::-webkit-scrollbar-track {
    background: var(--bg-lighter, #e8ecf1);
}

html:not(.dark-mode) body::-webkit-scrollbar-thumb,
html:not(.dark-mode) .main-content::-webkit-scrollbar-thumb,
html:not(.dark-mode) .container::-webkit-scrollbar-thumb {
    background: var(--border-color, #c0c4cc);
    border-radius: 6px;
    border: 2px solid var(--bg-lighter, #e8ecf1);
}

html:not(.dark-mode) body::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) .main-content::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) .container::-webkit-scrollbar-thumb:hover {
    background: #a0a4ac;
}

/* Modal and overflow containers */
html:not(.dark-mode) .modal-card-body::-webkit-scrollbar,
html:not(.dark-mode) .table-container::-webkit-scrollbar,
html:not(.dark-mode) pre::-webkit-scrollbar,
html:not(.dark-mode) code::-webkit-scrollbar,
html:not(.dark-mode) textarea::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:not(.dark-mode) .modal-card-body::-webkit-scrollbar-track,
html:not(.dark-mode) .table-container::-webkit-scrollbar-track,
html:not(.dark-mode) pre::-webkit-scrollbar-track,
html:not(.dark-mode) code::-webkit-scrollbar-track,
html:not(.dark-mode) textarea::-webkit-scrollbar-track {
    background: var(--bg-lightest, #f9fafc);
    border-radius: 5px;
}

html:not(.dark-mode) .modal-card-body::-webkit-scrollbar-thumb,
html:not(.dark-mode) .table-container::-webkit-scrollbar-thumb,
html:not(.dark-mode) pre::-webkit-scrollbar-thumb,
html:not(.dark-mode) code::-webkit-scrollbar-thumb,
html:not(.dark-mode) textarea::-webkit-scrollbar-thumb {
    background: var(--border-color, #dbdbdb);
    border-radius: 5px;
}

html:not(.dark-mode) .modal-card-body::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) .table-container::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) pre::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) code::-webkit-scrollbar-thumb:hover,
html:not(.dark-mode) textarea::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}


/* ============================================
   CRITICAL CODE ELEMENT FIX - HIGHEST PRIORITY
   Fixes red/pink code text in light mode
   ============================================ */

/* Override Bulma's default code color which uses #dd1144 */
html:not(.dark-mode) code,
html:not(.dark-mode) code:not([class]),
html:not(.dark-mode) pre code,
html:not(.dark-mode) .table code,
html:not(.dark-mode) table code,
html:not(.dark-mode) tbody code,
html:not(.dark-mode) td code,
html:not(.dark-mode) th code,
html:not(.dark-mode) .content code,
html:not(.dark-mode) .box code,
html:not(.dark-mode) .card code,
html:not(.dark-mode) .section code,
html:not(.dark-mode) .container code,
html:not(.dark-mode) article code,
html:not(.dark-mode) div code,
html:not(.dark-mode) p code,
html:not(.dark-mode) span code,
html:not(.dark-mode) li code {
    background-color: #e8ecf1 !important;
    color: #1a1a2e !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
}


/* ============================================
   CUSTOMER NAME & STACKED INFO CONTRAST FIXES
   ============================================ */

/* Fix has-text-grey contrast in light mode - used for customer emails, secondary text */
html:not(.dark-mode) .has-text-grey,
html:not(.dark-mode) .stacked-secondary,
html:not(.dark-mode) .grid-cell .has-text-grey,
html:not(.dark-mode) .grid-row .has-text-grey {
    color: #4a4a4a !important; /* Darker gray for better contrast */
}

/* Customer name styling in virtual grid */
html:not(.dark-mode) .stacked-info .stacked-primary,
html:not(.dark-mode) .stacked-info .stacked-primary strong {
    color: #1a1a2e !important; /* Very dark for customer names */
}

html:not(.dark-mode) .stacked-info .stacked-secondary,
html:not(.dark-mode) .stacked-info .stacked-secondary small {
    color: #4a4a4a !important; /* Dark gray for emails */
}

/* Grid cell text must be visible in light mode */
html:not(.dark-mode) .grid-cell,
html:not(.dark-mode) .grid-cell * {
    color: var(--text-color, #333333);
}

html:not(.dark-mode) .grid-cell strong {
    color: #1a1a2e !important;
}

html:not(.dark-mode) .grid-cell small {
    color: #4a4a4a !important;
}

/* ============================================
   FOOTER PRODUCT NAME CONTRAST FIX
   ============================================ */

/* Footer text and product name should be visible in light mode */
html:not(.dark-mode) .footer {
    background-color: var(--footer-bg, #f5f7fa);
    color: #4a4a4a !important; /* Darker footer text */
    padding: 1.5rem 1.5rem 2rem !important; /* Reduce Bulma's default 3rem/6rem padding */
}

html:not(.dark-mode) .footer strong {
    color: #1a1a2e !important; /* Very dark for product name */
    font-weight: 700;
}

html:not(.dark-mode) .footer p {
    color: #4a4a4a !important;
}

html:not(.dark-mode) .footer a {
    color: var(--primary-color, #3273dc);
}

html:not(.dark-mode) .footer a:hover {
    color: var(--primary-color-dark, #2160c4);
}


/* Bulma striped and hoverable table fixes for light mode */
html:not(.dark-mode) .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--table-row-even, #f9fafc) !important;
}

html:not(.dark-mode) .table.is-striped tbody tr:not(.is-selected):nth-child(odd) {
    background-color: #ffffff !important;
}

html:not(.dark-mode) .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: var(--hover-background-color, #f0f0f0) !important;
}

html:not(.dark-mode) .table.is-hoverable tbody tr:not(.is-selected):hover td {
    color: var(--text-color, #363636) !important;
}

/* Dashboard recent licenses table - ensure text visibility */
html:not(.dark-mode) .table td,
html:not(.dark-mode) .table td strong,
html:not(.dark-mode) .table td small {
    color: var(--text-color, #363636) !important;
}

html:not(.dark-mode) .table td .has-text-grey,
html:not(.dark-mode) .table td small.has-text-grey {
    color: #4a4a4a !important;
}


/* ============================================
   SEMANTIC COLOR CLASSES - PRESERVE IN LIGHT MODE
   ============================================ */
/* These Bulma helper classes must not be overridden by generic title rules */

html:not(.dark-mode) .has-text-success,
html:not(.dark-mode) .title.has-text-success,
html:not(.dark-mode) p.title.has-text-success,
html:not(.dark-mode) .box .title.has-text-success,
html:not(.dark-mode) .card .title.has-text-success {
    color: #48c78e !important; /* Bulma success green */
}

html:not(.dark-mode) .has-text-info,
html:not(.dark-mode) .title.has-text-info,
html:not(.dark-mode) p.title.has-text-info,
html:not(.dark-mode) .box .title.has-text-info,
html:not(.dark-mode) .card .title.has-text-info {
    color: #3e8ed0 !important; /* Bulma info blue */
}

html:not(.dark-mode) .has-text-warning,
html:not(.dark-mode) .title.has-text-warning,
html:not(.dark-mode) p.title.has-text-warning,
html:not(.dark-mode) .box .title.has-text-warning,
html:not(.dark-mode) .card .title.has-text-warning {
    color: #946c00 !important; /* Bulma warning dark (better contrast) */
}

html:not(.dark-mode) .has-text-danger,
html:not(.dark-mode) .title.has-text-danger,
html:not(.dark-mode) p.title.has-text-danger,
html:not(.dark-mode) .box .title.has-text-danger,
html:not(.dark-mode) .card .title.has-text-danger {
    color: #f14668 !important; /* Bulma danger red */
}

html:not(.dark-mode) .has-text-primary,
html:not(.dark-mode) .title.has-text-primary,
html:not(.dark-mode) p.title.has-text-primary,
html:not(.dark-mode) .box .title.has-text-primary,
html:not(.dark-mode) .card .title.has-text-primary {
    color: #00d1b2 !important; /* Bulma primary */
}


/* ============================================
   DOCUMENTATION PAGE LIGHT MODE FIXES
   ============================================ */

/* Documentation content area - ensure proper light mode styling */
html:not(.dark-mode) .doc-content,
html:not(.dark-mode) .content.doc-content {
    color: #363636;
}

/* Documentation headings */
html:not(.dark-mode) .doc-content h1,
html:not(.dark-mode) .doc-content h2,
html:not(.dark-mode) .doc-content h3,
html:not(.dark-mode) .doc-content h4,
html:not(.dark-mode) .doc-content h5,
html:not(.dark-mode) .doc-content h6 {
    color: #1a1a2e !important;
}

/* Documentation links - use proper blue color with good contrast */
html:not(.dark-mode) .doc-content a,
html:not(.dark-mode) .doc-content a:link,
html:not(.dark-mode) .doc-content a:visited {
    color: #2563eb !important; /* Blue with good contrast */
    text-decoration: underline;
}

html:not(.dark-mode) .doc-content a:hover,
html:not(.dark-mode) .doc-content a:focus {
    color: #1d4ed8 !important; /* Darker blue on hover */
}

/* Links inside code blocks - override any pink/magenta styling */
html:not(.dark-mode) .doc-content code a,
html:not(.dark-mode) .doc-content pre a,
html:not(.dark-mode) .doc-content a code {
    color: #2563eb !important;
}

/* Documentation code blocks - inline code */
html:not(.dark-mode) .doc-content code {
    background-color: #e8ecf1 !important;
    color: #1a1a2e !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
}

/* Documentation pre blocks - code blocks */
html:not(.dark-mode) .doc-content pre {
    background-color: #f5f5f5 !important;
    color: #1a1a2e !important;
    border: 1px solid #dbdbdb;
    border-radius: 6px;
    padding: 1em;
}

html:not(.dark-mode) .doc-content pre code {
    background-color: transparent !important;
    padding: 0 !important;
    color: #1a1a2e !important;
}

/* Documentation blockquotes */
html:not(.dark-mode) .doc-content blockquote {
    background-color: #f9fafc;
    border-left: 4px solid #3273dc;
    color: #4a4a4a;
}

/* Documentation tables */
html:not(.dark-mode) .doc-content table {
    background-color: #ffffff;
}

html:not(.dark-mode) .doc-content table th {
    background-color: #f5f7fa;
    color: #1a1a2e !important;
    border-color: #dbdbdb;
}

html:not(.dark-mode) .doc-content table td {
    color: #363636 !important;
    border-color: #dbdbdb;
}

html:not(.dark-mode) .doc-content table tr:nth-child(even) {
    background-color: #f9fafc;
}

/* Documentation lists */
html:not(.dark-mode) .doc-content ul,
html:not(.dark-mode) .doc-content ol,
html:not(.dark-mode) .doc-content li {
    color: #363636;
}

/* Documentation horizontal rules */
html:not(.dark-mode) .doc-content hr {
    background-color: #dbdbdb;
}

/* Documentation strong/bold text */
html:not(.dark-mode) .doc-content strong,
html:not(.dark-mode) .doc-content b {
    color: #1a1a2e;
}

/* Docs index page styling */
html:not(.dark-mode) .docs-list a,
html:not(.dark-mode) .doc-list a {
    color: #2563eb !important;
}

html:not(.dark-mode) .docs-list a:hover,
html:not(.dark-mode) .doc-list a:hover {
    color: #1d4ed8 !important;
}

/* Fix any Bulma .content overrides for links */
html:not(.dark-mode) .content a:not(.button):not(.tag) {
    color: #2563eb;
}

html:not(.dark-mode) .content a:not(.button):not(.tag):hover {
    color: #1d4ed8;
}


/* ============================================
   FOOTER BRANDING & LOGO STYLING - LIGHT MODE
   ============================================ */

html:not(.dark-mode) .footer-branding {
    margin-bottom: 0.75rem;
}

html:not(.dark-mode) .footer-powered-by {
    font-size: 0.85rem;
    color: #666666;
    margin-right: 0.5rem;
}

html:not(.dark-mode) .footer-logo-link {
    display: inline-block;
    vertical-align: middle;
    color: #333333;
    text-decoration: none;
}

html:not(.dark-mode) .footer-logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    transition: opacity 0.2s ease;
    /* Set color for inline SVG using currentColor fill */
    color: #333333;
}

html:not(.dark-mode) .footer-logo svg {
    height: 24px;
    width: auto;
    max-width: 100px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -4px;
}

html:not(.dark-mode) .footer-logo:hover {
    opacity: 0.8;
}


/* ============================================
   CHECKBOX LIGHT MODE FIX
   Fixes checkbox interior appearing black in light mode
   ============================================ */

/* Force light color scheme for form inputs in light mode */
html:not(.dark-mode) input[type="checkbox"],
html:not(.dark-mode) input[type="radio"] {
    color-scheme: light !important;
    accent-color: var(--primary-color, #3273dc);
}

/* Checkbox container styling */
html:not(.dark-mode) .checkbox,
html:not(.dark-mode) label.checkbox {
    color: var(--text-color, #363636);
}

html:not(.dark-mode) .checkbox input[type="checkbox"],
html:not(.dark-mode) label.checkbox input[type="checkbox"] {
    color-scheme: light !important;
    accent-color: var(--primary-color, #3273dc);
    margin-right: 0.5em;
}

/* Bulma checkbox styles */
html:not(.dark-mode) .b-checkbox.checkbox input[type="checkbox"] + .check {
    background-color: #ffffff !important;
    border-color: var(--input-border, #dbdbdb) !important;
}

html:not(.dark-mode) .b-checkbox.checkbox input[type="checkbox"]:checked + .check {
    background-color: var(--primary-color, #3273dc) !important;
    border-color: var(--primary-color, #3273dc) !important;
}

/* Radio button styling */
html:not(.dark-mode) .radio input[type="radio"],
html:not(.dark-mode) label.radio input[type="radio"] {
    color-scheme: light !important;
    accent-color: var(--primary-color, #3273dc);
    margin-right: 0.5em;
}

/* Remember me checkbox on login page */
html:not(.dark-mode) .field.remember-me input[type="checkbox"],
html:not(.dark-mode) .remember-me-field input[type="checkbox"],
html:not(.dark-mode) #remember-me,
html:not(.dark-mode) input[name="remember_me"] {
    color-scheme: light !important;
    accent-color: var(--primary-color, #3273dc);
}