.top-bar .account-wrapper .account-menu-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.top-bar .top-bar-content-wrapper .account-wrapper:focus-within {
    background-color: #2D3544;
    color: white;
}

.top-bar .top-bar-content-wrapper .account-wrapper:focus-within div.link-container {
    display: block;
}

.top-bar .account-wrapper .account-menu-toggle:focus-visible {
    outline: 2px solid #35A5F9;
    outline-offset: -2px;
}

.top-bar .account-wrapper .theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    margin: 0;
    padding: 10px 25px;
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    cursor: pointer;
}

.top-bar .account-wrapper .theme-option:hover,
.top-bar .account-wrapper .theme-option:focus-within {
    background: rgba(56, 227, 171, .3);
}

.theme-option input {
    position: absolute;
    width: 36px;
    height: 22px;
    right: 25px;
    opacity: 0;
    cursor: pointer;
}

.theme-track {
    flex: 0 0 36px;
    height: 22px;
    border-radius: 11px;
    background: #7A8BB2;
    pointer-events: none;
}

.theme-track::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.theme-option input:focus-visible + .theme-track {
    outline: 2px solid #35A5F9;
    outline-offset: 2px;
}

.theme-option input:checked + .theme-track {
    background: #39E5AC;
}

.theme-option input:checked + .theme-track::after {
    transform: translateX(14px);
}

