/**
 * Dynamix Portal — Portal-specific styles  v0.3.21
 */

/* ── Login page ───────────────────────────────────────────────────────────── */

.dx-login-page {
	min-height:      100vh;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--dx-bg) !important;
	padding:         var(--dx-space-6);
}

.dx-login-box {
	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:     400px;
	box-shadow:    var(--dx-shadow-lg);
}

.dx-login-logo {
	text-align:    center;
	margin-bottom: var(--dx-space-6);
}

.dx-login-logo__name {
	font-family:    var(--dx-font-display) !important;
	font-size:      var(--dx-fs-2xl) !important;
	font-weight:    800 !important;
	color:          var(--dx-accent) !important;
	letter-spacing: -0.02em;
}

.dx-login-logo__tagline {
	font-size: var(--dx-fs-sm) !important;
	color:     var(--dx-text-muted) !important;
}

/* ── Manager: KPI tiles ───────────────────────────────────────────────────── */

.dx-kpi-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   16px !important;
	margin-bottom:         var(--dx-space-8) !important;
}

@media (max-width: 1200px) {
	.dx-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) {
	.dx-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
	.dx-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.dx-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 360px) {
	.dx-kpi-grid { grid-template-columns: 1fr !important; }
}

.dx-kpi-tile {
	background:      var(--dx-surface) !important;
	border:          1px solid var(--dx-border) !important;
	border-radius:   var(--dx-radius-lg) !important;
	padding:         20px !important;
	min-height:      100px !important;
	position:        relative;
	overflow:        hidden;
	display:         flex !important;
	flex-direction:  column !important;
	justify-content: flex-end !important;
}

.dx-kpi-tile::before {
	content:  '';
	position: absolute;
	top:      0; left: 0; right: 0;
	height:   3px;
	background: var(--dx-border) !important;
}

.dx-kpi-tile--primary::before { background: var(--dx-accent) !important; }
.dx-kpi-tile--success::before  { background: var(--dx-success) !important; }
.dx-kpi-tile--warning::before  { background: var(--dx-warning) !important; }
.dx-kpi-tile--danger::before   { background: var(--dx-danger) !important; }

.dx-kpi-tile__val {
	font-family:          var(--dx-font-display) !important;
	font-size:            1.875rem !important;
	font-weight:          800 !important;
	color:                var(--dx-text) !important;
	font-variant-numeric: tabular-nums;
	line-height:          1;
	letter-spacing:       -0.02em;
}

.dx-kpi-tile__lbl {
	font-size:   0.875rem !important;
	color:       var(--dx-text-muted) !important;
	margin-top:  6px !important;
	font-weight: 500 !important;
	line-height: 1.3;
}

.dx-kpi-tile--primary .dx-kpi-tile__val { color: var(--dx-accent) !important; }
.dx-kpi-tile--success .dx-kpi-tile__val { color: var(--dx-success) !important; }
.dx-kpi-tile--warning .dx-kpi-tile__val { color: var(--dx-warning) !important; }
.dx-kpi-tile--danger  .dx-kpi-tile__val { color: var(--dx-danger) !important; }

@media (max-width: 767px) {
	.dx-kpi-tile__val { font-size: 1.625rem !important; }
}
@media (max-width: 480px) {
	.dx-kpi-tile { min-height: 88px !important; padding: 16px !important; }
	.dx-kpi-tile__val { font-size: 1.5rem !important; }
	.dx-kpi-tile__lbl { font-size: 0.75rem !important; margin-top: 4px !important; }
}

/* ── Manager: view header ─────────────────────────────────────────────────── */

.dx-view__header {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	gap:             var(--dx-space-4) !important;
	flex-wrap:       wrap !important;
	padding-bottom:  var(--dx-space-6) !important;
	border-bottom:   1px solid var(--dx-border) !important;
	margin-bottom:   var(--dx-space-8) !important;
}

.dx-view__header h2 {
	margin:      0;
	font-size:   1.75rem !important;
	font-weight: 700 !important;
	color:       var(--dx-text) !important;
	flex:        1;
	line-height: 1.2 !important;
}

.dx-view__header .dx-btn-group,
.dx-view__header .dx-btn {
	flex-shrink: 0 !important;
}

.dx-action-bar {
	display:       flex;
	flex-wrap:     wrap;
	gap:           var(--dx-space-3);
	margin-bottom: var(--dx-space-6);
}

.dx-filter-bar {
	display:       flex;
	flex-wrap:     wrap;
	gap:           var(--dx-space-3) !important;
	margin-bottom: var(--dx-space-6) !important;
	align-items:   center !important;
}

.dx-filter-bar .dx-input,
.dx-filter-bar .dx-select { flex: 1; min-width: 140px; max-width: 220px; }

/* ── Manager: cards ───────────────────────────────────────────────────────── */

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

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

.dx-detail-card h4 {
	margin:        0 0 var(--dx-space-4);
	font-size:     var(--dx-fs-sm) !important;
	font-weight:   600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:         var(--dx-text-muted) !important;
}

