/*
 * Live preview of the affiliate dashboard / portal on the General settings tab.
 *
 * Loaded inside a shadow root by js/admin-settings-general.js, so these rules only
 * reach the preview. It is a drawing of the real "Statistics" tab, matched against
 * css/style.css + css/dark-mode.css (dashboard), inc/portal/style.css (classic portal)
 * and inc/portal/portal-themes/*.css (portal themes). The colour settings arrive as
 * custom properties on .pv.
 */

:host {
    all: initial;
    display: block;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.pv {
    /* Colour settings (replaced inline by the script). */
    --tab: #1b3e47;
    --tab-font: #ffffff;
    --tab-hover: #005d75;
    --tab-hover-font: #ffffff;
    --btn: #005d75;
    --btn-font: #ffffff;
    --btn-hover: #1b3e47;
    --btn-hover-font: #ffffff;
    --table: #f4f4f4;
    --table-font: #0a0a0a;
    --icon: #bebebe;
    --graph: #008000;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Surfaces. Classic light by default; modes and themes override. */
    --page: #ffffff;
    --surface: #ffffff;
    --text: #2c3e50;
    --strong: #000000;
    --muted: #7f8c8d;
    --line: #e5e5e5;
    --row-alt: #fafafa;
    --link: #2271b1;

    --box-bg: linear-gradient(#fefefe, #ffffff);
    --box-border: #e0e0e0;
    --box-radius: 5px;
    --box-shadow: 0 0 2px #dbdada;
    --box-pad: 25px 15px 25px 105px;
    --box-icon-left: 30px;
    --box-icon-size: 40px;
    --box-icon-colour: var(--icon);
    --box-title-size: 16px;
    --box-title-colour: var(--strong);
    --box-title-transform: none;
    --box-title-spacing: 0;
    --box-value-size: 32px;
    --box-value-weight: 400;
    --box-value-colour: var(--strong);
    --box-gap: 1%;

    --title-size: 20px;
    --title-weight: 700;
    --title-colour: var(--text);

    --th-transform: none;
    --th-size: 13px;
    --cell-align: center;

    position: relative;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    user-select: none;
}

.pv i {
    font-style: normal;
}

.pv img {
    max-width: 100%;
    display: block;
}

/* =========================================================================
 * Statistics tab content (shared)
 * ====================================================================== */

.pv-notice {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #fff8e5;
    border: 1px solid #f5d27a;
    color: #7a5200;
    font-size: 14px;
}

.pv-custom-text {
    margin: 0 0 22px;
    font-size: 16px;
    color: var(--text);
}

.pv-custom-text p {
    margin: 0 0 8px;
}

.pv-custom-text a {
    color: var(--link);
}

.pv-section {
    margin: 0 0 36px;
}

.pv-section:last-child {
    margin-bottom: 0;
}

.pv-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: var(--title-size);
    font-weight: var(--title-weight);
    color: var(--title-colour);
    line-height: 1.3;
}

.pv-section-icon {
    display: none;
    font-size: .8em;
    color: var(--btn);
}

.pv-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--link);
}

/* Statistic boxes (.wcusage-info-box) */
.pv-boxes {
    display: flex;
    gap: var(--box-gap);
}

.pv-box {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: var(--box-pad);
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius);
    box-shadow: var(--box-shadow);
}

.pv-box-icon {
    position: absolute;
    left: var(--box-icon-left);
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    text-align: center;
    font-size: var(--box-icon-size);
    line-height: 1;
    color: var(--box-icon-colour);
}

.pv-box-title {
    display: block;
    margin: 0 0 5px;
    font-size: var(--box-title-size);
    line-height: 20px;
    color: var(--box-title-colour);
    text-transform: var(--box-title-transform);
    letter-spacing: var(--box-title-spacing);
}

.pv-box-value {
    display: block;
    font-size: var(--box-value-size);
    font-weight: var(--box-value-weight);
    line-height: 1.05;
    color: var(--box-value-colour);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-themed .pv-colon {
    display: none;
}

/* "All-time | This Month | Last Month" */
.pv-periods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.pv-period {
    color: #aaaaaa;
}

.pv-period.is-active {
    color: var(--text);
}

.pv-sep {
    color: #dddddd;
    font-weight: 400;
}

.pv-refresh {
    margin-left: 4px;
    font-size: 12px;
    color: var(--muted);
}

/* Commission graph: a Google Charts line chart in .wcusagechart (css/style.css). The
   chart is drawn 20px above its box, which clips the empty strip at its top. */
.pv-graph {
    width: calc(100% - 10px);
    min-height: 400px;
    margin: 0 auto;
    padding: 0 10px 10px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 4px #dbdada;
}

.pv-graph svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -20px;
}

.pv-graph .pv-graph-bg {
    fill: #ffffff;
}

.pv-graph .pv-grid line {
    stroke: #e0e0e0;
    stroke-width: 1;
}

.pv-graph .pv-grid .pv-baseline {
    stroke: #9e9e9e;
}

.pv-graph .pv-axis {
    fill: #333333;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.pv-graph .pv-axis-y {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
}

/* Latest referrals */
.pv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--surface);
}

.pv-table th {
    background: var(--table);
    color: var(--table-font);
    font-weight: 700;
    text-align: var(--cell-align);
    font-size: var(--th-size);
    text-transform: var(--th-transform);
    letter-spacing: .02em;
    padding: 11px 12px;
}

.pv-table td {
    padding: 11px 12px;
    text-align: var(--cell-align);
    border-bottom: 1px solid var(--line);
    color: var(--strong);
}

.pv-table tbody tr:nth-child(even) td {
    background: var(--row-alt);
}

.pv-table tfoot td {
    background: var(--table);
    color: var(--table-font);
    font-weight: 700;
    border-bottom: 0;
}

.pv-status {
    color: inherit;
}

.pv-more {
    font-weight: 700;
    font-size: 12px;
}

/* =========================================================================
 * Dashboard page (the [couponaffiliates] shortcode inside a theme page)
 * ====================================================================== */

.pv-dashboard {
    --page: #ffffff;
    --text: #2c3e50;
    min-height: 700px;
}

.pv-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 64px;
    background: #ffffff;
}

.pv-site-logo {
    font-size: 24px;
    font-weight: 700;
    color: #192a3d;
    letter-spacing: -.01em;
}

.pv-site-nav {
    display: flex;
    gap: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #3a4f66;
}

.pv-site-burger {
    display: none;
    font-size: 20px;
    color: #3a4f66;
}

.pv-page {
    padding: 22px 64px 50px;
}

.pv-page-title {
    margin: 0 0 34px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #192a3d;
}

.pv-dash {
    background: var(--page);
}

.pv-dash-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0 0 22px;
}

.pv-coupon-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--strong);
}

