/* Tool14 – Modern Encore-inspired skin
   Drop-in replacement for /wwwroot/css/tool14.css
   Works on top of Bootstrap 5 with subtle overrides only. */

/* =============================
   Color System
   Centralized design tokens, new palette
   ============================= */
:root {
	/* ========================================
	   New Design Tokens, active target system
	   ======================================== */
	/* Primary brand colors */
	--color-primary: #5B3CC4;
	--color-primary-dark: #4D33A8;
	--color-primary-light: #EFEAFE;
	--color-primary-ghost: #FAF8FF;
	--color-header-bg: #EFEAFE;
	/* Neutral UI colors */
	--color-bg: #FFFFFF;
	--color-bg-soft: #F8F9FB;
	--color-border: #E3E6EB;
	--color-text: #1F2937;
	--color-text-muted: #6B7280;
	/*Primary GOLD for true warnign status and special contracts buttons*/
	--color-accent-gold: #F2B705;
	--color-accent-gold-dark: #D99A00;
	--color-accent-gold-light: #FFF4CC;
	/* Status color system */
	--status-unmapped-light: #F6E6E7;
	--status-unmapped: #E47C82;
	--status-unmapped-text: #8E3C41;
	--status-update-light: #FBF2EB;
	--status-update: #EFBF9B;
	--status-update-text: #6B5545;
	--status-pending-light: #FBF7ED;
	--status-pending: #EFDBA9;
	--status-pending-text: #6B624C;
	--status-suggested-light: #ECF0F9;
	--status-suggested: #A2B7E1;
	--status-suggested-text: #485265;
	--status-valid-light: #EEF6EF;
	--status-valid: #AAD5B3;
	--status-valid-text: #4C5F50;
	--status-excluded-light: #F3F3F4;
	--status-excluded: #C3C6CA;
	--status-excluded-text: #57595A;
	
	/* Non-color design tokens, still active */
	--t14-radius: 10px;
	--t14-radius-sm: 8px;
	--t14-shadow: 0 8px 20px rgba(26, 28, 38, 0.06);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-control, .form-control-sm {
	border-color: var(--color-border);
	border-radius: 6px;
}

/* Base layout */
html, body {
	background: var(--color-bg-soft);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* ========================================
   Matrix Review page layout and styles
   ======================================== */
.mr-shell { max-width: 1320px; margin: 0 auto; padding: 0; }
.mr-lockout { padding: 1.5rem 0; }
.mr-alert-warning { padding: 0.75rem 1rem; border: 1px solid #ffc107; border-radius: 8px; background: #fff3cd; color: #664d03; margin-bottom: 1rem; }

.mr-cols { display: flex; gap: 1.5rem; }
.mr-col-left { flex: 0 0 66.667%; max-width: 66.667%; min-width: 0; }
.mr-col-right { flex: 0 0 33.333%; max-width: 33.333%; min-width: 0; }

@media (max-width: 991px) {
    .mr-cols { flex-direction: column; }
    .mr-col-left, .mr-col-right { flex: 0 0 100%; max-width: 100%; }
}

.mx-review-shell {
    height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mx-workspace { flex: 1; min-height: 0; }
.mx-workspace > .mr-cols { height: 100%; margin-top: 0 !important; }

.mx-left,
.mx-right {
    height: 100%;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg);
}

.mx-table-wrap { overflow: auto; }

.mx-top-sticky { position: sticky; top: 0; z-index: 50; background: transparent; padding-top: 0; }

.mx-dashboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--color-bg);
}

.mx-dash-left,
.mx-dash-right,
.mx-metrics { display: flex; align-items: center; gap: 8px; min-width: 0; }

.mx-dash-title .h5 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mx-dash-btn { padding: 4px 18px; font-size: 13px; font-weight: 600; height: 32px; min-width: 160px; }

.mx-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0,0,0,.10);
    background: #f8f9fa;
    border-radius: 999px;
    padding: 2px 8px;
}

