/*
 * Backoffice dark mode. Active when <html data-theme="dark">: set by
 * script/theme.js from the user's choice, or from the system setting when the
 * choice is "auto" (the default). Loaded after theme.css and login.css;
 * colours only. Links and accents use lighter brand blues so text keeps
 * WCAG AA contrast on the dark surfaces; solid brand-blue headers keep
 * #3973B9 with white text (about 4.9:1).
 */
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] body.skin-black-light {
    --wgf-blue: #7fb0ea;
    --wgf-blue-dark: #a9caf2;
    --wgf-tint: rgba(57, 115, 185, 0.28);
    --wgf-navy: #eef3fa;
    --wgf-ink: #d7e0ec;
    --wgf-muted: #9aa8bd;
    --wgf-soft: #1a2a42;
    --wgf-line: #2a3c57;
    --wgf-bg: #0c1626;
    --wgf-surface: #122036;

    background-color: var(--wgf-bg);
    /* portal.css paints a light texture image over the body colour. */
    background-image: none;
}

/* Solid brand surfaces keep the logo blue: white text on it is ~4.9:1. */
html[data-theme="dark"] body.skin-black-light .widget > div.widget-head {
    background: #3973b9;
}

/* Page surfaces */
html[data-theme="dark"] body.skin-black-light .main-content-wrapper,
html[data-theme="dark"] body.skin-black-light .content-wrapper,
html[data-theme="dark"] body.skin-black-light .wrapper {
    background-color: var(--wgf-bg);
}
html[data-theme="dark"] body.skin-black-light .main-header .navbar,
html[data-theme="dark"] body.skin-black-light .main-header > .logo,
html[data-theme="dark"] body.skin-black-light .main-header > .logo:hover,
html[data-theme="dark"] body.skin-black-light .main-sidebar,
html[data-theme="dark"] body.skin-black-light .left-side {
    background-color: var(--wgf-surface);
}
html[data-theme="dark"] body.skin-black-light .main-header .navbar .nav > li > a:hover,
html[data-theme="dark"] body.skin-black-light .main-header .navbar .nav > li > a:focus,
html[data-theme="dark"] body.skin-black-light .main-header .navbar .sidebar-toggle:hover {
    background: var(--wgf-soft);
}
html[data-theme="dark"] body.skin-black-light .main-header .navbar .sidebar-toggle {
    color: var(--wgf-ink);
}

