/* INGEST by Tango - styles follow the STEP app and QUOTE by Tango (shared base, Ingestor additions at the end). */

: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; }
input[type=number]::-webkit-inner-spin-button { opacity: .4; }

/* 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; }
	.app-header-profile { justify-self: 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 .top-nav { font-size: 1em; }
.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; }

/* 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 620px; display: grid; grid-template-columns: .7fr 1fr 1.15fr 1fr 1fr; gap: .6rem; padding: 10px 18px; }
.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; }
.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; }

.nums { display: grid; grid-template-columns: .85fr .85fr 1.35fr .85fr 1.05fr 1fr 1.1fr; gap: .35rem .6rem; align-items: end; }
.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; }
.nav-totals { display: flex; gap: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-totals small { font-weight: 400; color: #7b8a93; }
.quote-top .form-box { padding: 16px 20px; }
.nums .form-control, .nums .form-select { padding: .25rem .45rem; font-size: .9em; border-radius: .5rem; }
.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; }
.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.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; }

/* 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; }
}