.mx-metric .lbl { font-size: 12px; color: rgba(0,0,0,.55); white-space: nowrap; }
.mx-metric .num { font-size: 14px; font-weight: 700; line-height: 1; }

#grid { table-layout: fixed; }

#grid thead th {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
    height: 38px;
    vertical-align: middle;
}

#grid .mx-source-col { width: 39%; }
#grid .mx-map-col { width: 38%; }
#grid .mx-action-col { width: 23%; min-width: 190px; }

.mx-row-action-cell { white-space: nowrap; text-align: right; }

.mx-row-action-host {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(86px, max-content));
    justify-content: end;
    justify-items: stretch;
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
    width: 100%;
}

.mx-row-action-btn,
.mx-commit-btn,
.mx-edit-row-btn {
    height: 24px;
    min-width: 86px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
    justify-content: center;
}

.btn-t14.mx-btn-accept {
	background: transparent;
	border: 1px solid var(--status-valid);
	color: var(--status-valid-text);
}
.btn-t14.mx-btn-accept-active {
	background: var(--status-valid);
	border: 1px solid var(--status-valid);
	color: var(--status-valid-text);
}
.btn-t14.mx-btn-reject {
	background: transparent;
	border: 1px solid var(--status-unmapped);
	color: var(--status-unmapped-text);
}
.btn-t14.mx-btn-reject-active {
	background: var(--status-unmapped);
	border: 1px solid var(--status-unmapped);
	color: var(--status-unmapped-text);
}
.btn-t14.mx-btn-consult {
	background: transparent;
	border: 1px solid var(--status-pending);
	color: var(--status-pending-text);
}
.btn-t14.mx-btn-consult-active {
	background: var(--status-pending);
	border: 1px solid var(--status-pending);
	color: var(--status-pending-text);
}
.btn-t14.mx-btn-exclude {
	background: transparent;
	border: 1px solid var(--status-excluded);
	color: var(--status-excluded-text);
}
.btn-t14.mx-btn-exclude-active {
	background: var(--status-excluded);
	border: 1px solid var(--status-excluded);
	color: var(--status-excluded-text);
}

.mx-row-action-btn-inactive {
    background: var(--color-bg-soft) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
    filter: none !important;
}

.mx-completed-status-chip { justify-self: end; }
.mx-row-pending td { background: rgba(91, 60, 196, 0.03); }
.mx-row-committing td { opacity: 0; transition: opacity 140ms ease; }
.mx-row-active td { background: rgba(92, 76, 190, 0.04); }

.mx-section-main-cell { padding: 0 !important; }
.mx-section-count-cell { padding: 4px 10px !important; background: var(--color-bg-soft) !important; text-align: left; vertical-align: middle; }
.mx-section-action-cell { padding: 4px 10px !important; background: var(--color-bg-soft) !important; text-align: right; vertical-align: middle; }

.mx-commit-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.mx-section-finishing { opacity: .55; transition: opacity 160ms ease; }
.mx-section-entering { transition: transform 220ms ease, opacity 220ms ease; }

.mx-section-title-wrap { display: inline-flex; flex-direction: column; gap: 2px; }
.mx-section-title-text { line-height: 1.1; }
.mx-section-title-help { font-size: 11px; font-weight: 500; color: var(--color-text-muted); line-height: 1.2; }
.mx-section-complete-msg { font-size: 11px; font-weight: 600; color: var(--status-valid-text); white-space: nowrap; }

.mx-filter-hidden,
.mx-section-hidden { display: none !important; }

.mx-right .hdr {
    padding: 6px 6px;
    height: 32px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mx-right .body {
    padding: 10px 12px;
    overflow: auto;
    min-height: 0;
    max-height: calc(100vh - 220px);
}

.mx-encore-hdr-title { font-weight: 700; line-height: 1.2; margin: 0; }

.mx-encore-hdr-main,
.mx-encore-hdr-search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.mx-encore-search-wrap { flex: 1; min-width: 0; }

.ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: .22rem .5rem .15rem .65rem;
    color: rgba(0,0,0,.28);
    pointer-events: none;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
}

