/* ------------------------------------------------------------------
   dash.css -- middleware order dashboard

   Everything is scoped under #dashPage so nothing here can reach the
   order list, customer pages or the menu. Colours are defined as
   variables at the top; adjust those to match ysn.css rather than
   hunting through the rules below.
------------------------------------------------------------------ */

#dashPage {
	--dashInk:      #23282d;
	--dashInkSoft:  #6b7280;
	--dashInkFaint: #9aa1a9;
	--dashLine:     #e2e5e9;
	--dashSurface:  #ffffff;
	--dashCanvas:   #f5f6f8;
	--dashOk:       #2f855a;
	--dashOkBg:     #e6f4ec;
	--dashWarn:     #9a6408;
	--dashWarnBg:   #fdf1dc;
	--dashBad:      #a32d2d;
	--dashBadBg:    #fbeaea;
	--dashInfo:     #2c5d86;
	--dashInfoBg:   #e8f1f8;

	max-width: 1180px;
	padding: 10px 20px 60px 0;
	color: var(--dashInk);
	font-size: 13px;
}

/* --- header ----------------------------------------------------- */

#dashPage .dashHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

#dashPage .dashHead h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
}

#dashPage .dashRefresh {
	font-size: 12px;
	padding: 0 14px;
	height: 26px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- cards ------------------------------------------------------ */

#dashPage .dashCard {
	background: var(--dashSurface);
	border: 1px solid var(--dashLine);
	border-radius: 6px;
	padding: 12px 16px 14px;
	margin-bottom: 14px;
}

#dashPage .dashCardTitle {
	font-size: 12px;
	font-weight: 500;
	color: var(--dashInkSoft);
	margin-bottom: 10px;
}

#dashPage .dashSub {
	font-weight: 400;
	color: var(--dashInkFaint);
	margin-left: 6px;
}

#dashPage .dashCols {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

#dashPage .dashCol {
	flex: 1 1 0;
	min-width: 0;
}

/* --- KPI tiles --------------------------------------------------- */

#dashPage .dashKpiRow {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
}

#dashPage .dashKpi {
	flex: 1 1 0;
	background: var(--dashCanvas);
	border-radius: 6px;
	padding: 12px 14px;
	min-width: 0;
}

#dashPage .dashKpiLbl {
	font-size: 12px;
	color: var(--dashInkSoft);
	margin-bottom: 4px;
}

#dashPage .dashKpiVal {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
}

#dashPage .dashDelta {
	font-size: 11px;
	margin-top: 4px;
}

#dashPage .dashDelta.up   { color: var(--dashOk); }
#dashPage .dashDelta.down { color: var(--dashBad); }
#dashPage .dashDelta.flat { color: var(--dashInkFaint); }

/* --- feed health chips ------------------------------------------- */

#dashPage .dashChips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#dashPage .dashChip {
	border-radius: 6px;
	padding: 8px 14px;
	min-width: 130px;
	border: 1px solid transparent;
}

#dashPage .dashChip.ok   { background: var(--dashOkBg);   border-color: #c6e3d3; }
#dashPage .dashChip.warn { background: var(--dashWarnBg); border-color: #f0dcae; }
#dashPage .dashChip.bad  { background: var(--dashBadBg);  border-color: #f0c4c4; }
#dashPage .dashChip.idle { background: var(--dashCanvas); border-color: var(--dashLine); }

#dashPage .dashChipName {
	font-weight: 500;
	font-size: 13px;
	margin-bottom: 2px;
}

#dashPage .dashChip.ok   .dashChipName { color: var(--dashOk); }
#dashPage .dashChip.warn .dashChipName { color: var(--dashWarn); }
#dashPage .dashChip.bad  .dashChipName { color: var(--dashBad); }

#dashPage .dashChipMeta {
	font-size: 11px;
	color: var(--dashInkSoft);
}

#dashPage .dashChipMeta.dim { color: var(--dashInkFaint); }

/* --- tables ------------------------------------------------------ */

#dashPage .dashTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#dashPage .dashTable th {
	text-align: left;
	font-weight: 400;
	font-size: 11px;
	color: var(--dashInkFaint);
	padding: 0 8px 6px 0;
	border-bottom: 1px solid var(--dashLine);
}

#dashPage .dashTable td {
	padding: 5px 8px 5px 0;
	border-bottom: 1px solid #f2f4f6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#dashPage .dashTable tr:last-child td { border-bottom: none; }

#dashPage .dashTable .r     { text-align: right; }
#dashPage .dashTable .dim   { color: var(--dashInkSoft); }
#dashPage .dashTable .warnTxt { color: var(--dashWarn); font-weight: 500; }

#dashPage .dashTable .barCol { width: 90px; padding-right: 0; }

#dashPage .dashMiniBar {
	height: 8px;
	background: #4a7fb5;
	border-radius: 2px;
	opacity: 0.5;
}

/* --- exceptions --------------------------------------------------- */

#dashPage .dashExc {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#dashPage .dashExcItem {
	border-left: 3px solid var(--dashLine);
	padding: 2px 12px;
	min-width: 130px;
}

#dashPage .dashExcItem.warn { border-left-color: #d99b28; }
#dashPage .dashExcItem.info { border-left-color: #6a9cc4; }
#dashPage .dashExcItem.ok   { border-left-color: #cfd6dc; }

#dashPage .dashExcN {
	font-size: 18px;
	font-weight: 500;
}

#dashPage .dashExcItem.ok .dashExcN { color: var(--dashInkFaint); }

#dashPage .dashExcLbl {
	font-size: 11px;
	color: var(--dashInkSoft);
}

/* --- charts ------------------------------------------------------- */

#dashPage .dashChart { width: 100%; }

#dashPage .dashSvg {
	width: 100%;
	height: 230px;
	display: block;
}

#dashPage .dashGrid {
	stroke: var(--dashLine);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

#dashPage .dashAxis {
	fill: var(--dashInkFaint);
	font-size: 10px;
	font-family: inherit;
}

#dashPage .dashLegend {
	margin-top: 8px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

#dashPage .dashLegItem {
	font-size: 11px;
	color: var(--dashInkSoft);
	display: inline-flex;
	align-items: center;
}

#dashPage .dashLegItem i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-right: 5px;
	display: inline-block;
}

/* --- placeholders -------------------------------------------------- */

#dashPage .dashSkel {
	flex: 1 1 0;
	height: 54px;
	background: linear-gradient(90deg, #f0f1f3 25%, #e7e9ec 50%, #f0f1f3 75%);
	background-size: 400% 100%;
	border-radius: 6px;
	animation: dashShimmer 1.3s ease-in-out infinite;
}

@keyframes dashShimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

#dashPage .dashEmpty {
	font-size: 12px;
	color: var(--dashInkFaint);
	padding: 10px 0;
}

/* --- narrow screens -------------------------------------------------- */

@media (max-width: 900px) {
	#dashPage .dashKpiRow { flex-wrap: wrap; }
	#dashPage .dashKpi    { flex: 1 1 45%; }
	#dashPage .dashCols   { flex-direction: column; }
	#dashPage .dashCol    { width: 100%; }
}