/* Dark mode component overrides
 *
 * Custom property declarations (colors, shadows, etc.) are now generated
 * dynamically by the theme system (GenerateAllThemesCSS). This file only
 * contains component-specific style overrides that reference var(--xxx)
 * custom properties provided by the generated theme CSS.
 */

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

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

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

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

html.dark-mode .footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 1.5rem 1.5rem 2rem !important; /* Reduce Bulma's default 3rem/6rem padding */
}

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

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

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

    /* Card content */
    html.dark-mode .card-content {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
    
    html.dark-mode .box h1,
    html.dark-mode .box h2,
    html.dark-mode .box h3,
    html.dark-mode .box h4,
    html.dark-mode .box h5,
    html.dark-mode .box h6,
    html.dark-mode .box p,
    html.dark-mode .box a:not(.btn) {
        color: var(--text-color);
    }
    
    html.dark-mode .box .title {
        color: var(--text-color);
    }

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

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

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

    html.dark-mode .button.is-success {
        background-color: var(--success-color);
        color: white;
        border-color: var(--success-color);
    }

    html.dark-mode .button.is-info {
        background-color: var(--info-color);
        color: white;
        border-color: var(--info-color);
    }

    html.dark-mode .button.is-warning {
        background-color: var(--warning-color);
        color: var(--button-text-inverse);
        border-color: var(--warning-color);
    }

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

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

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

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

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

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

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

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

        html.dark-mode .btn-outline-primary:hover {
            background-color: rgba(var(--primary-color-rgb), 0.2);
        }

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

        html.dark-mode .btn-outline-secondary:hover {
            background-color: rgba(var(--secondary-color-rgb), 0.2);
        }

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

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

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

    html.dark-mode .btn-outline-view:hover,
    html.dark-mode .btn-back:hover,
    html.dark-mode .item-actions .btn-secondary:hover,
    html.dark-mode .title-actions .btn-secondary:hover,
    html.dark-mode .section-container .header .btn-secondary:hover,
    html.dark-mode .modal-footer .btn-secondary:hover {
        background-color: rgba(var(--primary-color-rgb), 0.2);
    }

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

    html.dark-mode .btn-delete-account:hover,
    html.dark-mode .item-actions .btn-danger:hover,
    html.dark-mode .title-actions .btn-danger:hover,
    html.dark-mode .section-container .header .btn-danger:hover,
    html.dark-mode .modal-footer .btn-danger:hover {
        background-color: rgba(var(--danger-color-rgb), 0.2);
    }

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

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

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

    html.dark-mode .data-table tr:hover {
        background-color: var(--hover-background-color);
    }

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

    /* Container styling for dark mode.
     *
     * The 1px outline is painted by a pointer-events-none ::after pseudo-
     * element rather than a real `border` or an inset `box-shadow`:
     *
     *   - A real `border` would change the container's layout box and put
     *     dark mode 2px out of width/height parity with light mode (this was
     *     the root cause of webserver-core-ui#867 / PR #628).
     *
     *   - An inset `box-shadow` keeps layout parity, but it paints on the
     *     container itself BEFORE its children paint. Any child whose
     *     background-color reaches the container's right edge — most
     *     visibly the alternating-row backgrounds inside VirtualDataGrid —
     *     covers the inset ring at the right (and left) inner edges. In
     *     dark mode this manifested as alternating-row stripes appearing
     *     to "bleed past" the container border (issue #649; consumer
     *     reports indie-legs-ui#909, indie-arms#978, indie-legs-ui#910).
     *
     * The ::after overlay paints AFTER children in stacking order, has
     * `pointer-events: none` so it doesn't intercept clicks/scrolls, and
     * `inset: 0` plus `border: 1px solid` produces the same visual ring
     * the inset shadow used to draw — but reliably ON TOP of children.
     * `.container` is already `position: relative` (see Bulma reset), so
     * the absolutely-positioned overlay aligns to the border-box.
     */
    html.dark-mode .container {
        background-color: var(--card-bg);
        box-shadow: var(--shadow-md);
    }
    html.dark-mode .container::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--border-color);
        pointer-events: none;
        /* Border-radius parity with .container's painted shape if any
         * ancestor adds rounding via Bulma utility classes. Inherited
         * border-radius lets the ring follow rounded corners. */
        border-radius: inherit;
    }

    /* Search box */
    html.dark-mode .search-box {
        background-color: var(--input-bg);
        border-color: var(--input-border);
        color: var(--input-text);
    }

        html.dark-mode .search-box:focus {
            border-color: var(--primary-color);
        }

    /* Modal */
    /* Modal styling for dark mode - proven working from license-server-ui */
    html.dark-mode .modal-card-head,
    html.dark-mode .modal-card-foot {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* More specific rule to override Bulma defaults */
    html.dark-mode .modal .modal-card .modal-card-foot {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    html.dark-mode .modal-card-body {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .modal-card-title {
        color: var(--text-color) !important;
    }

    /* Theme modal classes for consistent styling */
    html.dark-mode .theme-modal-card {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .theme-modal-header {
        background-color: var(--card-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .theme-modal-body {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .theme-modal-footer {
        background-color: var(--card-bg) !important;
        border-top: 1px solid var(--border-color) !important;
        color: var(--text-color) !important;
    }

    /* Modal background styles moved to modal.css for better organization */

    /* Modal form elements */
    html.dark-mode .modal .input,
    html.dark-mode .modal .textarea,
    html.dark-mode .modal .select select {
        background-color: var(--input-bg);
        border-color: var(--input-border);
        color: var(--input-text);
    }

    html.dark-mode .modal .label {
        color: var(--text-color);
    }

    html.dark-mode .modal .button.delete {
        background-color: transparent;
        border: none;
    }

    html.dark-mode .modal .button.delete:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    html.dark-mode .close-modal {
        color: var(--text-muted);
    }

        html.dark-mode .close-modal:hover {
            color: var(--text-color);
        }

    /* Empty state */
    html.dark-mode .empty-state {
        background-color: var(--bg-darker);
        color: var(--text-muted);
        border-color: var(--border-color);
    }

    /* No data message */
    html.dark-mode .no-data {
        color: var(--text-muted);
    }

    /* Dark mode overrides for Bulma components */

    /* Navbar */
    html.dark-mode .navbar.is-primary {
        background-color: var(--navbar-bg);
        color: var(--navbar-text);
    }

    html.dark-mode .navbar-item,
    html.dark-mode .navbar-link {
        color: var(--navbar-text);
    }

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

    /* Navbar dropdown in dark mode — uses card-bg for the dropdown panel
       and text-color for items so they contrast with the dropdown background
       (not the navbar background) */
    html.dark-mode .navbar-dropdown {
        background-color: var(--card-bg) !important;
        border-top: 2px solid var(--primary-color) !important;
        border-left: 1px solid var(--border-color) !important;
        border-right: 1px solid var(--border-color) !important;
        border-bottom: 2px solid var(--primary-color) !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
        padding: 0.25rem 0 !important;
    }

    html.dark-mode .navbar-dropdown .navbar-item,
    html.dark-mode .navbar-dropdown a.navbar-item {
        color: var(--text-color) !important;
        background-color: var(--card-bg) !important;
    }

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

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

    html.dark-mode .navbar-dropdown .navbar-item span,
    html.dark-mode .navbar-dropdown .navbar-item *,
    html.dark-mode .navbar-dropdown .navbar-item .icon,
    html.dark-mode .navbar-dropdown .navbar-item i {
        color: var(--text-color) !important;
    }

    html.dark-mode .navbar-divider {
        background-color: var(--border-color) !important;
    }

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

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

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

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

    /* Breadcrumb - fixing dark mode readability */
    html.dark-mode .breadcrumb a {
        color: var(--primary-color);
    }

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

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

    html.dark-mode .breadcrumb {
        background-color: transparent !important;
    }

    /* Section backgrounds */
    html.dark-mode .section {
        background-color: var(--bg-color);
    }

    html.dark-mode .container .breadcrumb {
        background-color: transparent;
    }

    /* Theme toggle button and icon buttons */
    html.dark-mode #theme-toggle,
    html.dark-mode .icon-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5em 0.75em;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        font-size: 1.2em;
    }

        html.dark-mode #theme-toggle:hover,
        html.dark-mode .icon-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        html.dark-mode #theme-toggle:focus,
        html.dark-mode .icon-button:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
        }

    /* Invert some images for better visibility */
    html.dark-mode img.invert-on-dark {
        filter: invert(1);
    }

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

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

    /* Item card styling for dark mode */
    html.dark-mode .item-card {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
    html.dark-mode .item-card h1,
    html.dark-mode .item-card h2,
    html.dark-mode .item-card h3,
    html.dark-mode .item-card h4,
    html.dark-mode .item-card h5,
    html.dark-mode .item-card h6,
    html.dark-mode .item-card p,
    html.dark-mode .item-card div:not(.status-badge):not(.risk-badge) {
        color: var(--text-color);
    }

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

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

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

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

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

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

    /* Edit form */
    html.dark-mode .edit-form {
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }

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

    /* Section container */
    html.dark-mode .section-container {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
        html.dark-mode .section-container .header {
            background-color: var(--bg-darker);
            border-bottom-color: var(--border-color);
        }
        
        html.dark-mode .section-container h1,
        html.dark-mode .section-container h2,
        html.dark-mode .section-container h3,
        html.dark-mode .section-container h4,
        html.dark-mode .section-container h5,
        html.dark-mode .section-container h6,
        html.dark-mode .section-container p,
        html.dark-mode .section-container li,
        html.dark-mode .section-container div {
            color: var(--text-color);
        }

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

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

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

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

    /* Generic content container (formerly doc-content) */
    html.dark-mode .content-container {
        background: var(--bg-lighter);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        color: var(--text-color);
    }
    
        html.dark-mode .content-container h1 {
            border-bottom-color: var(--border-color);
            color: var(--text-color);
        }
    
        html.dark-mode .content-container h2 {
            border-bottom-color: var(--border-color);
            color: var(--text-color);
        }
    
        html.dark-mode .content-container h3,
        html.dark-mode .content-container h4,
        html.dark-mode .content-container h5,
        html.dark-mode .content-container h6 {
            color: var(--text-color);
        }
    
        html.dark-mode .content-container p,
        html.dark-mode .content-container li,
        html.dark-mode .content-container td,
        html.dark-mode .content-container th {
            color: var(--text-color);
        }

        html.dark-mode .content-container pre {
            background: var(--bg-darker);
            border: 1px solid var(--border-color);
        }

        html.dark-mode .content-container code {
            background: var(--bg-darker);
            color: var(--text-color);
        }

        html.dark-mode .content-container blockquote {
            color: var(--text-muted);
        }

    /* Mermaid diagram styling */
    html.dark-mode .svg-container {
        border: 1px solid var(--border-color);
        background-color: var(--bg-darker);
    }

    html.dark-mode .svg-pan-zoom-control {
        background-color: var(--bg-lighter);
        border: 1px solid var(--border-color);
    }

    html.dark-mode .svg-pan-zoom-control-background {
        fill: var(--bg-lighter);
    }

    /* Mermaid diagrams in dark mode — !important needed to override mermaid's internal SVG styles */
    html.dark-mode .mermaid .label,
    html.dark-mode .mermaid .nodeLabel,
    html.dark-mode .mermaid .node .label {
        color: var(--text-color) !important;
        fill: var(--text-color) !important;
    }

    html.dark-mode .mermaid .node rect,
    html.dark-mode .mermaid .node circle,
    html.dark-mode .mermaid .node ellipse,
    html.dark-mode .mermaid .node polygon,
    html.dark-mode .mermaid .node path {
        fill: var(--bg-lighter) !important;
        stroke: var(--border-color) !important;
    }

    html.dark-mode .mermaid .edgePath .path {
        stroke: var(--text-muted) !important;
    }

    html.dark-mode .mermaid .edgeLabel {
        background-color: var(--bg-lighter) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .mermaid .edgeLabel span,
    html.dark-mode .mermaid .edgeLabel p,
    html.dark-mode .mermaid .edgeLabel div {
        color: var(--text-color) !important;
    }

    html.dark-mode .mermaid .edgeLabel rect {
        fill: var(--bg-lighter) !important;
        opacity: 1 !important;
    }

    html.dark-mode .mermaid .cluster rect {
        fill: var(--bg-darker) !important;
        stroke: var(--border-color) !important;
    }

    html.dark-mode .mermaid .marker,
    html.dark-mode .mermaid marker path {
        fill: var(--text-muted) !important;
        stroke: var(--text-muted) !important;
    }

    html.dark-mode .mermaid .messageText,
    html.dark-mode .mermaid .loopText,
    html.dark-mode .mermaid text {
        fill: var(--text-color) !important;
    }

    html.dark-mode .mermaid .actor,
    html.dark-mode .mermaid .actor-man {
        fill: var(--bg-lighter) !important;
        stroke: var(--border-color) !important;
    }

    html.dark-mode .mermaid line {
        stroke: var(--border-color) !important;
    }
    /* Risk badge - dark mode */
    html.dark-mode .risk-low {
        background-color: rgba(var(--success-color-rgb), 0.3);
        color: var(--success-color);
    }

    html.dark-mode .risk-medium {
        background-color: rgba(var(--warning-color-rgb), 0.3);
        color: var(--warning-color);
    }

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

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

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

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

    html.dark-mode .status-warning {
        background-color: rgba(var(--warning-color-rgb), 0.3);
        color: var(--warning-color);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Entity search results - dark mode */
    html.dark-mode .entity-search-results {
        background-color: var(--bg-darker);
        border-color: var(--border-color);
        box-shadow: var(--shadow-md);
    }

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

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

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

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

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

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

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

    html.dark-mode .tag:not([class*="is-"]) {
        background-color: var(--bg-lightest) !important;
        color: var(--text-color) !important;
    }

    html.dark-mode .tag.is-light {
        background-color: rgba(128, 128, 128, 0.2) !important;
        color: var(--text-muted) !important;
        border: 1px solid rgba(128, 128, 128, 0.3) !important;
    }

    /* Combined tag colors - is-light variants should keep their semantic colors */
    html.dark-mode .tag.is-success.is-light {
        background-color: rgba(var(--success-color-rgb), 0.2) !important;
        color: var(--success-color) !important;
        border: none !important;
    }

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

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

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

    /* Portfolio card - improved contrast */
    html.dark-mode .portfolio-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        color: var(--text-color);
    }
    
    html.dark-mode .portfolio-card h1,
    html.dark-mode .portfolio-card h2,
    html.dark-mode .portfolio-card h3,
    html.dark-mode .portfolio-card h4,
    html.dark-mode .portfolio-card h5,
    html.dark-mode .portfolio-card h6,
    html.dark-mode .portfolio-card p,
    html.dark-mode .portfolio-card div:not(.status-badge):not(.risk-badge) {
        color: var(--text-color);
    }

        html.dark-mode .portfolio-card:hover {
            box-shadow: var(--shadow-md);
            background-color: var(--bg-lightest);
        }

    /* Portfolio stats */
    html.dark-mode .portfolio-stats td:nth-child(odd) {
        color: var(--text-muted);
    }

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

    html.dark-mode .portfolio-stats .return {
        color: var(--text-color);
    }

    /* Chart section - improved contrast */
    html.dark-mode .chart-section {
        background-color: var(--bg-lighter);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

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

    /* Content section - improved contrast */
    html.dark-mode .content-section {
        background-color: var(--bg-lighter);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    /* Tables - improved contrast */
    html.dark-mode .composition-table th,
    html.dark-mode .strategy-table th {
        background-color: var(--table-header-bg);
        color: var(--text-color);
    }

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

    html.dark-mode .composition-table tr:hover,
    html.dark-mode .strategy-table tr:hover {
        background-color: var(--hover-background-color);
    }

    /* Chart iframe */
    html.dark-mode #performance-chart {
        background-color: var(--bg-darker);
    }

    /* Button - improved contrast */
    html.dark-mode .btn-outline-view:hover {
        background-color: rgba(var(--primary-color-rgb), 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    html.dark-mode .btn-add:hover {
        background-color: rgba(var(--primary-color-rgb), 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    html.dark-mode .btn-primary:hover {
        background-color: var(--primary-color-dark);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    /* Test results styling for dark mode */
    html.dark-mode .test-item.status-active {
        background-color: rgba(var(--success-color-rgb), 0.2);
        border: 1px solid var(--success-color);
    }

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

    html.dark-mode .test-message {
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
    }

    html.dark-mode strong {
        color: var(--secondary-color); /* Use the secondary accent color */
        font-weight: 600;
    }

    /* Bulma-specific classes for dark mode */
    html.dark-mode .title,
    html.dark-mode .subtitle {
        color: var(--text-color);
    }

    html.dark-mode .content h1,
    html.dark-mode .content h2,
    html.dark-mode .content h3,
    html.dark-mode .content h4,
    html.dark-mode .content h5,
    html.dark-mode .content h6,
    html.dark-mode .content p,
    html.dark-mode .content ul,
    html.dark-mode .content ol,
    html.dark-mode .content li {
        color: var(--text-color);
    }

    html.dark-mode .has-text-right,
    html.dark-mode .has-text-left,
    html.dark-mode .has-text-centered {
        color: var(--text-color);
    }

    /* Bulma tabs component - dark mode support */
    html.dark-mode .tabs ul {
        border-bottom-color: var(--border-color);
    }

    html.dark-mode .tabs a {
        border-bottom-color: var(--border-color);
        color: var(--text-color);
    }

        html.dark-mode .tabs a:hover {
            border-bottom-color: var(--text-color);
            color: var(--text-color);
        }

    html.dark-mode .tabs li.is-active a:not(.tab-icon-help) {
        border-bottom-color: var(--primary-color);
        color: var(--primary-color);
    }

    /* Boxed tabs - dark mode */
    html.dark-mode .tabs.is-boxed a:not(.tab-icon-help) {
        border-color: var(--border-color);
    }

        html.dark-mode .tabs.is-boxed a:not(.tab-icon-help):hover {
            background-color: var(--bg-lighter);
            border-bottom-color: var(--border-color);
        }

    html.dark-mode .tabs.is-boxed li.is-active a:not(.tab-icon-help) {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        border-bottom-color: transparent !important;
        color: var(--text-color);
    }

    /* Toggle tabs - dark mode */
    html.dark-mode .tabs.is-toggle a {
        border-color: var(--border-color);
        background-color: var(--bg-darker);
        color: var(--text-color);
    }

        html.dark-mode .tabs.is-toggle a:hover {
            background-color: var(--bg-lighter);
            border-color: var(--border-light);
        }

    html.dark-mode .tabs.is-toggle li.is-active a {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--button-text-inverse);
    }

    html.dark-mode .tabs.is-toggle ul {
        border-bottom: none;
    }

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

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

        html.dark-mode .input:focus,
        html.dark-mode .textarea:focus,
        html.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.dark-mode .input::placeholder,
        html.dark-mode .textarea::placeholder {
            color: var(--text-muted);
        }

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

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

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

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

    /* Bulma striped tables in dark mode */
    html.dark-mode .table.is-striped tbody tr:nth-child(even) {
        background-color: var(--table-row-even) !important;
    }

    html.dark-mode .table tr:hover {
        background-color: var(--hover-background-color);
    }

    /* Override Bulma's is-hoverable table styles in dark mode */
    html.dark-mode .table.is-hoverable tbody tr:not(.is-selected):hover {
        background-color: var(--hover-background-color) !important;
        color: var(--text-color) !important;
    }

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

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

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

    html.dark-mode .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
        background-color: var(--hover-background-color) !important;
        color: var(--text-color) !important;
    }

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

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

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

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

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

    /* Section and content area styling */
    html.dark-mode .section {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

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

    /* Breadcrumb navigation */
    html.dark-mode .breadcrumb {
        background-color: transparent;
    }

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

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

    /* Column and layout elements */
    html.dark-mode .column {
        color: var(--text-color);
    }

    /* Text content styling */
    html.dark-mode .content,
    html.dark-mode .content p,
    html.dark-mode .content h1,
    html.dark-mode .content h2,
    html.dark-mode .content h3,
    html.dark-mode .content h4,
    html.dark-mode .content h5,
    html.dark-mode .content h6 {
        color: var(--text-color);
    }

    /* Message boxes and notifications */
    html.dark-mode .message {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
    }

    html.dark-mode .message-body {
        background-color: var(--card-bg);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    html.dark-mode .message-header {
        background-color: var(--bg-darker);
        color: var(--text-color);
    }

    /* Notification styles for dark mode */
    html.dark-mode .notification {
        background-color: var(--card-bg);
        color: var(--text-color);
    }

    /* Light notification variants - override white backgrounds */
    html.dark-mode .notification.is-info.is-light {
        background-color: rgba(58, 114, 187, 0.15) !important;
        color: #8bb6e8 !important;
    }

    html.dark-mode .notification.is-success.is-light {
        background-color: rgba(var(--success-color-rgb), 0.15) !important;
        color: #8de0a8 !important;
    }

    html.dark-mode .notification.is-warning.is-light {
        background-color: rgba(var(--warning-color-rgb), 0.15) !important;
        color: var(--warning-color) !important;
    }

    html.dark-mode .notification.is-danger.is-light {
        background-color: rgba(var(--danger-color-rgb), 0.15) !important;
        color: #ff7aa3 !important;
    }

    html.dark-mode .notification.is-primary.is-light {
        background-color: rgba(0, 209, 178, 0.15) !important;
        color: #5fd3bc !important;
    }

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

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

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

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

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

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

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

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

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

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

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

    /* Fix code background in dark mode */
    html.dark-mode code {
        background-color: var(--bg-darker);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        padding: 0.25em 0.5em;
        border-radius: 3px;
    }

    /* Table code elements */
    html.dark-mode table code {
        background-color: var(--bg-darker);
        color: var(--text-color);
    }

    /* Better contrast for light buttons in dark mode */
    html.dark-mode .button.is-light {
        background-color: var(--bg-darker);
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }

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

    /* Fix actions column button spacing and contrast */
    html.dark-mode .buttons.are-small .button.is-light {
        background-color: var(--bg-darker);
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }
    /* Dark mode modal theming overrides */
    html.dark-mode .modal .modal-card,
    html.dark-mode .modal .modal-card-head,
    html.dark-mode .modal .modal-card-body,
    html.dark-mode .modal .modal-card-foot,
    html.dark-mode .modal .modal-content,
    html.dark-mode .modal .modal-header,
    html.dark-mode .modal .modal-body,
    html.dark-mode .modal .modal-footer,
    html body .dark-mode .modal .modal-card,
    html body .dark-mode .modal .modal-card-head,
    html body .dark-mode .modal .modal-card-body,
    html body .dark-mode .modal .modal-card-foot,
    html body .dark-mode .modal .modal-content,
    html body .dark-mode .modal .modal-header,
    html body .dark-mode .modal .modal-body,
    html body .dark-mode .modal .modal-footer {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
    }

    /* Bulma modal card specific overrides */
    html.dark-mode .modal-card-head,
    html.dark-mode .modal-card-foot,
    html body .dark-mode .modal-card-head,
    html body .dark-mode .modal-card-foot {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        border-top: 1px solid var(--border-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* Modal content structure for go-algo style */
    html.dark-mode .modal-content,
    html.dark-mode .modal-header,
    html.dark-mode .modal-body,
    html.dark-mode .modal-footer,
    html body .dark-mode .modal-content,
    html body .dark-mode .modal-header,
    html body .dark-mode .modal-body,
    html body .dark-mode .modal-footer {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* Modal titles and text elements */
    html.dark-mode .modal-card-title,
    html.dark-mode .modal-title,
    html.dark-mode .modal h1,
    html.dark-mode .modal h2,
    html.dark-mode .modal h3,
    html.dark-mode .modal h4,
    html.dark-mode .modal h5,
    html.dark-mode .modal h6,
    html.dark-mode .modal p,
    html.dark-mode .modal label,
    html body .dark-mode .modal-card-title,
    html body .dark-mode .modal-title,
    html body .dark-mode .modal h1,
    html body .dark-mode .modal h2,
    html body .dark-mode .modal h3,
    html body .dark-mode .modal h4,
    html body .dark-mode .modal h5,
    html body .dark-mode .modal h6,
    html body .dark-mode .modal p,
    html body .dark-mode .modal label {
        color: var(--text-color) !important;
    }
/* Dark button contrast fix in dark mode */
html.dark-mode .button.is-dark {
    background-color: transparent !important;
    border-color: #8a8a8a !important;
    color: #b0b0b0 !important;
}

html.dark-mode .button.is-dark:hover {
    background-color: transparent !important;
    border-color: #a0a0a0 !important;
    color: #c0c0c0 !important;
}

html.dark-mode .button.is-dark.is-outlined {
    background-color: transparent !important;
    border-color: #8a8a8a !important;
    color: #b0b0b0 !important;
}

html.dark-mode .button.is-dark.is-outlined:hover {
    background-color: rgba(138, 138, 138, 0.1) !important;
    border-color: #a0a0a0 !important;
    color: #c0c0c0 !important;
}
/* Code box styling for dark mode */
html.dark-mode .code-box {
    background-color: var(--bg-darker);
    color: var(--text-color);
    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;
}

/* Pagination disabled state - dark mode contrast fix */
html.dark-mode .pagination-previous.is-disabled,
html.dark-mode .pagination-next.is-disabled,
html.dark-mode .pagination-previous[disabled],
html.dark-mode .pagination-next[disabled],
html.dark-mode .pagination-link.is-disabled,
html.dark-mode .pagination-link[disabled] {
    background-color: var(--bg-darker) !important;
    border-color: var(--border-color) !important;
    color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none;
}

/* General disabled button state - dark mode contrast fix */
html.dark-mode .button.is-disabled,
html.dark-mode .button[disabled],
html.dark-mode button:disabled,
html.dark-mode .button:disabled {
    background-color: var(--bg-darker) !important;
    border-color: var(--border-color) !important;
    color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}


/* Bulma panel component - dark mode support */
html.dark-mode .panel {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .panel-heading {
    background-color: var(--bg-lighter) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

html.dark-mode .panel-block {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

html.dark-mode .panel-block:first-child {
    border-top-color: var(--border-color) !important;
}

html.dark-mode .panel-tabs a {
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

html.dark-mode .panel-tabs a.is-active {
    border-bottom-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

html.dark-mode .panel-icon {
    color: var(--text-muted) !important;
}


/* Bulma menu component - dark mode support */
html.dark-mode .menu-label {
    color: var(--text-muted) !important;
}

html.dark-mode .menu-list a,
html.dark-mode .menu-list button,
html.dark-mode .menu-list .menu-item {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

html.dark-mode .menu-list a:hover,
html.dark-mode .menu-list button:hover,
html.dark-mode .menu-list .menu-item:hover {
    background-color: var(--bg-lighter) !important;
    color: var(--text-color) !important;
}

html.dark-mode .menu-list a.is-active,
html.dark-mode .menu-list a.is-selected,
html.dark-mode .menu-list button.is-active,
html.dark-mode .menu-list button.is-selected,
html.dark-mode .menu-list .menu-item.is-active,
html.dark-mode .menu-list .menu-item.is-selected {
    background-color: var(--primary-color) !important;
    color: var(--button-text-inverse) !important;
}

html.dark-mode .menu-list li ul {
    border-left-color: var(--border-color) !important;
}


/* VirtualDataGrid dark mode support */
html.dark-mode .grid-header {
    background-color: var(--table-header-bg) !important;
    border-bottom-color: var(--table-border) !important;
}

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

html.dark-mode .grid-row {
    border-bottom-color: var(--table-border) !important;
    background-color: transparent !important;
}

html.dark-mode .grid-row.grid-row-striped,
html.dark-mode .grid-row.grid-row-odd {
    background-color: var(--bg-lightest) !important;
}

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

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

html.dark-mode .grid-footer {
    background-color: var(--table-header-bg) !important;
    border-top-color: var(--table-border) !important;
    color: var(--text-color) !important;
}

/* License ID display - dark mode */
html.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-darker, #2d2d2d);
    color: var(--primary-color, #6cb2eb);
    border-radius: 4px;
    border: 1px solid var(--border-color, #444);
}

/* Stacked dates styling - dark mode inherits from light mode base styles */


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

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

html.dark-mode .footer-powered-by {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-right: 0.5rem;
}

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

html.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: #ffffff;
}

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

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

/* Dark mode: Bulma text color helpers need lighter values for contrast */
html.dark-mode .has-text-grey {
    color: var(--secondary-color) !important;
}

html.dark-mode .has-text-grey-dark {
    color: var(--text-muted) !important;
}

/* ========================================
   TIPTAP EDITOR - DARK MODE
   ======================================== */

/* Editor background and text */
html.dark-mode .tiptap {
    background-color: var(--input-bg);
    color: var(--text-color);
    caret-color: var(--text-color);
}

/* Placeholder text */
html.dark-mode .tiptap p.is-editor-empty:first-child::before {
    color: var(--text-muted);
}

/* Selection highlight */
html.dark-mode .tiptap ::selection {
    background-color: rgba(var(--primary-color-rgb), 0.35);
}

/* Table borders and header background */
html.dark-mode .tiptap table td,
html.dark-mode .tiptap table th {
    border-color: var(--border-color);
}

html.dark-mode .tiptap table th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
}

/* Code blocks */
html.dark-mode .tiptap pre {
    background-color: var(--bg-darker);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

html.dark-mode .tiptap code {
    background-color: var(--bg-darker);
    color: var(--text-color);
}

/* Blockquote border */
html.dark-mode .tiptap blockquote {
    border-left: 3px solid var(--border-color);
    color: var(--text-muted);
    padding-left: 1rem;
}

/* Links */
html.dark-mode .tiptap a {
    color: var(--primary-color);
}

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

/* Mention badges */
html.dark-mode .tiptap .mention {
    background-color: rgba(var(--primary-color-rgb), 0.2);
    color: var(--primary-color);
}

/* Headings */
html.dark-mode .tiptap h1,
html.dark-mode .tiptap h2,
html.dark-mode .tiptap h3,
html.dark-mode .tiptap h4,
html.dark-mode .tiptap h5,
html.dark-mode .tiptap h6 {
    color: var(--text-color);
}

/* Horizontal rule */
html.dark-mode .tiptap hr {
    border-color: var(--border-color);
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
/* High contrast theme for accessibility (WCAG AAA)
 * Builds on dark mode CSS as a base with maximum contrast values.
 * Activated by adding .high-contrast-mode class to html element.
 * Uses pure black backgrounds and pure white text for maximum readability.
 * Borders are thickened and brightened for clear element boundaries.
 * Focus indicators use high-visibility yellow (#ffff00).
 */

html.high-contrast-mode {
    /* Base colors - maximum contrast */
    --bg-color: #000000;
    --bg-color-rgb: 0, 0, 0;
    --bg-lighter: #1a1a1a;
    --bg-lightest: #222222;
    --bg-darker: #0a0a0a;
    --text-color: #ffffff;
    --text-color-rgb: 255, 255, 255;
    --text-heading: #ffffff;
    --text-muted: #e0e0e0;
    --border-color: #ffffff;
    --border-color-rgb: 255, 255, 255;
    --border-light: #cccccc;
    --light-button-border: #ffffff;
    --light-button-border-rgb: 255, 255, 255;
    /* Brand colors - high visibility */
    --primary-color: #6cb4ff;
    --primary-color-rgb: 108, 180, 255;
    --primary-color-dark: #4a9eff;
    --secondary-color: #e0e0e0;
    --secondary-color-rgb: 224, 224, 224;
    --success-color: #70ff90;
    --success-color-rgb: 112, 255, 144;
    /* Toggle "on" background — high-contrast green. Must remain green even
     * under high-contrast snap-to-extreme logic. See wsc-ui#813. */
    --toggle-on-bg: #70ff90;
    --warning-color: #ffee00;
    --warning-color-rgb: 255, 238, 0;
    --danger-color: #ff5577;
    --danger-color-rgb: 255, 85, 119;
    --info-color: #66ddff;
    --info-color-rgb: 102, 221, 255;
    /* Component colors */
    --card-bg: #111111;
    --input-bg: #0a0a0a;
    --input-border: #ffffff;
    --input-text: #ffffff;
    --button-bg: #222222;
    --button-text: #ffffff;
    --button-text-inverse: #000000;
    --navbar-bg: #000000;
    --navbar-text: #ffffff;
    --footer-bg: #000000;
    --footer-text: #e0e0e0;
    --table-header-bg: #1a1a1a;
    --table-row-even: #111111;
    --table-border: #ffffff;
    --code-bg: #0a0a0a;
    --code-text: #ffffff;
    --secondary-bg-color: #111111;

    /* Health status indicators - high visibility */
    --health-status-online: #70ff90;
    --health-status-offline: #ff5577;
    --health-status-checking: #ffee00;
    --health-status-error: #ffaa44;

    /* Loading overlay and spinner */
    --loading-overlay-bg: rgba(0, 0, 0, 0.9);
    --spinner-primary-color: #6cb4ff;
    --spinner-secondary-color: #333333;

    /* Additional theme compatibility variables */
    --card-background-color: #111111;
    --link-color: #6cb4ff;
    --hover-background-color: #333333;
    --border-hover-color: #ffff00;
    --button-background-color: #222222;
    --button-hover-background-color: #444444;
    --code-background-color: #0a0a0a;
    --code-text-color: #ff99bb;
    --input-background-color: #0a0a0a;
    --input-focus-border-color: #ffff00;
    --input-focus-shadow-color: rgba(255, 255, 0, 0.4);

    /* Shadows - stronger for visibility */
    --shadow-color-rgb: 255, 255, 255;
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.1);
    --shadow-md: 0 4px 6px rgba(255, 255, 255, 0.15);
    --shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.15);

    /* Background color for the html element */
    background-color: var(--bg-color);
}

html.high-contrast-mode body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

html.high-contrast-mode a {
    color: var(--primary-color);
    text-decoration: underline;
}

html.high-contrast-mode a:hover {
    color: #ffffff;
}

html.high-contrast-mode .navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    border-bottom: 2px solid #ffffff;
}

html.high-contrast-mode .footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: 2px solid #ffffff;
    padding: 1.5rem 1.5rem 2rem !important;
}

html.high-contrast-mode .card,
html.high-contrast-mode .box {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-color);
}

html.high-contrast-mode .card-header {
    background-color: var(--bg-darker);
    border-bottom: 2px solid var(--border-color);
}

/* High contrast: thicker borders for all interactive elements */
html.high-contrast-mode .button,
html.high-contrast-mode .input,
html.high-contrast-mode .textarea,
html.high-contrast-mode .select select {
    border: 2px solid var(--border-color);
}

/* Dark mode: outlined button hover — keep tinted bg with colored text for readability.
   Applies to all dark variants: dark, cool-dark, ocean, forest, sunset, high-contrast. */
html.dark-mode .button.is-outlined.is-warning:hover,
html.dark-mode .button.is-outlined.is-warning:focus {
    background-color: rgba(var(--warning-color-rgb), 0.15) !important;
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

html.dark-mode .button.is-outlined.is-primary:hover,
html.dark-mode .button.is-outlined.is-primary:focus {
    background-color: rgba(var(--primary-color-rgb), 0.15) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html.dark-mode .button.is-outlined.is-info:hover,
html.dark-mode .button.is-outlined.is-info:focus {
    background-color: rgba(var(--info-color-rgb), 0.15) !important;
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

html.dark-mode .button.is-outlined.is-success:hover,
html.dark-mode .button.is-outlined.is-success:focus {
    background-color: rgba(var(--success-color-rgb), 0.15) !important;
    color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

html.dark-mode .button.is-outlined.is-danger:hover,
html.dark-mode .button.is-outlined.is-danger:focus {
    background-color: rgba(var(--danger-color-rgb), 0.15) !important;
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

/* High contrast: enhanced focus indicators */
html.high-contrast-mode *:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px;
}

html.high-contrast-mode .button:focus,
html.high-contrast-mode .input:focus,
html.high-contrast-mode .textarea:focus,
html.high-contrast-mode .select select:focus {
    border-color: #ffff00;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.4);
}

/* High contrast: table styling */
html.high-contrast-mode .table {
    background-color: var(--bg-color);
    color: var(--text-color);
}

html.high-contrast-mode .table th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
    border: 2px solid var(--border-color);
}

html.high-contrast-mode .table td {
    border: 2px solid var(--border-color);
}

html.high-contrast-mode .table tbody tr:last-child td {
    border-bottom: 2px solid var(--border-color);
}

/* High contrast: colored button text must remain readable on hover.
   Covers both solid and outlined variants — outlined buttons fill their
   background on hover, so text must contrast with the fill color. */

/* High contrast: ensure text on colored backgrounds is readable */
html.high-contrast-mode .notification {
    border: 2px solid currentColor;
}

/* High contrast: tag color overrides for WCAG AAA compliance */
html.high-contrast-mode .tag {
    border: 2px solid var(--border-color) !important;
}

html.high-contrast-mode .tag:not([class*="is-"]) {
    background-color: var(--bg-lightest) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.high-contrast-mode .tag.is-light:not(.is-success):not(.is-warning):not(.is-info):not(.is-danger):not(.is-primary):not(.is-link) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.high-contrast-mode .tag.is-success {
    background-color: rgba(var(--success-color-rgb), 0.2) !important;
    color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

html.high-contrast-mode .tag.is-warning {
    background-color: rgba(var(--warning-color-rgb), 0.2) !important;
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

html.high-contrast-mode .tag.is-info {
    background-color: rgba(var(--info-color-rgb), 0.2) !important;
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

html.high-contrast-mode .tag.is-danger {
    background-color: rgba(var(--danger-color-rgb), 0.2) !important;
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

html.high-contrast-mode .tag.is-primary {
    background-color: rgba(var(--primary-color-rgb), 0.2) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html.high-contrast-mode .tag.is-link {
    background-color: rgba(var(--primary-color-rgb), 0.2) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* High contrast: is-light combined with semantic colors */
html.high-contrast-mode .tag.is-success.is-light {
    background-color: rgba(var(--success-color-rgb), 0.25) !important;
    color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

html.high-contrast-mode .tag.is-warning.is-light {
    background-color: rgba(var(--warning-color-rgb), 0.25) !important;
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

html.high-contrast-mode .tag.is-info.is-light {
    background-color: rgba(var(--info-color-rgb), 0.25) !important;
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

html.high-contrast-mode .tag.is-danger.is-light {
    background-color: rgba(var(--danger-color-rgb), 0.25) !important;
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

html.high-contrast-mode .tag.is-primary.is-light {
    background-color: rgba(var(--primary-color-rgb), 0.25) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html.high-contrast-mode .tag.is-link.is-light {
    background-color: rgba(var(--primary-color-rgb), 0.25) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* High contrast: Bulma text color helpers */
html.high-contrast-mode .has-text-grey {
    color: var(--secondary-color) !important;
}

html.high-contrast-mode .has-text-grey-dark {
    color: var(--text-muted) !important;
}

/* ========================================
   TIPTAP EDITOR - HIGH CONTRAST MODE
   ======================================== */

/* Editor background and text */
html.high-contrast-mode .tiptap {
    background-color: var(--input-bg);
    color: var(--text-color);
    caret-color: #ffff00;
    border: 2px solid var(--border-color);
}

/* Placeholder text */
html.high-contrast-mode .tiptap p.is-editor-empty:first-child::before {
    color: var(--text-muted);
}

/* Selection highlight */
html.high-contrast-mode .tiptap ::selection {
    background-color: rgba(255, 255, 0, 0.4);
    color: #000000;
}

/* Table borders and header background */
html.high-contrast-mode .tiptap table td,
html.high-contrast-mode .tiptap table th {
    border: 2px solid var(--border-color);
}

html.high-contrast-mode .tiptap table th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
}

/* Code blocks */
html.high-contrast-mode .tiptap pre {
    background-color: var(--bg-darker);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
}

html.high-contrast-mode .tiptap code {
    background-color: var(--bg-darker);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Blockquote border */
html.high-contrast-mode .tiptap blockquote {
    border-left: 4px solid var(--primary-color);
    color: var(--text-muted);
    padding-left: 1rem;
}

/* Links */
html.high-contrast-mode .tiptap a {
    color: var(--primary-color);
    text-decoration: underline;
}

html.high-contrast-mode .tiptap a:hover {
    color: #ffffff;
}

/* Mention badges */
html.high-contrast-mode .tiptap .mention {
    background-color: rgba(var(--primary-color-rgb), 0.3);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Headings */
html.high-contrast-mode .tiptap h1,
html.high-contrast-mode .tiptap h2,
html.high-contrast-mode .tiptap h3,
html.high-contrast-mode .tiptap h4,
html.high-contrast-mode .tiptap h5,
html.high-contrast-mode .tiptap h6 {
    color: var(--text-color);
}

/* Horizontal rule */
html.high-contrast-mode .tiptap hr {
    border-color: var(--border-color);
}

/* Focus indicator */
html.high-contrast-mode .tiptap:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px;
}

/* ============================================================
   WCAG 2.1 SC 2.4.7 - Dark mode focus indicator overrides
   The dark theme uses a lighter primary color (#75a4f0) which
   provides sufficient contrast on dark backgrounds.
   ============================================================ */

html.dark-mode :focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode a:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode .button:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode .navbar-item:focus-visible,
html.dark-mode .navbar-link:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode .navbar-dropdown .navbar-item:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
    background-color: rgba(var(--primary-color-rgb, 117, 164, 240), 0.12);
}

html.dark-mode .input:focus-visible,
html.dark-mode .textarea:focus-visible,
html.dark-mode .select select:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode .icon-button:focus-visible,
html.dark-mode #theme-toggle:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}

html.dark-mode .delete:focus-visible,
html.dark-mode .modal-close:focus-visible {
    outline-color: var(--primary-color, #75a4f0);
}