/* QUOTE by Tango - styles follow the STEP app (vars.scss / layout/app.scss). */

:root {
	--step-white: #FFFFFF;
	--step-red: #FF0000;
	--step-green: #00B707;
	--step-blue: #33A0F2;
	--step-orange-1: #FF5100;
	--step-dark-blue-1: #33647E;
	--step-dark-blue-2: #1E3C4D;
	--step-grey-1: #CED2D5;
	--step-dark-1: #333132;
	--step-light-grey-1: #F9F9F9;
	--step-light-grey-2: #F4F7F8;
	--step-light-grey-3: #F0F0F0;
	--step-light-blue-1: #e5eef1;
	--step-light-green-1: rgba(0,183,7,0.11);
	--step-light-orange-1: rgba(240,84,35,0.11);
	--step-light-red-1: rgba(253,109,65,0.257);

	--bs-body-font-family: 'Hind', sans-serif;
	--bs-body-font-weight: 300;
	--bs-body-color: var(--step-dark-blue-2);
	--bs-primary: var(--step-orange-1);
	--bs-primary-rgb: 255,81,0;
	--bs-secondary: var(--step-dark-blue-1);
	--bs-secondary-rgb: 51,100,126;
	--bs-border-radius: .75rem;
	--bs-border-radius-lg: .9rem;
	--bs-link-color: var(--step-dark-blue-1);
	--bs-link-color-rgb: 51,100,126;
	--bs-link-hover-color: var(--step-orange-1);
}