.pv-coupon-title .fa-tag {
    font-size: .8em;
    margin-right: 4px;
}

.pv-coupon-prefix {
    font-weight: 400;
}

.pv-dash-links {
    display: inline-flex;
    align-items: baseline;
    gap: 20px;
    font-size: 12px;
    font-weight: 700;
}

.pv-dash-user {
    color: var(--strong);
}

.pv-dash-logout {
    color: var(--link);
}

.pv-dash-dark {
    font-size: 22px;
    color: #555;
    align-self: center;
}

/* Tabs. Style #1 floats compact buttons; style #2 stretches them across the row. */
.pv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 44px;
}

.pv-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--tab-pad, 8px 10px);
    font-size: var(--tabs-font-size, 16px);
    line-height: 16px;
    background: var(--tab);
    color: var(--tab-font);
    border-radius: var(--tab-radius, 5px);
    white-space: nowrap;
}

.pv-tab i {
    font-size: .75em;
}

.pv-tab.is-active {
    background: var(--tab-hover);
    color: var(--tab-hover-font);
}

.pv-tabs-style-1 .pv-tabs {
    display: block;
}

.pv-tabs-style-1 .pv-tab {
    margin: 2px;
    font-size: var(--tabs-font-size, 16px);
}

.pv-tabs-style-2 .pv-tab {
    flex: 1 1 auto;
}

.pv-pad-1 { --tab-pad: 8px 10px; }
.pv-pad-2 { --tab-pad: 10px 12px; }
.pv-pad-3 { --tab-pad: 12px 14px; }
.pv-radius-1 { --tab-radius: 5px; }
.pv-radius-2 { --tab-radius: 25px; }
.pv-radius-3 { --tab-radius: 0; }

.pv-tab-select {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px;
    padding: 9px 30px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    background: #ffffff;
    font-size: 18px;
    color: #333;
}

.pv-tab-select i {
    position: absolute;
    right: 12px;
    font-size: 9px;
}

.pv-dashboard .pv-section-title {
    font-size: 17px;
    margin-left: 10px;
}

/* Dashboard dark mode (css/dark-mode.css): the dashboard area turns dark, the
   theme page around it does not. */
.pv-dashboard.pv-dark .pv-dash {
    --page: #1b1b1b;
    --surface: #242424;
    --text: #f1f1f1;
    --strong: #ffffff;
    --muted: #b0b0b0;
    --line: #333333;
    --row-alt: #262626;
    --link: #6fb3ff;
    --box-bg: #2a2a2a;
    --box-border: #3a3a3a;
    --box-shadow: none;
    --box-icon-colour: #f1f1f1;
    margin: 0 -64px;
    padding: 24px 64px 40px;
    color: var(--text);
}

.pv-dashboard.pv-dark .pv-period {
    color: #888;
}

.pv-dashboard.pv-dark .pv-period.is-active {
    color: #fff;
}

.pv-dashboard.pv-dark .pv-dash-dark {
    color: #d8d8d8;
}

.pv-dashboard.pv-dark .pv-graph {
    border-color: #333;
}

.pv-dashboard.pv-dark .pv-tab-select {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #f1f1f1;
}

/* =========================================================================
 * Affiliate portal
 *
 * Mirrors the real portal stylesheets rule for rule, on the preview's own class names:
 *   inc/portal/style.css + css/style.css      -> "Classic" (below)
 *   inc/portal/portal-themes/base.css         -> .pv-themed
 *   inc/portal/portal-themes/<theme>.css      -> .pv-theme-<theme>
 * The colour settings are bridged to the --wcu-* names the theme files use, and the
 * theme variables keep their --pt-* names, so values can be copied across unchanged.
 * Text the portal leaves unstyled inherits 16px / 1.65 from the site, as it does on a
 * typical theme.
 * ====================================================================== */

.pv-portal {
    --wcu-tab: var(--tab);
    --wcu-tab-font: var(--tab-font);
    --wcu-tab-active: var(--tab-hover);
    --wcu-tab-active-font: var(--tab-hover-font);
    --wcu-button: var(--btn);
    --wcu-button-font: var(--btn-font);
    --wcu-button-hover: var(--btn-hover);
    --wcu-table: var(--table);
    --wcu-table-font: var(--table-font);
    --wcu-stats-icon: var(--icon-themed, var(--btn));

    /* inc/portal/style.css :root */
    --background-color: #f5f5f5;
    --content-bg: #ffffff;
    --header-footer-bg: #f0f0f0;
    --text-color: #2c3e50;
    --secondary-text-color: #7f8c8d;
    --border-color: #dddddd;
    --accent-color: #3498db;
    --input-bg: #f0f0f0;

    display: flex;
    min-height: 820px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-color);
    background: var(--background-color);
}
/* ---------------------------------------------------------------- Sidebar */

.pv-portal .pv-sidebar {
    flex: 0 0 auto;
    width: 220px;
    min-width: 220px;
    padding: 20px 0;
    background: var(--wcu-tab);
    color: var(--wcu-tab-font);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 5px rgba(0, 0, 0, .1);
}

.pv-portal .pv-sidebar-logo {
    padding: 10px 20px;
    text-align: left;
}

.pv-portal .pv-sidebar-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* The <h2> carries its look inline in the template. */
.pv-portal .pv-portal-title {
    margin: 10px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: var(--wcu-tab-font);
}

.pv-portal .pv-side-tabs {
    display: flex;
    flex-direction: column;
}

.pv-portal .pv-side-tab {
    position: relative;
    display: block;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
    background: var(--wcu-tab);
    color: var(--wcu-tab-font);
    border-left: 4px solid transparent;
}

/* The tab icons carry Font Awesome's fa-xs. */
.pv-portal .pv-side-tab i {
    width: 10px;
    margin-right: 10px;
    font-size: .75em;
    line-height: .08333em;
    vertical-align: .125em;
}

.pv-portal .pv-side-tab.is-active {
    background: var(--wcu-tab-active);
    color: var(--wcu-tab-active-font);
}

/* "Back to site" (inline styles in the template). */
.pv-portal .pv-side-back {
    margin-top: 75px;
    padding: 15px 20px;
}

/* ---------------------------------------------------------------- Main */

.pv-portal .pv-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
}

.pv-portal .pv-band {
    display: none;
}

.pv-portal .pv-portal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 70px;
    background: var(--header-footer-bg);
    border-bottom: 1px solid var(--border-color);
}

.pv-portal .pv-burger {
    display: none;
    margin-right: 15px;
    font-size: 24px;
    color: var(--text-color);
}

.pv-portal .pv-welcome {
    flex-grow: 1;
    min-width: 0;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.pv-portal .pv-welcome .pv-tag {
    font-size: .8em;
}

.pv-portal .pv-coupon-prefix {
    font-weight: inherit;
}

.pv-portal .pv-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 10px;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--content-bg);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1;
    letter-spacing: normal;
}