.ghost-typed { visibility: hidden; }
.ghost-suggestion { opacity: 1; }
.map-input[readonly] { background: #f8f9fa; cursor: default; }

.d-none { display: none !important; }
.font-monospace { font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; }

.list-group { display: flex; flex-direction: column; padding: 0; margin: 0; }
.list-group-item { padding: 0.45rem 0.75rem; border: 1px solid var(--color-border); border-top: none; background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; line-height: 1.4; }
.list-group-item:first-child { border-top: 1px solid var(--color-border); border-radius: 6px 6px 0 0; }
.list-group-item:last-child { border-radius: 0 0 6px 6px; }
.list-group-item-action { cursor: pointer; text-align: left; width: 100%; display: block; }
.list-group-item-action:hover { background: var(--color-primary-light); color: var(--color-primary); }
/* ========================================
   END Matrix Review page layout
   ======================================== */

body {
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.5;
}
/* App shell */
.app-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.app-header-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	align-items: center;
}

.app-brand {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
}

.app-nav {
	margin-left: auto;
}

.app-nav-link {
	color: var(--color-primary);
	font-size: 0.9rem;
	text-decoration: none;
	font-weight: 600;
}

.app-main {
	max-width: 100%;
	margin: 0;
	padding: 8px 12px;
}

.app-footer {
	border-top: 1px solid var(--color-border);
}

.app-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 16px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
/* Headings */
h1, h2, h3 {
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--color-text);
	margin-bottom: .75rem;
}

h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
}

h2 {
	font-size: clamp(1.2rem, 1.0rem + .8vw, 1.6rem);
}

/* Containers & cards */
.container, .container-fluid {
	padding-top: 0;
	padding-bottom: 0;
}

.t14-card {
	background: transparent;
	border: 0;
	
	box-shadow: none;
	padding: 1rem;
}

/* Links */
a {
	color: var(--color-primary);
	text-decoration: none;
}
/*
	a:hover {
		color: var(--color-primary-dark);
		text-decoration: underline;
	}
	*/
/* ========================================
   Button system, active target system
   Shape + meaning only
   Page-level CSS controls local button size unless otherwise noted
   ======================================== */

/* Shared button foundation */
.btn-t14 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font-weight: 600;
	letter-spacing: .2px;
	text-decoration: none;
	border: 1px solid transparent;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
	cursor: pointer;
}

/* Shape system */
.btn-shape-full {
	border-radius: 999px;
}

/*we are calling this pill but it is becuase its for the smaller, in line buttosn and it will actualy be snubbed on the ends*/
.btn-shape-pill {
	border-radius: 8px;
}

.btn-shape-circle {
	width: 20px;
	min-width: 20px;
	height: 20px;
	padding: 0;
	border-radius: 999px;
}

.btn-size-micro {
	height: 20px;
	min-width: 20px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 1;
}
/* Color meaning system */
.btn-neutral-passive {
	background: var(--color-bg);
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
}