html, body { height: 100%; }
body { background: #fff; }
h1, h2, h3, h4, h5, h6 { font-family: 'Hind', sans-serif; font-weight: 600; color: var(--step-dark-blue-2); }
b, strong { font-weight: 600; }

.step-text-primary { color: var(--step-orange-1) !important; }
.step-text-secondary { color: var(--step-dark-blue-1) !important; }
.step-text-success { color: var(--step-green) !important; }
.step-text-danger { color: var(--step-red) !important; }
.step-text-muted { color: #7b8a93 !important; }
.step-bg-secondary { background-color: var(--step-dark-blue-1) !important; }
.step-bg-warning-light { background-color: var(--step-light-orange-1) !important; }
.step-bg-success-light { background-color: var(--step-light-green-1) !important; }
.step-bg-info-light { background-color: var(--step-light-blue-1) !important; }
.step-bg-danger-light { background-color: var(--step-light-red-1) !important; }

/* Buttons */
.btn { --bs-btn-padding-y: .55rem; --bs-btn-font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--step-orange-1); --bs-btn-border-color: var(--step-orange-1); --bs-btn-hover-bg: #e04700; --bs-btn-hover-border-color: #e04700; --bs-btn-active-bg: #cc4100; --bs-btn-active-border-color: #cc4100; --bs-btn-disabled-bg: var(--step-orange-1); --bs-btn-disabled-border-color: var(--step-orange-1); }
.btn-secondary { --bs-btn-bg: var(--step-dark-blue-1); --bs-btn-border-color: var(--step-dark-blue-1); --bs-btn-hover-bg: var(--step-dark-blue-2); --bs-btn-hover-border-color: var(--step-dark-blue-2); --bs-btn-active-bg: var(--step-dark-blue-2); }
.btn-outline-secondary { --bs-btn-color: var(--step-dark-blue-1); --bs-btn-border-color: var(--step-grey-1); --bs-btn-hover-bg: var(--step-light-blue-1); --bs-btn-hover-color: var(--step-dark-blue-2); --bs-btn-hover-border-color: var(--step-dark-blue-1); --bs-btn-active-bg: var(--step-light-blue-1); --bs-btn-active-color: var(--step-dark-blue-2); }
.btn-light { --bs-btn-bg: var(--step-light-grey-3); --bs-btn-border-color: var(--step-light-grey-3); }
.btn.rounded-pill.btn-primary, .btn.rounded-pill.btn-secondary {
	color: #fff; text-transform: uppercase; font-weight: 600; font-size: .9em;
	box-shadow: 0 1px 0 0 rgba(0,0,0,.11);
}
.btn-icon { border: 0; background: none; color: var(--step-dark-blue-1); padding: .15rem .35rem; border-radius: .5rem; }
.btn-icon:hover { background: var(--step-light-blue-1); color: var(--step-orange-1); }
.btn-icon.danger:hover { background: var(--step-light-red-1); color: var(--step-red); }

.form-control, .form-select { border-color: var(--step-grey-1); font-weight: 400; }
.form-control:focus, .form-select:focus { border-color: var(--step-dark-blue-1); box-shadow: 0 0 0 .2rem rgba(51,100,126,.15); }
.form-check-input:checked { background-color: var(--step-dark-blue-1); border-color: var(--step-dark-blue-1); }
.form-label, .field-label {
	font-size: .7em; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--step-dark-blue-1); margin-bottom: .2rem;
}
input[type=number] { -moz-appearance: textfield; }
/* Error messages: red, and they stay up longer (see toast in app.js) */
.toast.toast-error { background-color: #b42318 !important; }
/* The likelihood slider's scale: a | at each 10%, lined up with the centre of the slider's thumb (1rem wide). The Low
   and High bands sit behind the slider, in place of its track. */
.like-slider { position: relative; }
.like-slider .form-range { position: relative; z-index: 1; }
.like-slider .form-range::-webkit-slider-runnable-track { background: transparent; }
.like-slider .form-range::-moz-range-track { background: transparent; }
.like-ticks { position: relative; margin: 0 .5rem; }
.like-bands { position: absolute; top: 0; left: .5rem; right: .5rem; height: 1.5rem; }
.like-ticks { height: 1.9rem; }
.like-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .75rem; line-height: 1; padding-top: .6rem; color: #6c757d; }
.like-tick::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: .5rem; background: #6c757d; }
.like-off { opacity: .45; }
.like-band { position: absolute; top: 0; height: 100%; font-size: .75rem; font-weight: 600; text-align: center; line-height: 1.5rem; border-radius: .25rem; }
.like-band-mid { background: #eef0f2; }
/* Number fields: no up and down arrows anywhere; the number is typed in */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Header (STEP app header) */
.app header { z-index: 1020; }
.logo-sm { height: 52px; }
@media (min-width: 992px) {
	.app-header-row { display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 1rem; }
	.app-header-logo { justify-self: start; }
	.app-header-nav { justify-self: center; }
	/* The same width on every page (New quote / New ingestion differ), so the menu between sits in the same place. */
	.app-header-profile { justify-self: end; min-width: 25rem; justify-content: flex-end; }
}
.top-nav { font-size: 1.1em; font-weight: 600; }
.top-nav a { color: var(--step-dark-1); }
.top-nav a:hover { color: var(--step-dark-blue-1); }
.top-nav a.active { color: var(--step-orange-1); }
.app-project-nav { border-top: 1px solid var(--step-light-grey-3); margin-top: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.app-project-nav .crumb { font-weight: 600; color: var(--step-dark-blue-1); }

/* Main layout */
.sidebar h4, .right h4 { color: var(--step-dark-blue-1); font-size: .9em; font-weight: normal; text-transform: uppercase; letter-spacing: .03em; }
.sidebar-sticky { position: sticky; top: 150px; }
.form-box { border-radius: 28px; padding: 18px 20px; background-color: var(--step-light-grey-1); border: 1px solid var(--step-light-grey-3); }
.search-box { box-shadow: 0 1px 0 0 rgba(0,0,0,.11); }
.side-list a { display: block; padding: .35rem .75rem; border-radius: .6rem; color: var(--step-dark-1); text-decoration: none; }
.side-list a:hover { background: var(--step-light-grey-2); }
.side-list a.active { color: var(--step-orange-1); font-weight: 600; background: var(--step-light-orange-1); }
.side-list .group-title { font-size: .7em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--step-dark-blue-1); margin: .9rem .75rem .25rem; }

/* List rows (STEP project-row) */
.list-row { display: flex; margin-bottom: 6px; cursor: pointer; text-decoration: none; color: inherit; }
.list-row .col-a { flex: 1; padding: 18px 20px; background: var(--step-light-grey-3); box-shadow: 0 1px 0 0 rgba(0,0,0,.11); border-radius: .75rem 0 0 .75rem; }
.list-row .col-b { padding: 18px 20px; text-align: right; background: #fafafa; box-shadow: 0 1px 0 0 rgba(0,0,0,.05); border-radius: 0 .75rem .75rem 0; min-width: 220px; }
.list-row:hover .col-a, .list-row:hover .col-b { background: var(--step-light-grey-2); }
.list-row .ref { font-size: .75em; font-weight: 500; letter-spacing: .03em; color: var(--step-dark-blue-1); text-transform: uppercase; }
.list-row .big { font-size: 1.15em; font-weight: 600; }

/* Compact inputs */
.w-num { width: 4.4rem; }
.w-ref { width: 5.6rem; }
.adj-row { display: flex; gap: .75rem; align-items: flex-end; }
.adj-row .form-label { white-space: nowrap; }
.adj-row > .flex-fill { min-width: 0; }
.adj-row .form-select { width: 100%; min-width: 0; padding-right: 1.9rem; text-overflow: ellipsis; }
.staff-list .form-control { max-width: 22rem; }

/* Rate cards */
.rc-table { --bs-table-bg: transparent; font-variant-numeric: tabular-nums; }
.rc-table th { font-size: .7em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--step-dark-blue-1); vertical-align: bottom; }
.rc-table td { vertical-align: top; }
.rc-rate { width: 7rem; }
.rc-derived { font-size: .72em; color: #6a7c86; margin-top: .2rem; white-space: nowrap; }
.rc-current > td { background: var(--step-light-green-1); }

/* Price history */
.hist-service { padding: .6rem 0; border-top: 1px solid var(--step-light-grey-3); }
.hist-service:first-of-type { border-top: 0; }
.hist-table { --bs-table-bg: transparent; font-size: .88em; }
.hist-table th { font-size: .72em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--step-dark-blue-1); }
.hist-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Milestones (one per service title) */
.milestone { display: flex; flex-wrap: wrap; align-items: center; margin: 1.4rem 0 .5rem; border-radius: .75rem; background: var(--step-light-blue-1); box-shadow: 0 1px 0 0 rgba(0,0,0,.08); }
.milestone.collapsed { margin: 0 0 6px; }
.milestone .ms-a { flex: 1 1 340px; display: flex; align-items: center; gap: .75rem; padding: 12px 18px; cursor: pointer; min-width: 0; }
.milestone .ms-a .chev { font-size: 1.1em; color: var(--step-dark-blue-1); }
.milestone .ms-a:hover .chev { color: var(--step-orange-1); }
.milestone .group { font-size: .7em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--step-orange-1); }
.milestone .title { font-weight: 600; font-size: 1.12em; }
.milestone .ms-b { flex: 0 1 460px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .2rem .6rem; padding: 10px 18px; }
.milestone .ms-sub { grid-column: 2 / -1; grid-row: 2; align-self: end; text-align: right; font-size: .75em; color: #6a7c86; font-variant-numeric: tabular-nums; }
.milestone .ms-sub b { font-weight: 600; color: inherit; }
.milestone.total .ms-sub { color: rgba(255,255,255,.75); }
.milestone .out { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.milestone .out small { display: block; font-weight: 400; font-size: .72em; color: #6a7c86; }
.milestone .out.price { color: var(--step-dark-blue-2); font-size: 1.05em; grid-row: 1 / span 2; }
.milestone .out.price small { white-space: nowrap; }
.milestone .out small b { font-weight: 600; }
.milestone.total { background: var(--step-dark-blue-1); color: #fff; margin-top: 1.2rem; }
.milestone.total .ms-a { cursor: default; }
.milestone.total .title, .milestone.total .out, .milestone.total .out.price { color: #fff; }
.milestone.total .out small, .milestone.total .step-text-muted { color: rgba(255,255,255,.75) !important; }
.view-toggle .btn { --bs-btn-padding-y: .3rem; border-radius: 2rem; }
.view-toggle .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.view-toggle .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Task rows */
.service-head { display: flex; align-items: baseline; gap: .75rem; margin: 1.6rem 0 .5rem; padding: 0 .25rem; }
.service-head .title { font-weight: 600; font-size: 1.15em; }
.service-head .group { font-size: .7em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--step-orange-1); }
.service-head .sub { margin-left: auto; font-size: .9em; color: var(--step-dark-blue-1); }

.task-row { display: flex; flex-wrap: wrap; margin-bottom: 6px; border-radius: .75rem; }
.task-row > .col-a { flex: 1 1 380px; min-width: 0; padding: 14px 18px; background: var(--step-light-grey-3); box-shadow: 0 1px 0 0 rgba(0,0,0,.11); border-radius: .75rem 0 0 .75rem; }
.task-row > .col-b { flex: 0 1 760px; padding: 12px 16px; background: #fafafa; box-shadow: 0 1px 0 0 rgba(0,0,0,.05); border-radius: 0 .75rem .75rem 0; }
@media (max-width: 1199px) {
	.task-row > .col-a { border-radius: .75rem .75rem 0 0; flex-basis: 100%; }
	.task-row > .col-b { border-radius: 0 0 .75rem .75rem; flex-basis: 100%; }
}
.task-row:hover > .col-a, .task-row:hover > .col-b { background: var(--step-light-grey-2); }
.task-row.not-charged > .col-a { background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(51,100,126,.04) 10px 20px); }
.task-row .svc { font-size: .7em; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--step-dark-blue-1); }
.task-row .heading-input {
	border: 0; background: transparent; padding: 0; width: 100%; font-weight: 600; font-size: 1.08em; color: var(--step-dark-blue-2); outline: none;
	border-bottom: 1px dashed transparent;
}
.task-row .heading-input:hover { border-bottom-color: var(--step-grey-1); }
.task-row .heading-input:focus { border-bottom-color: var(--step-dark-blue-1); }
.task-row .heading-input::placeholder { color: var(--step-grey-1); font-weight: 400; }
.desc { position: relative; margin-top: .2rem; font-size: .95em; }
.desc .desc-text { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; color: #3d5562; min-height: 1.4em; }
.desc .desc-text.empty { color: #9aa7ae; font-style: italic; }
.desc textarea { font-size: .95em; }
.desc-toggle { font-size: .8em; color: var(--step-dark-blue-1); cursor: pointer; text-decoration: none; }
.desc-toggle:hover { color: var(--step-orange-1); }

.badge-soft { font-weight: 500; font-size: .72em; letter-spacing: .03em; text-transform: uppercase; padding: .35em .6em; border-radius: .5rem; }
.badge-custom { background: var(--step-light-blue-1); color: var(--step-dark-blue-1); }
.badge-nocharge { background: var(--step-light-orange-1); color: var(--step-orange-1); }
.badge-internal { background: var(--step-light-grey-3); color: var(--step-dark-1); border: 1px solid var(--step-grey-1); }
.badge-discount { background: var(--step-light-red-1); color: #b33a10; }

.staff-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .55rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border: 1px solid var(--step-grey-1); border-radius: 2rem; padding: .05rem .25rem .05rem .65rem; font-size: .85em; font-weight: 500; }
.chip .bi { cursor: pointer; color: #8a9aa3; }
.chip .bi:hover { color: var(--step-red); }
.chip-input { border: 1px dashed var(--step-grey-1); border-radius: 2rem; padding: .1rem .7rem; font-size: .85em; width: 150px; background: transparent; outline: none; }
.chip-input:focus { border-color: var(--step-dark-blue-1); background: #fff; }
.chip.chip-static { padding: .05rem .65rem; }
.milestone .ms-invoice { display: inline-flex; align-items: center; gap: .35rem; color: #6a7c86; cursor: default; }
.milestone .ms-invoice .form-control-sm { width: auto; padding: .05rem .4rem; font-size: .8rem; border-radius: 2rem; }
.task-row .task-date { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .1rem; }
.task-row .task-date .form-control-sm { width: auto; padding: .05rem .4rem; font-size: .85rem; border-radius: .5rem; }
.ms-done-toggle { cursor: pointer; }
.sow-table td { background-color: #fff; }
.sow-table .sow-ms td { background: var(--step-light-blue-1); border-top: 2px solid #fff; }
/* A SOW: each milestone is a light box, with each task a white box inside it */
.sow-ms-card { background: var(--step-light-blue-1); border-color: transparent; border-radius: 1rem; }
.sow-ms-card .sow-task { background: #fff; border-radius: .75rem; padding: .75rem 1rem; box-shadow: 0 1px 0 0 rgba(0,0,0,.08); }
.sow-ms-card h5 .step-bg-info-light { background-color: #fff !important; }
/* T and M plan: deliverables x activities */
.tm-plan .tm-plan-table, .task-time .tm-plan-entry { background: #fff; font-size: .85em; }
.tm-plan .tm-plan-table th, .task-time .tm-plan-entry th { white-space: nowrap; }
.tm-plan .tm-plan-table td.num, .tm-plan .tm-plan-table th.num, .tm-plan-entry th.num, .tm-plan-entry td.num { text-align: right; }
.task-time .tm-plan-entry td { vertical-align: top; padding: .2rem .3rem; }
.task-time .tm-plan-entry input { min-width: 4.2rem; }
.task-time .tm-plan-entry input::placeholder { color: #b5bec4; }
.task-time .tm-other-table { background: #fff; font-size: .85em; }
.task-time .tm-other-table td { padding: .2rem .3rem; vertical-align: top; }
/* Earlier descriptions offered while one is written */
.desc-suggest { position: absolute; z-index: 1080; background: #fff; border: 1px solid var(--step-light-grey-3, #dfe3e6); border-radius: .5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); max-height: 18rem; overflow-y: auto; font-size: .875rem; }
.desc-suggest-head { padding: .35rem .6rem; font-size: .75rem; color: #7b8a93; border-bottom: 1px solid var(--step-light-grey-3, #dfe3e6); }
.desc-suggest-item { padding: .4rem .6rem; cursor: pointer; white-space: pre-wrap; border-bottom: 1px solid #f1f3f4; }
.desc-suggest-item:hover, .desc-suggest-item.active { background: var(--step-light-grey-1, #f3f5f6); }
/* Your SOW: Actual and Planned sections */
.sow-table .sow-section-head td { background: var(--step-light-grey-1, #f6f7f8); padding-top: .45rem; padding-bottom: .35rem; border-bottom: 0; }
.sow-table .sow-subtotal td { font-weight: 600; color: #5b6b75; border-bottom-width: 2px; }
/* Time logged on T and M tasks: the grid of days */
.task-time .time-grid { background: #fff; font-size: .9em; max-width: 52rem; }
.task-time .time-grid td, .task-time .time-grid th { vertical-align: top; padding: .2rem .35rem; }
.task-time .time-grid th.num, .task-time .time-grid td.num { text-align: right; }
.task-time .time-grid tr.weekend td { background: var(--step-light-grey-1, #f6f7f8); }
.task-time .time-grid tr.today td:first-child { font-weight: 600; }
.task-time .time-grid .tm-note { resize: vertical; min-height: calc(1.5em + .5rem + 2px); overflow: hidden; }
/* Time logged on T and M tasks */
.task-time { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--step-grey-1); font-size: .9em; }
.task-time .time-table { background: #fff; font-size: .9em; }
.task-time .time-table td { vertical-align: middle; padding: .25rem .4rem; }
.task-time .time-table td.num { text-align: right; }
.task-notes { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--step-grey-1); font-size: .9em; }
.task-notes .note { background: #fff; border: 1px solid var(--step-light-grey-3); border-radius: .5rem; padding: .35rem .55rem; margin-bottom: .35rem; }
.task-notes .note-meta { display: flex; align-items: center; gap: .3rem; font-size: .8em; color: #7b8a93; }
.task-notes .note-tools { margin-left: auto; }
.task-notes .note-text { white-space: pre-wrap; }
.task-notes .notes-earlier { margin-top: .35rem; opacity: .9; }
.task-notes .note-add { display: flex; gap: .4rem; align-items: flex-start; margin-bottom: .35rem; }
.task-notes .note-flagged { border-color: var(--step-orange-1); box-shadow: 0 0 0 1px var(--step-orange-1); }
.task-notes .note-replied { border-color: #2e7d4f; box-shadow: 0 0 0 1px #2e7d4f; }
.task-notes .note-status { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .85em; margin-top: .2rem; }
.task-notes .mention { font-weight: 600; color: var(--step-dark-blue-1, #2f5d78); }
.badge-replied { background: #2e7d4f !important; color: #fff !important; font-weight: 600; }
.q-card .badge-accept, .q-card .badge-replied { display: inline-block; line-height: 1.25; }
.task-date .task-depends-field { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.task-date .task-depends-warn { order: 1; flex-basis: 100%; }
.task-row .task-date .task-depends { width: auto; max-width: 16rem; padding-top: .05rem; padding-bottom: .05rem; font-size: .85rem; border-radius: .5rem; }
.task-date .tl-check { display: inline-flex; align-items: center; gap: .25rem; margin: 0 0 0 .5rem; white-space: nowrap; }
/* Project timeline */
.tl-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .15rem; color: var(--step-dark-blue-2); }
.tl-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--step-light-grey-3); border-radius: .5rem; }
.tl { border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.tl th, .tl td { padding: .15rem .4rem; border-bottom: 1px solid var(--step-light-grey-3); height: 1.65rem; font-weight: 400; }
.tl th { font-weight: 700; }
.tl .tl-c { text-align: center; }
.tl .tl-name { padding-left: 1.3rem; }
.tl .tl-blank { border-bottom: 0; }
.tl .tl-head th { background: var(--step-light-grey-2); border-bottom: 1px solid var(--step-grey-1); }
.tl .tl-ws th, .tl .tl-ws td.tl-c { font-weight: 700; }
.tl .tl-d { width: 1.65rem; min-width: 1.65rem; max-width: 1.65rem; padding: 0; text-align: center; position: relative; }
.tl .tl-wk { border-left: 1px solid var(--step-grey-1); }
.tl .tl-week { text-align: left; padding-left: .25rem; border-bottom: 0; }
.tl .tl-letter { font-weight: 400; color: var(--step-dark-blue-1); border-bottom: 0; font-size: .75rem; }
.tl .tl-off { width: 1.6rem; text-align: center; padding: 0 .2rem; font-weight: 400; font-size: .72rem; }
.tl .tl-muted td:not(.tl-off) { color: var(--step-grey-1); text-decoration: line-through; }
.tl .tl-muted .tl-date { color: var(--step-grey-1); }
.tl .tl-date { width: 7rem; display: inline-block; padding: 0 .25rem; font-size: .78rem; min-height: 0; height: 1.4rem; }
.tl .tl-check { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.tl .tl-dia { display: inline-block; width: .55rem; height: .55rem; background: #fff; transform: rotate(45deg); vertical-align: middle; }
.mention-menu { position: fixed; z-index: 2000; background: #fff; border: 1px solid var(--step-light-grey-3); border-radius: .5rem; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: .2rem; min-width: 14rem; max-width: 90vw; }
.mention-menu .mention-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: .35rem; padding: .25rem .5rem; font-size: .9em; }
.mention-menu .mention-item:hover, .mention-menu .mention-item.active { background: var(--step-light-grey-3); }
.adj-section { border-top: 1px solid var(--step-light-grey-3); padding-top: .6rem; }
.adj-section > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; }
.adj-section > summary::-webkit-details-marker { display: none; }
.adj-section > summary::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .75em; margin-right: .4rem; transition: transform .15s; }
.adj-section[open] > summary::before { transform: rotate(90deg); }
.adj-section .adj-body { padding-top: .6rem; }
.order-apply { border: 1px solid var(--step-light-grey-3); border-radius: .75rem; background: var(--step-light-grey-1); padding: .6rem .8rem; font-size: .88em; }
.badge-partial { background: #fdf0e1; color: #a5590f; }
.badge-completed { background: var(--step-dark-blue-1); color: #fff; }
.badge-invoiced { background: #2f7d55; color: #fff; }
.badge-pending-payrun { background: #b7791f; color: #fff; }
.badge-withdrawn { background: #e9ecef; color: #6c757d; }
.task-done { font-size: .875em; white-space: normal; }
/* Slim buttons for Mark done and a milestone's Ingest: less height in the SOW tables */
.btn.btn-slim { padding: .05rem .6rem; font-size: .8rem; line-height: 1.35; }
.sow-done { vertical-align: top; }
.sow-done { min-width: 9.5rem; }
.badge-ready { background: #fff3cd; color: #8a5a00; }
.badge-split { background: var(--step-dark-blue-2, #1f3a4d); color: #fff; }
.sow-ms .step-text-muted b { color: var(--step-dark-blue-1); }
.lf-group .form-check-label { font-weight: 600; }

/* Quote list filters */
.lf-box { border: 1px solid var(--step-light-grey-3); border-radius: 1rem; background: #fff; overflow: hidden; }
.lf { border-bottom: 1px solid var(--step-light-grey-3); }
.lf:last-child { border-bottom: 0; }
.lf > summary { display: flex; align-items: center; padding: .55rem .9rem; font-weight: 600; font-size: .9em; cursor: pointer; list-style: none; }
.lf > summary::-webkit-details-marker { display: none; }
.lf > summary::after { content: '\F282'; font-family: 'bootstrap-icons'; margin-left: .5rem; font-size: .8em; color: #8a9aa3; transition: transform .15s; }
.lf[open] > summary::after { transform: rotate(180deg); }
.lf-n { margin-left: auto; color: var(--step-orange-1); font-size: .75em; }
.lf-body { padding: 0 .9rem .7rem; font-size: .88em; }
.lf-body .form-check { margin-bottom: .15rem; }
.lf-dates { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .5rem; align-items: center; }
.lf-dates span { color: #6a7c86; }
.lf-scroll { max-height: 190px; overflow-y: auto; padding-right: .25rem; }
.lf-summary { padding: 14px 20px; }
.bm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; column-gap: .1rem; padding: .3rem .45rem; margin: 0 -.45rem .15rem; border-radius: .5rem; }
.bm-row.active { background: var(--step-light-blue-1); }
.bm-row .bm-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.bm-row .bm-meta { grid-column: 1 / -1; font-size: .78em; color: #7b8a93; }
.bm-row .btn-icon.on { color: var(--step-orange-1); }
.bm-row .bm-move { display: inline-flex; }
.bm-row .bm-move .btn-icon { padding: 0 .1rem; font-size: .85em; }
.bm-row .bm-move .btn-icon:disabled { opacity: .25; }
.bm-row.bm-hidden .bm-title { font-weight: 400; color: #7b8a93; }
.bm-form { border: 1px solid var(--step-light-grey-3); border-radius: .6rem; padding: .5rem; margin: .1rem 0 .5rem; background: var(--step-light-grey-1); }
.milestone .ms-status { width: auto; display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem 1.6rem .05rem .55rem; border-radius: 2rem; border-color: transparent; background-position: right .4rem center; cursor: pointer; }
.milestone.declined .title, .milestone.declined .ms-b { opacity: .55; }
.milestone.declined .title { text-decoration: line-through; }
.milestone .ms-staff { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; cursor: default; }
.milestone .ms-staff .chip-input { font-size: 1em; }

/* A task's discount: the amount and a small % / $ choice side by side */
.nums .disc-group { flex-wrap: nowrap; }
.nums .disc-group .form-control { flex: 1 1 3.6rem; min-width: 3.6rem; -moz-appearance: textfield; }
.nums .disc-group .form-control::-webkit-outer-spin-button, .nums .disc-group .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nums .disc-group .disc-type { flex: 0 0 2.9rem; width: 2.9rem; padding: .25rem 1.1rem .25rem .45rem; background-position: right .25rem center; background-size: 10px 8px; }
.nums { display: grid; grid-template-columns: .8fr .8fr 1.35fr minmax(6.4rem, .85fr) minmax(9.6rem, 1.5fr) .9fr 1.05fr; gap: .35rem .6rem; align-items: end; } /* Applies to wide enough for "Client and staff" */
.nums.cost { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--step-grey-1); align-items: start; }
.nums.cost .out { padding-top: .9rem; }
.nums .span-3 { grid-column: span 3; }
.nums .staff-chips { margin-top: 0; min-height: 31px; }
.quote-top .form-box { padding: 16px 20px; }
.nums .form-control, .nums .form-select { padding: .25rem .45rem; font-size: .9em; border-radius: .5rem; }
/* A drop-down keeps room for its arrow, so the text (e.g. "Customer and staff") never runs under it */
.nums .form-select { padding-right: 1.55rem; background-position: right .4rem center; background-size: 12px 10px; }
.nums .out { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2; padding: .25rem 0; }
.nums .out small { display: block; font-weight: 400; font-size: .75em; color: #7b8a93; }
/* A task's Sell stands out; its Cost and Margin are quieter, below it */
.nums .out.out-sell { font-size: 1.2em; font-weight: 700; color: var(--step-dark-blue-2); }
.nums .out.out-sell small { font-size: .62em; }
.nums.cost .out { font-size: .85em; font-weight: 500; color: #6a7c86; }
.nums.cost .out.out-margin { color: var(--step-dark-blue-1); }
.nums .field-label { display: block; font-size: .62em; white-space: nowrap; }
.nums .span-2 { grid-column: span 2; }
.row-actions { display: inline-flex; gap: .1rem; margin-left: .25rem; }
.neg { color: var(--step-red) !important; }

/* Totals */
.totals { font-variant-numeric: tabular-nums; }
.totals .line { display: flex; justify-content: space-between; padding: .18rem 0; }
.totals .line.sub { color: #5c707b; font-size: .92em; }
.totals .line.strong { font-weight: 600; border-top: 1px solid var(--step-grey-1); margin-top: .3rem; padding-top: .45rem; }
.totals .line.grand { font-weight: 700; font-size: 1.15em; color: var(--step-dark-blue-2); }
.totals .line.semi { font-weight: 600; }
.totals .line.margin { font-weight: 700; font-size: 1.1em; }
.totals .section { font-size: .7em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--step-orange-1); margin-top: .8rem; }
.margin-bar { height: 10px; border-radius: 6px; background: var(--step-light-grey-3); overflow: hidden; display: flex; margin: .4rem 0 .2rem; }
.margin-bar > div { height: 100%; }

/* Staff view */
.staff-card { border-radius: 28px; background: var(--step-light-grey-1); border: 1px solid var(--step-light-grey-3); padding: 18px 22px; margin-bottom: 1rem; }
.staff-card h3 { font-size: 1.35em; margin: 0; }
.staff-card table { font-size: .93em; }
.staff-card th { font-size: .72em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--step-dark-blue-1); }
.staff-card td.num, .staff-card th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.staff-card .table { --bs-table-bg: transparent; }
.staff-card .staff-desc { white-space: pre-line; font-size: .9em; color: #4d6370; margin-top: .2rem; max-width: 60ch; }
.staff-card .staff-desc.empty { color: #9aa7ae; font-style: italic; }
.staff-card td { vertical-align: top; }

/* Catalogue picker */
#pickerBody .pick-services { border-right: 1px solid var(--step-light-grey-3); max-height: 65vh; overflow: auto; padding: .5rem; }
#pickerBody .pick-tasks { max-height: 65vh; overflow: auto; padding: 1rem 1.25rem; }
.pick-task { display: flex; gap: .75rem; padding: .5rem .6rem; border-radius: .6rem; }
.pick-task:hover { background: var(--step-light-grey-2); }
.pick-task .meta { margin-left: auto; white-space: nowrap; font-size: .85em; color: var(--step-dark-blue-1); }
.pick-task .d { font-size: .85em; color: #6a7c86; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Catalogue editor */
.cat-table td { vertical-align: top; }
.cat-table .form-control, .cat-table .form-select { padding: .25rem .45rem; font-size: .9em; border-radius: .5rem; }
.cat-table th { font-size: .7em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--step-dark-blue-1); }

.empty-state { text-align: center; padding: 3rem 1rem; color: #6a7c86; border: 2px dashed var(--step-light-grey-3); border-radius: 28px; }
.empty-state .bi { font-size: 2.5rem; color: var(--step-grey-1); }

footer { background: var(--step-light-grey-3); font-size: .9em; border-radius: 1rem 1rem 0 0; }

@media print {
	header, footer, .sidebar .no-print, .row-actions, .no-print { display: none !important; }
}

/* Sign-in (js/auth.js): the app stays hidden until the Ingestor confirms who is signed in. */
.tq-locked .app, .tq-locked .toast-container, .tq-locked .modal { visibility: hidden !important; }
#tqLogin { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--step-light-grey-2); padding: 16px; }
#tqLogin .tq-login-card { width: 100%; max-width: 420px; background: #fff; border-radius: 28px; padding: 28px 30px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }

/* Team users (no quote access): quotes as documents only - no New quote, Catalogue or Settings */
.tq-team [data-action="new-quote"] { display: none !important; }
/* Cogwheel menu: as in the Ingestor, the current page and the cogwheel itself show in the brand orange. */
.gear-menu .dropdown-item.active { background: #fdeee6; color: #e8622d; }
#gearMenu.active { color: #e8622d; }
/* Management viewing as another user */
.tq-imp-banner { background: #fff4e5; border: 1px solid #f5a623; border-radius: 999px; padding: .4rem 1rem; font-size: .9rem; }
.tq-viewas-list { max-height: 260px; overflow-y: auto; }

/* Your pay runs (Projects sidebar) */
.pay-run { border-top: 1px solid var(--step-light-grey-3); }
.pay-run > summary { list-style: none; cursor: pointer; }
.pay-run > summary::-webkit-details-marker { display: none; }
.pay-run .pay-run-chev { transition: transform .15s; font-size: .8em; }
.pay-run[open] .pay-run-chev { transform: rotate(90deg); }

/* SOW view: room between a milestone line and its first task */
.sow-table tr.sow-ms + tr > td { padding-top: .9rem; }
.sow-table tr.sow-ms > td { padding-top: .55rem; padding-bottom: .55rem; }
/* A SOW waiting for the team member to accept: stands out on their SOWs list. */
.badge-accept { background: var(--step-orange-1) !important; color: #fff !important; font-weight: 600; }
/* A task date the team member has changed from its baseline. */
.task-date input.date-adjusted { border-color: var(--step-orange-1); color: var(--step-orange-1); font-weight: 600; }
/* Add task: further custom task rows line up under the first one's heading box. */
#atCustom + label { min-width: 7.5rem; }
.pick-task .at-spacer { flex: none; width: calc(1em + 7.5rem + .75rem); }
.pick-task.at-more { padding-top: 0; }
/* Manual milestone adjustments (Management). */
.badge-adjust { background: var(--step-light-orange-1); color: var(--step-orange-1); }
.adjustment-row > .col-a { border-left: 3px solid var(--step-orange-1); }
.ms-adjust { background: #fff; border: 1px solid var(--step-light-grey-2); border-radius: .6rem; cursor: default; }
/* A milestone's title, editable by Management: looks like the title until clicked. */
.milestone .ms-title-input { border: 1px solid transparent; background: transparent; border-radius: .4rem; padding: 0 .25rem; max-width: 100%; font: inherit; }
.milestone .ms-title-input:hover { border-color: var(--step-light-grey-2); }
.milestone .ms-title-input:focus { border-color: var(--step-orange-1); background: #fff; outline: none; }
/* Keep room for the scrollbar on every page, so short pages (e.g. SOWs) do not shift the top bar sideways. */
html { scrollbar-gutter: stable; }
/* Quote details dates: the same heading height for each, so the boxes line up. */
.date-head { display: flex; align-items: center; min-height: 1.75rem; margin-bottom: .25rem; }
/* Quotes page: filters across the top, quotes in columns by status */
.lf-bar { padding: .45rem .75rem; }
.lf-bar .btn-sm { padding: .15rem .6rem; font-size: .8rem; }
.lf-bar .gap-2 { gap: .35rem !important; }
.lf-bar .lf-search { width: 12rem; max-width: 12rem; padding-top: .2rem; padding-bottom: .2rem; font-size: .85rem; }
.lf-menu { min-width: 17rem; max-width: 22rem; }
.lf-menu-wide { min-width: 20rem; }
.lf-menu .lf-scroll { max-height: 50vh; overflow: auto; }
.lf-drop .lf-n { margin-left: .3rem; color: var(--step-orange-1); }
.lf-drop .btn-secondary .lf-n { color: #fff; }
.q-board { display: flex; gap: .5rem; align-items: stretch; padding-bottom: .5rem; } /* columns as tall as the longest, so every heading stays in view */ /* no scroll box of its own, so the headings can stay in view */
.q-col { flex: 1 1 0; min-width: 0; /* all the columns always fit on the screen */ background: var(--step-light-grey-3, #f3f5f6); border-radius: .9rem; padding: .6rem; }
.q-col-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-weight: 600; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; margin: -.6rem -.6rem .5rem; padding: .7rem .85rem .45rem; position: sticky; top: var(--top-bar-h, 0px); z-index: 5; background: var(--step-light-grey-3, #f3f5f6); border-radius: .9rem .9rem 0 0; }
.q-card { display: block; background: #fff; border-radius: .7rem; padding: .5rem .6rem; overflow-wrap: anywhere; margin-bottom: .5rem; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.q-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.14); color: inherit; }
.q-card .ref { font-size: .75em; color: var(--step-dark-blue-1, #4a6170); }
/* A Sent card's likelihood: in the card's top right corner, with the reference and hover buttons kept clear of it */
.like-pct { position: absolute; top: .45rem; right: .6rem; }
/* the reference stays on one line, beside the hover buttons (which keep clear of the likelihood) */
.q-card .ref { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.q-card { position: relative; }
/* The hover buttons (duplicate, delete) sit over the card's top right corner, left of any likelihood, so they never need a row of their own */
.q-card-actions { position: absolute; top: .3rem; right: .35rem; z-index: 1; background: #fff; border-radius: .4rem; padding: 0 .1rem; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.q-card:hover .q-card-actions { pointer-events: auto; }
.q-card:has(.like-pct) .q-card-actions { right: 2.5rem; }
.q-card:hover .q-card-actions { opacity: 1; }
.q-card-actions .btn-icon { padding: 0 .2rem; font-size: .85em; }
.q-card[draggable="true"] { cursor: grab; }
.q-card.dragging { opacity: .45; }
/* Where a dragged card will go */
.q-drop-line { height: 3px; border-radius: 2px; background: var(--step-orange-1, #FF5100); margin: -.15rem 0 .35rem; }
.q-col.drop-ready { outline: 2px dashed transparent; transition: outline-color .1s, background .1s; }
.q-col.drop-over { outline-color: var(--step-orange-1, #FF5100); background: #fff3ec; }
/* Narrow columns (all seven showing): smaller text */
.q-board.q-many .q-card { font-size: .85em; }
.q-board.q-many .q-col-head { font-size: .7em; }
/* Adjustments that need attention (replaced by a later Set, or a Set now out of date) */
.adj-issue { color: #b42318; margin-top: .2rem; }
.adj-issue a { color: inherit; font-weight: 600; }
.badge-adjust-err { background: #fde8e7; color: #b42318; }
/* Customer contacts: their part in proposals */
.cust-role { display: inline-flex; align-items: center; gap: .25rem; margin-right: .6rem; white-space: nowrap; cursor: pointer; }
.cust-contacts td { vertical-align: middle; }
.badge-warn { background: #fff4e5; color: #a15c00; }
.badge-ok { background: var(--step-light-green-1, #e6f6e6); color: #0a7a10; }
/* WIP: SOWs issued to the team */
.badge-wip { background: #fff1e6; color: #b34700; }
.q-card .sow-due { color: var(--step-dark-blue-1, #23415a); }
/* Customers page: organisations as cards in columns */
.cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.cust-grid .q-card { margin-bottom: 0; }
.cust-list td, .cust-list th { padding-top: .2rem; padding-bottom: .2rem; }
.cust-list .cust-card-link { max-width: 32rem; }
/* Customer cards: the card opens the customer; the Teams and SharePoint icons open (or set up) the links */
.cust-card-main { display: block; color: inherit; text-decoration: none; }
.cust-card-main:hover { color: inherit; }
.cust-link { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.45rem; border-radius: .45rem; font-size: .85rem; text-decoration: none; border: 1px solid transparent; }
.cust-link.on { background: var(--step-light-blue-1, #e3eef6); color: var(--step-dark-blue-1, #23415a); }
.cust-link.on:hover { background: var(--step-dark-blue-1, #23415a); color: #fff; }
.cust-link.off { background: #fff7ef; color: #d9a77a; border: 1px dashed #e8b98d; }
a.cust-link.off:hover { background: #ffe9d6; color: #b34700; border-style: solid; }
.cust-link.off.active { background: #ffe9d6; color: #b34700; border-style: solid; }
/* Quote details dates: boxes just wide enough for a date, spaced evenly along one row; ASAP sits beside the Due box */
.date-col { flex: 0 0 auto; width: auto; margin-right: 1.25rem; }
.date-col .form-control { width: 8.5rem; padding: .3rem .5rem; font-size: .9rem; }
@media (max-width: 575px) { .date-col { flex: 0 0 50%; margin-right: 0; } }
.cust-contact-form input { min-width: 7.5rem; }
/* Quotes board for the team: each line stays on one line (cut short with ... if it must) */
.date-week { color: var(--step-orange-1); font-weight: 600; }
.date-late { color: var(--step-red); font-weight: 600; }
.pipe-card .pipe-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-card .pipe-one + .pipe-one { margin-top: .15rem; }
/* Switching a quote's view (Milestones, Tasks, SOW, Timeline) keeps the page still: the browser must not shift it
   to follow content as the new view settles */
html { overflow-anchor: none; }