/* ── Definition list ──────────────────────────────────────────────────────── */

.dx-dl {
	display:               grid;
	grid-template-columns: auto 1fr;
	gap:                   var(--dx-space-1) var(--dx-space-4);
	margin:                0;
}

.dx-dl dt {
	font-size:  var(--dx-fs-xs) !important;
	color:      var(--dx-text-dim) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	align-self: start;
	padding-top: 2px;
}

.dx-dl dd {
	margin:      0;
	font-size:   var(--dx-fs-sm) !important;
	color:       var(--dx-text) !important;
	font-weight: 500;
}

/* ── Section ──────────────────────────────────────────────────────────────── */

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

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

.dx-section h4 {
	margin:      0 0 var(--dx-space-4);
	font-size:   var(--dx-fs-sm) !important;
	font-weight: 600 !important;
	color:       var(--dx-text) !important;
}

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

.dx-form { display: flex; flex-direction: column; gap: var(--dx-space-4); }
.dx-form--narrow { max-width: 520px; }

.dx-form-row {
	display:  flex;
	flex-wrap: wrap;
	gap:      var(--dx-space-4);
}
.dx-form-row .dx-label { flex: 1 1 200px; }

.dx-form--inline {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--dx-space-3);
	align-items: flex-end;
}

.dx-form__actions {
	display:     flex;
	gap:         var(--dx-space-3);
	padding-top: var(--dx-space-2);
}

.dx-label {
	display:        flex;
	flex-direction: column;
	gap:            var(--dx-space-1);
	font-size:      var(--dx-fs-sm) !important;
	font-weight:    500 !important;
	color:          var(--dx-text) !important;
}

.dx-label em { color: var(--dx-danger) !important; font-style: normal; }

.dx-label--cb {
	flex-direction: row;
	align-items:    center;
	gap:            var(--dx-space-2);
	font-weight:    400;
	cursor:         pointer;
}

.dx-fieldset {
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius);
	padding:       var(--dx-space-4);
	display:       flex;
	flex-direction: column;
	gap:           var(--dx-space-3);
}

.dx-fieldset legend {
	padding:        0 var(--dx-space-2);
	font-size:      var(--dx-fs-xs) !important;
	font-weight:    600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--dx-text-muted) !important;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.dx-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--dx-space-3);
	padding:         var(--dx-space-4) 0;
	font-size:       var(--dx-fs-sm) !important;
	color:           var(--dx-text-muted) !important;
}

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

.dx-cal-nav {
	display:     flex;
	align-items: center;
	gap:         var(--dx-space-3);
	font-size:   var(--dx-fs-sm) !important;
	color:       var(--dx-text-muted) !important;
	margin-left: auto;
}

.dx-cal-table {
	width:        100%;
	min-width:    640px;
	table-layout: fixed;
}

.dx-cal-cell {
	vertical-align: top;
	padding:        var(--dx-space-2);
	min-height:     80px;
	border:         1px solid var(--dx-border) !important;
}

.dx-cal-evt {
	background:    rgba(34,211,238,.12) !important;
	border-left:   3px solid var(--dx-accent) !important;
	border-radius: var(--dx-radius-sm);
	padding:       2px var(--dx-space-2);
	font-size:     var(--dx-fs-xs) !important;
	font-weight:   500;
	color:         var(--dx-text) !important;
	margin-bottom: var(--dx-space-1);
	cursor:        pointer;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.dx-cal-evt:hover { background: rgba(34,211,238,.22) !important; }

.dx-cal-time {
	font-size:  var(--dx-fs-xs) !important;
	color:      var(--dx-text-dim) !important;
	text-align: center;
	vertical-align: middle;
}

/* ── Diagnostics ──────────────────────────────────────────────────────────── */

.dx-checks { display: flex; flex-direction: column; gap: var(--dx-space-3); }

.dx-check {
	background:    var(--dx-surface) !important;
	border:        1px solid var(--dx-border) !important;
	border-radius: var(--dx-radius);
	padding:       var(--dx-space-3) var(--dx-space-4);
	display:       flex;
	flex-direction: column;
	gap:           var(--dx-space-2);
}

.dx-details summary {
	cursor:     pointer;
	font-size:  var(--dx-fs-xs) !important;
	color:      var(--dx-text-muted) !important;
	user-select: none;
}

.dx-details[open] summary { margin-bottom: var(--dx-space-2); }

/* ── Responsive util ──────────────────────────────────────────────────────── */

.dx-hide-mobile { display: block; }
.dx-show-mobile { display: none; }

@media (max-width: 768px) {
	.dx-hide-mobile { display: none; }
	.dx-show-mobile { display: block; }
}

/* ── Detail panel ─────────────────────────────────────────────────────────── */

.dx-detail {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--dx-space-6);
	align-items: start;
}

@media (max-width: 1024px) {
	.dx-detail { grid-template-columns: 1fr; }
}

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

.dx-meta-item__label {
	font-size:      var(--dx-fs-xs) !important;
	color:          var(--dx-text-dim) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom:  var(--dx-space-1);
}

