/**
 * Dynamix Portal — UI components  v0.3.21
 */

/* ── Cards ────────────────────────────────────────────────────────────────── */

.dx-card {
	background:    var(--dx-surface) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius-lg);
	padding:       var(--dx-space-6);
	color:         var(--dx-text) !important;
}

.dx-card--accent {
	border-color: var(--dx-accent-deep) !important;
	box-shadow:   var(--dx-shadow-accent);
}

.dx-card__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   var(--dx-space-4);
}

.dx-card__title {
	font-family: var(--dx-font-display) !important;
	font-size:   var(--dx-fs-lg) !important;
	font-weight: 600 !important;
	color:       var(--dx-text) !important;
}

/* ── KPI stat boxes ───────────────────────────────────────────────────────── */

.dx-stats {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap:                   var(--dx-space-4);
	margin-bottom:         var(--dx-space-6);
}

.dx-stat {
	background:    var(--dx-surface) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius-lg);
	padding:       var(--dx-space-6);
}

.dx-stat__value {
	font-family:          var(--dx-font-display) !important;
	font-size:            var(--dx-fs-3xl) !important;
	font-weight:          700 !important;
	line-height:          1;
	color:                var(--dx-accent) !important;
	font-variant-numeric: tabular-nums;
}

.dx-stat__label {
	font-size:  var(--dx-fs-sm) !important;
	color:      var(--dx-text-muted) !important;
	margin-top: var(--dx-space-1);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.dx-btn {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             var(--dx-space-2) !important;
	padding:         0 var(--dx-space-5) !important;
	border-radius:   var(--dx-radius) !important;
	border:          1px solid transparent !important;
	font-family:     var(--dx-font-body) !important;
	font-size:       var(--dx-fs-sm) !important;
	font-weight:     700 !important;
	cursor:          pointer !important;
	text-decoration: none !important;
	transition:      background 150ms, color 150ms, opacity 150ms, box-shadow 150ms;
	white-space:     nowrap;
	line-height:     1.4;
	min-height:      44px !important;
}

.dx-btn:disabled,
.dx-btn[aria-busy="true"] {
	opacity: 0.5;
	cursor:  not-allowed;
}

.dx-btn--primary {
	background: var(--dx-accent) !important;
	color:      var(--dx-bg) !important;
}
.dx-btn--primary:hover:not(:disabled) {
	background: var(--dx-accent-hover) !important;
	box-shadow: var(--dx-shadow-accent);
}

.dx-btn--secondary {
	background:   var(--dx-surface-2) !important;
	color:        var(--dx-text) !important;
	border-color: var(--dx-border) !important;
}
.dx-btn--secondary:hover:not(:disabled) {
	background: var(--dx-surface) !important;
}

.dx-btn--danger {
	background: var(--dx-danger) !important;
	color:      #fff !important;
}
.dx-btn--danger:hover:not(:disabled) {
	opacity: 0.88 !important;
}

.dx-btn--success {
	background: var(--dx-success) !important;
	color:      #fff !important;
}
.dx-btn--success:hover:not(:disabled) {
	opacity: 0.88 !important;
}

.dx-btn--ghost {
	background: transparent !important;
	color:      var(--dx-text-muted) !important;
}
.dx-btn--ghost:hover:not(:disabled) {
	color:      var(--dx-text) !important;
	background: rgba(255,255,255,.06) !important;
}

.dx-btn--sm { padding: 0.375rem var(--dx-space-3); min-height: 36px; }
.dx-btn--lg { padding: 0.875rem var(--dx-space-6); font-size: var(--dx-fs-base); }
.dx-btn--full { width: 100%; justify-content: center; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.dx-form-group {
	display:        flex;
	flex-direction: column;
	gap:            var(--dx-space-2);
	margin-bottom:  var(--dx-space-4);
}

.dx-label {
	font-size:   var(--dx-fs-sm) !important;
	font-weight: 500 !important;
	color:       var(--dx-text-muted) !important;
}
.dx-label .dx-required { color: var(--dx-danger) !important; margin-left: 2px; }

.dx-input,
.dx-select,
.dx-textarea {
	background:    var(--dx-surface-2) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius);
	color:         var(--dx-text) !important;
	font-family:   var(--dx-font-body) !important;
	font-size:     var(--dx-fs-base) !important;
	padding:       0.625rem var(--dx-space-3);
	width:         100%;
	transition:    border-color 150ms, box-shadow 150ms;
	min-height:    44px;
}

.dx-input:focus,
.dx-select:focus,
.dx-textarea:focus {
	outline:      none !important;
	border-color: var(--dx-accent) !important;
	box-shadow:   0 0 0 3px rgba(34,211,238,.15) !important;
}

.dx-input::placeholder,
.dx-textarea::placeholder {
	color: var(--dx-text-dim) !important;
}

.dx-textarea { min-height: 100px; resize: vertical; }

.dx-field-error {
	font-size:   var(--dx-fs-xs) !important;
	color:       var(--dx-danger) !important;
	display:     flex;
	align-items: center;
	gap:         var(--dx-space-1);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.dx-table-wrap { overflow-x: auto; }

.dx-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       var(--dx-fs-sm) !important;
}

.dx-table th {
	background:     var(--dx-bg-2) !important;
	color:          var(--dx-text-muted) !important;
	font-size:      var(--dx-fs-xs) !important;
	font-weight:    600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding:        12px var(--dx-space-4) !important;
	text-align:     left;
	white-space:    nowrap;
}

.dx-table td {
	padding:        14px var(--dx-space-4) !important;
	border-bottom:  1px solid var(--dx-border) !important;
	color:          var(--dx-text) !important;
	vertical-align: middle;
	background:     transparent;
	min-height:     48px;
}

.dx-table tr:hover td { background: rgba(255,255,255,.02) !important; }

/* ── State badges ─────────────────────────────────────────────────────────── */

.dx-state-badge,
.dx-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            var(--dx-space-1);
	padding:        2px 10px;
	border-radius:  var(--dx-radius-full);
	font-size:      var(--dx-fs-xs) !important;
	font-weight:    600 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space:    nowrap;
}

