/*
    Dark theme for the partner portal's legacy sheets (the Metronic bundle and our own css/core,
    css/components files), on the signed-in shell and the sign-in pages alike.

    How it works: everything below applies only under :root[data-bs-theme=dark], which the library's
    <app-theme-script /> sets from the stored choice. The legacy tokens of core/variables.css are
    pointed at the design system's dark tokens (webority-theme.css + webority-brand-signal.css), so
    every rule written against those tokens follows on its own. What is left is the short list of
    rules that paint a literal colour: the Metronic bundle, and our surfaces drawn with --white.

    Load it after the Metronic bundle and the core sheets. Page sheets loaded later are beaten by
    specificity, not order, so their --white surfaces carry the full :root[data-bs-theme=dark] prefix.
*/

/* ═══ 1. Tokens ═══ */

:root[data-bs-theme=dark] {
    /* --primary is read as text far more often than as a fill, so it takes the light violet that
       reads on a dark surface; section 2 swaps the fills back to the brand's dark-mode fill. */
    --primary: var(--color-primary-ink);
    --primary-50: var(--color-primary);
    --primary-30: var(--color-focus-border);
    --primary-20: var(--color-primary-soft);
    --primary-15: var(--color-primary-soft);
    --primary-10: var(--color-primary-soft);
    --primary-5: var(--color-primary-soft);
    --button-hover: var(--wui-signal-dark-fill-hover);
    --button-pressed: var(--wui-signal-violet);

    --heading: var(--color-text);
    --text-1: var(--color-text);
    --text-2: var(--color-text-muted);
    --text-3: var(--color-text-muted);
    --text-4: var(--color-text-subtle);
    --text-5: var(--color-border-strong);

    /* --white is left alone: buttons and filled pills use it for their label. */
    --input-bg: var(--color-field-bg);
    --dark-border: var(--color-border);
    --light-border: var(--color-border-light);
    --dark-bg: var(--color-bg-muted);
    --light-bg: var(--color-bg-subtle);
    --aside-hover-bg: var(--color-bg-muted);
    --page-bg: var(--color-bg);
    --table-head-bg: var(--color-bg-muted);
    --purple-background: var(--color-primary-soft);

    --info-5: var(--color-info-soft);
    --info-10: var(--color-info-soft);
    --info-20: var(--color-info-soft);
    --info-30: var(--color-info-50);
    --success-5: var(--color-success-soft);
    --success-10: var(--color-success-soft);
    --success-20: var(--color-success-soft);
    --success-30: var(--color-success-50);
    --warning-5: var(--color-warning-soft);
    --warning-10: var(--color-warning-soft);
    --warning-20: var(--color-warning-soft);
    --warning-30: var(--color-warning-50);
    --error-5: var(--color-danger-soft);
    --error-10: var(--color-danger-soft);
    --error-20: var(--color-danger-soft);
    --error-30: var(--color-danger-50);
}

/* ═══ 2. Primary fills: white labels need the deeper brand fill, not the light text violet ═══ */

:root[data-bs-theme=dark] :is(
    .btn.btn-primary,
    .wp-cf-btn--primary,
    .wp-companies__add,
    .btn.btn-light-primary:is(:hover, :focus, :active, .active),
    .btn.btn-soft:is(:hover, :focus, :active),
    .btn.btn-outline-primary:is(:hover, :active, .active),
    .btn.btn-hover-primary:is(:hover, :active),
    .btn-group-toggle > .btn.btn-outline-primary.active,
    .bg-primary,
    .badge-primary,
    .label.label-primary,
    .progress-bar,
    .symbol.symbol-primary .symbol-label,
    .page-item.active,
    .nav-pills .nav-link.active,
    .dropdown-item.active,
    .dropdown-item:active,
    .bootstrap-select .dropdown-menu li.active,
    .radio > input:checked ~ span,
    .switch input:checked ~ span,
    .custom-control-input:checked ~ .custom-control-label,
    .bootstrap-datetimepicker-widget td.active,
    .bootstrap-datetimepicker-widget span.active,
    .datepicker td.active,
    .datepicker td span.active,
    .daterangepicker td.active,
    .apply-modal__continue,
    .apply-option__input:checked + .apply-option__card .apply-option__tile,
    .apply-option__badge,
    .agreement-bar__progress-fill,
    .reg-agree-modal__progress-fill,
    .wp-date-tile,
    .wp-head__count,
    .wp-ba__avatar,
    .wp-meet .fc .fc-day-today .fc-daygrid-day-number,
    .fc .fc-button-primary:not(:disabled):active,
    .fc .fc-button-primary:not(:disabled).fc-button-active
) {
    --primary: var(--wui-signal-dark-fill);
}

/* FullCalendar resolves its own variables on .fc, so its active button is set there. */
:root[data-bs-theme=dark] .fc {
    --fc-button-active-bg-color: var(--wui-signal-dark-fill);
    --fc-button-active-border-color: var(--wui-signal-dark-fill);
    --fc-button-bg-color: var(--color-surface);
    --fc-page-bg-color: var(--color-surface);
}

