/**
 * WA (dark) admin theme for new dashboard pages
 * Extracted from wb-keyword-automation.php and generalized for reuse.
 */

.wa-body {
    min-height: 100vh;
    color: rgba(255, 255, 255, .88);
    color-scheme: dark;

    /* Bootstrap color variables: by default они "светлые" (тёмный текст).
       На WA-страницах нужно принудительно сделать их светлыми, иначе часть текста в .card/.btn/.text-body-* становится почти невидимой. */
    --bs-body-color: rgba(255, 255, 255, .88);
    --bs-secondary-color: rgba(255, 255, 255, .66);
    --bs-tertiary-color: rgba(255, 255, 255, .52);
    --bs-emphasis-color: rgba(255, 255, 255, .94);
    --bs-body-color-rgb: 255, 255, 255;

    /* Backgrounds / borders (Bootstrap defaults are light) */
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-border-color: rgba(255, 255, 255, .12);
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-secondary-bg: rgba(255, 255, 255, .03);
    --bs-tertiary-bg: rgba(255, 255, 255, .04);
    --bs-card-bg: rgba(255, 255, 255, .03);
    --bs-card-border-color: rgba(255, 255, 255, .12);

    --bs-card-color: rgba(255, 255, 255, .88);
    --bs-card-title-color: rgba(255, 255, 255, .94);
    --bs-card-subtitle-color: rgba(255, 255, 255, .66);

    background:
        radial-gradient(900px 520px at 18% -10%, rgba(99, 102, 241, .22), transparent 60%),
        radial-gradient(780px 520px at 82% 0%, rgba(34, 197, 94, .12), transparent 62%),
        radial-gradient(1100px 700px at 50% 110%, rgba(59, 130, 246, .18), transparent 62%),
        linear-gradient(180deg, #0b1220, #0c1426 35%, #0a1020);
}

/* Fallbacks: some legacy pages are not fully covered by .wa-page selectors */
.wa-body .card {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.wa-body .card-header {
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.wa-body footer.bg-white {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, .10) !important;
}

.wa-body .wa-footer {
    background: rgba(255, 255, 255, .03) !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
}

.wa-body .wa-footer .text-muted {
    color: rgba(255, 255, 255, .70) !important;
}

.wa-body .wa-page {
    min-height: calc(100vh - 60px);
    background: transparent;
}

/* Headings should be readable on dark (some pages rely on default heading colors) */
.wa-page h1,
.wa-page h2,
.wa-page h3,
.wa-page h4,
.wa-page h5,
.wa-page h6 {
    color: rgba(255, 255, 255, .94);
}

/* Ensure native widgets (select dropdown, date inputs, etc.) render in dark scheme */
.wa-page select,
.wa-page input,
.wa-page textarea {
    color-scheme: dark;
}

/* Fallback: some browsers ignore color-scheme for the native select popup.
   System colors keep options readable without hard-coding a palette. */
.wa-page select option,
.wa-page select optgroup {
    color: CanvasText;
    background-color: Canvas;
}

.wa-page .container,
.wa-page .container-fluid {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* Spacing inside blocks */
.wa-page .card-body {
    padding: 1rem 1.25rem !important;
}

.wa-page .card-header {
    padding: .9rem 1.25rem !important;
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.wa-page .card-header.bg-primary,
.wa-page .card-header.bg-light,
.wa-page .card-header.bg-dark {
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(255, 255, 255, .92) !important;
}

.wa-page .card-header a {
    color: rgba(255, 255, 255, .92);
}

/* Make common Bootstrap text helpers readable on dark */
.wa-page .text-muted {
    color: rgba(255, 255, 255, .66) !important;
}

.wa-page .text-dark {
    color: rgba(255, 255, 255, .92) !important;
}

/* But keep dark text inside badges when explicitly requested (e.g. bg-warning + text-dark) */
.wa-page .badge.text-dark {
    color: rgba(0, 0, 0, .85) !important;
}

/* Some pages still use .bg-light blocks (debug/pre, bid-probe results). Keep them dark. */
.wa-page .bg-light {
    background-color: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .90) !important;
}

.wa-page a {
    color: rgba(159, 173, 255, .95);
}

.wa-page a:hover {
    color: rgba(186, 196, 255, 1);
}

/* Some legacy markup uses bg-white inside cards/tables */
.wa-page .bg-white {
    background-color: transparent !important;
}

/* List groups (e.g. dashboard/settings.php left menu)
   Bootstrap defaults are light and look broken on dark backgrounds. */
.wa-page .list-group {
    --bs-list-group-bg: rgba(255, 255, 255, .03);
    --bs-list-group-color: rgba(255, 255, 255, .88);
    --bs-list-group-border-color: rgba(255, 255, 255, .08);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, .06);
    --bs-list-group-action-hover-color: rgba(255, 255, 255, .96);
    --bs-list-group-action-active-bg: rgba(255, 255, 255, .08);
    --bs-list-group-action-active-color: rgba(255, 255, 255, .96);
    --bs-list-group-active-bg: rgba(255, 255, 255, .10);
    --bs-list-group-active-border-color: rgba(255, 255, 255, .14);
    --bs-list-group-active-color: rgba(255, 255, 255, .96);
}

.wa-page .list-group-item {
    background: var(--bs-list-group-bg);
    color: var(--bs-list-group-color);
    border-color: var(--bs-list-group-border-color);
}

.wa-page .list-group-item-action:hover,
.wa-page .list-group-item-action:focus {
    background: var(--bs-list-group-action-hover-bg);
    color: var(--bs-list-group-action-hover-color);
}

.wa-page .list-group-item.active {
    background: var(--bs-list-group-active-bg);
    border-color: var(--bs-list-group-active-border-color);
    color: var(--bs-list-group-active-color);
}

/* Alerts: close button must be visible on dark */
.wa-page .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .65;
}

.wa-page .btn-close:hover {
    opacity: .9;
}

/* Legacy settings page container (admin.css forces it to white) */
.wa-body .settings-section {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .88) !important;
}

