/*
 * Dave Express Phase 5A dashboard presentation layer.
 * Every selector requires both VTUPress scope and the enabled feature class.
 * This file never hides, reorders, renames, or submits VTUPress controls.
 */

body.dx-vtupress-app.dx-dashboard-styles-enabled {
	--dx-dashboard-navy: #0f172a;
	--dx-dashboard-blue: #2563eb;
	--dx-dashboard-blue-dark: #1d4ed8;
	--dx-dashboard-red: #ef4444;
	--dx-dashboard-background: #f8fafc;
	--dx-dashboard-card: #ffffff;
	--dx-dashboard-text: #0f172a;
	--dx-dashboard-muted: #64748b;
	--dx-dashboard-border: #e2e8f0;
	--dx-dashboard-success: #16a34a;
	--dx-dashboard-warning: #f59e0b;
	--dx-dashboard-error: #dc2626;
	--dx-dashboard-info: #2563eb;
	--dx-dashboard-radius-sm: 10px;
	--dx-dashboard-radius: 16px;
	--dx-dashboard-radius-lg: 22px;
	--dx-dashboard-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
	--dx-dashboard-shadow-raised: 0 18px 40px -24px rgba(15, 23, 42, 0.3);
	margin: 0;
	background: var(--dx-dashboard-background);
	color: var(--dx-dashboard-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(h1, h2, h3, h4, h5, h6) {
	color: var(--dx-dashboard-text);
	font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.35);
	outline-offset: 3px;
}

/* Application shell. */
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.wrapper, .main-panel, .av-page) {
	background: var(--dx-dashboard-background);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.content, .page-inner),
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page > :where(.container, .container-fluid),
body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.container, .container-fluid, .container-full) {
	width: min(100%, 1440px);
	margin-inline: auto;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel {
	min-height: 100vh;
}

/*
 * Phase 5A.2 document-flow correction.
 * VTUPress makes `.main-header` fixed and gives only `.main-panel > .container`
 * a 61px offset. Keeping the header sticky puts its real height back in flow;
 * the direct route wrapper then owns one predictable content gap.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled .main-header {
	position: sticky;
	top: 0;
}

/*
 * DX-IMPORTANT-04: Atlantis and Bootstrap apply important zero padding and
 * utility padding to these wrappers. This rule replaces only wrapper spacing.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.container, .container-fluid, .container-full) {
	box-sizing: border-box;
	margin-top: 0;
	padding: 24px 24px 32px !important;
	overflow: visible;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page {
	box-sizing: border-box;
	padding: 24px 24px 80px !important;
}

/* The stable wrapper now owns the gap; neutralize legacy internal utilities. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > .container-fluid > .ms-hero.mt-5,
body.dx-vtupress-app.dx-dashboard-styles-enabled.dx-vtupress-route-history .main-panel > .container > .mt-3,
body.dx-vtupress-app.dx-dashboard-styles-enabled.dx-vtupress-route-account .main-panel > .container > .mt-3 {
	margin-top: 0 !important;
}

/*
 * DX-IMPORTANT-01: VTUPress prints template palette backgrounds with
 * `!important` in top.html. These declarations only neutralize that palette.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.bg-secondary-gradient, .bg-info-gradient, .logo-header, .navbar-header) {
	background: var(--dx-dashboard-navy) !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar[data-background-color="dark"] {
	background: var(--dx-dashboard-navy) !important;
}

/* Classic top navigation. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .main-header {
	box-shadow: 0 1px 0 rgba(226, 232, 240, 0.18);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .logo-header,
body.dx-vtupress-app.dx-dashboard-styles-enabled .navbar-header {
	min-height: 64px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .logo-header .logo {
	font-family: "Plus Jakarta Sans", Inter, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .navbar-header .nav-link,
body.dx-vtupress-app.dx-dashboard-styles-enabled .logo-header button {
	min-width: 44px;
	min-height: 44px;
	border-radius: 10px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .navbar-header .nav-link:hover,
body.dx-vtupress-app.dx-dashboard-styles-enabled .logo-header button:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Classic sidebar and generated VTUPress navigation. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar {
	border-right: 1px solid rgba(148, 163, 184, 0.16);
	box-shadow: 12px 0 40px -30px rgba(2, 6, 23, 0.8);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .sidebar-content {
	padding: 18px 12px 28px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .user {
	margin: 0 6px 16px;
	padding: 14px;
	border: 1px solid rgba(148, 163, 184, 0.15);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .user .info a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .user .info span {
	color: #f8fafc;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .user .user-level {
	margin-top: 3px;
	color: #94a3b8;
	font-size: 0.75rem;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .nav-primary > .nav-item {
	margin-bottom: 4px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .nav-primary > .nav-item > a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .nav-collapse a {
	min-height: 44px;
	border-radius: 10px;
	color: #cbd5e1;
}

/* Neutral base for inactive links and false VTUPress `.active` parents. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item > a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary .nav-collapse a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active:not(.dx-current-item) > a {
	border: 1px solid transparent;
	background: transparent !important;
	color: #94a3b8 !important;
	box-shadow: none !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active:not(.dx-current-item) > a :where(p, i, .caret, span) {
	color: #94a3b8 !important;
}

/* Expanded parents are visible but never use the white current-route card. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.dx-has-current-child > a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.dx-is-route-parent > a,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item > a[aria-expanded="true"] {
	border-color: rgba(96, 165, 250, 0.18);
	background: rgba(37, 99, 235, 0.1) !important;
	color: #cbd5e1 !important;
	box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.55) !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.dx-has-current-child > a :where(p, i, .caret, span),
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.dx-is-route-parent > a :where(p, i, .caret, span),
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item > a[aria-expanded="true"] :where(p, i, .caret, span) {
	color: #cbd5e1 !important;
}

/* Identical exact-route treatment for Dashboard, Airtime, Data, and children. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary a.dx-is-current {
	border: 1px solid rgba(226, 232, 240, 0.9);
	background: #ffffff !important;
	color: var(--dx-dashboard-navy) !important;
	box-shadow: 0 8px 22px -16px rgba(15, 23, 42, 0.65) !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary a.dx-is-current :where(p, .sub-item) {
	color: var(--dx-dashboard-navy) !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary a.dx-is-current i {
	min-width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #dbeafe;
	color: var(--dx-dashboard-blue) !important;
	line-height: 28px;
}

/* Hover/focus remains temporary and visibly different from current route. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary a:not(.dx-is-current):hover,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar.sidebar-style-2 .nav.nav-primary a:not(.dx-is-current):focus-visible {
	border-color: rgba(148, 163, 184, 0.16);
	background: rgba(148, 163, 184, 0.12) !important;
	color: #f8fafc !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .nav-primary a i {
	width: 24px;
	color: #94a3b8;
	text-align: center;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .nav-primary a p,
body.dx-vtupress-app.dx-dashboard-styles-enabled .sidebar .sub-item {
	font-weight: 600;
}

/* App-view top and bottom navigation. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-topbar {
	border-bottom: 1px solid rgba(226, 232, 240, 0.15);
	background: var(--dx-dashboard-navy);
	box-shadow: 0 8px 24px -18px rgba(15, 23, 42, 0.8);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-topbar-btn {
	min-height: 44px;
	border-radius: 10px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-footer {
	border-top-color: var(--dx-dashboard-border);
	box-shadow: 0 -12px 30px -26px rgba(15, 23, 42, 0.8);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-fnav-item {
	min-width: 44px;
	min-height: 44px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-fnav-item.active,
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-sheet-item i,
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-hist-btn i {
	color: var(--dx-dashboard-blue);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.av-sheet, .av-va-sheet) {
	border: 1px solid var(--dx-dashboard-border);
	background: var(--dx-dashboard-card);
	box-shadow: 0 -20px 50px -28px rgba(15, 23, 42, 0.55);
}

/* Dashboard welcome block. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero {
	padding: 30px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: var(--dx-dashboard-radius-lg);
	background: var(--dx-dashboard-navy);
	box-shadow: var(--dx-dashboard-shadow-raised);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero::before,
body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero::after {
	background: rgba(37, 99, 235, 0.16);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero :where(.hero-name, .site-tag, .hero-sub) {
	color: #ffffff;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .hero-name {
	margin-top: 6px;
	padding-block: 2px;
	line-height: 1.25;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .hero-sub {
	max-width: 64ch;
	margin-top: 10px;
	line-height: 1.6;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .ref-pill {
	max-width: min(100%, 640px);
	margin-top: 16px;
	padding: 7px 8px 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero :where(.ref-pill button, .ms-admin-btn, .ms-pkg-pill) {
	border-radius: 9px;
	background: var(--dx-dashboard-blue);
	color: #ffffff;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero :where(.ref-pill button, .ms-admin-btn) {
	min-height: 44px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-start.justify-content-between {
	gap: 24px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-start > .d-flex.align-items-center {
	min-width: max-content;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .ms-pkg-pill {
	padding: 6px 11px;
	font-weight: 700;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-center.flex-wrap {
	gap: 12px;
	margin-top: 20px !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-center.flex-wrap img {
	display: block;
	max-width: 100%;
}

/* Real summary values and dashboard cards. */
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.ms-bal-card, .ms-card, .ms-mini, .ms-info-card, .card, .card-stats, .card-round, .vp-modern-card) {
	border: 1px solid var(--dx-dashboard-border);
	border-radius: var(--dx-dashboard-radius);
	background: var(--dx-dashboard-card);
	box-shadow: var(--dx-dashboard-shadow);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card {
	min-height: 160px;
	color: var(--dx-dashboard-text);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card :where(.bc-label, .bc-link) {
	color: var(--dx-dashboard-muted);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card .bc-value {
	color: var(--dx-dashboard-text);
	font-family: "Plus Jakarta Sans", Inter, sans-serif;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card .bc-icon {
	background: #dbeafe;
	color: var(--dx-dashboard-blue);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card.bc-success .bc-icon {
	background: #dcfce7;
	color: var(--dx-dashboard-success);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-bal-card.bc-warning .bc-icon {
	background: #fef3c7;
	color: #b45309;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-sh {
	color: var(--dx-dashboard-text);
	font-family: "Plus Jakarta Sans", Inter, sans-serif;
	font-size: 1.05rem;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-sh::before {
	background: var(--dx-dashboard-blue);
}

/* Enabled VTUPress service cards only; PHP continues to decide availability. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-svc-btn {
	min-height: 64px;
	border: 1px solid var(--dx-dashboard-border);
	border-radius: 12px;
	background: var(--dx-dashboard-background);
	color: var(--dx-dashboard-text);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-svc-btn:hover {
	border-color: var(--dx-dashboard-blue);
	background: var(--dx-dashboard-card);
	color: var(--dx-dashboard-text);
	box-shadow: var(--dx-dashboard-shadow);
	transform: translateY(-1px);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-svc-btn img {
	border: 1px solid var(--dx-dashboard-border);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-ctt,
body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-info-card {
	background: var(--dx-dashboard-card);
	color: var(--dx-dashboard-text);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-info-card :where(.ic-tag, p) {
	color: var(--dx-dashboard-muted);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-info-card .ic-btn {
	border-color: var(--dx-dashboard-border);
	background: var(--dx-dashboard-background);
	color: var(--dx-dashboard-blue);
}

/* Service wrappers and forms. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .user-vends,
body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form {
	width: min(100%, 900px);
	margin-inline: auto;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form,
body.dx-vtupress-app.dx-dashboard-styles-enabled .vp-modern-card {
	padding: 30px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form :where(.purchase-btn, .proceed-btn) {
	margin-bottom: 20px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form :where(label, .form-label),
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(#profile-form, #photo-form) :where(label, .form-label) {
	margin-bottom: 6px;
	color: #334155;
	font-size: 0.82rem;
	font-weight: 700;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(#profile-form, #photo-form) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
	min-height: 48px;
	border: 1px solid var(--dx-dashboard-border);
	border-radius: var(--dx-dashboard-radius-sm);
	background: var(--dx-dashboard-card);
	color: var(--dx-dashboard-text);
	box-shadow: none;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form :where(input, select, textarea):focus,
body.dx-vtupress-app.dx-dashboard-styles-enabled :where(#profile-form, #photo-form) :where(input, select, textarea):focus {
	border-color: var(--dx-dashboard-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form .input-group-text {
	border-color: var(--dx-dashboard-border);
	background: #f1f5f9;
	color: var(--dx-dashboard-muted);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form .form-check-input {
	width: 20px;
	height: 20px;
	border-color: #94a3b8;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form .form-check-input:checked {
	border-color: var(--dx-dashboard-blue);
	background-color: var(--dx-dashboard-blue);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.btn-primary, .vp-gradient-btn, .purchase-btn, .proceed-btn) {
	min-height: 46px;
	border: 1px solid var(--dx-dashboard-blue);
	border-radius: 10px;
	background: var(--dx-dashboard-blue);
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.9);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.btn-primary, .vp-gradient-btn, .purchase-btn, .proceed-btn):hover {
	border-color: var(--dx-dashboard-blue-dark);
	background: var(--dx-dashboard-blue-dark);
	color: #ffffff;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.btn-secondary, .btn-light, .btn-outline-secondary, .verify-service) {
	min-height: 44px;
	border: 1px solid var(--dx-dashboard-border);
	border-radius: 10px;
	background: var(--dx-dashboard-card);
	color: var(--dx-dashboard-text);
	font-weight: 600;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .btn-danger {
	border-color: var(--dx-dashboard-error);
	border-radius: 10px;
	background: var(--dx-dashboard-error);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .btn-success {
	border-color: var(--dx-dashboard-success);
	border-radius: 10px;
	background: var(--dx-dashboard-success);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.invalid-feedback, .provider-error, .type-error, .plan-error, .number-error, .amount-error) {
	color: var(--dx-dashboard-error);
	font-size: 0.82rem;
}

/*
 * DX-IMPORTANT-02: app-top.php applies `!important` to all app-view form
 * controls. This scoped block restores the approved tokens without changing
 * values, names, dimensions used by scripts, or visibility.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
	border-color: var(--dx-dashboard-border) !important;
	border-radius: var(--dx-dashboard-radius-sm) !important;
	background: var(--dx-dashboard-card) !important;
	color: var(--dx-dashboard-text) !important;
	box-shadow: none !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page :where(input, select, textarea):focus {
	border-color: var(--dx-dashboard-blue) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

/*
 * DX-IMPORTANT-03: app-top.php marks primary/secondary button palettes as
 * `!important`; these declarations replace colour and radius only.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page :where(button[type="submit"], input[type="submit"], .btn-primary, .btn-info, .vp-gradient-btn) {
	border-color: var(--dx-dashboard-blue) !important;
	border-radius: 10px !important;
	background: var(--dx-dashboard-blue) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.9) !important;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page :where(.btn-secondary, .btn-default, .btn-outline-primary, .btn-outline-secondary) {
	border-color: var(--dx-dashboard-border) !important;
	border-radius: 10px !important;
	background: var(--dx-dashboard-card) !important;
	color: var(--dx-dashboard-text) !important;
}

/* History, tables, filters, pagination, and empty states. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .history-container {
	max-width: 1440px;
	margin-inline: auto;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.vtupress-glass, .receipt-content, .modal-content) {
	border: 1px solid var(--dx-dashboard-border);
	border-radius: var(--dx-dashboard-radius);
	background: var(--dx-dashboard-card);
	box-shadow: var(--dx-dashboard-shadow);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .vtupress-glass:hover {
	border-color: #cbd5e1;
	background: var(--dx-dashboard-card);
	box-shadow: var(--dx-dashboard-shadow-raised);
	transform: translateY(-1px);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .table-responsive {
	overflow-x: auto;
	border: 1px solid var(--dx-dashboard-border);
	border-radius: 14px;
	background: var(--dx-dashboard-card);
	box-shadow: var(--dx-dashboard-shadow);
	-webkit-overflow-scrolling: touch;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled table.table {
	min-width: 680px;
	margin-bottom: 0;
	color: var(--dx-dashboard-text);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled table.table thead th {
	border-bottom: 1px solid var(--dx-dashboard-border);
	background: #f1f5f9;
	color: #475569;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled table.table :where(th, td) {
	padding: 14px 16px;
	border-color: var(--dx-dashboard-border);
	vertical-align: middle;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled table.table tbody tr:hover {
	background: #f8fafc;
}

/*
 * VTUPress service confirmation review.
 *
 * The application-wide history-table rules above intentionally give data tables
 * a 680px minimum width and a horizontal scroller. The transaction confirmation
 * table reuses Bootstrap's generic `.table` and `.table-responsive` classes, so
 * it needs a component-level exception inside its stable `#confirmModal` shell.
 */
body.dx-vtupress-app.dx-dashboard-styles-enabled #confirmModal .modal-body > .table-responsive {
	width: 100%;
	max-width: 100%;
	overflow-x: visible;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled #confirmModal .modal-body > .table-responsive > table.table {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	table-layout: fixed;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled #confirmModal .modal-body > .table-responsive > table.table tr > th:first-child {
	width: 40% !important; /* Overrides VTUPress/Bootstrap's inline utility class `w-50`. */
	white-space: normal;
	vertical-align: top;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled #confirmModal .modal-body > .table-responsive > table.table tr > td:last-child {
	width: 60%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	vertical-align: top;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.dataTables_filter input, .dataTables_length select) {
	min-height: 42px;
	border: 1px solid var(--dx-dashboard-border);
	border-radius: 9px;
	background: var(--dx-dashboard-card);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .pagination .page-link {
	min-width: 40px;
	min-height: 40px;
	border-color: var(--dx-dashboard-border);
	color: var(--dx-dashboard-blue);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .pagination .active .page-link {
	border-color: var(--dx-dashboard-blue);
	background: var(--dx-dashboard-blue);
	color: #ffffff;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.badge, .confirm-status) {
	padding: 5px 10px;
	border-radius: 999px;
	font-weight: 700;
}

/* Account, referral, KYC, upgrade, and developer cards. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .card-header {
	padding: 18px 20px;
	border-bottom: 1px solid var(--dx-dashboard-border);
	border-radius: var(--dx-dashboard-radius) var(--dx-dashboard-radius) 0 0;
	background: var(--dx-dashboard-card);
	color: var(--dx-dashboard-text);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .card-body {
	padding: clamp(18px, 3vw, 26px);
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.vpr-card, .vp-detail-item, .accordion-item) {
	border-color: var(--dx-dashboard-border);
	border-radius: var(--dx-dashboard-radius-sm);
	background: var(--dx-dashboard-card);
}

/* Notices, status, loading, and empty states generated by VTUPress. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .alert {
	padding: 14px 16px;
	border-width: 1px;
	border-style: solid;
	border-radius: 12px;
	box-shadow: none;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.alert-success, .bg-success) {
	border-color: #bbf7d0;
	background-color: #f0fdf4;
	color: #166534;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.alert-warning, .bg-warning) {
	border-color: #fde68a;
	background-color: #fffbeb;
	color: #92400e;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.alert-danger, .bg-danger) {
	border-color: #fecaca;
	background-color: #fef2f2;
	color: #991b1b;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.alert-info, .alert-primary) {
	border-color: #bfdbfe;
	background-color: #eff6ff;
	color: #1e40af;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.fa-spinner, .spinner-border, .spinner-grow) {
	color: var(--dx-dashboard-blue);
}

@media (max-width: 991px) {
	body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.container, .container-fluid, .container-full) {
		padding: 20px 18px 28px !important;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page {
		padding: 20px 18px 80px !important;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.content, .page-inner, .container, .container-fluid),
	body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page > :where(.container, .container-fluid) {
		padding-inline: 18px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero {
		padding: 22px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-start.justify-content-between {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	body.dx-vtupress-app.dx-dashboard-styles-enabled {
		font-size: 15px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.content, .page-inner, .container, .container-fluid),
	body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page > :where(.container, .container-fluid) {
		padding-inline: 14px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .main-panel > :where(.container, .container-fluid, .container-full) {
		padding: 16px 14px 24px !important;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .av-page {
		padding: 16px 14px 80px !important;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero {
		padding: 19px;
		border-radius: 18px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-start.justify-content-between {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-start > .d-flex.align-items-center {
		width: 100%;
		min-width: 0;
		justify-content: space-between;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .ref-pill {
		width: 100%;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero #ms-ref-text {
		min-width: 0;
		flex: 1;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-center.flex-wrap {
		align-items: stretch;
		gap: 10px;
		margin-top: 18px !important;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero > .d-flex.align-items-center.flex-wrap > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled :where(.ms-bal-card, .ms-card, .ms-info-card, .card, .vp-modern-card) {
		border-radius: 14px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form,
	body.dx-vtupress-app.dx-dashboard-styles-enabled .vp-modern-card {
		padding: 22px 20px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled .service-form :where(.purchase-btn, .proceed-btn),
	body.dx-vtupress-app.dx-dashboard-styles-enabled #profile-form .btn-primary {
		width: 100%;
		min-height: 48px;
	}

	body.dx-vtupress-app.dx-dashboard-styles-enabled table.table :where(th, td) {
		padding: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.dx-vtupress-app.dx-dashboard-styles-enabled *,
	body.dx-vtupress-app.dx-dashboard-styles-enabled *::before,
	body.dx-vtupress-app.dx-dashboard-styles-enabled *::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}

/* Phase 6A brand mark: presentation-only decoration on the existing VTUPress site tag. */
body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .site-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

body.dx-vtupress-app.dx-dashboard-styles-enabled .ms-hero .site-tag::before {
	display: inline-block;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 9px;
	background: #ffffff url("../images/dave-express-logo.jpg") center / contain no-repeat;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
	content: "";
	flex: 0 0 34px;
}