/**
 * Moot premium colour theme — site-wide portal chrome.
 * Teal brand (#0f766e). Status/chart colours (amber/purple/blue/green) preserved.
 */

:root {
	/* Brand chrome (was lime/purple) */
	--moot-lime: #0f766e;
	--moot-lime-dark: #0b5f59;
	--moot-lime-soft: rgba(15, 118, 110, 0.12);
	--moot-lime-muted: rgba(15, 118, 110, 0.28);
	--moot-lime-glow: rgba(15, 118, 110, 0.28);
	/* Status purple kept for charts / confirmed */
	--moot-purple: #7c3aed;
	--moot-purple-dark: #6d28d9;
	--moot-purple-soft: rgba(124, 58, 237, 0.12);
	/* Nav / chrome accent */
	--moot-brand: #0f766e;
	--moot-brand-dark: #0b5f59;
	--moot-brand-soft: #e6f4f3;
	--moot-teal: #0f766e;
	--moot-teal-soft: rgba(15, 118, 110, 0.12);
	--moot-blue: #2563eb;
	--moot-blue-soft: rgba(37, 99, 235, 0.12);
	--moot-bg: #f4f6f8;
	--moot-bg-elevated: #eef2f5;
	--moot-card: #ffffff;
	--moot-text: #0f172a;
	--moot-text-secondary: #475569;
	--moot-text-muted: #64748b;
	--moot-border: #e2e8f0;
	--moot-success: #16a34a;
	--moot-success-soft: rgba(22, 163, 74, 0.12);
	--moot-warning: #f59e0b;
	--moot-warning-soft: rgba(245, 158, 11, 0.14);
	--moot-error: #ef4444;
	--moot-gradient-lime: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
	--moot-gradient-lime-deep: linear-gradient(180deg, #0f766e 0%, #0b5f59 100%);
	--moot-gradient-purple: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
	--moot-gradient-page: #f4f6f8;
}

/* --------------------------------------------------------------------------
   Portal shell (.dash-app) + shipments + send
   -------------------------------------------------------------------------- */

.dash-app,
#moot-shipments-app,
.moot-send-page,
.fs-page {
	--page-bg: var(--moot-bg);
	--card-bg: var(--moot-card);
	--card-soft: var(--moot-bg-elevated);
	--text: var(--moot-text);
	--muted: var(--moot-text-muted);
	--border: var(--moot-border);
	--blue: var(--moot-blue);
	--blue-soft: var(--moot-blue-soft);
	--green: var(--moot-success);
	--green-soft: var(--moot-success-soft);
	--amber: var(--moot-warning);
	--amber-soft: var(--moot-warning-soft);
	--purple: var(--moot-purple);
	--purple-soft: var(--moot-purple-soft);
	--dash-bg: var(--moot-bg);
	--dash-surface: var(--moot-card);
	--dash-border: var(--moot-border);
	--dash-green: var(--moot-success);
	--dash-amber: var(--moot-warning);
	--text-primary: var(--moot-text);
	--text-secondary: var(--moot-text-secondary);
	--text-muted: var(--moot-text-muted);
	--accent: var(--moot-brand);
	--accent-hover: var(--moot-brand-dark);
	--accent-text: #ffffff;
	--bg-elevated: var(--moot-card);
	--ship-bg: var(--moot-bg);
	--ship-panel: var(--moot-card);
	--ship-panel2: var(--moot-bg-elevated);
	--ship-border: var(--moot-border);
	--ship-text: var(--moot-text);
	--ship-muted: var(--moot-text-muted);
	--ship-blue: var(--moot-blue);
	--ship-green: var(--moot-success);
	--ship-amber: var(--moot-warning);
	--ship-purple: var(--moot-purple);
	--send-accent: var(--moot-brand);
	--send-text: var(--moot-text);
	--send-muted: var(--moot-text-muted);
	--send-border: var(--moot-border);
	--send-border-focus: var(--moot-lime-muted);
	--send-glow: 0 0 0 4px var(--moot-lime-soft);
	--fs-accent: var(--moot-brand);
	--fs-accent-soft: var(--moot-brand-soft);
	--fs-accent-border: var(--moot-lime-muted);
	--fs-bg: var(--moot-bg);
	--fs-surface: var(--moot-card);
	--fs-border: #e2e8f0;
	--fs-text: var(--moot-text);
	--fs-muted: var(--moot-text-muted);
	color: var(--moot-text);
}

.dash-app,
#moot-shipments-app,
.moot-send-page {
	background: var(--moot-bg) !important;
}

.fs-page {
	background: var(--moot-bg) !important;
}

body.moot-send-freight-layout,
body.moot-send-freight-layout #main-content.site-main {
	background: var(--moot-bg) !important;
	color: var(--moot-text) !important;
}

.dash-app .dash-nav__link:hover,
.dash-app .dash-nav__link.is-active,
#moot-shipments-app .dash-nav__link:hover,
#moot-shipments-app .dash-nav__link.is-active,
.moot-send-page .dash-nav__link:hover,
.moot-send-page .dash-nav__link.is-active,
.moot-portal-page .moot-portal-sidebar .dash-nav__link.is-active,
.moot-app-shell .dash-nav__link:hover,
.moot-app-shell .dash-nav__link.is-active {
	color: var(--moot-brand) !important;
	background: var(--moot-brand-soft) !important;
	border-color: rgba(15, 118, 110, 0.18) !important;
	box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.06) !important;
}