.wa-body .settings-section h3 {
    color: rgba(255, 255, 255, .94) !important;
}

.wa-body .stat-box {
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .88) !important;
}

/* WB financial reports: page uses inline light styles (table header/rows and modal) */
.wa-body .table-modern thead th {
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .78) !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
}

.wa-body .table-modern tbody tr:hover {
    background-color: rgba(255, 255, 255, .05) !important;
}

.wa-body .grouped-row {
    background-color: rgba(255, 255, 255, .03) !important;
    border-left-color: rgba(var(--bs-primary-rgb), .55) !important;
}

.wa-body .related-row {
    background-color: rgba(255, 255, 255, .02) !important;
}

/* Badges that are rendered as bg-light + text-dark become unreadable on WA */
.wa-body .badge.bg-light.text-dark {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .92) !important;
}

/* Modals (filters) should be dark on WA */
.wa-body {
    --bs-modal-bg: rgba(11, 18, 32, .96);
    --bs-modal-color: rgba(255, 255, 255, .88);
    --bs-modal-border-color: rgba(255, 255, 255, .12);
}

.wa-body .modal-content {
    background: var(--bs-modal-bg) !important;
    color: var(--bs-modal-color) !important;
    border-color: var(--bs-modal-border-color) !important;
}

.wa-body .modal-header,
.wa-body .modal-footer {
    border-color: rgba(255, 255, 255, .10) !important;
}

/* Checkboxes/radios: avoid bright white squares on dark */
.wa-page .form-check-input {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
}

.wa-page .form-check-input:checked {
    background-color: rgba(var(--bs-primary-rgb), .95);
    border-color: rgba(var(--bs-primary-rgb), .95);
}

.wa-page .form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .85);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .20);
}

/* Product thumbnails / img-thumbnail: remove white frame */
.wa-page .img-thumbnail {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* Some JS renders thumbnails as border + bg-white */
.wa-page img.border.bg-white {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* Pagination */
.wa-page .pagination {
    --bs-pagination-bg: rgba(255, 255, 255, .06);
    --bs-pagination-border-color: rgba(255, 255, 255, .14);
    --bs-pagination-color: rgba(255, 255, 255, .86);
    --bs-pagination-hover-bg: rgba(255, 255, 255, .10);
    --bs-pagination-hover-border-color: rgba(255, 255, 255, .18);
    --bs-pagination-hover-color: rgba(255, 255, 255, .96);
    --bs-pagination-focus-color: rgba(255, 255, 255, .96);
    --bs-pagination-focus-bg: rgba(255, 255, 255, .12);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .22);
    --bs-pagination-active-bg: rgba(var(--bs-primary-rgb), .92);
    --bs-pagination-active-border-color: rgba(var(--bs-primary-rgb), .92);
    --bs-pagination-active-color: rgba(255, 255, 255, .98);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, .03);
    --bs-pagination-disabled-border-color: rgba(255, 255, 255, .08);
    --bs-pagination-disabled-color: rgba(255, 255, 255, .38);
}

.wa-page .pagination .page-link {
    backdrop-filter: blur(10px);
}

/* Quick edit table: keep inputs aligned when some cells have extra helper text */
.wa-page .js-quickedit-table > :not(caption) > * > * {
    vertical-align: top;
}

/* Footer (outside .wa-page) */
main.wa-page + footer {
    background: rgba(255, 255, 255, .02) !important;
    border-top-color: rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .66);
    backdrop-filter: blur(10px);
}

main.wa-page + footer .text-muted {
    color: rgba(255, 255, 255, .60) !important;
}

/* Alerts: keep them readable on dark */
.wa-page .alert {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .86);
}

.wa-page .alert strong {
    color: rgba(255, 255, 255, .96);
}