.pv-portal .pv-header-right {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.pv-portal .pv-dark-icon {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font-size: 24px;
    color: var(--text-color);
}

.pv-portal .pv-user {
    display: flex;
    align-items: center;
}

.pv-portal .pv-user-name {
    margin-right: 10px;
    font-size: 12px;
    color: var(--text-color);
}

.pv-portal .pv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #111111;
    background: #c9d1d9 center / cover no-repeat;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.pv-portal .pv-caret {
    margin-left: 5px;
    font-size: 12px;
    color: var(--text-color);
}

.pv-portal .pv-content {
    flex: 1 1 auto;
    padding: 40px 70px 100px;
}

.pv-portal .pv-portal-footer {
    padding: 15px 70px;
    background: var(--header-footer-bg);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 14px;
    color: var(--text-color);
}

.pv-portal .pv-portal-footer p {
    margin: 0;
}

/* ---------------------------------------------------------------- Statistics tab
 * css/style.css plus the template's inline styles. The tab opens with a line break,
 * pulled up by .show_statistics' -20px margin (in every theme). */

.pv-portal .pv-content > :first-child {
    margin-top: calc(1.65em - 20px);
}

.pv-portal .pv-section {
    margin: 0;
}

.pv-portal .pv-section + .pv-section {
    margin-top: 40px;
}

.pv-portal .pv-section-title {
    display: block;
    margin: 0 0 10px 5px;
    font-size: 22px;
    font-weight: 700;
    line-height: inherit;
    color: var(--text-color);
}

.pv-portal .pv-latestreferrals .pv-section-title {
    margin-bottom: 15px;
}

.pv-portal .pv-section-icon {
    display: none;
}

.pv-portal .pv-link {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #2271b1;
}

.pv-portal .pv-link i {
    font-size: inherit;
}

