/**
 * Moot clean icon + chrome unification.
 * Brings nav, KPI, utility and avatar icons into the teal brand.
 * Chart segment colours stay as status colours.
 */

:root {
	--moot-icon: #0f766e;
	--moot-icon-muted: #94a3b8;
	--moot-icon-ink: #475569;
	--moot-icon-well: #e6f4f3;
	--moot-icon-well-soft: #f0f7f6;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.dash-logo,
.dash-logo:hover,
.dash-logo__icon,
.moot-brand-logo,
.moot-app-shell .dash-logo {
	color: var(--moot-icon) !important;
}

.dash-logo .moot-brand-logo__img,
.dash-logo img,
.moot-brand-logo__img {
	filter: none;
}

/* If logo asset is blue-tinted, gently pull toward brand */
.dash-sidebar .dash-logo img,
.dash-sidebar .moot-brand-logo__img {
	filter: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(900%) hue-rotate(140deg) brightness(0.95);
}

/* --------------------------------------------------------------------------
   Sidebar / nav icons
   -------------------------------------------------------------------------- */

.dash-nav__link,
.moot-app-shell .dash-nav__link,
.moot-portal-sidebar .dash-nav__link {
	color: var(--moot-icon-ink);
}

.dash-nav__link svg,
.moot-app-shell .dash-nav__link svg,
.moot-portal-sidebar .dash-nav__link svg {
	stroke: currentColor !important;
	color: inherit !important;
	opacity: 0.92;
}

.dash-nav__link:hover,
.dash-nav__link.is-active,
.moot-app-shell .dash-nav__link:hover,
.moot-app-shell .dash-nav__link.is-active,
.moot-portal-sidebar .dash-nav__link:hover,
.moot-portal-sidebar .dash-nav__link.is-active {
	color: var(--moot-icon) !important;
}

.dash-nav__link:hover svg,
.dash-nav__link.is-active svg,
.moot-app-shell .dash-nav__link:hover svg,
.moot-app-shell .dash-nav__link.is-active svg,
.moot-portal-sidebar .dash-nav__link:hover svg,
.moot-portal-sidebar .dash-nav__link.is-active svg {
	stroke: var(--moot-icon) !important;
	color: var(--moot-icon) !important;
	opacity: 1;
}

.dash-nav__link.is-active .dash-nav__link-sub {
	color: #5b8a85 !important;
}

/* --------------------------------------------------------------------------
   Topbar utility icons
   -------------------------------------------------------------------------- */

.dash-icon-btn,
.dash-search svg,
.dash-period svg,
.shipments-search svg {
	color: var(--moot-icon-ink) !important;
	stroke: currentColor;
}

.dash-icon-btn:hover,
.dash-user-menu:hover,
.dash-period:hover {
	color: var(--moot-icon) !important;
	border-color: rgba(15, 118, 110, 0.28) !important;
}

.dash-icon-btn:hover svg {
	color: var(--moot-icon) !important;
	stroke: var(--moot-icon) !important;
}

.dash-search:focus-within {
	border-color: rgba(15, 118, 110, 0.35) !important;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

/* --------------------------------------------------------------------------
   Avatars — teal instead of blue
   -------------------------------------------------------------------------- */

.dash-profile-card__avatar,
.dash-user-menu__avatar,
.shipments-user-wrap .dash-user-menu__avatar {
	background: linear-gradient(135deg, #5eead4, #0f766e) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22) !important;
}

/* --------------------------------------------------------------------------
   KPI icons — plain teal icons only (no square wells / boxes)
   -------------------------------------------------------------------------- */

.dash-kpi__icon,
.shipment-kpi-card__icon,
#moot-dashboard .dash-kpi__icon,
.dash-kpi--total .dash-kpi__icon,
.dash-kpi--pending .dash-kpi__icon,
.dash-kpi--assigned .dash-kpi__icon,
.dash-kpi--transit .dash-kpi__icon,
.dash-kpi--completed .dash-kpi__icon,
.dash-kpi--spend .dash-kpi__icon,
.shipment-kpi-card--pending .shipment-kpi-card__icon,
.shipment-kpi-card--assigned .shipment-kpi-card__icon,
.shipment-kpi-card--completed .shipment-kpi-card__icon {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	width: 24px !important;
	height: 24px !important;
	color: var(--moot-icon) !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.dash-kpi__icon svg,
.shipment-kpi-card__icon svg,
#moot-dashboard .dash-kpi__icon svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor !important;
	fill: none !important;
	color: var(--moot-icon) !important;
}

/* Hide legacy PNG icons if any remain */
.dash-kpi__icon img,
.shipment-kpi-card__icon img,
#moot-dashboard .dash-kpi__icon img {
	display: none !important;
}

/* Delivery Activity legend — icons, not dots/boxes */
.dash-map-legend--icons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: center;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.dash-map-legend--icons li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #475569;
}

.dash-map-legend--icons .dash-map-legend__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--moot-icon);
}