/* Match the Angular palette without changing printed reports or invoices. */
@media screen {
    .dark-theme {
        color-scheme: dark;
        --theme-background: #2D3544;
        --theme-surface: #222938;
        --theme-panel: #3C465E;
        --theme-border: #7A8BB2;
        --theme-text: #fff;
        --theme-link: #68BCFB;
        --theme-blue: #35A5F9;
        --theme-green: #39E5AC;
        --theme-danger: #EF4444;
        --theme-hover: color-mix(in srgb, #3C465E 82%, #7A8BB2);
    }

    .dark-theme body,
    .dark-theme .body-content {
        color: var(--theme-text);
        background-color: var(--theme-background);
    }

    .dark-theme #nav-container,
    .dark-theme #version-container {
        background-color: var(--theme-surface);
    }

    .dark-theme .top-bar {
        background-color: var(--theme-panel);
        box-shadow: none;
    }

    .dark-theme .top-bar .name-text,
    .dark-theme .top-bar .tickets-wrapper .label-wrapper {
        color: var(--theme-text);
    }

    .dark-theme .header-part #menu-toggle .menu-collapse-button {
        background-color: var(--theme-border);
    }

    .dark-theme nav ul label .label-icon,
    .dark-theme .top-bar .account-wrapper:hover .account-icon,
    .dark-theme .top-bar .account-wrapper:focus-within .account-icon,
    .dark-theme .top-bar .tickets-wrapper:hover .tickets-icon {
        background-color: var(--theme-green) !important;
    }

    .dark-theme .isometric-background {
        background-color: var(--theme-surface);
        -webkit-mask-image: url('../images/timestone_isometric_pattern_dark.svg');
        mask-image: url('../images/timestone_isometric_pattern_dark.svg');
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .dark-theme .main-panel,
    .dark-theme .content-panel,
    .dark-theme .login-wrapper {
        color: var(--theme-text);
        background: var(--theme-surface);
        box-shadow: none;
    }

    .dark-theme .main-panel .content-panel,
    .dark-theme .modal-content .content-panel {
        background: var(--theme-panel);
    }

    .dark-theme .login-layout .body-content {
        background: var(--theme-background) !important;
    }

    .dark-theme h1,
    .dark-theme h2,
    .dark-theme h3,
    .dark-theme h4,
    .dark-theme h5,
    .dark-theme h6,
    .dark-theme label,
    .dark-theme label.col-form-label,
    .dark-theme .main-panel h2,
    .dark-theme .login-wrapper h2,
    .dark-theme .login-wrapper label {
        color: var(--theme-text);
    }

    .dark-theme h1.page-header {
        color: var(--theme-green);
    }

    .dark-theme a,
    .dark-theme .content-panel a:not(.glyphicon):not(.dropdown-item) {
        color: var(--theme-link);
    }

    .dark-theme .top-bar .account-wrapper a,
    .dark-theme .top-bar .tickets-wrapper:hover a,
    .dark-theme nav a,
    .dark-theme a.btn,
    .dark-theme .demo-register-button {
        color: var(--theme-text);
    }

    .dark-theme hr,
    .dark-theme .basic-border-top,
    .dark-theme .basic-border-bottom,
    .dark-theme .row div.vertical-seperator {
        border-color: var(--theme-border);
    }

    .dark-theme .form-control,
    .dark-theme .custom-select,
    .dark-theme input:not([type]),
    .dark-theme input[type=text],
    .dark-theme .login-wrapper input[type=text],
    .dark-theme input[type=password],
    .dark-theme input[type=email],
    .dark-theme input[type=number],
    .dark-theme input[type=search],
    .dark-theme input[type=date],
    .dark-theme input[type=time],
    .dark-theme select,
    .dark-theme textarea,
    .dark-theme .input-group-text,
    .dark-theme .btn-light:not(.btn-warning, .btn-danger, .btn-success, .btn-primary, .btn-info),
    .dark-theme .btn-default:not(.btn-warning, .btn-danger, .btn-success, .btn-primary, .btn-info),
    .dark-theme .bootstrap-select > .dropdown-toggle:not(.btn-warning, .btn-danger, .btn-success, .btn-primary, .btn-info),
    .dark-theme #clientContainer div.selectContainer .dropdown-toggle {
        color: var(--theme-text);
        background-color: var(--theme-panel);
        border-color: var(--theme-border);
    }

    .dark-theme .bootstrap-select > .dropdown-toggle.btn-warning {
        color: var(--theme-surface);
        background-color: #FFC107;
        border-color: #FFC107;
    }

    .dark-theme .form-control:focus,
    .dark-theme .custom-select:focus,
    .dark-theme .bootstrap-select > .dropdown-toggle:focus {
        border-color: var(--theme-blue);
        box-shadow: 0 0 0 .2rem rgba(53, 165, 249, .25);
    }

    .dark-theme input::placeholder,
    .dark-theme textarea::placeholder,
    .dark-theme label.placeholder,
    .dark-theme .text-muted,
    .dark-theme a.inactive {
        color: var(--theme-border) !important;
    }

    .dark-theme .form-control:disabled,
    .dark-theme .form-control[readonly],
    .dark-theme .content-panel div.form-control,
    .dark-theme .btn-light:disabled,
    .dark-theme .btn-default:disabled {
        background-color: var(--theme-background);
    }

    .dark-theme input[type=checkbox],
    .dark-theme input[type=radio] {
        accent-color: var(--theme-green);
    }

    .dark-theme .content-panel .dataTable.editable input {
        color: inherit;
        background-color: transparent;
    }

    .dark-theme .content-panel .dataTable.editable input:focus {
        border-bottom-color: var(--theme-blue);
    }

    .dark-theme .content-panel #DataTable td .dropdown-toggle {
        color: var(--theme-text);
        background: none;
    }

    .dark-theme .dropdown-menu,
    .dark-theme .popover,
    .dark-theme .modal-content,
    .dark-theme .modal-body,
    .dark-theme .modalEditDescription,
    .dark-theme .loadingText,
    .dark-theme .warningText,
    .dark-theme .dt-button-collection {
        color: var(--theme-text);
        background: var(--theme-surface);
        border-color: var(--theme-panel);
        box-shadow: none;
    }

    .dark-theme .dropdown-item,
    .dark-theme .popover-body,
    .dark-theme .modal-title,
    .dark-theme .form-control-plaintext,
    .dark-theme .bootstrap-select .dropdown-menu li a {
        color: var(--theme-text);
    }

    .dark-theme .dropdown-item:hover,
    .dark-theme .dropdown-item:focus,
    .dark-theme .bootstrap-select .dropdown-menu li a:hover,
    .dark-theme .bootstrap-select .dropdown-menu li a:focus,
    .dark-theme .bootstrap-select .no-results,
    .dark-theme .popover-header {
        color: var(--theme-text);
        background-color: var(--theme-panel);
    }

    .dark-theme .dropdown-item.active,
    .dark-theme .dropdown-item:active {
        background-color: var(--theme-blue);
    }

    .dark-theme .dropdown-item.disabled,
    .dark-theme .dropdown-item:disabled {
        color: var(--theme-border);
    }

    .dark-theme .dropdown-divider,
    .dark-theme .modal-header,
    .dark-theme .modal-footer,
    .dark-theme .popover-header {
        border-color: var(--theme-panel);
    }

    .dark-theme .close {
        color: var(--theme-text);
        text-shadow: none;
    }

    .dark-theme .note-editor.note-frame,
    .dark-theme .note-editor.note-frame .note-toolbar,
    .dark-theme .note-editor.note-frame .note-statusbar {
        color: var(--theme-text);
        background-color: var(--theme-panel);
        border-color: var(--theme-border);
    }

    .dark-theme .note-editor.note-frame .note-statusbar .note-icon-bar {
        border-color: var(--theme-border);
    }

    /* Keep the message canvas light so authored email colors remain accurate. */
    .dark-theme .note-editor.note-frame .note-editing-area,
    .dark-theme .note-editor.note-frame .note-editable {
        color-scheme: light;
        color: #212529;
        background-color: #fff;
    }

    .dark-theme .note-editor .note-editable :is(h1, h2, h3, h4, h5, h6, label, .table) {
        color: #212529;
    }

    .dark-theme .note-editor .note-editable a {
        color: #007BFF;
    }

    .dark-theme .loading,
    .dark-theme .warningModal {
        background-color: rgba(34, 41, 56, .65);
    }

    .dark-theme .hideoverlay,
    .dark-theme #AccountancyLinkTable tr.active td.activeIndication p {
        background-color: var(--theme-panel);
    }

    .dark-theme .table,
    .dark-theme table.dataTable,
    .dark-theme .content-panel .dataTable td,
    .dark-theme .content-panel .dataTable th {
        color: var(--theme-text);
    }

    .dark-theme table.dataTable {
        background-color: var(--theme-panel);
    }

    .dark-theme .table th,
    .dark-theme .table td,
    .dark-theme .table thead th,
    .dark-theme .content-panel .dataTable,
    .dark-theme .content-panel .dataTable th,
    .dark-theme .content-panel .dataTable td,
    .dark-theme .dataTable th.rotate > div > span {
        border-color: var(--theme-border) !important;
    }

    .dark-theme .dataTables_wrapper,
    .dark-theme .dataTables_info,
    .dark-theme .dataTables_length,
    .dark-theme .dataTables_filter,
    .dark-theme .dataTables_processing {
        color: var(--theme-text);
    }

    .dark-theme .page-link,
    .dark-theme .dataTables_paginate .paginate_button,
    .dark-theme .dt-button {
        color: var(--theme-text) !important;
        background: var(--theme-surface);
        border-color: var(--theme-border);
    }

    .dark-theme .page-link:hover,
    .dark-theme .page-link:focus,
    .dark-theme .dataTables_paginate .paginate_button:hover,
    .dark-theme .dt-button:hover {
        background: var(--theme-panel);
    }

    .dark-theme .page-item.active .page-link,
    .dark-theme .dataTables_paginate .paginate_button.current {
        color: var(--theme-link) !important;
        background: var(--theme-surface);
        border-color: var(--theme-blue);
    }

    .dark-theme .page-item.disabled .page-link,
    .dark-theme .dataTables_paginate .paginate_button.disabled {
        color: var(--theme-border) !important;
        background: var(--theme-surface);
        border-color: var(--theme-panel);
    }

    .dark-theme .content-panel .dataTables_scrollBody::-webkit-scrollbar-track {
        background-image: none;
        background-color: var(--theme-background);
    }

    .dark-theme table.dataTable .dtfc-fixed-left,
    .dark-theme table.dataTable .dtfc-fixed-right {
        background-color: var(--theme-panel);
    }

    .dark-theme .current-row,
    .dark-theme .content-panel .dataTable tbody tr:hover,
    .dark-theme .content-panel .dataTable tr.selected,
    .dark-theme .content-panel .dataTable tr.selectedDatatableRow,
    .dark-theme .content-panel .dataTable td.selectedDatatableCell {
        background-color: var(--theme-hover) !important;
    }

    .dark-theme .future-row,
    .dark-theme .dataTable.editable tr.disabledRow td {
        background-color: var(--theme-background);
    }

    .dark-theme .content-panel .dataTable tr.disabled td,
    .dark-theme .content-panel #DataTable tr.warning td,
    .dark-theme .content-panel .dataTable td.Devaluated {
        color: var(--theme-border);
    }

    .dark-theme .content-panel .dataTable td.Open,
    .dark-theme .content-panel .text-primary,
    .dark-theme .text-primary {
        color: var(--theme-link) !important;
    }

    .dark-theme .text-success {
        color: var(--theme-green) !important;
    }

    .dark-theme .text-danger,
    .dark-theme .field-validation-error,
    .dark-theme .validation-summary-errors,
    .dark-theme .content-panel .validationerrors h2.ValidationErrorHeader,
    .dark-theme .content-panel .validationerrors i.fas,
    .dark-theme .content-panel .dataTable td.Incomplete,
    .dark-theme .content-panel .dataTable tr.invalid td.invalid,
    .dark-theme .content-panel .dataTable tr.invalid td.invalid input {
        color: var(--theme-danger) !important;
    }

    .dark-theme .dataTable.editable tr.danger td {
        background-color: var(--theme-surface);
        border-bottom-color: var(--theme-danger) !important;
    }

    .dark-theme .nav-tabs {
        border-bottom-color: var(--theme-border);
    }

    .dark-theme ul.nav-tabs li a {
        color: var(--theme-text);
    }

    .dark-theme .nav-tabs .nav-link.active,
    .dark-theme .nav-tabs .nav-item.show .nav-link,
    .dark-theme .nav-tabs .nav-link:hover,
    .dark-theme .nav-tabs .nav-link:focus {
        color: var(--theme-green);
        background-color: var(--theme-panel);
        border-color: var(--theme-border);
    }

    .dark-theme .ui-widget-content,
    .dark-theme .ui-datepicker,
    .dark-theme .ui-autocomplete,
    .dark-theme .ui-menu-item-wrapper {
        color: var(--theme-text);
        background: var(--theme-surface);
        border-color: var(--theme-panel);
    }

    .dark-theme .ui-widget-header,
    .dark-theme .ui-state-default,
    .dark-theme .ui-widget-content .ui-state-default {
        color: var(--theme-text);
        background: var(--theme-panel);
        border-color: var(--theme-border);
    }

    .dark-theme .ui-state-hover,
    .dark-theme .ui-widget-content .ui-state-hover,
    .dark-theme .ui-state-focus,
    .dark-theme .ui-widget-content .ui-state-focus {
        color: var(--theme-text);
        background: var(--theme-hover);
        border-color: var(--theme-blue);
    }

    .dark-theme .ui-state-highlight,
    .dark-theme .ui-widget-content .ui-state-highlight {
        color: var(--theme-text);
        background: var(--theme-background);
        border-color: var(--theme-blue);
    }

    .dark-theme .ui-state-active,
    .dark-theme .ui-widget-content .ui-state-active {
        color: var(--theme-text);
        background: var(--theme-blue);
        border-color: var(--theme-blue);
    }

    .dark-theme .ui-datepicker .ui-icon,
    .dark-theme .datePickerBox .ui-datepicker-trigger {
        filter: brightness(0) invert(1);
    }

    .dark-theme .alert,
    .dark-theme .warning-wrapper {
        color: var(--theme-text);
        background: var(--theme-surface);
        box-shadow: none;
    }

    .dark-theme .alert-success {
        border-color: var(--theme-green);
    }

    .dark-theme .alert-info {
        border-color: var(--theme-blue);
    }

    .dark-theme .alert-warning {
        border-color: #FFC107;
    }

    .dark-theme .alert-danger,
    .dark-theme .warning-wrapper {
        border-color: var(--theme-danger);
    }

    .dark-theme .warning-wrapper .warning-text {
        color: var(--theme-text);
    }

    .dark-theme .alert .alert-link {
        color: var(--theme-link);
    }

    .dark-theme .bg-white,
    .dark-theme .bg-light {
        background-color: var(--theme-panel) !important;
    }

    .dark-theme code {
        color: var(--theme-link);
        background: var(--theme-panel);
    }
}