.dx-state-badge--DRAFT            { background: rgba(92,115,148,.15) !important;  color: var(--dx-state-draft) !important; }
.dx-state-badge--SUBMITTED        { background: rgba(245,158,11,.15) !important;  color: var(--dx-state-submitted) !important; }
.dx-state-badge--ASSIGNED         { background: rgba(99,102,241,.15) !important;  color: var(--dx-state-assigned) !important; }
.dx-state-badge--ACCEPTED         { background: rgba(139,92,246,.15) !important;  color: var(--dx-state-accepted) !important; }
.dx-state-badge--IN_PROGRESS      { background: rgba(34,211,238,.12) !important;  color: var(--dx-state-progress) !important; }
.dx-state-badge--IN_REVIEW        { background: rgba(249,115,22,.15) !important;  color: var(--dx-state-review) !important; }
.dx-state-badge--COMPLETED        { background: rgba(16,185,129,.15) !important;  color: var(--dx-state-completed) !important; }
.dx-state-badge--ARCHIVED         { background: rgba(55,65,81,.25) !important;    color: var(--dx-state-archived) !important; }
.dx-state-badge--CANCELLED        { background: rgba(239,68,68,.15) !important;   color: var(--dx-state-cancelled) !important; }
.dx-state-badge--CANCEL_REQUESTED { background: rgba(239,68,68,.08) !important;   color: var(--dx-state-cancelled) !important; }
.dx-state-badge--DELETE_REQUESTED { background: rgba(185,28,28,.15) !important;   color: var(--dx-state-delete-req) !important; }

/* ── Modal ────────────────────────────────────────────────────────────────── */

.dx-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0,0,0,.7) !important;
	z-index:         var(--dx-z-modal);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--dx-space-4);
}

.dx-modal {
	background:    var(--dx-surface) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius-xl);
	padding:       var(--dx-space-8);
	width:         100%;
	max-width:     560px;
	max-height:    90vh;
	overflow-y:    auto;
	box-shadow:    var(--dx-shadow-lg);
	color:         var(--dx-text) !important;
}

.dx-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   var(--dx-space-6);
}