.wa-page .alert-info {
    background: rgba(59, 130, 246, .10);
    border-color: rgba(59, 130, 246, .20);
}

.wa-page .alert-warning {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .22);
}

.wa-page .alert-danger {
    background: rgba(239, 68, 68, .10);
    border-color: rgba(239, 68, 68, .22);
}

.wa-stickybar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(10, 16, 32, .92), rgba(10, 16, 32, .72));
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    padding-bottom: 14px;
}

.wa-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(66, 75, 106, 0.95), rgba(46, 53, 82, 0.95));
    border: 1px solid rgba(120, 140, 255, 0.25);
    border-radius: 24px;
    padding: 24px 28px;
    box-shadow: 0 12px 32px rgba(6, 8, 20, 0.4);
}

.wa-heroLeft {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1;
}

.wa-heroIcon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: 3px solid rgba(147, 112, 219, 0.5);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.25);
    color: #fff;
}

.wa-heroTitle {
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 800;
    margin: 0;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: -0.5px;
}

.wa-heroSubtitle {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    font-weight: 500;
}

.wa-heroBadges {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.wa-heroBadge {
    padding: 10px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: lowercase;
    border: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.wa-heroBadge.badge-active {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.95)) !important;
    color: #fff !important;
}

.wa-heroBadge.badge-free {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.95)) !important;
    color: #fff !important;
}

.wa-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .05);
    white-space: nowrap;
}

/* Cards / containers in dark */
.wa-page .card,
.wa-page .campaign-header,
.wa-page .stat-card,
.wa-page .chart-container,
.wa-page .platform-card,
.wa-page .keywords-table {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, .88) !important;
    --bs-card-color: rgba(255, 255, 255, .88);
    --bs-card-title-color: rgba(255, 255, 255, .94);
    --bs-card-subtitle-color: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none !important;
}

/* admin.css adds translate animations on hover; WA pages should stay still */
.wa-page .card:hover,
.wa-page .webstore-card:hover,
.wa-page .plan-card:hover,
.wa-page .product-card:hover,
.wa-page .order-card:hover {
    transform: none !important;
}

.wa-page .campaign-header {
    padding: 1.1rem 1.25rem;
}

/* Section titles (used on campaign detail) */
.wa-page .wa-section-title {
    margin: 1.25rem 0 .85rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 255, 255, .92);
}

/* KPI / stats cards (campaign detail) */
.wa-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem;
}

.wa-page .stat-card {
    padding: .95rem 1.05rem;
}

.wa-page .stat-label {
    font-size: .78rem;
    color: rgba(255, 255, 255, .65);
    margin-bottom: .25rem;
}

.wa-page .stat-value {
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1.08;
    color: rgba(255, 255, 255, .95);
}

.wa-page .stat-change {
    margin-top: .35rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}

/* Tables */
.wa-page .table {
    /* Override dashboard/assets/css/admin.css which forces light tables */
    background: rgba(30, 41, 59, .42) !important;
    border: 1px solid rgba(148, 163, 184, .15) !important;
    border-radius: 14px;
    overflow: hidden;

    --bs-table-bg: transparent;
    --bs-table-color: rgba(241, 245, 249, .92);
    --bs-table-border-color: rgba(148, 163, 184, .15);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(102, 126, 234, .10);
    color: rgba(241, 245, 249, .92) !important;
}

.wa-page .table-light {
    --bs-table-bg: transparent !important;
    --bs-table-color: rgba(255, 255, 255, .88) !important;
}

.wa-page .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .08);
}

.wa-page .table thead th {
    background: rgba(15, 23, 42, .84) !important;
    color: rgba(148, 163, 184, .95) !important;
    border-bottom-color: rgba(148, 163, 184, .18) !important;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 800;
}

.wa-page .table tbody td {
    color: rgba(241, 245, 249, .92) !important;
    border-bottom-color: rgba(71, 85, 105, .45) !important;
}

.wa-page .table tbody tr:hover {
    background: rgba(102, 126, 234, .10) !important;
}

.wa-page .table tbody tr:hover > * {
    background: transparent !important;
}

.wa-page .table-responsive {
    background: transparent;
}

.wa-page .table thead.sticky-top > tr > th {
    background: rgba(10, 16, 32, .88) !important;
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}

/* Inputs */
.wa-page .form-control,
.wa-page .form-select,
.wa-page .input-group-text {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .12);
    color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.wa-page .form-label {
    color: rgba(255, 255, 255, .74) !important;
}

.wa-page .form-check-label {
    color: rgba(255, 255, 255, .84) !important;
}

.wa-page .form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

.wa-page .form-control:focus,
.wa-page .form-select:focus {
    border-color: rgba(34, 197, 94, .60);
    box-shadow: 0 0 0 .2rem rgba(34, 197, 94, .12);
    background: rgba(0, 0, 0, .16);
}