.dx-meta-item__value {
	font-size:   var(--dx-fs-sm) !important;
	color:       var(--dx-text) !important;
	font-weight: 500;
}

/* ── Photo grid ───────────────────────────────────────────────────────────── */

.dx-photo-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap:                   var(--dx-space-3);
}

.dx-photo-card {
	aspect-ratio:  4/3;
	border-radius: var(--dx-radius);
	overflow:      hidden;
	border:        1px solid var(--dx-border) !important;
	cursor:        pointer;
	position:      relative;
}

.dx-photo-card img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 200ms ease;
}

.dx-photo-card:hover img { transform: scale(1.04); }

.dx-photo-card__badge {
	position:      absolute;
	top:           var(--dx-space-2);
	right:         var(--dx-space-2);
	background:    rgba(0,0,0,.7) !important;
	color:         var(--dx-text-muted) !important;
	font-size:     var(--dx-fs-xs) !important;
	padding:       2px 6px;
	border-radius: var(--dx-radius-sm);
}

/* ── Order row ────────────────────────────────────────────────────────────── */

.dx-order-row { cursor: pointer; }
.dx-order-row:hover td { background: rgba(34,211,238,.04) !important; }

.dx-order-number {
	font-family:          var(--dx-font-display) !important;
	font-size:            var(--dx-fs-sm) !important;
	font-weight:          600 !important;
	color:                var(--dx-accent) !important;
	font-variant-numeric: tabular-nums;
}

/* ── Mobile action bar ────────────────────────────────────────────────────── */

.dx-mobile-actions {
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	background: var(--dx-surface) !important;
	border-top: 1px solid var(--dx-border) !important;
	padding:    var(--dx-space-4) var(--dx-space-6);
	display:    flex;
	gap:        var(--dx-space-3);
	z-index:    var(--dx-z-sticky);
}

@media (min-width: 769px) {
	.dx-mobile-actions { display: none; }
}

/* ── Dropzone ─────────────────────────────────────────────────────────────── */

.dx-dropzone {
	border:        2px dashed var(--dx-border) !important;
	border-radius: var(--dx-radius-lg);
	padding:       var(--dx-space-8);
	text-align:    center;
	cursor:        pointer;
	transition:    border-color 150ms, background 150ms;
}

.dx-dropzone:hover,
.dx-dropzone.is-dragover {
	border-color: var(--dx-accent) !important;
	background:   rgba(34,211,238,.04) !important;
}

/* ── Dashboard grid ───────────────────────────────────────────────────────── */

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

/* ── "Letzte Aufträge" section heading ────────────────────────────────────── */

.dx-section-title,
.dx-main h3 {
	font-size:   var(--dx-fs-lg) !important;
	font-weight: 600 !important;
	color:       var(--dx-text) !important;
	margin:      0 0 var(--dx-space-4) !important;
}

/* ── Clickable KPI tiles (v0.3.20) ──────────────────────────────────────── */

.dx-kpi-tile--link {
	cursor:     pointer !important;
	transition: transform 120ms ease, box-shadow 120ms ease;
	user-select: none;
}

.dx-kpi-tile--link:hover {
	transform:  translateY(-2px);
	box-shadow: 0 4px 20px rgba(0,0,0,.14) !important;
}

.dx-kpi-tile--link:focus-visible {
	outline:        2px solid var(--dx-accent) !important;
	outline-offset: 3px;
}

.dx-kpi-tile--link:active {
	transform:           scale(0.975);
	transition-duration: 60ms;
}

/* ── Action group — button clusters with consistent gap (v0.3.20) ─────── */

.dx-action-group {
	display:     flex !important;
	align-items: center !important;
	flex-wrap:   wrap !important;
	gap:         10px !important;
}

/* ── Table horizontal scroll wrapper (v0.3.20) ───────────────────────── */

.dx-table-scroll {
	overflow-x:                auto !important;
	overflow-y:                visible;
	-webkit-overflow-scrolling: touch;
	width:                     100%;
}

.dx-table-scroll .dx-table,
.dx-table-scroll .dx-table--sm {
	margin-bottom: 0;
}

/* Minimum widths prevent column crushing on narrow viewports */
.dx-table     { min-width: 560px; }
.dx-table--sm { min-width: 320px; }

/* ── Active filter indicator (v0.3.20) ───────────────────────────────── */

.dx-filter-active {
	display:       flex !important;
	align-items:   center !important;
	gap:           8px !important;
	flex-wrap:     wrap !important;
	margin-bottom: var(--dx-space-4) !important;
	font-size:     var(--dx-fs-sm) !important;
	color:         var(--dx-text-muted) !important;
}

.dx-filter-chip {
	display:       inline-flex !important;
	align-items:   center !important;
	gap:           6px !important;
	background:    var(--dx-accent) !important;
	color:         #fff !important;
	border-radius: 999px !important;
	padding:       3px 12px !important;
	font-size:     0.75rem !important;
	font-weight:   600 !important;
	line-height:   1.6;
}