.dx-modal__title {
	font-family: var(--dx-font-display) !important;
	font-size:   var(--dx-fs-xl) !important;
	font-weight: 700 !important;
	color:       var(--dx-text) !important;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

.dx-toasts {
	position:       fixed;
	bottom:         var(--dx-space-6);
	right:          var(--dx-space-6);
	z-index:        var(--dx-z-overlay);
	display:        flex;
	flex-direction: column;
	gap:            var(--dx-space-3);
	max-width:      360px;
}

.dx-toast {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--dx-space-3);
	background:    var(--dx-surface-2) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius-lg);
	padding:       var(--dx-space-4);
	box-shadow:    var(--dx-shadow);
	color:         var(--dx-text) !important;
	animation:     dx-toast-in 220ms ease;
}

.dx-toast--success { border-color: var(--dx-success) !important; }
.dx-toast--error   { border-color: var(--dx-danger) !important; }
.dx-toast--warning { border-color: var(--dx-warning) !important; }

@keyframes dx-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.dx-empty {
	text-align: center;
	padding:    var(--dx-space-12) var(--dx-space-6);
	color:      var(--dx-text-muted) !important;
}

.dx-empty__icon {
	font-size:     3rem;
	margin-bottom: var(--dx-space-4);
	opacity:       0.4;
}

.dx-empty__title {
	font-family:   var(--dx-font-display) !important;
	font-size:     var(--dx-fs-xl) !important;
	font-weight:   600 !important;
	color:         var(--dx-text) !important;
	margin-bottom: var(--dx-space-2);
}

/* ── Notices (inline) ─────────────────────────────────────────────────────── */

.dx-notice {
	padding:       var(--dx-space-4) var(--dx-space-5);
	border-radius: var(--dx-radius);
	font-size:     var(--dx-fs-sm) !important;
}

.dx-notice--error {
	background: rgba(239,68,68,.1) !important;
	border:     1px solid rgba(239,68,68,.3) !important;
	color:      var(--dx-danger) !important;
}