.btn-neutral-active {
	background: var(--color-bg);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-cancel {
	background: var(--color-bg-soft);
	border-color: var(--color-border);
	color: var(--color-text-muted);
}

.btn-open {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-submit {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.btn-special {
	background: var(--color-accent-gold);
	border-color: var(--color-accent-gold-dark);
	color: var(--color-text);
}

/* ========================================
   Tool14 confirmation modal standard
   Structure only, apply to markup in pass 2
   ======================================== */

.t14-confirm-modal .modal-dialog {
	max-width: 420px;
}

.t14-confirm-modal.t14-confirm-modal-sm .modal-dialog {
	max-width: 360px;
}

.t14-confirm-modal .modal-content {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-bg);
	box-shadow: 0 12px 28px rgba(26, 28, 38, 0.10);
	overflow: hidden;
}

.t14-confirm-modal .modal-header {
	padding: 14px 18px 12px 18px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-primary-ghost);
	align-items: center;
}

.t14-confirm-modal .modal-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.t14-confirm-modal .modal-body {
	padding: 16px 18px;
	background: var(--color-bg);
}

.t14-confirm-modal .modal-footer {
	padding: 12px 18px 16px 18px;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.t14-confirm-modal .form-label {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.t14-confirm-modal .form-control,
.t14-confirm-modal .form-select {
	border-color: var(--color-border);
	border-radius: 8px;
	min-height: 38px;
}

.t14-confirm-modal textarea.form-control {
	min-height: 88px;
	resize: vertical;
}

.t14-confirm-modal .alert {
	margin-bottom: 12px;
	border-radius: 8px;
}

.t14-confirm-modal .text-danger {
	font-size: 12px;
}

.t14-confirm-modal .btn-close {
	opacity: .65;
}

	.t14-confirm-modal .btn-close:hover,
	.t14-confirm-modal .btn-close:focus {
		opacity: 1;
	}

.t14-modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	min-width: 88px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.t14-confirm-modal .t14-modal-btn {
	flex: 0 0 auto;
}

/* ========================================
   Tool14 notes / workflow modal standard
   Structure only
   ======================================== */

.t14-notes-modal .modal-dialog {
	max-width: 760px;
}

.t14-notes-modal.t14-notes-modal-sm .modal-dialog {
	max-width: 560px;
}

.t14-notes-modal .modal-content {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-bg);
	box-shadow: 0 14px 34px rgba(26, 28, 38, 0.12);
	overflow: hidden;
}

.t14-notes-modal .modal-header {
	padding: 14px 18px 12px 18px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-primary-ghost);
	align-items: center;
}

.t14-notes-modal .modal-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.t14-notes-modal .modal-body {
	padding: 18px;
	background: var(--color-bg);
}

.t14-notes-modal .modal-footer {
	padding: 12px 18px 16px 18px;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.t14-notes-modal .btn-close {
	opacity: .65;
}

	.t14-notes-modal .btn-close:hover,
	.t14-notes-modal .btn-close:focus {
		opacity: 1;
	}

.t14-notes-modal .form-label {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.t14-notes-modal .form-control,
.t14-notes-modal .form-select {
	border-color: var(--color-border);
	border-radius: 8px;
	min-height: 38px;
}

.t14-notes-modal textarea.form-control {
	min-height: 96px;
	resize: vertical;
}

.t14-notes-modal .alert {
	margin-bottom: 12px;
	border-radius: 8px;
}

.t14-notes-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.t14-notes-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 300px;
	overflow: auto;
	padding-right: 4px;
}

.t14-notes-card {
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: #fff;
	padding: 10px 12px;
}

.t14-notes-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.t14-notes-card-body {
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text);
	white-space: pre-wrap;
}

.t14-notes-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 4px;
}

/* Fixed global system buttons */
.btn-size-workflow {
	height: 32px;
	min-width: 140px;
	padding: 0 18px;
	font-size: 13px;
	line-height: 1;
}

.btn-back-fixed,
.btn-logout-fixed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text-muted);
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
	cursor: pointer;
}

	.btn-back-fixed::before {
		content: "←";
		opacity: .7;
	}

/* ========================================
   Legacy buttons, keep during migration only
   Delete after all pages stop using Bootstrap button styling
   ======================================== */