/* Buttons */
.wa-page .btn-primary {
    background: rgba(99, 102, 241, .78);
    border-color: rgba(99, 102, 241, .55);
    color: rgba(255, 255, 255, .96);
}

.wa-page .btn-primary:hover,
.wa-page .btn-primary:focus {
    background: rgba(99, 102, 241, .88);
    border-color: rgba(99, 102, 241, .70);
    color: rgba(255, 255, 255, .98);
}

.wa-page .btn-outline-primary {
    background: rgba(99, 102, 241, .12) !important;
}

.wa-page .btn-outline-secondary {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .90) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.wa-page .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: rgba(255, 255, 255, .96) !important;
}

.wa-page .btn-outline-primary {
    border-color: rgba(99, 102, 241, .50) !important;
    color: rgba(255, 255, 255, .92) !important;
}

.wa-page .btn-outline-primary:hover {
    background: rgba(99, 102, 241, .16) !important;
    border-color: rgba(99, 102, 241, .65) !important;
    color: rgba(255, 255, 255, .96) !important;
}

/* Active / checked states inside period toggles */
.wa-page .btn-outline-secondary.active,
.wa-page .btn-outline-secondary:active {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .30) !important;
    color: rgba(255, 255, 255, .98) !important;
}

.wa-page .btn-outline-primary.active,
.wa-page .btn-outline-primary:active,
.wa-page .btn-check:checked + .btn-outline-primary {
    background: rgba(99, 102, 241, .78) !important;
    border-color: rgba(99, 102, 241, .70) !important;
    color: rgba(255, 255, 255, .98) !important;
}

.wa-page .btn-check:focus + .btn-outline-primary,
.wa-page .btn-check:focus + .btn-outline-secondary {
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18) !important;
}

/* Bootstrap subtle backgrounds are tuned for light UIs; adjust for dark WA pages */
.wa-page .bg-success-subtle {
    background-color: rgba(34, 197, 94, .24) !important;
    color: rgba(34, 197, 94, .98) !important;
}
.wa-page .border-success-subtle {
    border-color: rgba(34, 197, 94, .36) !important;
}

.wa-page .bg-primary-subtle {
    background-color: rgba(99, 102, 241, .28) !important;
    color: rgba(159, 162, 255, .98) !important;
}
.wa-page .border-primary-subtle {
    border-color: rgba(99, 102, 241, .38) !important;
}

.wa-page .bg-warning-subtle {
    background-color: rgba(234, 179, 8, .28) !important;
    color: rgba(15, 23, 42, .98) !important;
}
.wa-page .border-warning-subtle {
    border-color: rgba(234, 179, 8, .38) !important;
}

.wa-page .bg-danger-subtle {
    background-color: rgba(239, 68, 68, .28) !important;
    color: rgba(252, 165, 165, .98) !important;
}
.wa-page .border-danger-subtle {
    border-color: rgba(239, 68, 68, .38) !important;
}

.wa-page .bg-secondary-subtle {
    background-color: rgba(148, 163, 184, .14) !important;
    color: rgba(241, 245, 249, .82) !important;
}
.wa-page .border-secondary-subtle {
    border-color: rgba(148, 163, 184, .22) !important;
}

/* Badges: ensure readable text on light-ish backgrounds */
.wa-page .badge.bg-warning,
.wa-page a.badge.bg-warning,
.wa-page .badge.bg-info,
.wa-page a.badge.bg-info,
.wa-page .badge.bg-light,
.wa-page a.badge.bg-light {
    color: rgba(0, 0, 0, .85) !important;
}

.wa-page .badge.bg-light {
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(255, 255, 255, .12);
}

/* Modals (Bootstrap default is light) */
.wa-page .modal-content {
    background: rgba(10, 16, 32, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.wa-page .modal-header,
.wa-page .modal-footer {
    border-color: rgba(255, 255, 255, .10);
}

/* Helper text inside modals should remain readable */
.wa-page .modal .text-muted,
.wa-page .modal .form-text,
.wa-page .modal small,
.wa-page .modal .small {
    color: rgba(255, 255, 255, .72) !important;
}

.wa-page .modal .form-control:disabled,
.wa-page .modal .form-control[readonly],
.wa-page .modal .form-select:disabled,
.wa-page .modal .form-select[readonly] {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .70) !important;
    opacity: 1;
}

.wa-page .modal .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .7;
}

.wa-page .modal .btn-close:hover {
    opacity: .9;
}

.modal-backdrop.show {
    opacity: .55;
}

/* WB thumbnails (vertical) */
.wa-page .wa-wb-thumb {
    width: 44px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    object-fit: cover;
    display: inline-block;
}

.wa-page .wa-wb-thumb--lg {
    width: 64px;
    height: 86px;
    border-radius: 14px;
}

.wa-page .wa-wb-thumb--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
}

.wa-backBtn {
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .92) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.wa-backBtn:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .96) !important;
}