.dx-notice--info {
	background: rgba(34,211,238,.06) !important;
	border:     1px solid rgba(34,211,238,.15) !important;
	color:      var(--dx-text-muted) !important;
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */

.dx-loading {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         var(--dx-space-12);
}

.dx-spinner {
	width:            36px !important;
	height:           36px !important;
	max-width:        36px !important;
	max-height:       36px !important;
	min-width:        36px !important;
	min-height:       36px !important;
	border:           3px solid var(--dx-border) !important;
	border-top-color: var(--dx-accent) !important;
	border-radius:    50% !important;
	animation:        dx-spin 0.7s linear infinite;
	flex-shrink:      0 !important;
}

@keyframes dx-spin { to { transform: rotate(360deg); } }

/* ── Wizard steps ─────────────────────────────────────────────────────────── */

.dx-wizard-steps {
	display:        flex;
	gap:            var(--dx-space-2);
	margin-bottom:  var(--dx-space-8);
	overflow-x:     auto;
	padding-bottom: var(--dx-space-2);
}

.dx-wizard-step {
	flex:        0 0 auto;
	display:     flex;
	align-items: center;
	gap:         var(--dx-space-2);
	font-size:   var(--dx-fs-sm) !important;
	color:       var(--dx-text-dim) !important;
	white-space: nowrap;
}

.dx-wizard-step.is-done   { color: var(--dx-success) !important; }
.dx-wizard-step.is-active { color: var(--dx-accent) !important; font-weight: 600; }

.dx-wizard-step__num {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	border-radius:   var(--dx-radius-full);
	background:      var(--dx-surface-2) !important;
	border:          1px solid var(--dx-border) !important;
	font-size:       var(--dx-fs-xs) !important;
	font-weight:     700 !important;
	color:           var(--dx-text-dim) !important;
}
.dx-wizard-step.is-done   .dx-wizard-step__num { background: rgba(16,185,129,.2) !important; border-color: var(--dx-success) !important; color: var(--dx-success) !important; }
.dx-wizard-step.is-active .dx-wizard-step__num { background: rgba(34,211,238,.15) !important; border-color: var(--dx-accent) !important; color: var(--dx-accent) !important; }

.dx-wizard-step + .dx-wizard-step::before {
	content:     '';
	display:     block;
	width:       24px;
	height:      1px;
	background:  var(--dx-border) !important;
	flex-shrink: 0;
	margin-top:  14px;
}

/* ── Calendar grid ────────────────────────────────────────────────────────── */

.dx-calendar { overflow-x: auto; }

.dx-calendar__grid {
	display:               grid;
	grid-template-columns: 64px repeat(5, 1fr);
	border:                1px solid var(--dx-border) !important;
	border-radius:         var(--dx-radius-lg);
	overflow:              hidden;
}

.dx-calendar__time-col,
.dx-calendar__day-header {
	background:   var(--dx-bg-2) !important;
	border-right: 1px solid var(--dx-border) !important;
	padding:      var(--dx-space-2) var(--dx-space-3);
	font-size:    var(--dx-fs-xs) !important;
	font-weight:  600 !important;
	color:        var(--dx-text-muted) !important;
	text-align:   center;
}

.dx-calendar__slot {
	border-top:   1px solid var(--dx-border) !important;
	border-right: 1px solid var(--dx-border) !important;
	min-height:   48px;
	position:     relative;
	cursor:       pointer;
}

.dx-calendar__event {
	position:      absolute;
	left:          2px;
	right:         2px;
	border-radius: var(--dx-radius-sm);
	padding:       2px 6px;
	font-size:     var(--dx-fs-xs) !important;
	font-weight:   500;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	cursor:        pointer;
}

.dx-calendar__event--COMPLETED   { background: rgba(16,185,129,.2) !important;  border-left: 3px solid var(--dx-success) !important; color: var(--dx-success) !important; }
.dx-calendar__event--IN_PROGRESS { background: rgba(34,211,238,.15) !important; border-left: 3px solid var(--dx-accent) !important;  color: var(--dx-accent) !important; }
.dx-calendar__event--ASSIGNED,
.dx-calendar__event--SUBMITTED   { background: rgba(245,158,11,.15) !important; border-left: 3px solid var(--dx-warm) !important;    color: var(--dx-warm) !important; }
.dx-calendar__event--IN_REVIEW   { background: rgba(249,115,22,.15) !important; border-left: 3px solid var(--dx-state-review) !important; color: var(--dx-state-review) !important; }

/* ── Table modifiers ──────────────────────────────────────────────────────── */

.dx-table--sm th,
.dx-table--sm td {
	padding:   var(--dx-space-2) var(--dx-space-3);
	font-size: var(--dx-fs-xs) !important;
}

.dx-tr-link { cursor: pointer; }
.dx-tr-link:hover td { background: rgba(34,211,238,.05) !important; }

.dx-unread td { font-weight: 600; }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.dx-empty-state {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         var(--dx-space-10) var(--dx-space-6);
	text-align:      center;
	color:           var(--dx-text-muted) !important;
}

.dx-empty-state--error { color: var(--dx-danger, #f87171) !important; }

.dx-empty-state__icon {
	font-size:     2.5rem;
	margin-bottom: var(--dx-space-3, 12px);
	line-height:   1;
}

.dx-empty-state__msg {
	margin:      0;
	font-size:   var(--dx-fs-sm) !important;
	color:       inherit !important;
	max-width:   360px;
}

/* ── Button group ─────────────────────────────────────────────────────────── */

.dx-btn-group {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	margin-top:      var(--dx-space-4, 16px);
	justify-content: center;
	align-items:     center;
}

/* ── Checkbox label ───────────────────────────────────────────────────────── */

.dx-checkbox-label {
	display:     flex;
	align-items: center;
	gap:         var(--dx-space-2, 8px);
	font-size:   var(--dx-fs-sm) !important;
	color:       var(--dx-text) !important;
	cursor:      pointer;
	padding:     var(--dx-space-2, 8px) 0;
	border-bottom: 1px solid var(--dx-border) !important;
}

.dx-checkbox-label:last-child { border-bottom: none !important; }
.dx-checkbox-label input[type="checkbox"] { accent-color: var(--dx-accent) !important; width: 16px; height: 16px; }

/* ── Field group (service list container) ─────────────────────────────────── */

.dx-field-group {
	display:       flex;
	flex-direction:column;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius) !important;
	padding:       0 var(--dx-space-3, 12px);
	margin-top:    var(--dx-space-3, 12px);
	background:    var(--dx-bg-2) !important;
	max-height:    260px;
	overflow-y:    auto;
}

/* ── Wizard card ──────────────────────────────────────────────────────────── */

.dx-wizard-card {
	max-width:  600px !important;
	padding:    28px !important;
}

.dx-wizard-body {
	padding-top:    24px !important;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.dx-wizard-body .dx-label {
	margin-bottom: 6px !important;
	display:       block;
}

.dx-wizard-body .dx-select,
.dx-wizard-body .dx-input,
.dx-wizard-body .dx-textarea {
	font-size: 1rem !important;
}

.dx-wizard-back {
	margin-top:   16px !important;
	padding-top:  16px !important;
	border-top:   1px solid var(--dx-border) !important;
	display:      flex;
	gap:          12px;
}

/* ── Responsive table (card on mobile) ────────────────────────────────────── */

.dx-table--responsive { width: 100%; }

@media (max-width: 767px) {
	.dx-table--responsive { display: block; border: none !important; }
	.dx-table--responsive thead { display: none; }
	.dx-table--responsive tbody { display: flex; flex-direction: column; gap: 10px; }
	.dx-table--responsive tr {
		display:       block;
		background:    var(--dx-surface) !important;
		border:        1px solid var(--dx-border) !important;
		border-radius: var(--dx-radius-lg) !important;
		padding:       14px 16px !important;
		cursor:        pointer;
	}
	.dx-table--responsive tr:hover {
		border-color: var(--dx-accent) !important;
	}
	.dx-table--responsive td {
		display:        flex !important;
		justify-content:space-between !important;
		align-items:    center !important;
		padding:        7px 0 !important;
		border-bottom:  1px solid rgba(36,50,82,.6) !important;
		border-right:   none !important;
		font-size:      0.875rem !important;
	}
	.dx-table--responsive td:last-child { border-bottom: none !important; }
	.dx-table--responsive td::before {
		content:     attr(data-label);
		font-weight: 600 !important;
		color:       var(--dx-text-dim) !important;
		font-size:   0.75rem !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		flex-shrink: 0;
		margin-right: 12px;
	}
}

/* ── v0.3.17: Form field wrapper ──────────────────────────────────────────── */

.dx-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	margin-bottom:  var(--dx-space-4);
}

/* ── v0.3.17: Two-column form row (desktop) ───────────────────────────────── */

.dx-form-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--dx-space-4);
	margin-bottom:         var(--dx-space-4);
}