/* ═══ 3. Our surfaces painted with --white ═══
   A plain selector list, not :is(), so each keeps its own specificity: two classes above the rule it
   replaces, which still leaves the page sheets' own hover and selected states in charge. */

:root[data-bs-theme=dark] .auth-page,
:root[data-bs-theme=dark] .auth-page__panel--form,
:root[data-bs-theme=dark] .agreement-page,
:root[data-bs-theme=dark] .agreement-topbar,
:root[data-bs-theme=dark] .agreement-bar,
:root[data-bs-theme=dark] .apply-option__card,
:root[data-bs-theme=dark] .wp-modal .modal-content,
:root[data-bs-theme=dark] .reg-agree-modal__dialog,
:root[data-bs-theme=dark] .card-wrapper,
:root[data-bs-theme=dark] .wp-card,
:root[data-bs-theme=dark] .wp-leads .card.card-custom,
:root[data-bs-theme=dark] .lead-detail .card-custom,
:root[data-bs-theme=dark] .lead-detail .btn.btn-mark-lost:not(:hover):not(:focus),
:root[data-bs-theme=dark] .ld-ba-popover,
:root[data-bs-theme=dark] .lead-detail .ld-step__node,
:root[data-bs-theme=dark] .wpa-foot,
:root[data-bs-theme=dark] .fc-daygrid-day.wp-day--expanded,
:root[data-bs-theme=dark] .wp-tip,
:root[data-bs-theme=dark] .wp-tip__arrow,
:root[data-bs-theme=dark] .wp-proj .wp-ms__node,
:root[data-bs-theme=dark] .wp-record .card.card-custom,
:root[data-bs-theme=dark] .wp-set-tabs,
:root[data-bs-theme=dark] .wp-set-panel,
:root[data-bs-theme=dark] .wp-set-panel__foot,
:root[data-bs-theme=dark] .wp-support__foot,
:root[data-bs-theme=dark] .wp-md__card,
:root[data-bs-theme=dark] .dropzone .dz-preview.wp-dz-row,
:root[data-bs-theme=dark] .otp-box--error {
    background-color: var(--color-surface);
}

/* Matches data-table.css's own pager rule plus :not(.active): its hover rule stays stronger, and
   this file loads after it, so the disabled ends follow too. */
:where(:root[data-bs-theme=dark]) div.dataTables_wrapper div.dataTables_paginate .pagination .page-item:not(.active) > .page-link {
    background-color: var(--color-surface);
}

:root[data-bs-theme=dark] .apply-option__input:not(:checked) + .apply-option__card:hover .apply-option__tile,
:root[data-bs-theme=dark] .apply-option__input:focus-visible + .apply-option__card .apply-option__tile {
    background-color: var(--color-surface);
}

/* !important because meetings-page.css fixes the calendar buttons white with !important. Its
   active-view rule matches this specificity and loads later, so the active button keeps its fill. */
:root[data-bs-theme=dark] .wp-meet .fc .fc-button {
    background-color: var(--color-surface) !important;
}

:root[data-bs-theme=dark] .wp-meet .fc .fc-button:not(.fc-button-active):hover {
    background-color: var(--light-bg) !important;
}

:root[data-bs-theme=dark] div.dataTables_wrapper div.dataTables_length select {
    background-color: var(--color-field-bg);
    color: var(--color-text);
}

/* ═══ 4. The Metronic bundle's literal colours ═══
   :where() keeps each selector at the bundle's own specificity, so a variant class (.label-danger,
   .btn-light-primary, a field's error state) still wins; this file loading later beats the base rule. */

:where(:root[data-bs-theme=dark]) body {
    color: var(--color-text);
    background-color: var(--color-bg);
}