/* Statistic boxes: three to a row at 32.3% with a 0.5% margin all round. */
.pv-portal .pv-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.pv-portal .pv-box {
    position: relative;
    flex: 0 0 32.3%;
    min-width: 0;
    margin: .5%;
    padding: 25px 15px 25px 105px;
    background: linear-gradient(#fefefe, #ffffff);
    color: #000000;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 2px #dbdada;
}

.pv-portal .pv-box-icon {
    position: absolute;
    left: 30px;
    top: 44px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    font-size: 40px;
    line-height: 1;
    color: var(--icon);
}

.pv-portal .pv-box-title {
    display: block;
    margin: 8px 0 5px;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    text-transform: none;
    letter-spacing: 0;
}

.pv-portal .pv-box-value {
    display: block;
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 400;
    line-height: 32px;
    color: #000000;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

/* Classic portal: the figures are drawn smaller than the real 32px, so they fit the
   preview's narrower boxes without crowding. */
.pv-portal.pv-theme-classic .pv-box-value {
    font-size: 24px;
    line-height: 28px;
}

/* "All-time | This Month | Last Month" */
.pv-portal .pv-periods {
    display: block;
    margin: 0 0 10px 5px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    color: #333333;
}

.pv-portal .pv-period {
    color: #a6a6a6;
}

.pv-portal .pv-period.is-active {
    color: #333333;
}

.pv-portal .pv-sep {
    color: #f3f3f3;
    font-weight: inherit;
}

.pv-portal .pv-refresh-btn {
    margin-left: 6px;
    font-size: 13px;
    color: #a6a6a6;
}

.pv-portal .pv-refresh {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

/* Commission graph (inc/portal/style.css adds the top margin). */
.pv-portal .pv-graph {
    margin-top: 15px;
}

/* Latest referrals */
.pv-portal .pv-table {
    width: calc(100% - 10px);
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    background: transparent;
    font-size: 17px;
    text-align: center;
}

.pv-portal .pv-table th {
    padding: 7px 10px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    background: var(--wcu-table);
    color: var(--wcu-table-font);
    border: 1px solid #e7e7e7;
}

.pv-portal .pv-table td {
    padding: 9px 10px;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
    color: var(--text-color);
    border: 1px solid #e7e7e7;
}

.pv-portal .pv-table tbody tr:nth-child(even) td {
    background: #ffffff;
}

.pv-portal .pv-table .pv-col-date {
    width: 25%;
}

/* The products cell sets 16px inline, which the 17px (classic) and 14px (themes) cell
   sizes override. */
.pv-portal .pv-table .pv-col-more {
    min-width: 100px;
}

/* MORE (css/style.css .listproductsbutton). */
.pv-portal .pv-more {
    display: block;
    text-align: center;
    font-size: inherit;
    font-weight: 700;
    color: #333333;
}

/* =========================================================================
 * Portal themes: shared rules (base.css)
 * ====================================================================== */

.pv-themed {
    /* Variable bridge for the classic rules above. */
    --background-color: var(--pt-bg);
    --content-bg: var(--pt-panel);
    --header-footer-bg: var(--pt-header-bg);
    --text-color: var(--pt-text);
    --secondary-text-color: var(--pt-muted);
    --border-color: var(--pt-panel-border);

    --pt-box-gap: 12px;
    --pt-good: #15803d;
    --pt-warn: #b45309;
    --pt-bad: #b91c1c;

    background: var(--pt-bg);
    color: var(--pt-text);
}

.pv-themed .pv-main {
    background: var(--pt-bg);
}

/* Sidebar */
.pv-themed .pv-sidebar {
    background: var(--wcu-tab);
    box-shadow: none;
    border-right: 1px solid var(--pt-side-border);
}

.pv-themed .pv-portal-title {
    color: var(--wcu-tab-font);
}

.pv-themed .pv-side-tab {
    margin: var(--pt-side-item-margin);
    padding: 12px 20px;
    border: 0;
    border-radius: var(--pt-side-item-radius);
    background: transparent;
    color: var(--wcu-tab-font);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .005em;
}

.pv-themed .pv-side-tab i {
    width: 16px;
    margin-right: 12px;
    text-align: center;
}

.pv-themed .pv-side-tab.is-active {
    background: var(--wcu-tab-active);
    color: var(--wcu-tab-active-font);
    font-weight: 600;
}

.pv-themed .pv-side-back {
    margin-top: 75px;
    padding: 12px 20px;
    background: transparent;
}

/* Header and footer */
.pv-themed .pv-portal-header {
    padding: 15px 40px;
    background: var(--pt-header-bg);
    border-bottom: 1px solid var(--pt-header-border);
}

.pv-themed .pv-welcome {
    color: var(--pt-text);
    letter-spacing: -.01em;
}

.pv-themed .pv-welcome .pv-tag {
    color: var(--pt-header-icon);
}

.pv-themed .pv-switcher {
    border: 1px solid var(--pt-panel-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-panel);
    color: var(--pt-text);
}

.pv-themed .pv-dark-icon,
.pv-themed .pv-caret,
.pv-themed .pv-user-name {
    color: var(--pt-muted);
}

.pv-themed .pv-dark-icon {
    font-size: 19px;
}

.pv-themed .pv-user-name {
    font-size: 13px;
}

.pv-themed .pv-avatar {
    border: 2px solid var(--pt-panel);
    box-shadow: 0 0 0 1px var(--pt-panel-border);
}

.pv-themed .pv-portal-footer {
    padding: 15px 40px;
    background: transparent;
    border-top: 1px solid var(--pt-header-border);
    color: var(--pt-muted);
}

.pv-themed .pv-content {
    padding: 32px 40px 72px;
}

/* Panels: each statistics section is a panel. */
.pv-themed .pv-section {
    display: flow-root;
    margin: 0 0 20px;
    padding: 22px 26px 24px;
    background: var(--pt-panel);
    border: 1px solid var(--pt-panel-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
}

.pv-themed .pv-section + .pv-section {
    margin-top: 0;
}

/* Type */
.pv-themed .pv-section-title,
.pv-themed .pv-latestreferrals .pv-section-title {
    margin: 0 0 16px;
    font-size: var(--pt-title-size);
    font-weight: var(--pt-title-weight);
    line-height: 1.35;
    letter-spacing: var(--pt-title-spacing);
    color: var(--pt-text);
}

.pv-themed .pv-link {
    letter-spacing: 0;
    color: var(--pt-link);
}

/* Statistic boxes */
.pv-themed .pv-boxes {
    gap: var(--pt-box-gap);
}

.pv-themed .pv-box {
    flex: 1 1 0;
    margin: 0;
    padding: var(--pt-box-padding);
    background: var(--pt-box-bg);
    border: 1px solid var(--pt-box-border);
    border-radius: var(--pt-radius-sm);
    box-shadow: none;
    color: #000000;
}

.pv-themed .pv-box-icon {
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    font-size: 24px;
    color: var(--wcu-stats-icon);
}

.pv-themed .pv-box-title {
    margin: 0 0 8px;
    font-size: var(--pt-box-label-size);
    font-weight: var(--pt-box-label-weight);
    line-height: 16px;
    letter-spacing: var(--pt-box-label-spacing);
    text-transform: var(--pt-box-label-transform);
    color: var(--pt-faint);
}

.pv-themed .pv-box-value {
    margin: 0;
    font-size: var(--pt-box-value-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-text);
    white-space: normal;
}

.pv-themed .pv-colon {
    display: none;
}

/* Period switcher */
.pv-themed .pv-periods {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.55;
}

.pv-themed .pv-sep {
    display: none;
}

.pv-themed .pv-period {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pt-muted);
}

.pv-themed .pv-period.is-active {
    color: var(--pt-text);
    font-weight: 600;
}

.pv-themed .pv-refresh-btn {
    margin-left: 10px;
    color: var(--pt-faint);
}

/* Charts */
.pv-themed .pv-graph {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Tables */
.pv-themed .pv-table {
    border: 1px solid var(--pt-table-border);
    border-radius: var(--pt-radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--pt-panel);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}

.pv-themed .pv-table th {
    background: var(--wcu-table);
    color: var(--wcu-table-font);
    font-size: var(--pt-th-size);
    font-weight: 600;
    letter-spacing: var(--pt-th-spacing);
    text-transform: var(--pt-th-transform);
    text-align: var(--pt-cell-align);
    padding: var(--pt-th-padding);
    border: 0;
    border-bottom: 1px solid var(--pt-table-border);
    white-space: nowrap;
}

.pv-themed .pv-table td,
.pv-themed .pv-table tbody tr:nth-child(even) td {
    background: transparent;
    color: var(--pt-text);
    font-size: 14px;
    text-align: var(--pt-cell-align);
    padding: var(--pt-cell-padding);
    border: 0;
    border-bottom: 1px solid var(--pt-line);
}

.pv-themed .pv-table tbody tr:last-child td {
    border-bottom: 0;
}

/* MORE as a small outlined button, pulled into the row's line height. */
.pv-themed .pv-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0;
    padding: 5px 10px;
    vertical-align: middle;
    border: 1px solid var(--pt-control-border);
    border-radius: var(--pt-radius-xs);
    background: var(--pt-control-bg);
    color: var(--pt-text);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Order statuses as small tinted badges (theme.js). */
.pv-themed .pv-status {
    --pt-tone: var(--pt-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    border-radius: var(--pt-badge-radius, 999px);
    background: color-mix(in srgb, var(--pt-tone) 11%, transparent);
    color: var(--pt-tone);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    /* Sits in the row the way it does in the portal, without making the row taller. */
    vertical-align: top;
}

.pv-themed .pv-status::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pv-themed .pv-status--good { --pt-tone: var(--pt-good); }
.pv-themed .pv-status--warn { --pt-tone: var(--pt-warn); }
.pv-themed .pv-status--bad { --pt-tone: var(--pt-bad); }

/* ---------------------------------------------------------------- Sleek */

.pv-theme-sleek {
    --pt-bg: #f0f0f1;
    --pt-panel: #ffffff;
    --pt-panel-border: #dcdcde;
    --pt-line: #f0f0f1;
    --pt-line-strong: #e2e4e7;
    --pt-subtle: #f6f7f7;
    --pt-text: #1d2327;
    --pt-muted: #50575e;
    --pt-faint: #646970;
    --pt-link: #2271b1;

    --pt-radius: 4px;
    --pt-radius-sm: 4px;
    --pt-radius-xs: 3px;
    --pt-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    --pt-control-border: #c3c4c7;
    --pt-control-bg: #f6f7f7;

    --pt-header-bg: #ffffff;
    --pt-header-border: #dcdcde;
    --pt-header-icon: var(--wcu-tab);

    --pt-title-size: 16px;
    --pt-title-weight: 600;
    --pt-title-spacing: 0;

    --pt-table-border: #e2e4e7;
    --pt-th-size: 12px;
    --pt-th-spacing: .04em;
    --pt-th-transform: uppercase;
    --pt-th-padding: 10px 14px;
    --pt-cell-align: center;
    --pt-cell-padding: 11px 14px;

    --pt-box-padding: 18px 18px 18px 74px;
    --pt-box-value-size: 23px;
    --pt-box-bg: #ffffff;
    --pt-box-border: #e2e4e7;
    --pt-box-label-size: 11.5px;
    --pt-box-label-weight: 600;
    --pt-box-label-spacing: .05em;
    --pt-box-label-transform: uppercase;

    --pt-side-border: transparent;
    --pt-side-item-margin: 0;
    --pt-side-item-radius: 0;
    --pt-badge-radius: 3px;
}

.pv-theme-sleek .pv-side-tab {
    font-size: 14px;
}

/* The white notch WordPress puts on the current admin menu item. */
.pv-theme-sleek .pv-side-tab.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right-color: var(--pt-bg);
}

.pv-theme-sleek .pv-sidebar-logo {
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pv-theme-sleek .pv-portal-header {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

/* Statistics panels: a title bar with an icon, like an admin meta box. */
.pv-theme-sleek .pv-section-title,
.pv-theme-sleek .pv-latestreferrals .pv-section-title {
    margin: -22px -26px 18px;
    padding: 13px 26px;
    border-bottom: 1px solid var(--pt-line-strong);
    font-size: 14px;
}

.pv-theme-sleek .pv-section-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: .85em;
    color: var(--wcu-button);
}

.pv-theme-sleek .pv-periods {
    gap: 2px;
    margin: 0 0 24px;
    padding: 3px;
    background: #f0f0f1;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
}

.pv-theme-sleek .pv-period {
    padding: 5px 14px;
    border-radius: 3px;
}

.pv-theme-sleek .pv-period.is-active {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.pv-theme-sleek .pv-refresh-btn {
    margin-right: 8px;
}

.pv-theme-sleek .pv-table th {
    border-bottom-color: #c3c4c7;
}

/* --------------------------------------------------------------- Modern */

.pv-theme-modern {
    --pt-bg: color-mix(in srgb, var(--wcu-tab) 5%, #f6f7f9);
    --pt-panel: #ffffff;
    --pt-panel-border: #e9ebef;
    --pt-line: #f0f2f5;
    --pt-line-strong: #e6e8ec;
    --pt-subtle: #f7f8fa;
    --pt-text: #121826;
    --pt-muted: #4a5466;
    --pt-faint: #6b7487;
    --pt-link: var(--wcu-button);

    --pt-radius: 16px;
    --pt-radius-sm: 12px;
    --pt-radius-xs: 8px;
    --pt-shadow: 0 1px 2px rgba(18, 24, 38, .04), 0 6px 20px rgba(18, 24, 38, .04);
    --pt-control-border: #e2e5ea;
    --pt-control-bg: #ffffff;

    --pt-header-bg: transparent;
    --pt-header-border: transparent;
    --pt-header-icon: var(--pt-faint);

    --pt-title-size: 18px;
    --pt-title-weight: 700;
    --pt-title-spacing: -.015em;

    --pt-table-border: #eceef2;
    --pt-th-size: 12.5px;
    --pt-th-spacing: 0;
    --pt-th-transform: none;
    --pt-th-padding: 12px 18px;
    --pt-cell-align: left;
    --pt-cell-padding: 14px 18px;

    --pt-box-padding: 18px 20px 18px 74px;
    --pt-box-value-size: 26px;
    --pt-box-bg: #fbfcfd;
    --pt-box-border: #e9ebef;
    --pt-box-label-size: 13px;
    --pt-box-label-weight: 500;
    --pt-box-label-spacing: 0;
    --pt-box-label-transform: none;

    --pt-side-border: transparent;
    --pt-side-item-margin: 2px 12px;
    --pt-side-item-radius: 10px;

    --pt-ticket: color-mix(in srgb, var(--wcu-tab-active) 6%, #ffffff);
}

.pv-theme-modern .pv-side-tab {
    padding-left: 14px;
    padding-right: 14px;
}

.pv-theme-modern .pv-side-tab:not(.is-active) {
    opacity: .84;
}

.pv-theme-modern .pv-side-tab.is-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.pv-theme-modern .pv-portal-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
}

/* The coupon code drawn as a dashed ticket. */
.pv-theme-modern .pv-welcome .pv-tag {
    display: none;
}

.pv-theme-modern .pv-welcome .pv-code {
    display: inline-block;
    padding: 4px 16px;
    border: 1.5px dashed color-mix(in srgb, var(--wcu-tab-active) 55%, transparent);
    border-radius: 8px;
    background: var(--pt-ticket);
    color: var(--pt-text);
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
}

.pv-theme-modern .pv-welcome .pv-coupon-prefix {
    font-size: .7em;
    font-weight: 600;
    color: var(--pt-muted);
}

.pv-theme-modern .pv-switcher {
    border-radius: 8px;
}

.pv-theme-modern .pv-box {
    border-radius: 12px;
}

/* Period switcher: underlined tabs across the panel, refresh at the far end. */
.pv-theme-modern .pv-periods {
    display: flex;
    width: 100%;
    gap: 24px;
    padding: 0;
    border-bottom: 1px solid var(--pt-line-strong);
}

.pv-theme-modern .pv-period {
    margin-bottom: -1px;
    padding: 8px 0 11px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
}

.pv-theme-modern .pv-period.is-active {
    border-bottom-color: var(--wcu-tab-active);
}

.pv-theme-modern .pv-refresh-btn {
    margin-left: auto;
}

.pv-theme-modern .pv-table th {
    font-weight: 600;
}

/* --------------------------------------------------------------- Canvas */

.pv-theme-canvas {
    --pt-frame: var(--wcu-tab);
    --pt-bg: #ffffff;
    --pt-panel: #ffffff;
    --pt-panel-border: #ebebee;
    --pt-line: #f0f0f2;
    --pt-line-strong: #e8e8eb;
    --pt-subtle: #f6f6f8;
    --pt-text: #18181b;
    --pt-muted: #52525b;
    --pt-faint: #71717a;
    --pt-link: var(--wcu-button);

    --pt-radius: 12px;
    --pt-radius-sm: 10px;
    --pt-radius-xs: 6px;
    --pt-shadow: none;
    --pt-control-border: #dcdce0;
    --pt-control-bg: #ffffff;

    --pt-header-bg: transparent;
    --pt-header-border: #efeff1;
    --pt-header-icon: var(--pt-faint);

    --pt-title-size: 17px;
    --pt-title-weight: 650;
    --pt-title-spacing: -.015em;

    --pt-table-border: #ebebee;
    --pt-th-size: 12.5px;
    --pt-th-spacing: 0;
    --pt-th-transform: none;
    --pt-th-padding: 11px 16px;
    --pt-cell-align: left;
    --pt-cell-padding: 13px 16px;

    --pt-box-padding: 20px 20px 20px 72px;
    --pt-box-value-size: 25px;
    --pt-box-bg: var(--pt-tile);
    --pt-box-border: transparent;
    --pt-box-label-size: 13px;
    --pt-box-label-weight: 500;
    --pt-box-label-spacing: 0;
    --pt-box-label-transform: none;

    --pt-tile: color-mix(in srgb, var(--wcu-tab) 3%, #f7f7f9);

    --pt-side-border: transparent;
    --pt-side-item-margin: 2px 12px;
    --pt-side-item-radius: 8px;

    background: var(--pt-frame);
}

.pv-theme-canvas .pv-sidebar {
    box-shadow: none;
    border-right: 0;
}

/* The content sits on one rounded sheet inside the sidebar colour. */
.pv-theme-canvas .pv-main {
    margin: 12px 12px 12px 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 40px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.pv-theme-canvas .pv-portal-header {
    padding-top: 18px;
    padding-bottom: 18px;
}

.pv-theme-canvas .pv-content {
    padding: 30px 40px 64px;
}

/* No nested panels: sections are split by hairlines. */
.pv-theme-canvas .pv-section {
    margin: 0;
    padding: 28px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pt-line-strong);
    border-radius: 0;
    box-shadow: none;
}

.pv-theme-canvas .pv-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.pv-theme-canvas .pv-box {
    border-radius: 12px;
}

.pv-theme-canvas .pv-box-icon {
    left: 20px;
    font-size: 22px;
}

.pv-theme-canvas .pv-box-value {
    font-weight: 650;
}

.pv-theme-canvas .pv-periods {
    gap: 4px;
    margin-bottom: 26px;
    padding: 0;
}

.pv-theme-canvas .pv-period {
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 13.5px;
}

.pv-theme-canvas .pv-period.is-active {
    background: var(--wcu-tab-active);
    color: var(--wcu-tab-active-font);
}

.pv-theme-canvas .pv-welcome {
    font-weight: 650;
}

.pv-theme-canvas .pv-switcher {
    border-radius: 8px;
}

.pv-theme-canvas .pv-side-tab:not(.is-active) {
    opacity: .86;
}

.pv-theme-canvas .pv-portal-title {
    font-size: 13px;
    font-weight: 500;
    opacity: .8;
}

/* ------------------------------------------------------------ Spotlight */

.pv-theme-spotlight {
    --pt-band: 214px;
    --pt-on-band: var(--wcu-tab-font);

    --pt-bg: #f3f4f6;
    --pt-panel: #ffffff;
    --pt-panel-border: transparent;
    --pt-line: #f0f1f4;
    --pt-line-strong: #e7e9ed;
    --pt-subtle: #f6f7f9;
    --pt-text: #111827;
    --pt-muted: #4b5563;
    --pt-faint: #6b7280;
    --pt-link: var(--wcu-button);

    --pt-radius: 14px;
    --pt-radius-sm: 10px;
    --pt-radius-xs: 7px;
    --pt-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 30px rgba(17, 24, 39, .07);
    --pt-control-border: #e2e5ea;
    --pt-control-bg: #ffffff;

    --pt-header-bg: transparent;
    --pt-header-border: transparent;
    --pt-header-icon: var(--pt-on-band);

    --pt-title-size: 17px;
    --pt-title-weight: 700;
    --pt-title-spacing: -.015em;

    --pt-table-border: #e9ebef;
    --pt-th-size: 12px;
    --pt-th-spacing: .04em;
    --pt-th-transform: uppercase;
    --pt-th-padding: 12px 16px;
    --pt-cell-align: left;
    --pt-cell-padding: 14px 16px;

    --pt-box-gap: 12px;
    --pt-box-padding: 18px 20px 18px 72px;
    --pt-box-value-size: 30px;
    --pt-box-bg: color-mix(in srgb, var(--wcu-tab) 2.5%, #fbfcfd);
    --pt-box-border: color-mix(in srgb, var(--wcu-tab) 8%, #e9ebef);
    --pt-box-label-size: 13px;
    --pt-box-label-weight: 500;
    --pt-box-label-spacing: 0;
    --pt-box-label-transform: none;

    --pt-side-border: transparent;
    --pt-side-item-margin: 2px 14px;
    --pt-side-item-radius: 8px;
}

/* A band in the sidebar colour across the top of the page, behind the header. */
.pv-theme-spotlight .pv-main {
    background:
        linear-gradient(var(--wcu-tab), var(--wcu-tab)) top / 100% var(--pt-band) no-repeat,
        var(--pt-bg);
}

.pv-theme-spotlight .pv-sidebar {
    width: 248px;
    min-width: 248px;
    box-shadow: none;
    border-right: 1px solid color-mix(in srgb, var(--wcu-tab-font) 16%, transparent);
}

.pv-theme-spotlight .pv-side-tab {
    padding-left: 16px;
    padding-right: 16px;
}

.pv-theme-spotlight .pv-side-tab:not(.is-active) {
    opacity: .86;
}

.pv-theme-spotlight .pv-side-tab.is-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.pv-theme-spotlight .pv-portal-header {
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: 0;
}

.pv-theme-spotlight .pv-welcome,
.pv-theme-spotlight .pv-burger {
    color: var(--pt-on-band);
    font-weight: 700;
}

.pv-theme-spotlight .pv-welcome .pv-tag {
    opacity: .6;
}

.pv-theme-spotlight .pv-dark-icon,
.pv-theme-spotlight .pv-caret,
.pv-theme-spotlight .pv-user-name {
    color: color-mix(in srgb, var(--pt-on-band) 78%, transparent);
}

.pv-theme-spotlight .pv-switcher {
    background: color-mix(in srgb, var(--pt-on-band) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pt-on-band) 28%, transparent);
    color: var(--pt-on-band);
}

.pv-theme-spotlight .pv-avatar {
    border-color: color-mix(in srgb, var(--pt-on-band) 85%, transparent);
    box-shadow: none;
}

.pv-theme-spotlight .pv-content {
    padding-top: 16px;
}

.pv-theme-spotlight .pv-section {
    margin-bottom: 22px;
    padding: 24px 28px 26px;
}

.pv-theme-spotlight .pv-box {
    border-radius: 12px;
}

.pv-theme-spotlight .pv-box-title {
    margin-bottom: 6px;
    letter-spacing: 0;
}

.pv-theme-spotlight .pv-box-value {
    font-weight: 750;
    letter-spacing: -.03em;
}

/* Period switcher: a tray with the active period filled. */
.pv-theme-spotlight .pv-periods {
    gap: 2px;
    margin-bottom: 28px;
    padding: 4px;
    border-radius: 10px;
    background: var(--pt-subtle);
    box-shadow: inset 0 0 0 1px var(--pt-line-strong);
}

.pv-theme-spotlight .pv-period {
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 13.5px;
}

.pv-theme-spotlight .pv-period.is-active {
    background: var(--wcu-tab-active);
    color: var(--wcu-tab-active-font);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .15);
}

.pv-theme-spotlight .pv-refresh-btn {
    margin: 0 6px 0 8px;
}

.pv-theme-spotlight .pv-table th {
    font-weight: 650;
}

/* =========================================================================
 * Portal dark mode (body.dark-mode)
 * The classic dark rules in inc/portal/style.css reach every theme; the themes then
 * swap their own --pt-* surfaces.
 * ====================================================================== */

.pv-portal.pv-dark {
    --background-color: #1a1a1a;
    --content-bg: #1e1e1e;
    --content-bg2: #1b1b1b;
    --header-footer-bg: #252525;
    --text-color: #f1f1f1;
    --secondary-text-color: #b0b0b0;
    --border-color: #444444;
    --accent-color: #abd5ff;
    --table-header-bg: #333333;
}

/* The commission graph is inverted, its line and text drawn black first. */
.pv-portal.pv-dark .pv-graph {
    filter: invert(90%);
}

.pv-portal.pv-dark .pv-graph path {
    stroke: #000000;
}

.pv-portal.pv-dark .pv-graph .pv-axis {
    fill: #000000;
}

/* ---------------------------------------------------------------- Classic */

.pv-portal.pv-dark:not(.pv-themed) .pv-sidebar {
    background: #121212;
    color: #e0e0e0;
}

.pv-portal.pv-dark:not(.pv-themed) .pv-portal-title {
    color: #e0e0e0;
}

/* The tab text keeps its colour setting (inline in the template). */
.pv-portal.pv-dark:not(.pv-themed) .pv-side-tab {
    background: #121212;
    color: var(--wcu-tab-font);
    border-left: 4px solid transparent;
}

.pv-portal.pv-dark:not(.pv-themed) .pv-side-tab.is-active {
    background: #1e1e1e;
    color: var(--wcu-tab-active-font);
    border-left-color: #1e1e1e;
}

.pv-portal.pv-dark:not(.pv-themed) .pv-side-back {
    background: #121212;
    color: #ffffff;
    border: 0;
}

.pv-portal.pv-dark:not(.pv-themed) .pv-switcher {
    background: #121212;
    border: 0;
    color: #ffffff;
}

.pv-portal.pv-dark:not(.pv-themed) .pv-box {
    background: var(--content-bg2);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-box-title,
.pv-portal.pv-dark:not(.pv-themed) .pv-box-value {
    color: var(--text-color);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-periods {
    color: var(--text-color);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-period,
.pv-portal.pv-dark:not(.pv-themed) .pv-refresh-btn,
.pv-portal.pv-dark:not(.pv-themed) .pv-link,
.pv-portal.pv-dark:not(.pv-themed) .pv-more {
    color: var(--accent-color);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-period.is-active {
    color: var(--text-color);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-table th {
    background: var(--table-header-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.pv-portal.pv-dark:not(.pv-themed) .pv-table td,
.pv-portal.pv-dark:not(.pv-themed) .pv-table tbody tr:nth-child(even) td {
    background: var(--content-bg2);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* ---------------------------------------------------------------- Themes */

.pv-themed.pv-dark {
    --content-bg2: var(--pt-subtle);
    --text-color: var(--pt-text);
    --border-color: var(--pt-panel-border);
    --accent-color: var(--wcu-button);
    --pt-good: #4ade80;
    --pt-warn: #fbbf24;
    --pt-bad: #f87171;
}

/* The classic dark rules make the statistic labels and figures, the period switcher
   and its active period the text colour. */
.pv-themed.pv-dark .pv-box,
.pv-themed.pv-dark .pv-box-title,
.pv-themed.pv-dark .pv-box-value,
.pv-themed.pv-dark .pv-periods,
.pv-themed.pv-dark .pv-period.is-active {
    color: var(--pt-text);
}

.pv-themed.pv-dark .pv-box-icon {
    color: color-mix(in srgb, var(--wcu-stats-icon) 60%, #ffffff);
}

.pv-themed.pv-dark .pv-link,
.pv-themed.pv-dark .pv-refresh-btn {
    color: var(--accent-color);
}

.pv-themed.pv-dark .pv-switcher {
    background: var(--pt-panel);
    border: 1px solid var(--pt-panel-border);
    color: var(--pt-text);
}

.pv-themed.pv-dark .pv-table th {
    background: var(--pt-subtle);
    color: var(--pt-text);
}

/* Sleek */
.pv-theme-sleek.pv-dark {
    --pt-bg: #16181c;
    --pt-panel: #1f2226;
    --pt-panel-border: #30343a;
    --pt-line: #2a2d32;
    --pt-line-strong: #33373d;
    --pt-subtle: #262a2f;
    --pt-text: #e9eaec;
    --pt-muted: #b4b8be;
    --pt-faint: #8d9299;
    --pt-link: #72aee6;
    --pt-header-bg: #1f2226;
    --pt-header-border: #30343a;
    --pt-header-icon: var(--pt-muted);
    --pt-table-border: #33373d;
    --pt-box-bg: #1f2226;
    --pt-box-border: #33373d;
    --pt-control-border: #3c4047;
    --pt-control-bg: #262a2f;
    --pt-side-border: #2a2d32;
}

.pv-theme-sleek.pv-dark .pv-periods {
    background: #262a2f;
    border-color: #33373d;
}

.pv-theme-sleek.pv-dark .pv-period.is-active {
    background: #34383e;
}

.pv-theme-sleek.pv-dark .pv-table th {
    border-bottom-color: #3c4047;
}

/* Modern */
.pv-theme-modern.pv-dark {
    --pt-bg: color-mix(in srgb, var(--wcu-tab) 12%, #111317);
    --pt-panel: #1b1e23;
    --pt-panel-border: #2b2f36;
    --pt-line: #24272d;
    --pt-line-strong: #2b2f36;
    --pt-subtle: #20242a;
    --pt-text: #eceef1;
    --pt-muted: #b3b9c3;
    --pt-faint: #8a919c;
    --pt-link: color-mix(in srgb, var(--wcu-button) 55%, #ffffff);
    --pt-table-border: #2b2f36;
    --pt-control-border: #3a3f47;
    --pt-control-bg: #20242a;
    --pt-side-border: #2b2f36;
    --pt-shadow: none;
    --pt-box-bg: #20242a;
    --pt-box-border: #2b2f36;
    --pt-ticket: color-mix(in srgb, var(--wcu-tab-active) 14%, #1b1e23);
}

/* Canvas */
.pv-theme-canvas.pv-dark {
    --pt-bg: #17181b;
    --pt-panel: #17181b;
    --pt-panel-border: #2a2b30;
    --pt-line: #232428;
    --pt-line-strong: #2a2b30;
    --pt-subtle: #202125;
    --pt-text: #ededef;
    --pt-muted: #b4b4bb;
    --pt-faint: #8b8b93;
    --pt-link: color-mix(in srgb, var(--wcu-button) 55%, #ffffff);
    --pt-header-border: #26272b;
    --pt-table-border: #2a2b30;
    --pt-control-border: #34353b;
    --pt-control-bg: #1d1e22;
    --pt-tile: #202125;
}

/* Spotlight */
.pv-theme-spotlight.pv-dark {
    --pt-bg: #0f1115;
    --pt-panel: #1a1d23;
    --pt-line: #252930;
    --pt-line-strong: #2c3038;
    --pt-subtle: #21252c;
    --pt-text: #eceef2;
    --pt-muted: #b3b8c2;
    --pt-faint: #8b919c;
    --pt-link: color-mix(in srgb, var(--wcu-button) 55%, #ffffff);
    --pt-table-border: #2c3038;
    --pt-control-border: #363b44;
    --pt-control-bg: #21252c;
    --pt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
    --pt-box-bg: #20242b;
    --pt-box-border: #2c3038;
}

.pv-theme-spotlight.pv-dark .pv-switcher {
    background: color-mix(in srgb, var(--pt-on-band) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pt-on-band) 28%, transparent);
    color: var(--pt-on-band);
}

/* =========================================================================
 * Mobile
 * ====================================================================== */

/* Dashboard */
.pv-dashboard.pv-mobile .pv-boxes {
    flex-direction: column;
    gap: 2px;
}

.pv-dashboard.pv-mobile .pv-box {
    flex: none;
}

.pv-dashboard.pv-mobile .pv-table .pv-col-optional {
    display: none;
}

.pv-dashboard.pv-mobile .pv-site-header {
    padding: 18px 22px;
}

.pv-dashboard.pv-mobile .pv-site-nav {
    display: none;
}

.pv-dashboard.pv-mobile .pv-site-burger {
    display: block;
}

.pv-dashboard.pv-mobile .pv-page {
    padding: 16px 20px 30px;
}

.pv-dashboard.pv-mobile .pv-page-title {
    font-size: 36px;
    margin-bottom: 26px;
}

.pv-dashboard.pv-mobile .pv-dash-head {
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pv-dashboard.pv-mobile.pv-dark .pv-dash {
    margin: 0 -20px;
    padding: 20px;
}

.pv-dashboard.pv-mobile .pv-tab {
    padding: 7px 12px 8px;
    font-size: 14px;
}

.pv-dashboard.pv-mobile.pv-mobile-dropdown .pv-tabs {
    display: none;
}

.pv-dashboard.pv-mobile.pv-mobile-dropdown .pv-tab-select {
    display: flex;
}

/* Portal on phones (the max-width: 768px / 760px / 600px / 500px rules of the portal
   stylesheets): the sidebar slides away behind the hamburger, and the coupon code takes
   its own line under the header buttons. */
.pv-portal.pv-mobile {
    min-height: 0;
}

.pv-portal.pv-mobile .pv-sidebar {
    display: none;
}

.pv-portal.pv-mobile .pv-portal-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px;
}

.pv-portal.pv-mobile .pv-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    margin-left: 15px;
    order: -1;
}

.pv-portal.pv-mobile .pv-welcome {
    order: 10;
    flex: 1 1 100%;
    margin-left: 0;
    text-align: center;
}

.pv-portal.pv-mobile .pv-header-right {
    flex: 1 1 auto;
}

.pv-portal.pv-mobile .pv-dark-icon {
    flex-shrink: 0;
    margin-right: 10px;
}

.pv-portal.pv-mobile .pv-user {
    margin-left: auto;
}

.pv-portal.pv-mobile .pv-user-name {
    display: none;
}

.pv-portal.pv-mobile .pv-content {
    padding: 20px;
}

.pv-portal.pv-mobile .pv-portal-footer {
    padding: 15px 20px;
}

/* Statistic boxes stack, full width. */
.pv-portal.pv-mobile .pv-box {
    flex: 0 0 99%;
}

.pv-themed.pv-mobile .pv-boxes {
    flex-direction: column;
    gap: var(--pt-box-gap);
}

.pv-themed.pv-mobile .pv-box {
    flex: none;
}

/* The referrals table turns into a card per order, each value beside its column name. */
.pv-portal.pv-mobile .pv-table,
.pv-portal.pv-mobile .pv-table tbody,
.pv-portal.pv-mobile .pv-table tr,
.pv-portal.pv-mobile .pv-table td {
    display: block;
}

.pv-portal.pv-mobile .pv-table thead {
    display: none;
}

.pv-portal.pv-mobile .pv-table .pv-col-optional {
    display: block;
}

.pv-portal.pv-mobile .pv-table tr {
    margin-bottom: 20px;
    border: 1px solid #cccccc;
}

.pv-portal.pv-mobile .pv-table td {
    position: relative;
    width: auto;
    max-width: 100%;
    padding: 5px 10px 5px 50%;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
}

.pv-portal.pv-mobile .pv-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 5px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
}

.pv-themed.pv-mobile .pv-table {
    border: 0;
    background: transparent;
    overflow: visible;
}

.pv-themed.pv-mobile .pv-table tr {
    margin: 0;
    background: var(--pt-panel);
    border: 1px solid var(--pt-table-border);
    border-radius: var(--pt-radius-sm) var(--pt-radius-sm) 0 0;
    overflow: hidden;
}

.pv-themed.pv-mobile .pv-table td,
.pv-themed.pv-mobile .pv-table tbody tr:nth-child(even) td,
.pv-themed.pv-mobile .pv-table tbody tr:last-child td {
    padding: 10px 14px 10px 50%;
    text-align: left;
    border-bottom: 1px solid var(--pt-line);
}

.pv-themed.pv-mobile .pv-table td::before {
    top: 10px;
    left: 14px;
    color: var(--pt-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Themes */
.pv-themed.pv-mobile .pv-section {
    padding: 18px 16px;
}

.pv-themed.pv-mobile .pv-section-title,
.pv-themed.pv-mobile .pv-latestreferrals .pv-section-title {
    text-align: left;
}

.pv-theme-sleek.pv-mobile .pv-section-title,
.pv-theme-sleek.pv-mobile .pv-latestreferrals .pv-section-title {
    margin: -18px -16px 16px;
    padding: 12px 16px;
}

.pv-theme-sleek.pv-mobile .pv-periods,
.pv-theme-spotlight.pv-mobile .pv-periods {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.pv-theme-sleek.pv-mobile .pv-period {
    padding: 5px 10px;
}

.pv-theme-sleek.pv-mobile .pv-refresh-btn {
    margin: 0 6px;
}

.pv-theme-canvas.pv-mobile .pv-main {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.pv-theme-canvas.pv-mobile .pv-section {
    padding: 22px 0;
}

.pv-theme-canvas.pv-mobile .pv-section:first-child {
    padding-top: 0;
}

.pv-theme-spotlight.pv-mobile {
    --pt-band: 190px;
}

.pv-theme-spotlight.pv-mobile .pv-content {
    padding-top: 20px;
}

.pv-theme-spotlight.pv-mobile .pv-period {
    padding: 6px 10px;
    font-size: 13px;
}

.pv-theme-spotlight.pv-mobile .pv-refresh-btn {
    margin: 0 4px 0 6px;
}