/* Keyword automation grid */
.wa-page .wa-gridScroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.wa-page .wa-gridScroll::-webkit-scrollbar {
    height: 10px;
}

.wa-page .wa-gridScroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
}

.wa-grid {
    display: grid;
    grid-template-columns: 56px minmax(420px, 1.3fr) 120px 140px 160px 170px 140px minmax(260px, 1fr);
    gap: .75rem;
    align-items: center;
}

.wa-headRow {
    padding: .75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: .75rem;
}

.wa-head {
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(34, 197, 94, 1);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.wa-headHelp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    margin-left: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    cursor: help;
    vertical-align: middle;
}

.wa-row {
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.wa-row:hover {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .045);
}

.wa-cell-right {
    text-align: right;
}

.wa-status {
    min-height: 1.25rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .74);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-product {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.wa-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--bs-border-radius);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dashboard (index.php) product thumbnails */
.wa-page.wa-dashboard .row {
    --bs-gutter-x: 1rem;
}

.wa-page.wa-dashboard .row > [class*="col-"] {
    min-width: 0;
}

.wa-page.wa-dashboard .card,
.wa-page.wa-dashboard .table-responsive,
.wa-page.wa-dashboard .dash-scrollList {
    max-width: 100%;
}

.wa-page.wa-dashboard .dash-scrollList {
    overflow-x: auto;
    padding-right: 16px;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(140, 160, 255, 0.6) rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
}

.wa-page.wa-dashboard .dash-scrollList::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wa-page.wa-dashboard .dash-scrollList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.wa-page.wa-dashboard .dash-scrollList::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(120, 90, 255, 0.9), rgba(172, 120, 255, 0.9));
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.wa-page.wa-dashboard .dash-scrollList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(140, 110, 255, 0.95), rgba(190, 140, 255, 0.95));
}

.wa-page .dash-colImg {
    width: 72px;
}

.wa-page .dash-prodImg {
    width: 60px;
    height: 80px;
    display: block;
    border-radius: var(--bs-border-radius);
    object-fit: contain;
}

.wa-page .dash-prodImg.bg-body-tertiary {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12);
}

.wa-page .dash-scrollList {
    max-height: 520px;
    overflow: auto;
}

/* "Около 10 позиций" */
.wa-page .dash-scrollList--10 {
    max-height: 680px;
}

/* Dashboard: compact WB insights layout */
.wa-page .dash-wbInsights {
    --dash-img-col: 96px;
    --dash-right-col: 86px;
    --dash-narrow-max: 760px;
}

.wa-page .dash-wbInsights .card-header {
    padding: .5rem .75rem;
}

.wa-page .dash-wbInsights .card-body {
    padding: .5rem .75rem;
    font-size: .875rem;
}

.wa-page .dash-wbInsights .table-sm > :not(caption) > * > * {
    padding: .35rem .35rem;
}

