/**
 * Dynamix Portal — Responsive overrides  v0.3.21
 *
 * Breakpoint system:
 *  >= 1280: desktop large
 *   1024–1279: desktop small / tablet landscape
 *    768–1023: tablet portrait
 *     480–767: large mobile
 *      < 480: small mobile
 *
 * NOTE: .dx-main padding is now controlled exclusively in app-shell.css
 * via high-specificity body.dx-portal-page rules with !important.
 * Do not set .dx-main padding here.
 */

/* Prevent horizontal overflow — scoped to portal page only (no global pollution) */
body.dx-portal-page { overflow-x: hidden !important; }
.dx-portal, .dx-page { max-width: 100%; box-sizing: border-box; }
.dx-shell { width: 100%; max-width: 100vw; overflow: hidden; box-sizing: border-box; }
.dx-shell * { min-width: 0; }
.dx-main { overflow-y: auto; }

/* ── Desktop large (>= 1280) ──────────────────────────────────────────────── */

@media (min-width: 1280px) {
	.dx-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }
	.dx-stats    { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Desktop small (1024–1279) ────────────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1279px) {
	.dx-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }
	.dx-stats    { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Tablet landscape (768–1023) ─────────────────────────────────────────── */

@media (max-width: 1023px) {
	.dx-stats  { grid-template-columns: repeat(2, 1fr); }
	.dx-detail { grid-template-columns: 1fr; }
}

/* ── Tablet portrait (768–767) ───────────────────────────────────────────── */

@media (max-width: 768px) {
	/* Stack detail meta */
	.dx-detail-meta { grid-template-columns: 1fr; }

	/* Wizard: scrollable */
	.dx-wizard-steps { flex-wrap: nowrap; }

	/* Table: hide less critical columns */
	.dx-table .dx-col-hide-sm { display: none; }

	/* Cards: smaller radius */
	.dx-card { border-radius: var(--dx-radius); }

	/* Stats: 2 column */
	.dx-stats { grid-template-columns: 1fr 1fr; }

	/* View header: stack on narrow */
	.dx-view__header {
		flex-direction: column !important;
		align-items:    flex-start !important;
	}
	.dx-view__header .dx-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* ── Large mobile (480–767) ──────────────────────────────────────────────── */

@media (max-width: 480px) {
	.dx-stats { grid-template-columns: 1fr; }
	.dx-modal { padding: var(--dx-space-6); }
}

/* ── Touch targets ────────────────────────────────────────────────────────── */

@media (pointer: coarse) {
	.dx-btn { min-height: 48px; }
	.dx-input,
	.dx-select,
	.dx-textarea { min-height: 48px; }
	.dx-nav__link { padding-top: var(--dx-space-4); padding-bottom: var(--dx-space-4); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}
}

/* ── Mobile density overrides (v0.3.20) ─────────────────────────────────── */

@media (max-width: 767px) {
	/* KPI tiles: compact */
	.dx-kpi-tile                { min-height: 72px !important; padding: 12px 14px !important; }
	.dx-kpi-tile__val           { font-size: 1.375rem !important; }
	.dx-kpi-tile__lbl           { font-size: 0.6875rem !important; margin-top: 4px !important; }

	/* View header: compact title */
	.dx-view__header h2         { font-size: 1.375rem !important; }
	.dx-section__hdr h3         { font-size: 1.0625rem !important; }
	.dx-section h4,
	.dx-detail-card h4          { font-size: 0.8125rem !important; }

	/* Action group: tighter gap on mobile */
	.dx-action-group            { gap: 8px !important; }

	/* Buttons: compact height + font on mobile */
	.dx-btn {
		min-height:    40px !important;
		font-size:     0.8125rem !important;
		padding-left:  var(--dx-space-4) !important;
		padding-right: var(--dx-space-4) !important;
	}
	.dx-btn--sm {
		min-height:    34px !important;
		font-size:     0.75rem !important;
		padding-left:  var(--dx-space-3) !important;
		padding-right: var(--dx-space-3) !important;
	}

	/* Table: compact font + cell padding */
	.dx-table th,
	.dx-table td { font-size: 0.75rem !important; padding: 8px 10px !important; }
}

@media (max-width: 480px) {
	/* Extra-small: tighter KPI cards */
	.dx-kpi-tile     { min-height: 64px !important; padding: 10px 12px !important; }
	.dx-kpi-tile__val { font-size: 1.25rem !important; }
	.dx-kpi-tile__lbl { font-size: 0.625rem !important; }
}