.dash-map-legend--icons .dash-map-legend__icon svg {
	display: block;
	stroke: currentColor;
}

.dash-map-legend--icons strong {
	color: #0f172a;
	font-weight: 700;
}

/* Rate your drivers — light teal panel */
.dash-review-prompt {
	background: #e6f4f3 !important;
	border-color: rgba(15, 118, 110, 0.16) !important;
	box-shadow: 0 8px 22px rgba(15, 118, 110, 0.06) !important;
}

.dash-review-prompt__icon {
	background: transparent !important;
	color: #0f766e !important;
	border-radius: 0 !important;
}

.dash-review-prompt__item {
	background: #ffffff !important;
	border-color: rgba(15, 118, 110, 0.12) !important;
}

.dash-review-prompt__btn {
	background: #0f766e !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22) !important;
}

.dash-review-prompt__link {
	color: #0f766e !important;
}

/* --------------------------------------------------------------------------
   Sustainability / impact / performance icons
   -------------------------------------------------------------------------- */

.dash-impact__icon,
.dash-impact__icon--green,
.dash-perf-item__icon {
	background: var(--moot-icon-well) !important;
	color: var(--moot-icon) !important;
}

.dash-impact__icon svg,
.dash-perf-item__icon svg {
	stroke: currentColor !important;
	color: var(--moot-icon) !important;
}

.dash-card__link,
.dash-period-btn,
.dash-table a,
.shipment-card a,
.cp-table a {
	color: var(--moot-icon) !important;
}

.dash-period-btn {
	background: var(--moot-icon-well) !important;
	border-color: rgba(15, 118, 110, 0.14) !important;
}

.dash-period-btn:hover {
	background: #d9f3f0 !important;
}

/* --------------------------------------------------------------------------
   Cards — flatter, cleaner
   -------------------------------------------------------------------------- */

.dash-kpi,
#moot-dashboard .dash-kpi,
.shipment-kpi-card {
	background: #ffffff !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

#moot-dashboard .dash-kpi {
	background: #ffffff !important;
}

.dash-card,
#moot-dashboard .dash-card {
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* --------------------------------------------------------------------------
   Settings / bulk / messages icon accents
   -------------------------------------------------------------------------- */

.settings-menu__btn svg,
.moot-bulk-template-card__icon,
.moot-bulk-template-card__icon svg {
	color: var(--moot-icon) !important;
	stroke: currentColor !important;
}

.settings-menu__btn.is-active,
.settings-menu__btn[aria-current='true'] {
	color: var(--moot-icon) !important;
	background: var(--moot-icon-well) !important;
}

.settings-menu__btn.is-active svg,
.settings-menu__btn[aria-current='true'] svg {
	color: var(--moot-icon) !important;
	stroke: var(--moot-icon) !important;
}

/* --------------------------------------------------------------------------
   Freight nav icons
   -------------------------------------------------------------------------- */

.moot-freight-app .freight-nav__link .freight-nav__icon,
.moot-freight-app .freight-nav__icon {
	color: var(--moot-icon-ink);
}

.moot-freight-app .freight-nav__link.is-active .freight-nav__icon {
	background: var(--moot-icon-well) !important;
	color: var(--moot-icon) !important;
}

/* --------------------------------------------------------------------------
   Homepage icon accents
   -------------------------------------------------------------------------- */

body.moot-front-page .moot-home-v2 svg[stroke],
body.moot-front-page .p01-hero__feature-icon,
body.moot-front-page .p01-hero__glass-icon {
	color: var(--moot-icon);
}