@media (max-width: 640px) {
	.dx-form-row {
		grid-template-columns: 1fr;
	}
}

/* ── v0.3.17: Modal inner form safe padding ───────────────────────────────── */

.dx-modal-body .dx-form-group,
.dx-modal-body .dx-field {
	padding-left:  0 !important;
	padding-right: 0 !important;
}

/* ── v0.3.17: Form controls stay inside their padded container ────────────── */

.dx-wizard-body .dx-form-group,
.dx-wizard-body .dx-field {
	padding: 0 !important;
}

.dx-wizard-body .dx-form-group + .dx-form-group,
.dx-wizard-body .dx-field + .dx-field {
	margin-top: var(--dx-space-4) !important;
}

/* ── v0.3.17: Order detail item cards ────────────────────────────────────── */

.dx-item-card {
	background:    var(--dx-bg-2) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius);
	padding:       var(--dx-space-3) var(--dx-space-4);
	margin-bottom: var(--dx-space-2);
}

.dx-item-card--custom {
	border-color: rgba(245, 158, 11, .35) !important;
	background:   rgba(245, 158, 11, .04) !important;
}

.dx-required {
	color: var(--dx-danger) !important;
	margin-left: 2px;
}

/* ── v0.3.17: Wizard custom-service entry card ────────────────────────────── */

.dx-custom-item + .dx-custom-item {
	margin-top: var(--dx-space-3);
}

/* ── v0.3.17: Desktop form spacing (modal + wizard) ─────────────────────────

   Targets:     24–32px horizontal inner padding on card/wizard surfaces.
   Mobile:      16–20px (via responsive override).
   Wizard card already has 28px via .dx-wizard-card — preserved.
   Modal body:  24px desktop, 16px mobile.                                   */

.dx-modal__body {
	padding: 24px 24px 8px !important;
}

@media (max-width: 480px) {
	.dx-modal__body {
		padding: 16px 16px 8px !important;
	}
}

/* ── v0.3.17: Tablet/mobile form spacing  ────────────────────────────────── */

@media (max-width: 768px) {
	.dx-wizard-card {
		padding: 20px !important;
	}
}

@media (max-width: 480px) {
	.dx-wizard-card {
		padding: 16px !important;
	}
}