/**
 * App-wide dark mode consistency.
 * Load after app.min.css so overrides apply everywhere (dashboard base + storefront pages).
 * Uses same data-layout-mode and --vz-* variables as app.min.css (theme-persistence.js).
 */

/* Light mode: softer off-white – override CSS variables used by app.min.css and bootstrap */
[data-layout-mode="light"] {
    --vz-body-bg: #f3f4f6;
    --vz-body-bg-rgb: 243, 244, 246;
    --vz-card-bg-custom: #fafbfc;
    --vz-input-bg: #fafbfc;
    --vz-boxed-body-bg: #eef0f2;
    --vz-topbar-search-bg: #eef0f2;
    --vz-topnav-bg: #f3f4f6;
    --vz-header-bg: #fff;
    --vz-footer-bg: #f3f4f6;
    --vz-vertical-menu-bg: #f3f4f6;
    --vz-border-color: #e5e7eb;
}
/* Light mode: element overrides (backup for rules that don’t use variables) */
[data-layout-mode="light"] body,
[data-layout-mode="light"] #layout-wrapper,
[data-layout-mode="light"] .main-content {
    background-color: #f3f4f6 !important;
}
[data-layout-mode="light"] .page-content {
    background-color: transparent !important;
}
[data-layout-mode="light"] .card {
    background-color: #fafbfc !important;
    border-color: #e5e7eb;
}
[data-layout-mode="light"] .bg-white {
    background-color: #fafbfc !important;
}
[data-layout-mode="light"] .bg-light {
    background-color: #eef0f2 !important;
}
[data-layout-mode="light"] .table-light {
    background-color: #f8f9fa;
}
[data-layout-mode="light"] .dropdown-menu {
    background-color: #fafbfc;
    border-color: #e5e7eb;
}

[data-layout-mode="dark"] body {
    background-color: var(--vz-body-bg);
    color: var(--vz-body-color);
}

[data-layout-mode="dark"] #layout-wrapper,
[data-layout-mode="dark"] .main-content {
    background-color: var(--vz-body-bg);
    color: var(--vz-body-color);
}

[data-layout-mode="dark"] .page-content {
    background-color: transparent;
    color: var(--vz-body-color);
}