.btn {
	border-radius: var(--t14-radius-sm);
	font-weight: 600;
	letter-spacing: .2px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.btn-primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

	.btn-primary:hover,
	.btn-primary:focus {
		background: var(--color-primary-600);
		border-color: var(--color-primary-600);
	}

.btn-outline-primary {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

	.btn-outline-primary:hover {
		color: #fff;
		background: var(--color-primary);
		border-color: var(--color-primary);
	}

/* Back link --legacy only do nto use this button*/
.t14-back a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
}

	.t14-back a::before {
		content: "←";
		opacity: .7;
	}


.mx-back {
	text-decoration: none;
}

/* Forms */
.form-control, .form-select {
	border-radius: var(--t14-radius-sm);
	border-color: var(--color-border);
	background-color: #fff;
}

	.form-control:focus, .form-select:focus {
		outline: none;
		border-color: var(--color-primary);
		box-shadow: 0 0 0 .15rem rgba(91, 60, 196, .12);
	}



/* Badges & statuses */
.badge {
	font-weight: 600;
	border-radius: 999px;
	padding: .35rem .55rem;
}

/* Notes modal formatting */
.mx-notes .mx-note-header {
	white-space: nowrap;
}

.mx-notes .mx-note-body {
	white-space: pre-wrap;
}
	.badge.bg-warning {
		color: #5a3f00;
		background: #fff4d6 !important;
		border: 1px solid #fde9ae;
	}

/* Status badge colors */

.bg-orange {
	background-color: #fd7e14;
	color: #fff;
}

/* Alerts */
.alert {
	border-radius: var(--t14-radius);
	border-color: var(--color-border);
	box-shadow: var(--t14-shadow);
}

.alert-success {
	background: #eefce9;
	color: #14532d;
	border-color: #d9f7d1;
}

/* Tiny utilities */
.t14-muted {
	color: var(--t14-muted);
}

.t14-header {
	background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 1rem;
	padding: .75rem 0;
}


/* Mapping input row feel */
.t14-map-row {
	display: flex;
	gap: .5rem;
	align-items: center;
}
#encoreList .list-group-item {
	padding-top: 2px;
	padding-bottom: 4px;
	line-height: 1.2;
}
	.t14-map-row .form-control {
		min-width: 260px;
	}

/* Footer / small text */
.small, small {
	color: var(--t14-muted);
}

/* Toast (TempData-based message, nicer look) */
.t14-toast {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1060;
	background: #1f2937;
	color: #fff;
	padding: .6rem .9rem;
	border-radius: 10px;
	box-shadow: var(--t14-shadow);
	opacity: .96;
	animation: t14-fade-in .18s ease-out;
}

@keyframes t14-fade-in {
	from {
		transform: translateY(6px);
		opacity: 0
	}

	to {
		transform: translateY(0);
		opacity: .96
	}
}

/* Autosave pill inside table rows */
.t14-saving {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	font-weight: 600;
	color: #5d6479;
	background: #f4f6fb;
	border: 1px solid #e5e8f2;
	border-radius: 999px;
	padding: .2rem .5rem;
}

	.t14-saving::before {
		content: "•";
		color: var(--color-primary);
		animation: t14-pulse 1s ease-in-out infinite;
	}

@keyframes t14-pulse {
	0%,100% {
		opacity: .35
	}

	50% {
		opacity: 1
	}
}

/* ========================================
   Row status chips, semantic system
   Use for row-level status only
   ======================================== */
.status-row-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	border: 0;
	line-height: 1;
	box-sizing: border-box;
}

.status-row-unmapped {
	background: var(--status-unmapped);
	color: var(--status-unmapped-text);
}

.status-row-update {
	background: var(--status-update);
	color: var(--status-update-text);
}

.status-row-pending {
	background: var(--status-pending);
	color: var(--status-pending-text);
}

.status-row-suggested {
	background: var(--status-suggested);
	color: var(--status-suggested-text);
}

.status-row-valid {
	background: var(--status-valid);
	color: var(--status-valid-text);
}

.status-row-excluded {
	background: var(--status-excluded);
	color: var(--status-excluded-text);
}

.status-row-hidden {
	background: transparent;
	color: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
}

.mx-edit-row-btn {
	height: 22px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 1;
}

.mx-section-row td {
	background: var(--color-bg-soft) !important;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: 0;
}

.mx-section-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 28px;
	padding: 0 10px;
	background: transparent;
	border: 0;
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.mx-section-caret {
	width: 12px;
	flex: 0 0 12px;
	text-align: center;
}

.mx-section-title {
	flex: 0 0 auto;
}