.dash-app .dash-nav__chevron,
.dash-app .dash-help:hover,
.dash-app .dash-logo,
.dash-app .dash-logo__icon {
	color: var(--moot-brand);
}

.dash-app .dash-badge {
	background: var(--moot-brand);
	color: #ffffff;
	box-shadow: 0 10px 20px var(--moot-lime-glow);
}

.dash-app .dash-sidebar__cta,
.dash-app .dash-topbar__cta,
.moot-portal-page.moot-portal--business_shipper .dash-sidebar__cta,
.moot-portal-page.moot-portal--personal_sender .dash-sidebar__cta,
.moot-portal-page.moot-portal--driver .dash-sidebar__cta,
#moot-shipments-app .shipments-create-btn,
#moot-shipments-app .shipments-primary-link,
#moot-shipments-app .ship-detail-btn,
.moot-send-page .send-cta,
.moot-send-page .btn--primary,
.moot-send-page button.btn-primary,
.fs-page .fs-btn--primary,
.fs-page .fs-cta,
.dash-app .btn--primary,
.dash-app .dash-empty .btn--primary,
.dash-app .dash-review-prompt__btn {
	background: var(--moot-brand) !important;
	border-color: var(--moot-brand) !important;
	color: #ffffff !important;
	box-shadow: 0 12px 28px var(--moot-lime-glow) !important;
}

.dash-app .dash-sidebar__cta:hover,
.dash-app .dash-topbar__cta:hover,
#moot-shipments-app .shipments-create-btn:hover,
#moot-shipments-app .shipments-primary-link:hover,
#moot-shipments-app .ship-detail-btn:hover,
.dash-app .btn--primary:hover,
.dash-app .dash-review-prompt__btn:hover,
.fs-page .fs-btn--primary:hover {
	background: var(--moot-brand-dark) !important;
	border-color: var(--moot-brand-dark) !important;
	color: #ffffff !important;
}

.dash-app .dash-interest-toast {
	border-color: rgba(15, 118, 110, 0.22);
}

.dash-app .dash-interest-toast__icon {
	background: var(--moot-brand);
	color: #ffffff;
}

.dash-app .dash-topbar {
	background: rgba(244, 246, 248, 0.9);
}

/* Keep informational transit blues, but tint success greens to driver success */
.dash-app .dash-dot--green,
.shipment-kpi-card--completed .shipment-kpi-card__icon {
	background: var(--moot-success-soft);
	color: var(--moot-success);
}

/* --------------------------------------------------------------------------
   Freight company portal
   -------------------------------------------------------------------------- */

.moot-freight-app {
	--freight-bg: var(--moot-bg);
	--freight-surface: var(--moot-card);
	--freight-border: var(--moot-border);
	--freight-text: var(--moot-text);
	--freight-muted: var(--moot-text-muted);
	--freight-blue: var(--moot-brand);
	--freight-blue-soft: var(--moot-brand-soft);
	--freight-green: var(--moot-success);
	--freight-green-soft: var(--moot-success-soft);
	--freight-amber: var(--moot-warning);
	--freight-amber-soft: var(--moot-warning-soft);
	--freight-violet-soft: var(--moot-purple-soft);
	background: var(--moot-bg);
	color: var(--moot-text);
}

.moot-freight-app .freight-logo__mark,
.moot-freight-app .freight-nav__link.is-active .freight-nav__icon,
.moot-freight-app .fd-kpi-card__icon--blue {
	background: var(--moot-brand-soft) !important;
	color: var(--moot-brand-dark) !important;
	border-color: rgba(15, 118, 110, 0.18);
}

.moot-freight-app .freight-nav__link.is-active {
	color: var(--moot-brand) !important;
	background: var(--moot-brand-soft) !important;
	box-shadow: inset 3px 0 0 var(--moot-brand);
}

.moot-freight-app .freight-btn--primary,
.moot-freight-app .freight-sidebar__cta,
.moot-freight-app a.freight-btn--primary {
	background: var(--moot-brand) !important;
	border-color: var(--moot-brand) !important;
	color: #ffffff !important;
	box-shadow: 0 12px 28px var(--moot-lime-glow);
}

.moot-freight-app .freight-btn--primary:hover {
	background: var(--moot-brand-dark) !important;
	color: #ffffff !important;
}

.moot-freight-app .freight-user-menu__avatar,
.moot-freight-app .fd-match-badge,
.moot-freight-app .freight-kpi-card--blue .freight-kpi-card__icon {
	background: var(--moot-brand-soft) !important;
	color: var(--moot-brand-dark) !important;
}

.moot-freight-app .fo-map__marker-dot {
	background: var(--moot-brand) !important;
	box-shadow: 0 2px 8px var(--moot-lime-glow) !important;
}

.moot-freight-app .fo-map__route-line {
	background: linear-gradient(90deg, var(--moot-brand), #14b8a6) !important;
}

.moot-freight-app .freight-btn--ghost:hover,
.dash-app .shipment-card__details-btn--secondary:hover {
	border-color: rgba(15, 118, 110, 0.28);
	color: var(--moot-brand);
}