.wa-page .dash-wbInsights .dash-listRow {
    gap: .5rem !important;
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

.wa-page .dash-wbInsights .dash-colImg {
    width: var(--dash-img-col) !important;
}

.wa-page .dash-wbInsights .dash-colRight {
    width: var(--dash-right-col) !important;
}

.wa-page .dash-wbInsights .dash-narrow {
    max-width: var(--dash-narrow-max);
    margin-right: auto;
}

.wa-page.wa-dashboard {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Dashboard: WB TOP-10 card redesign */
.wa-page .dash-top10-card {
    background: linear-gradient(180deg, rgba(26, 32, 52, 0.95), rgba(16, 20, 36, 0.95));
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(6, 8, 20, 0.35);
}

.wa-page .dash-top10-card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(120, 140, 255, 0.15);
    padding: 12px 16px;
}

.wa-page .dash-top10-card .card-body {
    padding: 14px 16px 18px;
}

.wa-page .dash-top10-toggleGroup {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.wa-page .dash-top10-toggleGroup .btn {
    border-radius: 999px;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 6px 10px;
    font-weight: 600;
}

.wa-page .dash-top10-toggleGroup .btn:not(:first-child):not(:last-child) {
    border-radius: 10px;
}

.wa-page .dash-top10-toggleGroup .btn:first-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.wa-page .dash-top10-toggleGroup .btn:last-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.wa-page .dash-top10-toggleGroup .btn.active {
    background: linear-gradient(135deg, rgba(122, 90, 255, 0.9), rgba(172, 120, 255, 0.9));
    color: #fff;
    box-shadow: 0 6px 16px rgba(120, 90, 255, 0.35);
}

.wa-page .dash-top10-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-page .dash-top10-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(120, 140, 255, 0.2);
    background: linear-gradient(180deg, rgba(34, 40, 64, 0.92), rgba(24, 28, 48, 0.92));
    position: relative;
    min-height: 110px;
    transition: all 0.2s ease;
}

.wa-page .dash-top10-item:hover {
    border-color: rgba(140, 160, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(10, 12, 30, 0.4);
}

.wa-page .dash-top10-rank {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.wa-page .dash-top10-rank.rank-1 {
    background: radial-gradient(circle at 30% 30%, #ffe580, #f0a033);
    color: #2b1a00;
    border: none;
    box-shadow: 0 0 24px rgba(255, 210, 100, 0.8), 0 0 12px rgba(255, 196, 87, 0.6);
    font-size: 18px;
}

.wa-page .dash-top10-rank.rank-2 {
    background: radial-gradient(circle at 30% 30%, #e0f0ff, #90b0f0);
    color: #0c1a2b;
    border: none;
    box-shadow: 0 0 20px rgba(160, 195, 255, 0.7), 0 0 10px rgba(142, 178, 255, 0.5);
    font-size: 17px;
}

.wa-page .dash-top10-rank.rank-3 {
    background: radial-gradient(circle at 30% 30%, #ffc590, #d86b48);
    color: #2b0f06;
    border: none;
    box-shadow: 0 0 18px rgba(255, 160, 115, 0.65), 0 0 10px rgba(255, 146, 102, 0.5);
    font-size: 17px;
}

.wa-page .dash-top10-thumb {
    width: 64px;
    height: 82px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wa-page .dash-top10-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wa-page .dash-top10-thumbPlaceholder {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.wa-page .dash-top10-info {
    min-width: 0;
    flex: 1 1 auto;
}

.wa-page .dash-top10-title {
    font-weight: 700;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    margin-bottom: 3px;
}

.wa-page .dash-top10-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin-bottom: 2px;
}

.wa-page .dash-top10-nm {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.wa-page .dash-top10-nm:hover {
    color: #cfd7ff;
    border-bottom-color: rgba(207, 215, 255, 0.7);
}

.wa-page .dash-top10-tags {
    margin-top: 4px;
}

.wa-page .dash-top10-tags .badge {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 500;
}

.wa-page .dash-top10-stats {
    text-align: right;
    min-width: 110px;
}

.wa-page .dash-top10-orders {
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.wa-page .dash-top10-orders i {
    font-size: 13px;
    opacity: 0.7;
}

.wa-page .dash-top10-revenue {
    font-weight: 700;
    font-size: 16px;
    color: #a8f0a8;
    white-space: nowrap;
}

/* Dashboard: low stock list (match TOP-10 style) */
.wa-page .dash-lowstock-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-page .dash-lowstock-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(120, 140, 255, 0.18);
    background: linear-gradient(180deg, rgba(32, 38, 60, 0.9), rgba(22, 26, 44, 0.9));
}

.wa-page .dash-lowstock-info {
    min-width: 0;
    flex: 1 1 auto;
}

.wa-page .dash-lowstock-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
    min-width: 110px;
}

.wa-page .dash-lowstock-stat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    white-space: nowrap;
}

.wa-page .dash-lowstock-stat i {
    font-size: 14px;
    opacity: 0.7;
}

.wa-page .dash-lowstock-stat span {
    font-size: 14px;
}

.wa-page .dash-lowstock-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Dashboard: WB widgets (low stock / zero stock / slow moving) */
.wa-page .dash-wb-card {
    background: linear-gradient(180deg, rgba(26, 32, 52, 0.95), rgba(16, 20, 36, 0.95));
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(6, 8, 20, 0.35);
}

.wa-page .dash-wb-card-header {
    background: transparent;
    border-bottom: 1px solid rgba(120, 140, 255, 0.15);
    padding: 12px 16px;
}

.wa-page .dash-wb-card-header h5 {
    margin-bottom: 2px;
    font-weight: 700;
    font-size: 1.125rem;
}

.wa-page .dash-wb-card-header .small {
    font-size: 0.8rem;
    line-height: 1.4;
}

.wa-page .dash-wb-card-body {
    padding: 14px 16px 18px;
}

.wa-page .dash-wb-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 600;
}

.wa-page .dash-toggleGroup {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.wa-page .dash-toggleGroup .btn {
    border-radius: 999px;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 6px 10px;
    font-weight: 600;
}

.wa-page .dash-toggleGroup .btn.active {
    background: linear-gradient(135deg, rgba(122, 90, 255, 0.9), rgba(172, 120, 255, 0.9));
    color: #fff;
    box-shadow: 0 6px 16px rgba(120, 90, 255, 0.35);
}

.wa-page .dash-toggleGroup .btn:not(:first-child):not(:last-child) {
    border-radius: 10px;
}

.wa-page .dash-toggleGroup .btn:first-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.wa-page .dash-toggleGroup .btn:last-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.wa-page .dash-wb-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.wa-page .dash-wb-table thead th {
    color: rgba(255, 255, 255, 0.55) !important;
    border: none !important;
    font-weight: 600;
}

.wa-page .dash-wb-table tbody tr {
    background: linear-gradient(180deg, rgba(32, 38, 60, 0.9), rgba(22, 26, 44, 0.9));
    border: 1px solid rgba(120, 140, 255, 0.18);
}

.wa-page .dash-wb-table tbody td {
    border: none !important;
}

.wa-page .dash-wb-table tbody tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.wa-page .dash-wb-table tbody tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.wa-page .dash-wb-table.table-hover tbody tr:hover {
    background: linear-gradient(180deg, rgba(40, 48, 76, 0.95), rgba(26, 30, 52, 0.95));
}

.wa-page .dash-wb-list .dash-listRow {
    border-color: rgba(120, 140, 255, 0.18) !important;
    background: linear-gradient(180deg, rgba(32, 38, 60, 0.9), rgba(22, 26, 44, 0.9));
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.wa-page .dash-wb-list .dash-stickyHeader {
    border-bottom-color: rgba(120, 140, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Dashboard: top area styling (filter + metrics + charts) */
.wa-page.wa-dashboard .dash-filterCard {
    background: linear-gradient(180deg, rgba(24, 28, 44, 0.95), rgba(18, 22, 36, 0.95));
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(6, 8, 20, 0.35);
}

.wa-page.wa-dashboard .dash-filterBody {
    padding: 10px 14px;
}

.wa-page.wa-dashboard .dash-filterLabel {
    color: rgba(255, 255, 255, 0.65) !important;
}

.wa-page.wa-dashboard .dash-filterSelect,
.wa-page.wa-dashboard .dash-filterClear {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(120, 140, 255, 0.2) !important;
    border-radius: 999px;
}

.wa-page.wa-dashboard .dash-filterSelect option {
    color: #e9eefc;
    background: #0f1220;
}

.wa-page.wa-dashboard .dash-filterSelect:focus {
    box-shadow: 0 0 0 0.2rem rgba(120, 90, 255, 0.25);
    border-color: rgba(140, 110, 255, 0.6) !important;
}

.wa-page.wa-dashboard .dash-metricCard {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(120, 140, 255, 0.18);
    background: linear-gradient(180deg, rgba(26, 32, 52, 0.95), rgba(16, 20, 36, 0.95)) !important;
    box-shadow: 0 12px 30px rgba(6, 8, 20, 0.35);
}

.wa-page.wa-dashboard .dash-metricCard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(500px 120px at 30% 10%, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
}

.wa-page.wa-dashboard .dash-metricCard h6 {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.wa-page.wa-dashboard .dash-metricCard h2 {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.wa-page.wa-dashboard .dash-metricCard small {
    color: rgba(255, 255, 255, 0.65) !important;
}

.wa-page.wa-dashboard .dash-metricCard .card-body .d-flex {
    align-items: center !important;
}

.wa-page.wa-dashboard .dash-metricCard--wb-orders::before,
.wa-page.wa-dashboard .dash-metricCard--ozon-orders::before,
.wa-page.wa-dashboard .dash-metricCard--wb-supplies::before,
.wa-page.wa-dashboard .dash-metricCard--ozon-supplies::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -80px;
    width: 220px;
    height: 220px;
    opacity: 0.55;
    pointer-events: none;
}

.wa-page.wa-dashboard .dash-metricCard--wb-orders::before {
    background: radial-gradient(circle, rgba(246, 196, 83, 0.65) 0%, transparent 70%);
}

.wa-page.wa-dashboard .dash-metricCard--ozon-orders::before {
    background: radial-gradient(circle, rgba(140, 197, 255, 0.6) 0%, transparent 70%);
}

.wa-page.wa-dashboard .dash-metricCard--wb-supplies::before {
    background: radial-gradient(circle, rgba(255, 179, 95, 0.6) 0%, transparent 70%);
}

.wa-page.wa-dashboard .dash-metricCard--ozon-supplies::before {
    background: radial-gradient(circle, rgba(159, 224, 159, 0.55) 0%, transparent 70%);
}

.wa-page.wa-dashboard .dash-metricIcon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(6, 8, 20, 0.35);
    align-self: center;
}

.wa-page.wa-dashboard .dash-metricIcon i {
    font-size: 20px !important;
    opacity: 0.9 !important;
    line-height: 1;
}

.wa-page.wa-dashboard .dash-chartCard {
    background: linear-gradient(180deg, rgba(24, 28, 44, 0.95), rgba(16, 20, 36, 0.95));
    border: 1px solid rgba(120, 140, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(6, 8, 20, 0.35);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.wa-page.wa-dashboard .dash-chartHeader {
    background: transparent;
    border-bottom: 1px solid rgba(120, 140, 255, 0.15);
    padding: 12px 16px;
}

.wa-page.wa-dashboard .dash-chartCard .card-body {
    padding: 14px 16px 18px;
}

/* Orders page: keep its custom widgets scoped */
.wa-page .orders-page .stat-card {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wa-page .orders-page .stat-card.success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.wa-page .orders-page .stat-card.warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.wa-page .orders-page .stat-card.info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.wa-page .orders-page .stat-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.wa-page .orders-page .stat-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.wa-page .orders-page .badge-fbs {
    background-color: #667eea;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .orders-page .badge-fbo {
    background-color: #f093fb;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .orders-page .badge-wb {
    background-color: #7c3aed;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .orders-page .badge-ozon {
    background-color: #0066ff;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .orders-page .status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .orders-page .btn-sync {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.wa-page .orders-page .btn-sync:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.wa-page .orders-page .btn-sync:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wa-page .orders-page .sync-spinner {
    display: none;
}

.wa-page .orders-page .sync-spinner.active {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: ordersSpin 0.8s linear infinite;
}

@keyframes ordersSpin {
    to { transform: rotate(360deg); }
}

.wa-page .orders-page .sortable {
    cursor: pointer;
    user-select: none;
}

.wa-page .orders-page .sortable:hover {
    background-color: rgba(255,255,255,0.06);
}

.wa-page .orders-page .sortable i {
    font-size: 0.8rem;
    opacity: 0.5;
}

.wa-page .orders-page .sortable.active i {
    opacity: 1;
}

.wa-page .orders-page .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.70);
}

/* Sales page: scoped helpers (WA dark friendly) */
.wa-page .sales-page .stat-card {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wa-page .sales-page .stat-card.success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.wa-page .sales-page .stat-card.warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.wa-page .sales-page .stat-card.info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.wa-page .sales-page .stat-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.wa-page .sales-page .stat-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.wa-page .sales-page .filters-panel,
.wa-page .sales-page .table-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.wa-page .sales-page .filters-panel {
    padding: 20px;
    margin-bottom: 20px;
}

.wa-page .sales-page .table-card {
    overflow: hidden;
}

.wa-page .sales-page #salesTable thead {
    background-color: rgba(255,255,255,0.04);
}

.wa-page .sales-page .badge-fbs {
    background-color: #667eea;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .sales-page .badge-fbo {
    background-color: #f093fb;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .sales-page .badge-wb {
    background-color: #7c3aed;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .sales-page .badge-ozon {
    background-color: #0066ff;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-page .sales-page .sortable {
    cursor: pointer;
    user-select: none;
}

.wa-page .sales-page .sortable:hover {
    background-color: rgba(255,255,255,0.06);
}

.wa-page .sales-page .sortable i {
    font-size: 0.8rem;
    opacity: 0.5;
}

.wa-page .sales-page .sortable.active i {
    opacity: 1;
}

.wa-page .sales-page .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.70);
}

.wa-page .sales-page .empty-state-icon {
    font-size: 4rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 20px;
}

/* WB Feedbacks page: scoped helpers */
.wa-page .wb-feedbacks-page .wb-stars {
    font-size: 1.7rem;
    line-height: 1;
    display: inline-flex;
    gap: 0.1rem;
}

.wa-page .wb-feedbacks-page .wb-product-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.35rem;
}

.wa-page .wb-feedbacks-page .wb-created {
    font-size: 0.875rem;
}

.wa-page .wb-feedbacks-page .wb-product-title {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}

.wa-page .wb-feedbacks-page .wb-product-meta .wb-meta-row {
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

.wa-page .wb-feedbacks-page .wb-product-brand {
    white-space: normal;
    word-break: break-word;
    line-height: 1.15;
}

.wa-page .wb-feedbacks-page .wb-feedback-row-fade {
    opacity: 0;
    transform: translateX(-6px);
}

.wa-page .wb-feedbacks-page .wb-feedbacks-table tbody tr {
    transition: opacity .35s ease, transform .35s ease;
}

@media (max-width: 767.98px) {
    .wa-page .wb-feedbacks-page .wb-feedbacks-table th,
    .wa-page .wb-feedbacks-page .wb-feedbacks-table td {
        vertical-align: top;
    }

    .wa-page .wb-feedbacks-page .wb-feedbacks-table .wb-td-review {
        min-width: 320px;
    }

    .wa-page .wb-feedbacks-page .wb-feedbacks-table textarea.form-control {
        min-height: 120px;
    }
}

.wa-title {
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-sub {
    font-size: .82rem;
    color: rgba(255, 255, 255, .66);
}

.wa-row .form-control {
    border-radius: 12px;
}

/* Chart cards — modern glassmorphism containers for ECharts */
.dash-chart-card {
    background: linear-gradient(135deg, rgba(66, 75, 106, 0.95), rgba(46, 53, 82, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dash-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.dash-chart-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 24px;
    color: rgba(255, 255, 255, 0.94);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* WB widgets: 4 columns on wide monitors (>1920px), 3 columns on others */
@media (min-width: 1920px) {
    .dash-wbInsights > .col-12.col-lg-6.col-xxl-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}