:where(:root[data-bs-theme=dark]) :is(.card, .card-header, .card-footer, .modal-content, .list-group-item, .popover, .popover-header) {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

:where(:root[data-bs-theme=dark]) :is(.modal-header, .modal-footer, .separator) {
    border-color: var(--color-border);
}

/* The bundle's utility classes are !important, so these must be too. */
:where(:root[data-bs-theme=dark]) .bg-white {
    background-color: var(--color-surface) !important;
}

:where(:root[data-bs-theme=dark]) .bg-light {
    background-color: var(--color-bg-muted) !important;
}

:where(:root[data-bs-theme=dark]) :is(.border, .border-top, .border-bottom) {
    border-color: var(--color-border) !important;
}

:where(:root[data-bs-theme=dark]) :is(.text-dark-75, .text-dark-65) {
    color: var(--color-text) !important;
}

:where(:root[data-bs-theme=dark]) .text-dark-50 {
    color: var(--color-text-muted) !important;
}

:where(:root[data-bs-theme=dark]) :is(.modal-title, .popover-body, .table) {
    color: var(--color-text);
}

:where(:root[data-bs-theme=dark]) :is(.table th, .table td, .table thead th) {
    border-color: var(--color-border);
}

:where(:root[data-bs-theme=dark]) .close {
    color: var(--color-text);
    text-shadow: none;
}

:where(:root[data-bs-theme=dark]) .dropdown-menu {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

:where(:root[data-bs-theme=dark]) .dropdown-item {
    color: var(--color-text);
}

:where(:root[data-bs-theme=dark]) :is(.dropdown-item:hover, .dropdown-item:focus, .bootstrap-select .dropdown-menu li a:hover) {
    color: var(--color-text);
    background-color: var(--color-bg-muted);
}

:where(:root[data-bs-theme=dark]) .dropdown-divider {
    border-top-color: var(--color-border);
}

:where(:root[data-bs-theme=dark]) .tooltip-inner {
    color: var(--color-text);
    background-color: var(--color-surface);
}

:where(:root[data-bs-theme=dark]) :is(.form-control, .form-control:focus, .custom-select) {
    color: var(--color-text);
    background-color: var(--color-field-bg);
    border-color: var(--color-field-border);
}

:where(:root[data-bs-theme=dark]) .form-control:focus {
    border-color: var(--color-focus-border);
}

:where(:root[data-bs-theme=dark]) :is(.form-control:disabled, .form-control[readonly]) {
    color: var(--color-text-muted);
    background-color: var(--color-bg-muted);
}

:where(:root[data-bs-theme=dark]) .form-control::placeholder {
    color: var(--color-text-subtle);
}

:where(:root[data-bs-theme=dark]) .input-group-text {
    color: var(--color-text);
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
}

/* Autofill paints its own light fill underneath; partner.css covers it with an inset --primary-5,
   which is see-through in dark, so the cover here is the solid field colour. */
:root[data-bs-theme=dark] input.form-control:-webkit-autofill,
:root[data-bs-theme=dark] input.form-control:-webkit-autofill:hover,
:root[data-bs-theme=dark] input.form-control:-webkit-autofill:focus,
:root[data-bs-theme=dark] input.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-field-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--color-field-bg) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
}

:where(:root[data-bs-theme=dark]) .symbol .symbol-label {
    color: var(--color-text);
    background-color: var(--color-bg-muted);
}

:where(:root[data-bs-theme=dark]) .label {
    color: var(--color-text-muted);
    background-color: var(--color-bg-muted);
}

:where(:root[data-bs-theme=dark]) .btn.btn-white {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-surface);
}

:where(:root[data-bs-theme=dark]) .alert-danger {
    color: var(--color-danger-text-on-soft);
    background-color: var(--color-danger-soft);
    border-color: var(--color-danger-50);
}

:where(:root[data-bs-theme=dark]) .alert-warning {
    color: var(--color-warning-text-on-soft);
    background-color: var(--color-warning-soft);
    border-color: var(--color-warning-50);
}

:where(:root[data-bs-theme=dark]) .dropzone.dropzone-default {
    border-color: var(--color-border);
}

/* Date pickers (bootstrap-datetimepicker and bootstrap-datepicker) */
:where(:root[data-bs-theme=dark]) :is(.bootstrap-datetimepicker-widget table th, .bootstrap-datetimepicker-widget table td, .datepicker table th, .datepicker table td) {
    color: var(--color-text);
}

:where(:root[data-bs-theme=dark]) :is(.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td span:hover, .bootstrap-datetimepicker-widget table th:hover, .datepicker table td.day:hover, .datepicker table td span:hover) {
    background-color: var(--color-bg-muted);
}

:where(:root[data-bs-theme=dark]) :is(.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new, .bootstrap-datetimepicker-widget table td.disabled, .datepicker table td.old, .datepicker table td.new, .datepicker table td.disabled) {
    color: var(--color-text-subtle);
}

/* intl-tel-input: the country list, its search box and the flag box (core/form-control.css) */
:root[data-bs-theme=dark] :is(.iti__country-list, .iti__dropdown-content) {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

:root[data-bs-theme=dark] .iti input.iti__search-input {
    color: var(--color-text);
    background-color: var(--color-field-bg);
    border-color: var(--color-field-border);
}

:root[data-bs-theme=dark] .iti__country.iti__highlight {
    background-color: var(--color-bg-muted);
}

:root[data-bs-theme=dark] .iti__country-name {
    color: var(--color-text);
}

:root[data-bs-theme=dark] .iti__dial-code {
    color: var(--color-text-subtle);
}

:root[data-bs-theme=dark] .iti__divider {
    border-bottom-color: var(--color-border);
}

/* SweetAlert2 (the sign-in error popup and the legacy pages' confirms). !important because
   sweetalert-custom.css fixes the title and text dark with !important. */
:root[data-bs-theme=dark] .swal2-popup {
    color: var(--color-text);
    background-color: var(--color-surface);
}

:root[data-bs-theme=dark] .swal2-popup :is(.swal2-title, .swal2-html-container, .swal2-content) {
    color: var(--color-text) !important;
}

/* ═══ 5. The wordmark: white-logo.webp on dark ═══
   Only the hidden image is ever set, so the shown one keeps whatever display its own sheet gives it. */

:root:not([data-bs-theme=dark]) .wp-logo-dark,
:root[data-bs-theme=dark] .wp-logo-light {
    display: none !important;
}