/* Utility overrides so hardcoded light classes respect dark mode */
[data-layout-mode="dark"] .bg-light,
[data-layout-mode="dark"] .bg-white {
    background-color: var(--vz-card-bg-custom, #212529) !important;
}

[data-layout-mode="dark"] .text-dark,
[data-layout-mode="dark"] .link-dark {
    color: var(--vz-body-color, #ced4da) !important;
}

[data-layout-mode="dark"] .text-dark:hover,
[data-layout-mode="dark"] .link-dark:hover {
    color: var(--vz-link-hover-color, #ced4da) !important;
}

[data-layout-mode="dark"] .text-muted {
    color: var(--vz-gray-500, #adb5bd) !important;
}

[data-layout-mode="dark"] .border,
[data-layout-mode="dark"] .border-top,
[data-layout-mode="dark"] .border-bottom,
[data-layout-mode="dark"] .border-start,
[data-layout-mode="dark"] .border-end {
    border-color: var(--vz-border-color, #32383e) !important;
}

[data-layout-mode="dark"] .card {
    background-color: var(--vz-card-bg-custom, #212529);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .card-header {
    background-color: var(--vz-light, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .card-body {
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .page-title-box .breadcrumb-item a,
[data-layout-mode="dark"] .page-title-box a {
    color: var(--vz-link-color, #ced4da);
}

[data-layout-mode="dark"] .page-title-box .breadcrumb-item.active {
    color: var(--vz-gray-500, #adb5bd);
}

[data-layout-mode="dark"] .form-control,
[data-layout-mode="dark"] .form-select {
    background-color: var(--vz-input-bg, #262a2f);
    border-color: var(--vz-input-border, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .form-control::placeholder {
    color: var(--vz-gray-500, #adb5bd);
}

[data-layout-mode="dark"] .input-group-text,
[data-layout-mode="dark"] .input-group .form-control {
    background-color: var(--vz-input-group-addon-bg, #2a2f34);
    border-color: var(--vz-input-border, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .table {
    color: var(--vz-body-color, #ced4da);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .table th,
[data-layout-mode="dark"] .table td {
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .table-light {
    background-color: var(--vz-light, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .dropdown-header {
    color: var(--vz-gray-500, #adb5bd);
}

[data-layout-mode="dark"] .dropdown-item,
[data-layout-mode="dark"] .dropdown-item .text-muted {
    color: var(--vz-dropdown-link-color, #adb5bd);
}

[data-layout-mode="dark"] .dropdown-item:hover {
    background-color: var(--vz-dropdown-link-hover-bg, #2f343a);
    color: var(--vz-dropdown-link-hover-color, #b9bfc4);
}

[data-layout-mode="dark"] .nav-link:not(.active) {
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .navbar-menu .menu-link {
    color: var(--vz-vertical-menu-item-color-dark, #878a99);
}

[data-layout-mode="dark"] .navbar-menu .menu-link:hover,
[data-layout-mode="dark"] .navbar-menu .menu-link.menu-hover,
[data-layout-mode="dark"] .navbar-menu .menu-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vz-vertical-menu-item-hover-color-dark, #fff);
}

[data-layout-mode="dark"] .menu-title {
    color: var(--vz-gray-500, #adb5bd);
}

[data-layout-mode="dark"] .alert:not([class*="alert-"]) {
    background-color: var(--vz-light, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}

/* Get started banner – dark mode compatible */
[data-layout-mode="dark"] .get-started-banner {
    background-color: rgba(13, 110, 253, 0.15) !important;
    border-color: rgba(13, 110, 253, 0.3) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-layout-mode="dark"] .get-started-banner .alert-heading,
[data-layout-mode="dark"] .get-started-banner h6 {
    color: #93c5fd !important;
}
[data-layout-mode="dark"] .get-started-banner .text-info,
[data-layout-mode="dark"] .get-started-banner i.ri-lightbulb-line {
    color: #60a5fa !important;
}
[data-layout-mode="dark"] .get-started-banner p,
[data-layout-mode="dark"] .get-started-banner ol {
    color: var(--vz-gray-400, #9ca3af) !important;
}

/* Alert variants – dark mode compatible */
[data-layout-mode="dark"] .alert-info {
    background-color: rgba(41, 156, 219, 0.15) !important;
    border-color: rgba(41, 156, 219, 0.35) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-layout-mode="dark"] .alert-info .alert-heading,
[data-layout-mode="dark"] .alert-info h6 {
    color: #7dd3fc !important;
}
[data-layout-mode="dark"] .alert-warning {
    background-color: rgba(247, 184, 75, 0.15) !important;
    border-color: rgba(247, 184, 75, 0.35) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-layout-mode="dark"] .alert-warning .alert-heading,
[data-layout-mode="dark"] .alert-warning h6 {
    color: #fcd34d !important;
}

/* Trial-ended / subscription-ended banner: ensure visibility in dark mode */
[data-layout-mode="dark"] .trial-ended-banner {
    background-color: #5c4a0a !important;
    color: #ffecb5 !important;
    border-bottom-color: rgba(255, 236, 181, 0.3) !important;
}
[data-layout-mode="dark"] .trial-ended-banner .btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}

[data-layout-mode="dark"] .badge.bg-secondary-subtle,
[data-layout-mode="dark"] .badge.bg-light-subtle {
    background-color: var(--vz-light, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .list-group-item {
    background-color: var(--vz-card-bg-custom, #212529);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] hr {
    border-color: var(--vz-border-color, #32383e);
}

/* ========== Storefront unavailable page (light defaults + dark) ========== */
.storefront-unavailable-page {
    background-color: #f3f6f9;
    color: #212529;
    min-height: 100vh;
}

.storefront-unavailable-page .store-header {
    background-color: #fff;
    border-color: #eff2f7;
}

.storefront-unavailable-page .store-header a {
    color: #212529;
}

[data-layout-mode="dark"] .storefront-unavailable-page {
    background-color: var(--vz-body-bg, #1a1d21);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-unavailable-page .store-header {
    background-color: var(--vz-header-bg, #292e32);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront-unavailable-page .store-header a {
    color: var(--vz-header-item-color, #e9ecef);
}

[data-layout-mode="dark"] .storefront-unavailable-page .text-muted {
    color: var(--vz-gray-500, #adb5bd) !important;
}

[data-layout-mode="dark"] .storefront-unavailable-page .card {
    background-color: var(--vz-card-bg-custom, #212529);
    border-color: var(--vz-border-color, #32383e);
}

/* ========== Main storefront (.storefront) ========== */
[data-layout-mode="dark"] body.storefront {
    background-color: var(--vz-body-bg, #1a1d21);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront .store-header {
    background-color: var(--vz-header-bg, #292e32);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront .store-header a,
[data-layout-mode="dark"] .storefront .store-header .text-dark {
    color: var(--vz-header-item-color, #e9ecef) !important;
}

[data-layout-mode="dark"] .storefront .store-search {
    background-color: var(--vz-input-bg, #262a2f);
    border-color: var(--vz-input-border, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront .store-footer {
    background-color: var(--vz-footer-bg, #212529);
    color: var(--vz-gray-500, #adb5bd);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront .card,
[data-layout-mode="dark"] .storefront .bg-white {
    background-color: var(--vz-card-bg-custom, #212529) !important;
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront .text-muted {
    color: var(--vz-gray-500, #adb5bd) !important;
}

[data-layout-mode="dark"] .storefront .text-dark {
    color: var(--vz-body-color, #ced4da) !important;
}

[data-layout-mode="dark"] .storefront .border {
    border-color: var(--vz-border-color, #32383e) !important;
}

[data-layout-mode="dark"] .storefront .dropdown-menu {
    background-color: var(--vz-dropdown-bg, #292e33);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront .dropdown-menu .text-muted {
    color: var(--vz-gray-500, #adb5bd) !important;
}

[data-layout-mode="dark"] .storefront .store-nav-btn:hover {
    background: var(--vz-light, #2a2f34);
}

/* ========== Storefront flow pages: checkout, cart, success (.storefront-page) ========== */
.storefront-page {
    min-height: 100vh;
}

[data-layout-mode="dark"] body.storefront-page {
    background-color: var(--vz-body-bg, #1a1d21);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-page .page-content {
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-page .card {
    background-color: var(--vz-card-bg-custom, #212529);
    border-color: var(--vz-border-color, #32383e);
}

[data-layout-mode="dark"] .storefront-page .text-muted {
    color: var(--vz-gray-500, #adb5bd) !important;
}

[data-layout-mode="dark"] .storefront-page .breadcrumb-item a,
[data-layout-mode="dark"] .storefront-page a:not(.btn) {
    color: var(--vz-link-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-page .breadcrumb-item.active {
    color: var(--vz-gray-500, #adb5bd);
}

[data-layout-mode="dark"] .storefront-page .border,
[data-layout-mode="dark"] .storefront-page .border-bottom {
    border-color: var(--vz-border-color, #32383e) !important;
}

[data-layout-mode="dark"] .storefront-page .bg-light {
    background-color: var(--vz-light, #2a2f34) !important;
}

[data-layout-mode="dark"] .storefront-page .form-control,
[data-layout-mode="dark"] .storefront-page .form-select {
    background-color: var(--vz-input-bg, #262a2f);
    border-color: var(--vz-input-border, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-page .nav-pills .nav-link {
    color: var(--vz-body-color, #ced4da);
}

[data-layout-mode="dark"] .storefront-page .nav-pills .nav-link.active {
    background-color: var(--vz-primary);
    color: #fff;
}