@media (prefers-color-scheme: dark) {
    :root {
        /* Custom dark mode variables */
        --dark-background: #000000;
        --dark-text: #ffffff;
        --dark-text-muted: #d9d9d9;
        --dark-border: #333333;
        --dark-input-background: #1a1a1a;
        --dark-button-background: #F2F2F2;
        --dark-button-disabled-background: #222222;
        --dark-button-hover: #333333;
        --dark-card-background: #111111;
        --dark-accent: #f5f5f5;

        /* Override existing CSS variables for broad compatibility */
        --base-background-default: var(--dark-background);
        --base-background-card: var(--dark-card-background);
        --base-background-skeleton: var(--dark-input-background);
        --base-background-overlay: rgba(0, 0, 0, 0.8);
        --base-background-footer: #0a0a0a;

        --base-text: var(--dark-text);
        --base-text-disabled: #666666;
        --base-primary-reverse: var(--dark-background);

        --base-primary-interactive: var(--dark-text);
        --base-primary-interactive-hover: #e6e6e6;
        --base-primary-interactive-active: #cccccc;
        --base-primary-interactive-visited: var(--dark-text-muted);

        --base-secondary-interactive: #cccccc;
        --base-secondary-interactive-hover: #e6e6e6;
        --base-secondary-interactive-active: var(--dark-text);

        --base-primary-reverse-interactive-hover: #1a1a1a;
        --base-primary-reverse-interactive-active: var(--dark-border);

        --base-interactive-disabled: #444444;

        --base-decoration-primary: var(--dark-text);
        --base-decoration-secondary: var(--dark-border);

        --base-validation-error: #ff4444;
        --product-new: #00aa44;

        --shadow-interactive-default-color: rgba(255, 255, 255, 0.1);
        --shadow-interactive-hover-color: rgba(255, 255, 255, 0.2);
        --shadow-interactive-active-color: rgba(255, 255, 255, 0.05);
    }

    /* Body and HTML overrides */
    body,
    html {
        background-color: var(--dark-background);
        color: var(--dark-text);
    }

    /* Button and interactive element overrides */
    button {
        color: var(--dark-text);
    }

    /* Link overrides */
    a {
        color: var(--dark-text);
    }

    a:hover {
        color: var(--dark-text-muted);
    }

    /* Specific targeting for courier/tracking links and button-styled links */
    #pl-courier-fwd-link,
    a#pl-courier-fwd-link[data-testid="courier-link"],
    a.pl-button,
    .pl-button,
    a[class*="button"],
    button[class*="pl-"],
    a.pl-button.pl-is-fullwidth,
    a[id*="courier"],
    a[data-testid*="courier"] {
        background-color: var(--dark-background) !important;
        color: var(--dark-text) !important;
        border-color: var(--dark-text) !important;
    }

    /* Ultra-specific targeting to override pl-returns-main.css */
    #main-content a#pl-courier-fwd-link.pl-button.pl-is-fullwidth.pl-space-bottom[data-testid="courier-link"] {
        background-color: var(--dark-background) !important;
        color: var(--dark-text) !important;
        border: 1px solid var(--dark-text) !important;
        opacity: 1 !important;
        font-weight: 600 !important;
    }

    /* Additional override for the specific CSS rule we saw */
    #main-content #pl-courier-fwd-link {
        border: 1px solid var(--dark-text) !important;
        background-color: var(--dark-background) !important;
        color: var(--dark-text) !important;
        opacity: 1 !important;
        font-weight: 600 !important;
    }

    /* Button hover states */
    #pl-courier-fwd-link:hover,
    a#pl-courier-fwd-link[data-testid="courier-link"]:hover,
    a.pl-button:hover,
    .pl-button:hover,
    a[class*="button"]:hover,
    button[class*="pl-"]:hover,
    a.pl-button.pl-is-fullwidth:hover {
        background-color: var(--dark-button-hover) !important;
        color: var(--dark-text) !important;
        border-color: var(--dark-text) !important;
    }

    /* Specific override for show more button - link-like styling, no hover behavior */
    #pl-show-more-button,
    button#pl-show-more-button.pl-button.pl-is-fullwidth[data-testid="more-button"] {
        background-color: transparent !important;
        color: var(--dark-text) !important;
        border: none !important;
    }

    #pl-show-more-button:hover,
    button#pl-show-more-button.pl-button.pl-is-fullwidth[data-testid="more-button"]:hover {
        background-color: transparent !important;
        color: var(--dark-text) !important;
        border: none !important;
    }

    /* Disabled buttons */
    .pl-button:disabled,
    button:disabled {
        background-color: var(--dark-button-disabled-background) !important;
        color: var(--dark-text-muted) !important;
    }



    /* Input and form elements */
    input,
    textarea,
    select,
    .pl-input {
        background-color: var(--dark-input-background);
        color: var(--dark-text);
        border-color: var(--dark-border);
    }

    input:focus,
    textarea:focus,
    select:focus,
    .pl-input:focus {
        border-color: var(--dark-accent);
    }

    /* Dropdown elements */
    div.pl-dropdown-menu.pl-dropdown-border,
    div.pl-dropdown.pl-dropdown-border {
        background-color: var(--dark-background);
        color: var(--dark-text);
        border-color: var(--dark-border);
    }

    /* Toggle icons */
    .pl-toggle-section .pl-toggle-section-header .pl-toggle-icon {
        color: var(--dark-background);
        background-color: var(--dark-text);
    }

    /* Primary button styling */
    .pl-button--primary {
        background-color: var(--dark-button-background);
        color: var(--dark-background);
    }

    /* Checkbox and radio button states */
    .pl-checkbox input[type='checkbox']:checked+.pl-checkbox-icon:after,
    .pl-radio input[type='radio']:checked~.pl-checkbox-icon:after {
        background-color: var(--dark-text);
    }

    .pl-radio .pl-checkbox-icon,
    .pl-radio .pl-radio-icon,
    .pl-radio input[type=radio]:checked~.pl-radio-icon {
        border-color: var(--dark-text);
    }

    /* Modal styling */
    .pl-confirm-return-modal .pl-modal {
        border: var(--dark-button-background) solid 2px;
    }

    .pl-modal-buttons button[data-testid='pl-close'],
    .pl-register-another .pl-button {
        background-color: var(--dark-background);
        color: var(--dark-accent);
        border-color: var(--dark-text);
    }

    /* Navigation icons and SVG paths */
    button>svg>path,
    nav>button>svg>path,
    svg>path,
    svg path {
        fill: var(--dark-text);
    }

    /* Ensure all SVGs have proper fill in dark mode */
    svg {
        fill: var(--dark-text);
    }

    /* Exception: Keep H&M logo original colors */
    a[data-testid="logo"] svg,
    a[data-testid="logo"] svg path,
    a[aria-label="H&M"] svg,
    a[aria-label="H&M"] svg path {
        fill: #E50010 !important;
    }

    /* Ultra-specific PL Tab styling - INACTIVE tabs (transparent bg, white text, white border) */
    #main-content nav.pl-tab-container div[role="button"] div.pl-tab:not(.pl-active),
    #parcellab-track-and-trace nav.pl-tab-container div[role="button"] div.pl-tab:not(.pl-active),
    #parcellab-track-and-trace-ui-wrapper nav.pl-tab-container div[role="button"] div.pl-tab:not(.pl-active) {
        background-color: transparent !important;
        color: var(--dark-text) !important;
        border-color: var(--dark-text) !important;
        opacity: 1 !important;
    }

    /* Ultra-specific ACTIVE/selected tab (WHITE FILL, black text, black border) */
    #main-content nav.pl-tab-container div[role="button"] div.pl-tab.pl-active,
    #parcellab-track-and-trace nav.pl-tab-container div[role="button"] div.pl-tab.pl-active,
    #parcellab-track-and-trace-ui-wrapper nav.pl-tab-container div[role="button"] div.pl-tab.pl-active {
        background-color: var(--dark-text) !important;
        color: var(--dark-background) !important;
        border-color: var(--dark-background) !important;
        opacity: 1 !important;
    }

    /* PL Tab hover states - inactive tabs */
    .pl-tab-container .pl-tab:not(.pl-active):hover {
        background-color: var(--dark-button-hover) !important;
        color: var(--dark-text) !important;
        border: 1px solid var(--dark-text) !important;
    }

    /* PL Tab text content */
    .pl-tab .pl-tab-text,
    .pl-tab .pl-tab-text-tno {
        color: inherit !important;
    }

    #parcellab-track-and-trace section.right div.pl-card-article>hr {
        border-color: #404040;
    }

    #parcellab-track-and-trace-ui-wrapper .pl-alert.pl-alert-danger {
        color: var(--dark-background);
    }

    /* Style links in checkpoint status details - override #parcellab-track-and-trace-ui-wrapper a { text-decoration: inherit } */
    #parcellab-track-and-trace-ui-wrapper .pl-checkpoint-status-details a {
        text-decoration: underline !important;
        color: var(--dark-text) !important;
    }

    #parcellab-track-and-trace-ui-wrapper .pl-checkpoint-status-details a:hover {
        color: var(--dark-text-muted) !important;
    }
}