.mx-section-pill {
	height: 18px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 1;
}

.mx-section-spacer {
	margin-left: auto;
}

.mx-section-row:hover td {
	background: var(--color-bg-soft) !important;
}

.mx-apr-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.mx-apr-btn {
	width: 22px;
	min-width: 22px;
	height: 22px;
	padding: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.mx-apr-a-strong {
	background: var(--status-suggested);
	color: var(--status-suggested-text);
	border-color: var(--status-suggested);
}

.mx-apr-a-light {
	background: var(--status-suggested-light);
	color: var(--status-suggested-text);
	border-color: var(--status-suggested);
}

.mx-apr-p-strong {
	background: var(--status-pending);
	color: var(--status-pending-text);
	border-color: var(--status-pending);
}

.mx-apr-p-light {
	background: var(--status-pending-light);
	color: var(--status-pending-text);
	border-color: var(--status-pending);
}

.mx-apr-r-strong {
	background: var(--status-update);
	color: var(--status-update-text);
	border-color: var(--status-update);
}

.mx-apr-r-light {
	background: var(--status-update-light);
	color: var(--status-update-text);
	border-color: var(--status-update);
}
/* ========================================
   Matrix status badges, semantic system
   Use for matrix-level status only
   ======================================== */
.status-matrix-unmapped,
.status-matrix-progress,
.status-matrix-waiting-pm,
.status-matrix-waiting-client,
.status-matrix-ready {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	border: 0;
	line-height: 1;
	box-sizing: border-box;
}

.status-matrix-unmapped {
	background: var(--status-unmapped);
	color: var(--status-unmapped-text);
}

.status-matrix-waiting-client {
	background: var(--status-update);
	color: var(--status-update-text);
}

.status-matrix-progress {
	background: var(--status-pending);
	color: var(--status-pending-text);
}

.status-matrix-waiting-pm {
	background: var(--status-suggested);
	color: var(--status-suggested-text);
}

.status-matrix-ready {
	background: var(--status-valid);
	color: var(--status-valid-text);
}

/* “More” button kept tiny and aligned with chip */
.mx-more {
	margin-left: 6px;
	border: 0;
	background: transparent;
	font-size: 12px;
	line-height: 1;
	vertical-align: middle;
	opacity: .7;
}

	.mx-more:hover {
		opacity: 1;
	}

/* Ghost suggestion positioning next to the input text */
.position-relative {
	position: relative;
}

.mx-ghost {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: .35;
}

.mx-toolbar {
	grid-column: 1 / -1; /* span both columns */
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.map-input {
    position: relative;
    z-index: 1;
    background: transparent !important; /* Make input background transparent */
    color: #22242a !important;           /* Normal input text color */
    caret-color: #22242a;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.map-input,
.map-input:focus {
    font-weight: 400 !important;
}

/* Ghost overlays input, lighter gray, inline */
.ghost {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    pointer-events: none;
    white-space: pre;
    color: #b0b4bb;
    z-index: 2;
    background: transparent;
    width: 100%;
    height: 100%;
}

.ghost-typed {
    color: #22242a;
}
.ghost-suggestion {
    color: #b0b4bb;
}

/* Add this function inside your <script> block in Map.cshtml
function syncGhostToInput(input) {
    const ghost = input.parentElement.querySelector('.ghost');
    if (!ghost) return;

    // Copy padding, border, font, etc. from input to ghost for perfect alignment
    const style = window.getComputedStyle(input);
    ghost.style.paddingLeft = style.paddingLeft;
    ghost.style.paddingRight = style.paddingRight;
    ghost.style.fontSize = style.fontSize;
    ghost.style.fontFamily = style.fontFamily;
    ghost.style.fontWeight = style.fontWeight;
    ghost.style.lineHeight = style.lineHeight;
    ghost.style.letterSpacing = style.letterSpacing;
    ghost.style.height = style.height;
    ghost.style.boxSizing = style.boxSizing;
    ghost.style.border = 'none'; // Prevent border from showing on ghost
    ghost.style.background = 'transparent';
    ghost.style.top = style.top;
    ghost.style.left = style.left;
    ghost.style.width = style.width;
    ghost.style.textAlign = style.textAlign;
}*/

/* ========================================
   Tool14 grid system
   Shared table styling across the app
   ======================================== */

.t14-grid {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	font-size: 0.9rem;
}

	.t14-grid > :not(caption) > * > * {
		padding: 2px 10px;
		vertical-align: middle;
	}

	.t14-grid thead th {
		background: var(--color-header-bg);
		color: var(--color-primary);
		font-weight: 600;
		border-bottom: 1px solid var(--color-border);
		height: 26px;
		text-align: left;
		vertical-align: middle;
	}

	.t14-grid tbody td {
		background: var(--color-bg);
		color: var(--color-text);
		height: 26px;
		vertical-align: middle;
		border-bottom: 1px solid var(--color-border);
	}

	.t14-grid tbody tr {
		transition: background-color .12s ease;
	}
	.t14-grid tbody tr:hover td {
		background: var(--color-bg-soft);
	}
	.t14-grid tbody tr:last-child td {
		border-bottom: none;
	}

	/* Sticky header behavior only */
	.t14-grid-sticky th {
		position: sticky;
		top: 0;
		z-index: 3;
	}


/* Options list */
.mx-options {
	list-style: none;
	margin: 0;
	padding: 0;
}

	.mx-options li {
		padding: 6px 8px;
		border-radius: 6px;
		cursor: pointer;
	}

		.mx-options li:hover {
			background: rgba(0,0,0,.05);
		}


/* ALL LEGACY TABLES AND STUFF */
/* Tables */
.table {
	background: var(--t14-surface);
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--t14-radius);
	overflow: hidden; /* for rounded corners */
	box-shadow: var(--t14-shadow);
}

	.table > :not(caption) > * > * {
		padding: .65rem .9rem;
	}

	.table thead th {
		background: var(--color-primary-100);
		color: #2a2a36;
		font-weight: 700;
		border-bottom: 1px solid var(--color-border);
	}

	.table tbody tr {
		transition: background-color .12s ease;
	}

		.table tbody tr:hover {
			background: #fafaff;
		}

/* Group tints for matrix rows (future: apply t14-mxg-### as a class on <tr>) */
tr.t14-mxg-100 td {
	background: #fafaff
}

tr.t14-mxg-200 td {
	background: #f7fffa
}

tr.t14-mxg-300 td {
	background: #fff9f2
}

tr.t14-mxg-400 td {
	background: #fff7fb
}

.mx-sticky th {
	position: sticky;
	top: 0;
	background: var(--color-header-bg);
	z-index: 10;
}

/* ========================================
   Project status chips
   Use for project-level status only.
   Do NOT use for matrix or row level status.

   Two chips per project:
     1. .status-project-pipeline  — overall status (where in the pipeline)
     2. .status-project-health    — project health (is anything wrong)
   ======================================== */

/* Shared foundation for both chip types */
.status-project-pipeline,
.status-project-health {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	border: 0;
	line-height: 1;
	box-sizing: border-box;
}

/* ---- Overall Status (pipeline position) ---- */

/* Default: purple — project is active, no time warning */
.status-project-pipeline {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* Stale: gold — no activity for configured threshold (future: wire to inactivity check) */
.status-project-pipeline-stale {
	background: var(--color-accent-gold-light);
	color: var(--color-accent-gold-dark);
}

/* ---- Project Health ---- */

/* Active: green — normal flow, no issues */
.status-project-health-active {
	background: var(--status-valid);
	color: var(--status-valid-text);
}

/* On Hold: red — alarm state, project stopped */
.status-project-health-hold {
	background: var(--status-unmapped);
	color: var(--status-unmapped-text);
}

/* Completed: grey — terminal, removed from normal views */
.status-project-health-completed {
	background: var(--status-excluded);
	color: var(--status-excluded-text);
}