/* Cards and panels */
html[data-theme="dark"] body.skin-black-light .widget-content,
html[data-theme="dark"] body.skin-black-light .panel,
html[data-theme="dark"] body.skin-black-light .box,
html[data-theme="dark"] body.skin-black-light .well,
html[data-theme="dark"] body.skin-black-light .modal-content,
html[data-theme="dark"] body.skin-black-light .dropdown-menu,
html[data-theme="dark"] body.skin-black-light .vertical-section,
html[data-theme="dark"] body.skin-black-light .ui-widget-content {
    background-color: var(--wgf-surface);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .panel-heading,
html[data-theme="dark"] body.skin-black-light .panel-footer,
html[data-theme="dark"] body.skin-black-light .modal-header,
html[data-theme="dark"] body.skin-black-light .modal-footer {
    background-color: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: var(--wgf-navy);
}
html[data-theme="dark"] body.skin-black-light .dropdown-menu > li > a {
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .dropdown-menu > li > a:hover {
    background-color: var(--wgf-soft);
    color: var(--wgf-blue);
}
html[data-theme="dark"] body.skin-black-light hr {
    border-color: var(--wgf-line);
}

/* portal.css surfaces with a hard-coded light background */
html[data-theme="dark"] body.skin-black-light .white-pause {
    background: transparent;
    border-bottom-color: var(--wgf-line);
}
html[data-theme="dark"] body.skin-black-light #sub_menu ul li a,
html[data-theme="dark"] body.skin-black-light .spy-controls button,
html[data-theme="dark"] body.skin-black-light .date-links div.selector,
html[data-theme="dark"] body.skin-black-light div.csv-line,
html[data-theme="dark"] body.skin-black-light ul.tagit,
html[data-theme="dark"] body.skin-black-light .filter-selector .tag,
html[data-theme="dark"] body.skin-black-light .chzn-container-multi .chzn-choices,
html[data-theme="dark"] body.skin-black-light tfoot,
html[data-theme="dark"] body.skin-black-light tfoot td {
    background: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .spinner-modal-wrapper {
    background-color: rgba(12, 22, 38, 0.6);
}
html[data-theme="dark"] body.skin-black-light .spinner-modal-container {
    background: var(--wgf-surface);
}

/* The selected sub-menu tab stays a solid brand tab. */
html[data-theme="dark"] body.skin-black-light #sub_menu ul li.selected a {
    background: #3973b9;
    color: #ffffff;
}

/* Section labels, the select replacement and the report filters */
html[data-theme="dark"] body.skin-black-light .section-label {
    background-color: var(--wgf-soft);
    color: var(--wgf-blue);
}
html[data-theme="dark"] body.skin-black-light div.selector {
    background-color: var(--wgf-bg);
    border-color: var(--wgf-line);
}
html[data-theme="dark"] body.skin-black-light div.selector > span {
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .filter-selector .container .label {
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .filter-selector .container.add,
html[data-theme="dark"] body.skin-black-light .filter-selector .container.add .label {
    background-color: var(--wgf-soft);
}
html[data-theme="dark"] body.skin-black-light .filter-selector .container.tags {
    background-color: rgba(57, 115, 185, 0.14);
}
html[data-theme="dark"] body.skin-black-light .filter-selector .container.tags .label {
    background-color: rgba(57, 115, 185, 0.32);
}
html[data-theme="dark"] body.skin-black-light .filter-selector .tag > span,
html[data-theme="dark"] body.skin-black-light .filter-selector .tag > i {
    color: #ff8a80;
}
html[data-theme="dark"] body.skin-black-light .dt-button {
    background: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .dt-button:hover {
    background: #22355a;
    color: #ffffff;
}
html[data-theme="dark"] body.skin-black-light .ui-widget-header,
html[data-theme="dark"] body.skin-black-light .ui-state-default,
html[data-theme="dark"] body.skin-black-light .ui-widget-content .ui-state-default {
    background: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .ui-state-active,
html[data-theme="dark"] body.skin-black-light .ui-widget-content .ui-state-active {
    background: #3973b9;
    border-color: #3973b9;
    color: #ffffff;
}

/* Fields and buttons */
html[data-theme="dark"] body.skin-black-light .form-control,
html[data-theme="dark"] body.skin-black-light input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] body.skin-black-light select,
html[data-theme="dark"] body.skin-black-light textarea {
    background-color: var(--wgf-bg);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light ::placeholder {
    color: #7686a0;
}
html[data-theme="dark"] body.skin-black-light .btn-default,
html[data-theme="dark"] body.skin-black-light .action-button {
    background: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .btn-default:hover,
html[data-theme="dark"] body.skin-black-light .action-button:hover {
    background: #22355a;
    color: #ffffff;
}

/* Tables */
html[data-theme="dark"] body.skin-black-light .table,
html[data-theme="dark"] body.skin-black-light table.dataTable,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr {
    background-color: transparent;
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .table > tbody > tr > td,
html[data-theme="dark"] body.skin-black-light .table > thead > tr > th,
html[data-theme="dark"] body.skin-black-light table.dataTable thead th,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody td {
    border-color: var(--wgf-line);
}
html[data-theme="dark"] body.skin-black-light .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper,
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper label,
html[data-theme="dark"] body.skin-black-light .dataTables_info,
html[data-theme="dark"] body.skin-black-light .dataTables_processing {
    color: var(--wgf-ink);
}

/* DataTables hard-codes light rows, sorted columns and pagination. */
html[data-theme="dark"] body.skin-black-light table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] body.skin-black-light table.dataTable.display tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.025);
}
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr > .sorting_1,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr > .sorting_2,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr > .sorting_3 {
    background-color: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr:hover,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr:hover > td {
    background-color: var(--wgf-soft);
}
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr.selected,
html[data-theme="dark"] body.skin-black-light table.dataTable tbody tr.selected > td {
    background-color: rgba(57, 115, 185, 0.35);
}
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper .dataTables_processing {
    background: linear-gradient(to right, rgba(18, 32, 54, 0) 0%, rgba(18, 32, 54, 0.9) 25%,
        rgba(18, 32, 54, 0.9) 75%, rgba(18, 32, 54, 0) 100%);
    color: var(--wgf-ink);
}
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--wgf-ink) !important;
}
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] body.skin-black-light .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--wgf-soft);
    border-color: var(--wgf-line);
    color: #ffffff !important;
}

/* Code and preformatted text */
html[data-theme="dark"] body.skin-black-light pre,
html[data-theme="dark"] body.skin-black-light code {
    background-color: var(--wgf-bg);
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}

/* Login page */
html[data-theme="dark"] body.login {
    /* The button keeps the logo blue (white text ~4.9:1); hover lightens. */
    --wgf-blue: #3973b9;
    --wgf-blue-dark: #4a86cc;
    --wgf-navy: #eef3fa;
    --wgf-muted: #9aa8bd;
    --wgf-line: #2a3c57;

    background: linear-gradient(160deg, #0b1424 0%, #0e1a2e 55%, #11213a 100%);
}
html[data-theme="dark"] body.login .login-backdrop::before {
    opacity: 0.14;
    -webkit-filter: saturate(0.8) brightness(0.9);
    filter: saturate(0.8) brightness(0.9);
}
html[data-theme="dark"] body.login .login_portal {
    background: #122036;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body.login .login_portal input[type="text"],
html[data-theme="dark"] body.login .login_portal input[type="password"] {
    background: #0c1626;
    color: #d7e0ec;
}
html[data-theme="dark"] body.login .login_portal p {
    background: rgba(180, 35, 24, 0.18);
    color: #ffb4a8;
}

/* The theme toggle: icon only on narrow screens. */
@media (max-width: 767px) {
    .main-header .theme-tab span {
        display: none;
    }
}