:root {
  --ink: #172033;
  --muted: #647084;
  --line: #d9dee7;
  --soft-line: #edf0f5;
  --panel: #ffffff;
  --page: #f5f6f8;
  --brand: #0a4da3;
  --brand-2: #02a7a3;
  --warn: #c77700;
  --danger: #b3261e;
  --good: #18794e;
  --shadow: 0 18px 48px rgba(19, 34, 58, 0.11);
}

.quote-attachments-workspace {
  padding: 14px 16px 28px;
}

.quote-attachments-heading,
.quote-attachments-toolbar,
.quote-folder-create-form,
.quote-attachment-actions {
  display: flex;
  align-items: center;
}

.quote-attachments-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.quote-attachments-heading h3 {
  margin: 0;
  font-size: 15px;
}

.quote-attachments-toolbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.quote-attachments-toolbar form {
  display: flex;
  width: min(520px, 100%);
}

.quote-attachments-toolbar input,
.quote-folder-create-form input {
  min-height: 32px;
  border: 1px solid #bfcbd6;
  border-radius: 0;
  background: #ffffff;
  padding: 6px 9px;
}

.quote-attachments-toolbar input {
  flex: 1;
  min-width: 180px;
}

.quote-folder-create-form {
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #cbd6df;
  background: #f2f4f6;
}

.quote-folder-create-form label {
  display: grid;
  gap: 4px;
  width: min(420px, 100%);
  font-weight: 700;
}

.quote-attachment-file-input {
  display: none;
}

.quote-attachment-drop-zone {
  width: min(560px, 100%);
  min-height: 58px;
  margin: 4px auto 12px;
  border: 2px dashed #b7c9d8;
  background: #fbfdff;
  color: #1675c4;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  cursor: pointer;
}

.quote-attachment-drop-zone:hover,
.quote-attachment-drop-zone:focus,
.quote-attachment-drop-zone.is-dragging {
  border-color: #0875d1;
  background: #eaf5ff;
  outline: 0;
}

.quote-attachment-breadcrumbs {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #cbd4dc;
}

.quote-attachment-breadcrumbs button {
  border: 0;
  background: transparent;
  color: #126fbd;
  padding: 5px 2px;
  font-weight: 700;
}

.quote-attachment-table-wrap {
  border: 0;
}

.quote-attachment-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.quote-attachment-table th,
.quote-attachment-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #d9e0e6;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.quote-attachment-table th {
  border-bottom-color: #8997a4;
  color: #45515d;
  font-size: 10px;
}

.quote-attachment-table th:first-child {
  width: 34%;
}

.quote-attachment-table th:last-child {
  width: 150px;
}

.quote-attachment-name {
  max-width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: #126fbd;
  text-align: left;
}

.quote-attachment-kind {
  flex: 0 0 42px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #aebbc7;
  background: #f1f4f6;
  color: #485865;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-attachment-name strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-attachment-actions {
  gap: 6px;
}

.quote-attachment-actions button {
  border: 1px solid #9fb1bf;
  background: #ffffff;
  color: #126fbd;
  min-height: 26px;
  padding: 4px 7px;
}

.quote-attachment-actions .delete {
  color: #b42318;
  border-color: #d7aaa7;
}

.quote-attachment-empty,
.quote-attachment-error {
  padding: 14px 10px;
  color: #687384;
}

.quote-attachment-error {
  margin-top: 8px;
  border: 1px solid #d7aaa7;
  background: #fff1f0;
  color: #a51d16;
}

@media (max-width: 760px) {
  .quote-attachments-heading,
  .quote-attachments-toolbar,
  .quote-folder-create-form {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-attachments-toolbar form,
  .quote-folder-create-form label {
    width: 100%;
  }

  .quote-attachment-table {
    min-width: 780px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.04), rgba(10, 77, 163, 0.08)),
    var(--page);
}

.login-frame {
  width: min(980px, 100%);
  min-height: 560px;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.login-panel {
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
}

.login-mark {
  background: #111827;
  color: #ffffff;
}

.login-brand strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.login-brand span,
.login-note {
  color: var(--muted);
  font-size: 12px;
}

.login-copy h1 {
  font-size: 38px;
  margin-bottom: 24px;
}

.login-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
}

.login-field input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.microsoft-button {
  min-height: 46px;
  border: 1px solid #8a98aa;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
}

.microsoft-button:hover {
  border-color: var(--brand);
}

.microsoft-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.ms-icon {
  width: 19px;
  height: 19px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.ms-icon i:nth-child(1) {
  background: #f25022;
}

.ms-icon i:nth-child(2) {
  background: #7fba00;
}

.ms-icon i:nth-child(3) {
  background: #00a4ef;
}

.ms-icon i:nth-child(4) {
  background: #ffb900;
}

.login-note {
  margin: 18px 0 0;
  line-height: 1.45;
}

.login-status {
  min-height: 18px;
  margin: 14px 0 0;
  color: #35536f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.login-status.error {
  color: #b42318;
}

.login-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  background:
    radial-gradient(circle at 26% 28%, rgba(2, 167, 163, 0.28), transparent 30%),
    linear-gradient(110deg, #07111f, #111827 58%, #0a4da3);
  color: #ffffff;
}

.login-hero::after {
  content: "";
  position: absolute;
  left: 20%;
  right: -10%;
  top: 42%;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-2), #f6c445, transparent);
  box-shadow: 0 0 30px rgba(246, 196, 69, 0.7);
}

.hero-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-logo span {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #111827;
  font-weight: 900;
  font-size: 20px;
}

.hero-logo strong {
  font-size: 38px;
}

.login-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 520px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.08;
}

.hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.hero-stats span {
  min-height: 78px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  color: #cbd5e1;
  font-size: 12px;
}

.hero-stats b {
  color: #ffffff;
  font-size: 20px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #111827;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-weight: 900;
}

.brand strong,
.sidebar-footer strong {
  display: block;
  font-size: 15px;
}

.brand span,
.sidebar-footer span {
  display: block;
  color: #aeb7c7;
  font-size: 12px;
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 6px;
  padding: 22px 0;
}

.nav-item {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #cbd5e1;
  background: transparent;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--brand-2);
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.nav-count {
  color: #9aa8bc;
  font-size: 12px;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 6px rgba(2, 167, 163, 0.14);
  flex: 0 0 auto;
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 86px;
  padding: 18px 28px;
  background: rgba(245, 246, 248, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
}

h2 {
  font-size: 20px;
  margin-bottom: 14px;
}

h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-chip {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 6px 0 12px;
}

.user-chip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: #f1f5f9;
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.user-chip button:hover {
  background: #e2e8f0;
}

.search-box {
  width: min(360px, 36vw);
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.search-box input,
.form-grid input,
.form-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 12px;
}

.icon-button,
.primary-action,
.secondary-action,
.ghost-action,
.segmented button {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.icon-button {
  width: 42px;
  color: var(--danger);
}

.primary-action {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
  padding: 0 16px;
}

.secondary-action,
.ghost-action {
  padding: 0 14px;
}

.ghost-action {
  background: transparent;
}

.alert-strip {
  display: none;
  margin: 20px 28px 0;
  border: 1px solid #f3d08b;
  background: #fff8e8;
  border-radius: 8px;
  padding: 12px 14px;
  color: #6c4200;
  font-size: 14px;
}

.alert-strip.visible {
  display: block;
}

.content {
  padding: 24px 28px 40px;
}

.grid {
  display: grid;
  gap: 16px;
}

.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  grid-column: span 3;
  padding: 16px;
}

.metric-card span,
.table-meta,
.mini-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 27px;
}

.metric-card em {
  color: var(--good);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.wide {
  grid-column: span 8;
}

.side {
  grid-column: span 4;
}

.full {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}

.panel-body {
  padding: 16px;
}

.job-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.stage {
  min-height: 220px;
  background: #f8fafc;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 10px;
}

.stage-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.job-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  margin-bottom: 8px;
}

.job-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.job-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

.priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #edf7f4;
  color: var(--good);
  font-size: 11px;
  font-weight: 800;
}

.priority.hot {
  background: #fff1f0;
  color: var(--danger);
}

.dispatch-map {
  min-height: 314px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(23, 32, 51, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(23, 32, 51, 0.05) 1px, transparent 1px),
    #eef6f7;
  background-size: 44px 44px;
}

.route-line {
  position: absolute;
  height: 4px;
  border-radius: 99px;
  background: var(--brand);
  transform-origin: left center;
}

.route-one {
  width: 210px;
  left: 76px;
  top: 118px;
  transform: rotate(24deg);
}

.route-two {
  width: 176px;
  left: 242px;
  top: 200px;
  transform: rotate(-18deg);
  background: var(--brand-2);
}

.map-pin {
  position: absolute;
  width: 92px;
  min-height: 54px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(19, 34, 58, 0.14);
  padding: 8px;
  font-size: 12px;
  font-weight: 800;
}

.map-pin span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.pin-a {
  left: 38px;
  top: 82px;
}

.pin-b {
  right: 48px;
  top: 70px;
}

.pin-c {
  left: 210px;
  bottom: 42px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft-line);
}

.timeline-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.time {
  color: var(--brand);
  font-weight: 900;
  font-size: 13px;
}

.timeline-item strong {
  display: block;
  font-size: 14px;
}

.timeline-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.app-menu-grid,
.record-grid,
.project-grid,
.shortcut-grid {
  display: grid;
  gap: 12px;
}

.app-menu-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.record-grid,
.project-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.shortcut-grid {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.app-menu-tile {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  text-align: left;
}

.app-menu-tile:hover {
  border-color: var(--brand);
}

.app-menu-tile span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-menu-tile p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 0;
}

.static-tile:hover {
  border-color: var(--line);
}

.record-card,
.project-card {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.record-card h3 {
  font-size: 18px;
  margin: 8px 0;
}

.record-card p {
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 12px;
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-meta span {
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.project-card {
  display: grid;
  gap: 12px;
}

.project-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.project-head h3 {
  font-size: 18px;
  margin: 6px 0 0;
}

.progress-track {
  height: 10px;
  border-radius: 99px;
  background: #edf0f5;
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}

.vertical-flow {
  grid-template-columns: 1fr;
  overflow-x: visible;
}

.module-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  align-items: start;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--soft-line);
  font-size: 14px;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #eef2ff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.pill.warn {
  background: #fff4df;
  color: var(--warn);
}

.pill.good {
  background: #eaf8f1;
  color: var(--good);
}

.pill.danger {
  background: #fff1f0;
  color: var(--danger);
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-total {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.quote-total span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.quote-total strong {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.segmented button {
  border: 0;
  border-radius: 0;
  min-width: 86px;
}

.segmented button.active {
  background: var(--ink);
  color: #ffffff;
}

.tender-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.workflow-step {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  text-align: left;
}

.workflow-step:hover,
.workflow-step.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px rgba(10, 77, 163, 0.12);
}

.workflow-step.active {
  background: #f3f8ff;
}

.workflow-step span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.workflow-step strong {
  font-size: 18px;
}

.workflow-step small {
  color: var(--muted);
  font-weight: 700;
}

.phase-detail {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
}

.phase-detail h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.phase-detail p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.phase-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.line-item-list {
  display: grid;
  gap: 10px;
}

.line-item {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}

.line-item.excluded {
  background: #fff8e8;
  border-color: #f3d08b;
}

.line-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.line-item input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.line-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.line-item small {
  color: var(--muted);
  font-weight: 700;
}

.line-item b {
  white-space: nowrap;
}

.compact-total {
  margin-top: 12px;
}

.operating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.operating-tile {
  min-height: 132px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.operating-tile strong {
  display: block;
  margin: 8px 0;
  font-size: 20px;
}

.operating-tile p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 0;
}

.setup-list {
  display: grid;
  gap: 10px;
}

.setup-row {
  min-height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.setup-row strong,
.site-record strong {
  display: block;
}

.setup-row span:not(.pill),
.site-record span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.user-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #ffffff;
  font-weight: 900;
}

.user-panel span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.quick-menu {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.quick-menu button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  padding: 0 12px;
  font-weight: 800;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.process-step {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.process-step span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.process-step strong {
  display: block;
  margin-top: 18px;
}

.site-record {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.report-tile {
  min-height: 142px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 8px;
  height: 130px;
  margin-top: 10px;
}

.bar {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  min-height: 16px;
}

.empty-state {
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
}

.nav-group {
  position: relative;
}

.nav-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 30;
  min-width: 220px;
  border-radius: 8px;
  background: #0f5482;
  color: #ffffff;
  box-shadow: var(--shadow);
  padding: 12px;
}

.nav-group:hover .nav-flyout {
  display: grid;
  gap: 8px;
}

.nav-flyout strong {
  margin-bottom: 4px;
}

.nav-flyout span {
  color: #dbeafe;
  font-size: 13px;
}

.workspace-page {
  display: grid;
  gap: 0;
}

.workspace-path {
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}

.order-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.order-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.order-breadcrumb button:hover,
.order-breadcrumb button:focus-visible {
  text-decoration: underline;
}

.order-breadcrumb strong {
  color: inherit;
}

.section-tabs,
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.section-tabs button,
.sub-tabs button {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--brand);
  padding: 0 18px;
  font-weight: 800;
}

.section-tabs button.active,
.sub-tabs button.active {
  background: #e5e7eb;
  color: var(--ink);
}

.sub-tabs {
  background: #dedede;
  border-bottom: 0;
  margin-bottom: 18px;
}

.page-title-row,
.action-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.control-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.control-strip input {
  min-height: 42px;
  width: min(360px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.flat-card {
  box-shadow: none;
}

.empty-cell {
  color: var(--muted);
  text-align: center;
  padding: 36px 12px;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.quote-main,
.quote-side,
.task-form {
  background: #ffffff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 16px;
}

.form-columns,
.filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 18px;
}

.filter-panel {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  border: 1px solid var(--soft-line);
  background: #eeeeee;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 18px;
}

.field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 10px;
}

.editor-block {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.editor-block label {
  font-weight: 900;
}

.editor-toolbar {
  min-height: 34px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #f8fafc;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.editor-block textarea {
  width: 100%;
  min-height: 170px;
  border: 1px solid var(--line);
  resize: vertical;
}

.map-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #eef6f7;
  margin-bottom: 16px;
}

.map-title {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  font-weight: 900;
}

.map-grid {
  min-height: 280px;
  position: relative;
  background:
    linear-gradient(90deg, rgba(23, 32, 51, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(23, 32, 51, 0.08) 1px, transparent 1px),
    #d8ecf8;
  background-size: 54px 54px;
}

.map-grid b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 14px;
  color: var(--muted);
}

.activity-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.empty-stage {
  min-height: 74px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.scheduler-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.resource-list,
.schedule-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.resource-list h3 {
  padding: 12px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.resource-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  font-size: 13px;
}

.week-header,
.week-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
}

.week-header span {
  background: #e5e7eb;
  border-right: 1px solid #cfd6e0;
  padding: 10px;
  font-weight: 900;
}

.week-body span {
  min-height: 34px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.task-form {
  display: grid;
  gap: 14px;
}

.time-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.setting-card {
  min-height: 112px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
}

.setting-card p {
  color: var(--muted);
  margin: 6px 0 0;
}

.reports-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
}

.report-categories {
  display: grid;
  align-content: start;
  gap: 12px;
}

.report-categories span {
  color: var(--ink);
  font-size: 13px;
}

.report-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 36px;
}

.report-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
}

.report-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--brand);
  font-weight: 900;
}

.report-row strong {
  color: var(--brand);
}

.report-row p {
  color: var(--ink);
  line-height: 1.45;
  font-size: 13px;
  margin: 8px 0 0;
}

@media (max-width: 1080px) {
  .login-frame {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .login-hero {
    padding: 40px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .brand div:not(.brand-mark),
  .nav-item span:not(.nav-icon),
  .nav-count,
  .sidebar-footer div {
    display: none;
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .metric-card,
  .wide,
  .side {
    grid-column: span 6;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .tender-board {
    grid-template-columns: repeat(5, minmax(168px, 1fr));
  }

  .phase-detail {
    display: grid;
  }

  .operating-grid,
  .app-menu-grid,
  .record-grid,
  .project-grid,
  .settings-grid,
  .report-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .quote-layout,
  .scheduler-layout,
  .reports-layout {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .login-screen {
    padding: 18px;
  }

  .login-frame {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .login-panel {
    padding: 28px 22px;
  }

  .login-brand {
    margin-bottom: 30px;
  }

  .login-hero {
    min-height: 320px;
    padding: 28px 22px;
  }

  .login-hero h2 {
    font-size: 30px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 14px;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(68px, 1fr);
    overflow-x: auto;
    padding: 0;
  }

  .topbar {
    position: static;
    display: grid;
    padding: 18px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
  }

  .search-box {
    width: 100%;
  }

  .user-chip {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .content,
  .alert-strip {
    margin-left: 18px;
    margin-right: 18px;
    padding-left: 0;
    padding-right: 0;
  }

  .metric-card,
  .wide,
  .side {
    grid-column: 1 / -1;
  }

  .report-grid {
    grid-template-columns: 1fr 1fr;
  }

  .phase-actions {
    display: grid;
  }

  .operating-grid,
  .app-menu-grid,
  .record-grid,
  .project-grid,
  .shortcut-grid,
  .settings-grid,
  .report-list,
  .form-columns,
  .filter-panel,
  .time-row {
    grid-template-columns: 1fr;
  }

  .section-tabs,
  .sub-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .section-tabs button,
  .sub-tabs button {
    white-space: nowrap;
  }

  .reports-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .login-screen {
    padding: 0;
  }

  .login-frame {
    border: 0;
    box-shadow: none;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    grid-template-columns: 1fr auto;
  }

  .primary-action {
    grid-column: 1 / -1;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }
}

/* Leads register and shared operational pipeline */
.leads-register-page {
  max-width: none;
}

.leads-register-page .workspace-path {
  margin-bottom: 5px;
}

.pipeline-tabs {
  min-height: 42px;
  gap: 0;
  border-bottom: 0;
}

.pipeline-tabs button {
  min-width: 90px;
  min-height: 38px;
  padding: 0 18px;
  font-size: 11px;
}

.pipeline-tabs button.active {
  background: #dedede;
  color: #111827;
  font-weight: 700;
}

.pipeline-status-tabs {
  min-height: 36px;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #dedede;
}

.pipeline-status-tabs button {
  min-width: 90px;
  min-height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.pipeline-status-tabs button:hover,
.pipeline-status-tabs button.active {
  border-bottom-color: #0875d1;
  background: #f2f2f2;
  color: #111827;
  font-weight: 700;
}

.pipeline-heading-row {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0 5px;
}

.pipeline-heading-row h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.pipeline-heading-row h2 span {
  color: #5f6874;
  font-weight: 400;
}

.pipeline-heading-row p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 11px;
}

.pipeline-search-strip {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 9px;
}

.pipeline-search-strip input {
  width: min(430px, 48vw);
  min-height: 28px;
  height: 28px;
  border: 1px solid #87b6dc;
  border-radius: 0;
  background: #eaf6ff;
  padding: 4px 9px;
  font: inherit;
}

.pipeline-search-strip button {
  min-height: 28px;
  border-radius: 0;
}

.pipeline-table-panel {
  position: relative;
  border-top: 1px solid #9ca6b2;
}

.pipeline-table-panel.menu-open .table-wrap {
  padding-bottom: 175px;
}

.pipeline-table {
  width: 100%;
  min-width: 1120px;
  table-layout: auto;
}

.pipeline-table th,
.pipeline-table td {
  height: 35px;
  padding: 5px 8px;
  white-space: nowrap;
  font-size: 11px;
}

.pipeline-table th:first-child,
.pipeline-table td:first-child {
  width: 28px;
  text-align: center;
}

.pipeline-table th:nth-child(2),
.pipeline-table td:nth-child(2) {
  width: 92px;
}

.pipeline-table th:nth-child(3),
.pipeline-table td:nth-child(3) {
  width: 94px;
}

.pipeline-table th:nth-child(7),
.pipeline-table td:nth-child(7) {
  text-align: right;
}

.pipeline-table th:last-child,
.pipeline-table td:last-child {
  width: 58px;
  text-align: right;
}

.pipeline-table tbody tr:hover td {
  background: #f1f8ff;
}

.pipeline-record-name {
  color: #111827;
  font-weight: 600;
}

.pipeline-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #46515f;
  font-size: 10px;
}

.pipeline-status i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #36c968;
}

.pipeline-status-progress i {
  background: #8bdc43;
}

.pipeline-status-complete i,
.pipeline-status-invoiced i,
.pipeline-status-archived i {
  background: #ff5b61;
}

.pipeline-options-cell {
  position: relative;
}

.pipeline-options-button {
  width: 31px;
  height: 24px;
  border: 1px solid #9aa5b1;
  border-radius: 2px;
  background: #ffffff;
  color: #3f4a59;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.pipeline-options-button:hover,
.pipeline-options-button[aria-expanded="true"] {
  border-color: #0875d1;
  background: #eaf6ff;
  color: #0875d1;
}

.pipeline-row-menu {
  position: absolute;
  top: 31px;
  right: 7px;
  z-index: 25;
  width: 154px;
  display: grid;
  padding: 6px;
  border: 1px solid #aeb7c2;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18);
  text-align: left;
}

.pipeline-row-menu strong {
  padding: 7px 7px 4px;
  border-top: 1px solid #e0e4e9;
  color: #687384;
  font-size: 10px;
  text-transform: uppercase;
}

.pipeline-row-menu button {
  min-height: 27px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #273444;
  font-size: 11px;
  text-align: left;
  padding: 0 7px;
  cursor: pointer;
}

.pipeline-row-menu button:hover,
.pipeline-row-menu button.active {
  background: #eaf6ff;
  color: #0875d1;
}

@media (max-width: 860px) {
  .pipeline-tabs,
  .pipeline-status-tabs {
    overflow-x: auto;
  }

  .pipeline-tabs button,
  .pipeline-status-tabs button {
    flex: 0 0 auto;
  }

  .pipeline-search-strip input {
    width: 100%;
  }
}

/* Simpro-style visual pass based on the supplied screenshots */
:root {
  --simpro-blue: #1f7fd1;
  --simpro-blue-dark: #13547e;
  --simpro-top: #f3f3f3;
  --simpro-tab: #dedede;
  --simpro-line: #cfcfcf;
  --simpro-text: #0d1b2a;
}

body {
  background: #ffffff;
  color: var(--simpro-text);
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 12px;
}

.app-shell {
  grid-template-columns: 134px minmax(0, 1fr);
  background: #ffffff;
}

.sidebar {
  background: var(--simpro-blue);
  padding: 0;
}

.brand {
  min-height: 45px;
  justify-content: center;
  gap: 7px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
}

.brand strong {
  font-size: 17px;
  line-height: 1;
}

.brand span {
  color: #ffffff;
  font-size: 10px;
  text-transform: uppercase;
}

.nav-list {
  padding: 6px 0 0;
  gap: 0;
}

.nav-item {
  min-height: 34px;
  border-radius: 0;
  color: #ffffff;
  grid-template-columns: 26px 1fr;
  gap: 3px;
  padding: 4px 8px;
  font-size: 12px;
}

.nav-item:hover,
.nav-item.active {
  background: #165f9d;
  color: #ffffff;
  box-shadow: none;
}

.nav-icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: #cbe9ff;
  font-size: 10px;
}

.nav-flyout {
  min-width: 170px;
  border-radius: 0;
  background: var(--simpro-blue-dark);
  padding: 12px 10px;
  left: 100%;
}

.nav-flyout strong {
  font-size: 16px;
}

.nav-flyout span {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
}

.sidebar-footer {
  border: 0;
  border-radius: 0;
  padding: 10px;
  background: #2795ec;
  margin-top: auto;
}

.status-dot {
  display: none;
}

.workspace {
  background: #ffffff;
}

.topbar {
  min-height: 36px;
  height: 36px;
  padding: 0;
  background: var(--simpro-top);
  border-bottom: 1px solid #d7d7d7;
  gap: 0;
  align-items: stretch;
}

.company-tab,
.open-work-tab {
  min-width: 238px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-right: 1px solid #d8d8d8;
  background: #ffffff;
}

.open-work-tab {
  min-width: 260px;
  background: #ffffff;
  border-top: 2px solid #c8d8ef;
}

.tab-icon {
  color: #0b6fc6;
  font-size: 14px;
}

h1 {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.topbar-actions {
  margin-left: auto;
  gap: 0;
  padding-right: 8px;
}

.search-box {
  width: 330px;
  display: flex;
}

.search-box input {
  min-height: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #ffffff;
  font-style: italic;
}

.icon-button,
.top-icon-button {
  width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0b6fc6;
  font-weight: 900;
}

.user-chip {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-chip span {
  max-width: 145px;
  color: #1f2937;
}

.user-chip button {
  min-height: 24px;
  border-radius: 0;
  background: #e5e7eb;
}

.content {
  padding: 16px 20px 34px;
}

.alert-strip {
  margin: 10px 20px 0;
  border-radius: 0;
}

.card,
.quote-main,
.quote-side,
.task-form,
.resource-list,
.schedule-grid,
.map-panel,
.activity-panel,
.setting-card,
.record-card,
.project-card,
.report-tile {
  border-radius: 0;
  box-shadow: none;
}

.metric-card {
  padding: 10px 12px;
}

.metric-card strong {
  font-size: 22px;
}

.workspace-path {
  margin: 6px 0 12px;
  font-size: 12px;
  color: #0067c5;
}

.section-tabs,
.sub-tabs {
  background: #ffffff;
  border-bottom: 0;
}

.section-tabs button,
.sub-tabs button {
  min-height: 38px;
  border-radius: 0;
  color: #0067c5;
  font-size: 12px;
  padding: 0 22px;
}

.section-tabs button.active,
.sub-tabs button.active {
  background: var(--simpro-tab);
}

.sub-tabs {
  background: var(--simpro-tab);
}

.page-title-row {
  margin: 18px 0 14px;
}

.page-title-row h2,
.quote-main h2,
.panel-header h2 {
  font-size: 16px;
  font-weight: 700;
}

.table-meta {
  font-size: 11px;
}

.control-strip {
  margin: 14px 0 18px;
  gap: 8px;
}

.control-strip input {
  width: 320px;
  min-height: 26px;
  height: 26px;
  border-radius: 0;
}

.primary-action,
.secondary-action,
.ghost-action {
  min-height: 27px;
  border-radius: 2px;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0 14px;
}

.primary-action {
  background: #2ba943;
  border-color: #2ba943;
}

.secondary-action {
  background: #0875d1;
  border-color: #0875d1;
  color: #ffffff;
}

.ghost-action {
  background: #d1d5db;
  border-color: #d1d5db;
}

table {
  min-width: 980px;
  font-size: 12px;
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid #dcdcdc;
  font-size: 12px;
}

th {
  color: #5d6571;
  text-transform: none;
  font-weight: 700;
}

.empty-cell {
  padding: 42px 12px;
  color: #7a8491;
}

.quote-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.8fr);
}

.quote-main,
.quote-side,
.task-form {
  border: 0;
  padding: 0;
}

.form-columns {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.field span {
  font-size: 11px;
  color: #333;
}

.field input {
  min-height: 28px;
  height: 28px;
  border-radius: 0;
  background: #ffffff;
}

.editor-toolbar {
  min-height: 27px;
  border-radius: 0;
}

.editor-block textarea {
  min-height: 220px;
  border-radius: 0;
}

.map-panel {
  min-height: 310px;
}

.map-title {
  font-size: 12px;
}

.map-grid {
  min-height: 300px;
}

.activity-panel {
  min-height: 205px;
  border-left: 4px solid #0875d1;
}

.filter-panel {
  border-radius: 0;
  background: #dedede;
}

.scheduler-layout {
  grid-template-columns: 420px minmax(0, 1fr);
}

.week-header span {
  background: #f4f4f4;
  text-align: center;
  font-size: 11px;
}

.week-body span {
  min-height: 26px;
}

.settings-grid {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.reports-layout {
  grid-template-columns: 160px minmax(0, 1fr);
}

.report-row {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 100px;
}

.report-icon {
  border-radius: 0;
  background: #ffffff;
  color: #333;
  font-size: 14px;
}

.nav-flyout button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.nav-flyout button:hover,
.nav-flyout button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: 0;
}

.nav-flyout button.create-link {
  margin-top: 4px;
  font-weight: 700;
}

.nav-flyout button.create-link::before {
  content: "+";
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  margin-right: 6px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--simpro-blue-dark);
  font-weight: 900;
}

.people-page {
  max-width: none;
}

.people-layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.people-side-panel {
  min-height: 520px;
  padding: 14px 0;
  background: #eeeeee;
  border: 1px solid #d6d6d6;
}

.people-side-panel > strong,
.people-create-menu strong {
  display: block;
  padding: 0 14px 8px;
  color: #333333;
  font-size: 13px;
}

.people-side-panel button,
.people-create-menu button {
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0067c5;
  font-size: 12px;
  text-align: left;
  padding: 0 14px;
  cursor: pointer;
}

.people-side-panel button:hover,
.people-side-panel button.active,
.people-create-menu button:hover {
  background: #dcdcdc;
  color: #111827;
}

.people-side-panel button b {
  min-width: 20px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  background: #ffffff;
  color: #5f6874;
  border: 1px solid #c7c7c7;
  font-size: 11px;
  font-weight: 700;
}

.people-create-menu {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d0d0d0;
}

.people-main-panel {
  min-width: 0;
}

.people-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.people-records-panel,
.people-form-panel {
  min-width: 0;
  border-radius: 0;
}

.people-form-panel {
  padding: 16px;
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.form-title-row h3,
.people-link-panel h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
}

.people-form-group {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #d6d6d6;
  background: #f4f4f4;
}

.people-form-group legend {
  padding: 0 7px;
  color: #333333;
  font-size: 12px;
  font-weight: 700;
}

.people-form-group .form-columns {
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px 12px;
}

.field select,
.field textarea {
  width: 100%;
  min-height: 28px;
  border: 1px solid #c9cfd8;
  border-radius: 0;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.field textarea {
  min-height: 84px;
  resize: vertical;
}

.field.field-wide {
  grid-column: 1 / -1;
}

.people-table {
  min-width: 760px;
}

.small-action {
  min-height: 24px;
  border: 1px solid #c9cfd8;
  border-radius: 2px;
  background: #ffffff;
  color: #0067c5;
  font-size: 11px;
  padding: 0 9px;
  cursor: pointer;
}

.small-action:hover {
  background: #eef6ff;
}

.people-link-panel {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #d6d6d6;
}

.people-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.people-link-grid article {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
}

.people-link-grid strong {
  color: #111827;
  font-size: 12px;
}

.people-link-grid span {
  color: #6b7280;
  font-size: 11px;
}

.jobs-page {
  max-width: none;
}

.job-filter-tabs,
.job-create-tabs,
.job-workspace-tabs,
.job-detail-tabs {
  min-height: 42px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #cfd7df;
  background: #ffffff;
  overflow-x: auto;
}

.success-action {
  min-height: 32px;
  border: 1px solid #1c983f;
  border-radius: 0;
  background: #24a647;
  color: #ffffff;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.success-action:hover,
.success-action:focus-visible {
  background: #188638;
}

.job-filter-tabs button,
.job-create-tabs button,
.job-workspace-tabs button,
.job-detail-tabs button {
  min-width: 118px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #0868bb;
  padding: 10px 16px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.job-filter-tabs button.active,
.job-create-tabs button.active,
.job-workspace-tabs button.active,
.job-detail-tabs button.active {
  border-bottom-color: #0875d1;
  background: #e2e2e2;
  color: #111827;
}

.job-detail-tabs {
  min-height: 40px;
  background: #e5e5e5;
}

.job-detail-tabs button {
  min-width: 112px;
}

.job-detail-tabs button span {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  margin-left: 6px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #075f9f;
  font-size: 10px;
}

.jobs-register-heading {
  margin-top: 14px;
}

.jobs-register-heading h2 span {
  color: #6b7280;
  font-weight: 500;
}

.job-register-search {
  display: flex;
  width: min(760px, 100%);
  margin: 0 0 12px;
}

.job-register-search input {
  flex: 1;
  min-width: 180px;
  min-height: 34px;
  border: 1px solid #9db4c8;
  border-radius: 0;
  background: #e6f4ff;
  padding: 7px 10px;
}

.job-register-table-wrap {
  border-top: 1px solid #9aa7b2;
}

.job-record-link {
  border: 0;
  background: transparent;
  color: #096dbb;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.job-create-form,
.job-settings-form,
.job-contractors-page,
.job-schedule-page,
.job-placeholder-page {
  background: #ffffff;
}

.job-create-heading,
.job-workspace-heading,
.job-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.job-create-heading {
  padding: 14px 0 10px;
}

.job-create-heading span,
.job-workspace-heading > div:first-child > span {
  color: #0875d1;
  font-size: 11px;
  font-weight: 700;
}

.job-create-heading h2,
.job-workspace-heading h2,
.job-section-heading h3 {
  margin: 3px 0 0;
}

.job-create-fields {
  padding: 16px 0 30px;
}

.job-create-grid,
.job-settings-grid {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 16px;
}

.job-create-grid .field-wide {
  grid-column: 1 / -1;
}

.job-create-grid textarea {
  min-height: 190px;
}

.job-create-grid select[multiple] {
  min-height: 94px;
}

.job-workspace-heading {
  padding: 12px 0;
}

.job-workspace-heading small {
  display: block;
  color: #67717d;
  font-size: 10px;
}

.job-workspace-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-workspace-actions dl {
  display: flex;
  margin: 0 10px 0 0;
  border: 1px solid #c7d3de;
}

.job-workspace-actions dl div {
  min-width: 92px;
  padding: 6px 10px;
  border-right: 1px solid #c7d3de;
}

.job-workspace-actions dl div:last-child {
  border-right: 0;
}

.job-workspace-actions dt {
  color: #66717d;
  font-size: 9px;
}

.job-workspace-actions dd {
  margin: 2px 0 0;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.job-record-strip {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 8px 12px;
  border-bottom: 1px solid #cbd4dc;
  color: #525f6b;
  font-size: 10px;
}

.job-record-strip strong:not(.job-status) {
  color: #096dbb;
}

.job-summary-page {
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(420px, 1.15fr) minmax(270px, .68fr);
  gap: 18px;
  padding: 16px 0 28px;
  align-items: start;
}

.job-summary-description,
.job-estimate-panel,
.job-activity-panel {
  min-width: 0;
}

.job-summary-description h3,
.job-estimate-panel h3,
.job-activity-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.job-summary-description label {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
}

.job-summary-description label small {
  color: #7a828c;
  font-weight: 400;
}

.job-summary-description textarea {
  min-height: 170px;
  border: 1px solid #b9c5d0;
  border-radius: 0;
  padding: 9px;
  resize: vertical;
}

.job-summary-description label:nth-of-type(2) textarea {
  min-height: 110px;
}

.job-inline-save {
  display: flex;
  justify-content: flex-end;
}

.job-cost-chart {
  width: 210px;
  aspect-ratio: 1;
  margin: 12px auto;
  border-radius: 50%;
  background: conic-gradient(#4b7cac 0 var(--material-angle), #b64b49 var(--material-angle) 360deg);
  display: grid;
  place-items: center;
}

.job-cost-chart > div {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-content: center;
  text-align: center;
}

.job-cost-chart strong {
  font-size: 14px;
}

.job-cost-chart span {
  color: #6b7280;
  font-size: 9px;
}

.job-cost-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  color: #4b5563;
  font-size: 10px;
}

.job-cost-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
}

.job-cost-legend .materials { background: #4b7cac; }
.job-cost-legend .labour { background: #b64b49; }

.job-summary-items,
.job-contractors-page table {
  width: 100%;
  border-collapse: collapse;
}

.job-summary-items th,
.job-summary-items td,
.job-contractors-page th,
.job-contractors-page td {
  padding: 7px 8px;
  border-bottom: 1px solid #d7dde3;
  text-align: left;
  font-size: 10px;
}

.job-financial-summary {
  margin: 12px 0 0;
}

.job-financial-summary > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #d9dee3;
  font-size: 10px;
}

.job-financial-summary dt,
.job-financial-summary dd {
  margin: 0;
}

.job-financial-summary .is-total { background: #eef1f3; }
.job-financial-summary .is-grand { background: #e4e8eb; font-weight: 800; }

.job-activity-panel {
  border-left: 3px solid #1686d3;
  background: #f3f4f5;
}

.job-activity-panel > h3 {
  padding: 12px;
  background: #dedede;
}

.job-activity-panel section {
  padding: 10px 12px;
  border-bottom: 1px solid #d5dce2;
}

.job-activity-panel h4 {
  margin: 0 0 8px;
  font-size: 11px;
}

.job-activity-panel p,
.job-timeline-item span,
.job-timeline-item small,
.job-timeline-item time {
  color: #56616d;
  font-size: 9px;
}

.job-warning {
  color: #b3261e !important;
  font-weight: 700;
}

.job-timeline-heading {
  display: flex;
  justify-content: space-between;
}

.job-timeline-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.job-timeline-item > i {
  width: 14px;
  height: 14px;
  border: 3px solid #1686d3;
  border-radius: 50%;
  background: #ffffff;
}

.job-timeline-item div {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: #ffffff;
}

.job-settings-form,
.job-contractors-page,
.job-schedule-page,
.job-placeholder-page {
  padding: 18px 12px 28px;
}

.job-section-heading {
  margin-bottom: 16px;
}

.job-section-heading p {
  margin: 4px 0 0;
  color: #68737f;
  font-size: 10px;
}

.job-schedule-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.job-schedule-cost-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr));
  margin-bottom: 16px;
  border: 1px solid #c8d2dc;
  background: #f4f6f8;
}

.job-schedule-cost-summary > span {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px 13px;
  border-right: 1px solid #c8d2dc;
}

.job-schedule-cost-summary > span:last-child {
  border-right: 0;
}

.job-schedule-cost-summary small {
  color: #687585;
  font-size: 9px;
}

.job-schedule-cost-summary strong {
  color: #17212e;
  font-size: 14px;
}

.job-schedule-cost-summary .total {
  background: #e5f5ea;
}

.job-schedule-cost-summary .total strong {
  color: #137333;
}

.job-available-resources,
.job-scheduled-resources {
  min-width: 0;
}

.job-available-resources {
  border: 1px solid #cbd3dc;
  background: #ffffff;
}

.job-schedule-panel-heading {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #cbd3dc;
  background: #f2f3f5;
}

.job-schedule-panel-heading h4 {
  margin: 0;
  color: #17212e;
  font-size: 14px;
}

.job-schedule-panel-heading span {
  color: #637080;
  font-size: 10px;
}

.job-schedule-panel-heading > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.job-resource-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid #d8dee5;
}

.job-resource-row > span,
.job-resource-row strong,
.job-resource-row small {
  min-width: 0;
  display: block;
}

.job-resource-row strong,
.job-resource-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-resource-row strong {
  color: #273444;
  font-size: 11px;
}

.job-resource-row small {
  margin-top: 3px;
  color: #738091;
  font-size: 9px;
}

.job-resource-row > b {
  color: #4f5b68;
  font-size: 10px;
  white-space: nowrap;
}

.job-resource-row > button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #0875d1;
  border-radius: 0;
  background: #0875d1;
  color: #ffffff;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.job-resource-empty,
.job-schedule-empty {
  min-height: 150px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  color: #687384;
  text-align: center;
}

.job-resource-empty p,
.job-schedule-empty span {
  margin: 0;
  font-size: 10px;
}

.job-schedule-empty {
  border: 1px solid #d5dce3;
  border-top: 0;
}

.job-schedule-empty strong {
  color: #273444;
}

.job-schedule-resource-group {
  margin-top: 14px;
  border: 1px solid #cbd3dc;
  background: #ffffff;
}

.job-schedule-resource-group > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  border-bottom: 1px solid #aeb8c3;
  background: #eef2f5;
}

.job-schedule-resource-group > header button {
  border: 0;
  background: transparent;
  color: #0875d1;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.job-schedule-resource-group > header span {
  color: #273444;
  font-size: 10px;
  font-weight: 800;
}

.job-schedule-table {
  min-width: 760px;
}

.job-schedule-table tbody tr:nth-child(even) {
  background: #edf3f8;
}

.job-schedule-table tfoot {
  background: #e6ebef;
}

.job-schedule-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.job-schedule-actions button {
  min-height: 25px;
  border: 1px solid #9ca8b5;
  border-radius: 0;
  background: #ffffff;
  color: #263444;
  padding: 3px 8px;
  font-size: 9px;
  cursor: pointer;
}

.job-schedule-actions .danger-link {
  border-color: #d6a0a0;
  color: #b42318;
}

.job-schedule-modal {
  width: min(760px, 96vw);
}

.job-schedule-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 12px 16px;
}

.job-schedule-form-grid .field-wide {
  grid-column: 1 / -1;
}

.job-schedule-duration {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid #b8cde0;
  background: #eaf5fd;
}

.job-schedule-duration span,
.job-schedule-duration small {
  color: #5e6b79;
  font-size: 10px;
}

.job-schedule-duration strong {
  color: #17212e;
  font-size: 14px;
}

.job-schedule-duration small {
  text-align: right;
}

.job-settings-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.job-contractors-page tfoot {
  background: #e8ecef;
  font-weight: 800;
}

.job-placeholder-page .empty-stage {
  margin-top: 14px;
  min-height: 180px;
  display: grid;
  place-items: center;
}

.job-billable-page {
  min-width: 0;
  background: #ffffff;
}

.job-billable-tabs {
  min-height: 42px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #cfd7df;
  background: #e5e5e5;
}

.job-billable-tabs button {
  min-width: 120px;
  border: 0;
  border-bottom: 3px solid #0875d1;
  background: #ffffff;
  color: #111827;
  padding: 9px 18px 7px;
  font-size: 12px;
  font-weight: 800;
}

.job-billable-content {
  padding: 16px 12px 28px;
}

.job-billable-heading {
  align-items: center;
}

.job-billable-section {
  margin-top: 18px;
}

.job-billable-section-title,
.job-invoice-lines-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.job-billable-section-title h4,
.job-invoice-lines-heading h4,
.job-billable-summary h4 {
  margin: 0;
  color: #17212e;
  font-size: 13px;
}

.job-billable-section-title p,
.job-invoice-lines-heading p,
.job-billable-summary p {
  margin: 3px 0 0;
  color: #71808e;
  font-size: 10px;
}

.job-billable-section-title > strong {
  color: #344252;
  font-size: 10px;
}

.job-billable-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.job-billable-table th,
.job-billable-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #d7dde3;
  color: #344252;
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.job-billable-table th {
  border-bottom-color: #929da8;
  color: #5d6976;
  font-weight: 700;
}

.job-billable-table th:first-child,
.job-billable-table td:first-child {
  min-width: 280px;
  text-align: left;
}

.job-billable-table td small,
.job-billable-table td strong {
  display: block;
}

.job-billable-table td small {
  margin-top: 2px;
  color: #75808d;
}

.job-invoice-heading td {
  padding: 9px 10px;
  border-top: 1px solid #bcc7d0;
  background: #edf3f7;
  text-align: left !important;
}

.job-invoice-heading td > div,
.job-invoice-heading td > div > span:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.job-invoice-heading button:not(.icon-delete-action) {
  min-height: 26px;
  border: 0;
  background: transparent;
  color: #0875d1;
  font-size: 10px;
  cursor: pointer;
}

.job-invoice-heading .icon-delete-action {
  color: #b42318;
}

.job-purchase-order-heading td {
  padding: 10px;
  border-top: 2px solid #257fc4;
  background: #dceaf5;
  text-align: left !important;
}

.job-purchase-order-heading td > div,
.job-purchase-order-heading td > div > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.job-purchase-order-heading small {
  color: #526476;
}

.job-billable-summary {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, .72fr);
  gap: 44px;
  align-items: end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #d6dde4;
}

.job-billable-summary dl {
  margin: 12px 0 0;
}

.job-billable-summary > div dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0 28px;
}

.job-billable-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 8px;
  border-bottom: 1px solid #d9dfe5;
  color: #45515e;
  font-size: 10px;
}

.job-billable-summary dt,
.job-billable-summary dd {
  margin: 0;
}

.job-billable-summary dd {
  color: #17212e;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.job-billable-total {
  padding: 10px 14px;
  background: #eeeeee;
}

.job-billable-total div:last-child {
  font-weight: 800;
}

.job-invoice-modal {
  width: min(1260px, 97vw);
}

.job-invoice-header-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 12px 14px;
}

.job-invoice-header-grid .field small {
  color: #75808d;
  font-size: 9px;
  font-weight: 400;
}

.job-invoice-lines-heading {
  align-items: center;
  margin: 22px 0 10px;
}

.job-invoice-lines {
  display: grid;
  gap: 8px;
}

.job-invoice-line {
  display: grid;
  grid-template-columns: 28px minmax(260px, 1.6fr) minmax(115px, .6fr) minmax(105px, .55fr) minmax(105px, .55fr) minmax(85px, .42fr) minmax(115px, .55fr) 58px;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #d5dce3;
  background: #f7f8f9;
}

.job-invoice-line-number {
  min-height: 31px;
  display: grid;
  place-items: center;
  background: #dce9f5;
  color: #075f9f;
  font-size: 11px;
  font-weight: 800;
}

.job-invoice-line output {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 8px;
  border: 1px solid #bdc7d0;
  background: #ffffff;
  color: #17212e;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.job-invoice-line > .icon-delete-action {
  min-height: 31px;
  border: 1px solid #d7aaa5;
  background: #ffffff;
}

.job-invoice-preview {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  margin-top: 14px;
  padding: 10px 12px;
  background: #edf3f7;
  color: #55616d;
  font-size: 10px;
}

.job-invoice-preview strong {
  margin-left: 7px;
  color: #17212e;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .job-summary-page { grid-template-columns: minmax(280px, 1fr) minmax(380px, 1fr); }
  .job-activity-panel { grid-column: 1 / -1; }
  .job-settings-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .job-workspace-heading { align-items: stretch; flex-direction: column; }
  .job-workspace-actions { flex-wrap: wrap; }
  .job-billable-summary { grid-template-columns: 1fr; gap: 18px; }
  .job-invoice-header-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .job-invoice-line { grid-template-columns: 28px minmax(240px, 1.5fr) repeat(5, minmax(105px, .55fr)) 58px; overflow-x: auto; }
  .job-schedule-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
  .job-schedule-cost-summary { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .job-schedule-cost-summary > span:nth-child(2) { border-right: 0; }
  .job-schedule-cost-summary > span:nth-child(-n+2) { border-bottom: 1px solid #c8d2dc; }
}

@media (max-width: 760px) {
  .job-create-heading,
  .job-section-heading { flex-direction: column; }
  .job-create-grid,
  .job-settings-grid,
  .job-summary-page { grid-template-columns: 1fr; }
  .job-activity-panel { grid-column: auto; }
  .job-workspace-actions dl { width: 100%; margin-right: 0; }
  .job-workspace-actions dl div { flex: 1; min-width: 0; }
  .job-register-search { flex-wrap: wrap; }
  .job-register-search input { flex-basis: 100%; }
  .job-billable-heading,
  .job-billable-section-title,
  .job-invoice-lines-heading,
  .job-invoice-heading td > div { align-items: stretch; flex-direction: column; }
  .job-billable-summary > div dl,
  .job-invoice-header-grid { grid-template-columns: 1fr; }
  .job-invoice-preview { align-items: flex-end; flex-direction: column; gap: 8px; }
  .job-schedule-layout,
  .job-schedule-form-grid,
  .job-schedule-cost-summary { grid-template-columns: 1fr; }
  .job-schedule-cost-summary > span,
  .job-schedule-cost-summary > span:nth-child(2) { border-right: 0; border-bottom: 1px solid #c8d2dc; }
  .job-schedule-cost-summary > span:last-child { border-bottom: 0; }
  .job-schedule-form-grid .field-wide { grid-column: auto; }
  .job-schedule-panel-heading > div { align-items: flex-end; flex-direction: column; gap: 3px; }
  .job-schedule-duration { grid-template-columns: 1fr auto; }
  .job-schedule-duration small { grid-column: 1 / -1; text-align: left; }
}

.job-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.job-management-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(620px, 1.28fr);
  gap: 14px;
  align-items: start;
}

.job-list-panel,
.job-form-panel,
.parts-labour-panel,
.timesheet-panel {
  min-width: 0;
  border-radius: 0;
}

.job-detail-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.job-form-panel {
  padding: 16px;
}

.job-form-panel .form-columns,
.labour-entry-form .form-columns {
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 10px 12px;
}

.parts-labour-grid {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.job-resource-list {
  min-height: 320px;
  border: 1px solid #d6d6d6;
  background: #f4f4f4;
  padding: 12px;
}

.job-resource-list h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 13px;
}

.job-resource-list .resource-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #d7d7d7;
  background: #ffffff;
}

.job-resource-list .resource-row + .resource-row {
  margin-top: 6px;
}

.job-resource-list .resource-row span {
  display: grid;
  gap: 3px;
}

.job-resource-list .resource-row strong {
  font-size: 12px;
  color: #111827;
}

.job-resource-list .resource-row em {
  color: #6b7280;
  font-size: 11px;
  font-style: normal;
}

.job-resource-list .resource-row b {
  color: #0875d1;
  font-size: 11px;
}

.resource-empty {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed #b9c1cc;
  background: #ffffff;
}

.resource-empty p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
}

.labour-entry-panel {
  min-width: 0;
}

.labour-entry-form {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #d6d6d6;
  background: #f4f4f4;
}

.labour-entry-form .action-strip {
  margin-top: 12px;
  justify-content: flex-end;
}

.job-table,
.labour-table,
.timesheet-table {
  min-width: 760px;
}

.selected-row td {
  background: #eef6ff;
}

.hours-total {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #c9cfd8;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
}

.live-dashboard .dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-live-panel {
  grid-column: span 4;
  min-width: 0;
  border-radius: 0;
}

.dashboard-projects-panel {
  grid-column: span 8;
}

.employee-allocations-panel {
  grid-column: span 4;
}

.dashboard-live-panel .panel-header {
  align-items: flex-start;
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 12px;
}

.dashboard-record-list,
.employee-allocation-list {
  display: grid;
  gap: 8px;
}

.dashboard-record-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
}

.dashboard-record-row strong,
.employee-allocation-row strong {
  display: block;
  color: #111827;
  font-size: 12px;
}

.dashboard-record-row span,
.dashboard-record-row small,
.employee-allocation-row span {
  display: block;
  margin-top: 3px;
  color: #6b7280;
  font-size: 11px;
}

.employee-allocation-row {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
}

.employee-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-job-tags button,
.unassigned-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c9cfd8;
  border-radius: 2px;
  background: #eef6ff;
  color: #0067c5;
  font-size: 11px;
  padding: 0 9px;
}

.employee-job-tags button span {
  margin: 0;
  color: #4b5563;
}

.unassigned-label {
  background: #f4f4f4;
  color: #6b7280;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

@media (max-width: 1200px) {
  .people-workspace {
    grid-template-columns: 1fr;
  }

  .job-management-layout,
  .parts-labour-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-live-panel,
  .dashboard-projects-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .people-layout {
    grid-template-columns: 1fr;
  }

  .people-side-panel {
    min-height: auto;
  }

  .people-form-group .form-columns,
  .people-link-grid,
  .job-form-panel .form-columns,
  .labour-entry-form .form-columns,
  .employee-allocation-row {
    grid-template-columns: 1fr;
  }
}

/* People register: compact operational layout based on the supplied reference */
.people-page .workspace-path {
  margin-bottom: 5px;
}

.people-tabs {
  min-height: 42px;
  gap: 0;
  border-bottom: 1px solid #d8dde5;
}

.people-tabs button {
  min-width: 94px;
  min-height: 36px;
  padding: 0 18px;
  border-bottom: 2px solid transparent;
  font-size: 11px;
}

.people-tabs button.active {
  border-bottom-color: #0875d1;
  background: #dedede;
  color: #111827;
  font-weight: 700;
}

.people-register-heading {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
}

.people-register-heading h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.people-register-heading h2 span {
  color: #5f6874;
  font-weight: 400;
}

.people-register-heading p {
  margin: 4px 0 0;
  color: #687384;
  font-size: 11px;
}

.people-create-button {
  flex: 0 0 auto;
  background: #0875d1;
  border-color: #0875d1;
}

.people-alphabet {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  padding: 2px 0;
}

.people-alphabet button {
  min-width: 25px;
  min-height: 25px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.people-alphabet button:hover,
.people-alphabet button.active {
  background: #dceeff;
  color: #064f91;
  font-weight: 700;
}

.people-search-strip {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
}

.people-search-strip input {
  width: min(430px, 48vw);
  min-height: 28px;
  height: 28px;
  border: 1px solid #87b6dc;
  border-radius: 0;
  background: #eaf6ff;
  padding: 4px 9px;
  font: inherit;
}

.people-search-strip button {
  min-height: 28px;
  border-radius: 0;
}

.people-search-strip span {
  margin-left: 10px;
  color: #6b7280;
  font-size: 11px;
}

.people-records-panel {
  min-width: 0;
  border-top: 1px solid #9ca6b2;
}

.people-records-panel .table-wrap {
  overflow: auto;
}

.people-table {
  width: 100%;
  min-width: 920px;
  table-layout: auto;
}

.people-table th,
.people-table td {
  height: 34px;
  padding: 5px 8px;
  white-space: nowrap;
  font-size: 11px;
}

.people-table th:first-child,
.people-table td:first-child {
  width: 28px;
  text-align: center;
}

.people-table th:nth-child(2),
.people-table td:nth-child(2) {
  width: 86px;
}

.people-table tbody tr:hover td {
  background: #f1f8ff;
}

.people-row-actions {
  width: 116px;
  text-align: right;
}

.people-row-actions .small-action + .small-action {
  margin-left: 4px;
}

.danger-action {
  color: #b42318;
}

.danger-action:hover {
  border-color: #f2b8b5;
  background: #fff1f0;
}

.people-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.26);
}

.people-editor {
  width: min(720px, calc(100vw - 150px));
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #aeb7c2;
  background: #ffffff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
}

.people-editor form {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.people-editor-header,
.people-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #d6dbe2;
  background: #f4f5f7;
}

.people-editor-header span {
  color: #0875d1;
  font-size: 11px;
}

.people-editor-header h3 {
  margin: 3px 0 0;
  color: #111827;
  font-size: 17px;
}

.people-close-button {
  width: 30px;
  height: 30px;
  border: 1px solid #c9cfd8;
  border-radius: 2px;
  background: #ffffff;
  color: #4b5563;
  font-size: 16px;
  cursor: pointer;
}

.people-editor-body {
  overflow: auto;
  padding: 18px;
}

.people-editor-actions {
  justify-content: flex-end;
  border-top: 1px solid #d6dbe2;
  border-bottom: 0;
}

.people-editor .people-form-group {
  margin-bottom: 18px;
  background: #fafafa;
}

.people-editor .people-link-panel {
  margin-top: 16px;
}

.employee-allocation-person small {
  display: block;
  margin-top: 3px;
  color: #0875d1;
  font-size: 10px;
}

.people-summary-panel {
  grid-column: span 4;
}

.people-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.people-summary-grid button {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid #d6dbe2;
  border-radius: 2px;
  background: #ffffff;
  color: #111827;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.people-summary-grid button:hover {
  border-color: #87b6dc;
  background: #eef7ff;
}

.people-summary-grid strong {
  color: #0875d1;
  font-size: 18px;
}

.people-summary-grid span {
  color: #5f6874;
  font-size: 11px;
}

.live-schedule-resources {
  padding: 12px;
}

.schedule-resource-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 10px;
  border: 1px solid #d6dbe2;
  background: #ffffff;
}

.schedule-resource-card + .schedule-resource-card {
  margin-top: 7px;
}

.schedule-resource-card strong,
.schedule-resource-card span {
  display: block;
}

.schedule-resource-card strong {
  color: #111827;
  font-size: 12px;
}

.schedule-resource-card span {
  margin-top: 3px;
  color: #6b7280;
  font-size: 10px;
}

.schedule-resource-card > b {
  color: #0875d1;
  font-size: 11px;
}

.schedule-resource-jobs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.schedule-resource-jobs button {
  min-height: 25px;
  border: 1px solid #b9d6ef;
  border-radius: 2px;
  background: #eef7ff;
  color: #0875d1;
  font-size: 10px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .people-register-heading {
    align-items: flex-start;
  }

  .people-editor {
    width: 100%;
  }

  .people-search-strip {
    flex-wrap: wrap;
  }

  .people-search-strip input {
    width: 100%;
  }

  .people-editor .people-form-group .form-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .people-register-heading {
    display: grid;
  }

  .people-create-button {
    width: 100%;
  }
}

/* Keep Leads tab sizing above the shared Simpro tab rules. */
.leads-register-page .pipeline-tabs {
  min-height: 42px;
  gap: 0;
  background: #ffffff;
}

.leads-register-page .pipeline-tabs button {
  min-width: 90px;
  min-height: 38px;
  padding: 0 18px;
  background: #ffffff;
  font-size: 11px;
}

.leads-register-page .pipeline-tabs button.active {
  background: #dedede;
  color: #111827;
  font-weight: 700;
}

.leads-register-page .pipeline-status-tabs {
  min-height: 36px;
  background: #dedede;
}

.leads-register-page .pipeline-status-tabs button {
  min-width: 90px;
  min-height: 36px;
  padding: 0 16px;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 11px;
}

.leads-register-page .pipeline-status-tabs button:hover,
.leads-register-page .pipeline-status-tabs button.active {
  border-bottom-color: #0875d1;
  background: #f2f2f2;
  color: #111827;
  font-weight: 700;
}

/* Quotes register and quote creation workflow */
.quotes-register-page,
.quote-editor-page {
  max-width: none;
}

.quotes-register-page .workspace-path,
.quote-editor-page .workspace-path {
  margin-bottom: 5px;
}

.quote-status-tabs {
  min-height: 40px;
  gap: 0;
  border-bottom: 1px solid #d8dde5;
}

.quote-status-tabs button {
  min-width: 105px;
  min-height: 38px;
  padding: 0 18px;
  border-bottom: 2px solid transparent;
  background: #ffffff;
  font-size: 11px;
}

.quote-status-tabs button.active,
.quote-status-tabs button:hover {
  border-bottom-color: #0875d1;
  background: #dedede;
  color: #111827;
  font-weight: 700;
}

.quote-register-heading,
.quote-editor-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
}

.quote-register-heading h2,
.quote-editor-topbar h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.quote-register-heading h2 span {
  color: #5f6874;
  font-weight: 400;
}

.quote-register-heading p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 11px;
}

.quote-create-actions,
.quote-editor-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quote-draft-save-status {
  display: none;
  margin-right: 5px;
  color: #18753a;
  font-size: 10px;
  font-weight: 700;
}

.quote-draft-save-status.visible {
  display: inline;
}

.quote-search-strip {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 9px;
}

.quote-search-strip input {
  width: min(450px, 50vw);
  min-height: 28px;
  height: 28px;
  border: 1px solid #87b6dc;
  border-radius: 0;
  background: #eaf6ff;
  padding: 4px 9px;
  font: inherit;
}

.quote-search-strip button {
  min-height: 28px;
  border-radius: 0;
}

.quote-table-panel {
  position: relative;
  border-top: 1px solid #9ca6b2;
}

.quote-table-panel.menu-open .table-wrap {
  padding-bottom: 210px;
}

.quote-register-table {
  width: 100%;
  min-width: 1200px;
  table-layout: auto;
}

.quote-register-table th,
.quote-register-table td {
  height: 35px;
  padding: 5px 8px;
  white-space: nowrap;
  font-size: 11px;
}

.quote-register-table th:first-child,
.quote-register-table td:first-child {
  width: 28px;
  text-align: center;
}

.quote-register-table th:nth-child(2),
.quote-register-table td:nth-child(2) {
  width: 78px;
}

.quote-register-table th:nth-child(3),
.quote-register-table td:nth-child(3) {
  width: 112px;
}

.quote-register-table th:nth-child(7),
.quote-register-table td:nth-child(7),
.quote-register-table th:nth-child(8),
.quote-register-table td:nth-child(8) {
  text-align: right;
}

.quote-register-table th:last-child,
.quote-register-table td:last-child {
  width: 58px;
  text-align: right;
}

.quote-register-table tbody tr:hover td {
  background: #f1f8ff;
}

.quote-status,
.job-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #46515f;
  font-size: 10px;
}

.quote-status i,
.job-status i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
}

.quote-status-open i {
  background: #b8ed3f;
}

.quote-status-progress i {
  background: #f5a623;
}

.quote-status-complete i {
  background: #3695e7;
}

.quote-status-approved i {
  background: #36c968;
}

.quote-status-archived i {
  background: #222222;
}

.quote-options-cell {
  position: relative;
}

.quote-options-button {
  width: 31px;
  height: 24px;
  border: 1px solid #9aa5b1;
  border-radius: 2px;
  background: #ffffff;
  color: #3f4a59;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.quote-options-button:hover,
.quote-options-button[aria-expanded="true"] {
  border-color: #0875d1;
  background: #eaf6ff;
  color: #0875d1;
}

.quote-row-menu {
  position: absolute;
  top: 31px;
  right: 7px;
  z-index: 30;
  width: 178px;
  display: grid;
  padding: 6px;
  border: 1px solid #aeb7c2;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18);
  text-align: left;
}

.quote-row-menu strong {
  padding: 7px 7px 4px;
  border-top: 1px solid #e0e4e9;
  color: #687384;
  font-size: 10px;
  text-transform: uppercase;
}

.quote-row-menu button {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #273444;
  font-size: 11px;
  text-align: left;
  padding: 0 7px;
  cursor: pointer;
}

.quote-row-menu button:hover,
.quote-row-menu button.active {
  background: #eaf6ff;
  color: #0875d1;
}

.quote-row-menu .delete-menu-action {
  margin-top: 4px;
  border-top: 1px solid #f0c8c5;
  color: #b42318;
}

.quote-number-badge {
  display: block;
  margin-bottom: 4px;
  color: #0875d1;
  font-size: 11px;
  font-weight: 700;
}

.quote-editor-tabs {
  min-height: 38px;
  gap: 0;
  border-bottom: 1px solid #d8dde5;
}

.quote-editor-tabs button {
  min-width: 76px;
  min-height: 36px;
  padding: 0 17px;
  font-size: 11px;
}

.quote-entry-form {
  padding-top: 12px;
}

.quote-editor-panel.is-hidden {
  display: none;
}

.quote-form-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(380px, 0.95fr);
  gap: 20px;
  align-items: start;
}

.quote-details-panel h3 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 14px;
}

.quote-form-grid,
.quote-optional-grid .form-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 10px 14px;
}

.quote-entry-form .field select,
.quote-entry-form .field textarea,
.quote-entry-form .field input {
  border-radius: 0;
  background: #ffffff;
}

.quote-entry-form .field select[multiple] {
  min-height: 78px;
}

.quote-details-panel > .quote-entry-description-field {
  margin-top: 16px;
}

.quote-details-panel > .quote-entry-description-field textarea {
  min-height: 210px;
}

.quote-field-label-row {
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-field-label-row > button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #0875d1;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.quote-field-label-row > button:hover {
  text-decoration: underline;
}

.quote-order-number-field output {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid #bfc9d3;
  background: #eef3f7;
  color: #344252;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quote-order-number-field small {
  display: block;
  margin-top: 4px;
  color: #687384;
  font-size: 9px;
}

.quote-textarea-field {
  margin-top: 12px;
}

.quote-textarea-field textarea {
  min-height: 175px;
}

.quote-site-summary {
  min-height: 335px;
  border: 1px solid #c8d2dd;
  background: #e9f2f8;
}

.quote-site-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #c8d2dd;
  background: #ffffff;
}

.quote-site-summary-head strong,
.quote-site-summary-head span {
  font-size: 11px;
}

.quote-site-summary-head span {
  color: #687384;
}

.quote-location-canvas {
  min-height: 292px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #5b6b79;
  text-align: center;
  background-color: #dcecf6;
  box-shadow: inset 0 0 0 12px #d4e7f2;
}

.project-creation-note,
.form-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #b9d6ef;
  background: #eef7ff;
  color: #344252;
  font-size: 11px;
}

.project-creation-note strong,
.project-creation-note span {
  display: block;
}

.project-creation-note span {
  margin-left: 12px;
  color: #687384;
}

.quote-optional-grid {
  max-width: 900px;
  display: grid;
  gap: 14px;
}

.job-status-pending i {
  background: #f59e0b;
}

.job-status-progress i {
  background: #22c55e;
}

.job-status-complete i {
  background: #3182ce;
}

.job-status-invoiced i {
  background: #7c3aed;
}

.job-status-archived i {
  background: #111111;
}

@media (max-width: 1100px) {
  .quote-form-layout {
    grid-template-columns: 1fr;
  }

  .quote-site-summary {
    min-height: 230px;
  }

  .quote-location-canvas {
    min-height: 185px;
  }
}

@media (max-width: 860px) {
  .quote-status-tabs {
    overflow-x: auto;
  }

  .quote-status-tabs button {
    flex: 0 0 auto;
  }

  .quote-register-heading,
  .quote-editor-topbar {
    align-items: flex-start;
  }

  .quote-form-grid,
  .quote-optional-grid .form-columns {
    grid-template-columns: 1fr;
  }

  .quote-search-strip input {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .quote-register-heading,
  .quote-editor-topbar {
    display: grid;
  }

  .quote-create-actions,
  .quote-editor-actions {
    flex-wrap: wrap;
  }
}

/* Sidebar menus must fully cover the workspace beneath them. */
.sidebar,
.nav-list,
.nav-group,
.nav-item,
.nav-flyout {
  opacity: 1;
  mix-blend-mode: normal;
}

.sidebar {
  z-index: 100;
}

.nav-flyout {
  z-index: 110;
  isolation: isolate;
  background-color: #13547e;
  background-image: none;
  backdrop-filter: none;
  box-shadow: 14px 14px 26px rgba(15, 23, 42, 0.22);
}

.nav-flyout strong,
.nav-flyout button {
  position: relative;
  z-index: 1;
  background-color: #13547e;
  opacity: 1;
}

.nav-flyout button:hover,
.nav-flyout button:focus-visible {
  background-color: #1c6b9b;
}

/* Linked quote details, costing, and schedule workspace. */
.quote-workspace-page {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.quote-workspace-status {
  color: #5d6978;
  font-size: 11px;
}

.quote-total-summary {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  border: 1px solid #d4dbe3;
  background: #f7f9fb;
}

.quote-total-summary span {
  min-width: 92px;
  padding: 7px 10px;
  border-right: 1px solid #d4dbe3;
  color: #687384;
  font-size: 10px;
}

.quote-total-summary span:last-child {
  border-right: 0;
}

.quote-total-summary strong {
  display: block;
  margin-top: 2px;
  color: #17212e;
  font-size: 12px;
}

.quote-workspace-tabs,
.quote-costing-tabs {
  gap: 0;
  background: #f1f3f5;
  border-bottom: 1px solid #cfd6de;
}

.quote-workspace-tabs button,
.quote-costing-tabs button {
  min-height: 38px;
  border-radius: 0;
}

.quote-workspace-form {
  padding: 16px 0;
}

.quote-workspace-form .quote-textarea-field textarea {
  min-height: 110px;
}

.quote-forecast-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.quote-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  text-decoration: none;
}

.quote-location-canvas div {
  max-width: 420px;
}

.quote-location-canvas strong {
  color: #263747;
  font-size: 13px;
}

.quote-location-canvas p {
  margin: 8px 0;
  line-height: 1.5;
}

.quote-costing-workspace,
.quote-assets-workspace {
  padding-top: 12px;
}

.quote-costing-tabs {
  margin-top: -12px;
}

.quote-billable-panel {
  padding-top: 15px;
}

.quote-cost-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.quote-cost-section-heading h3,
.quote-billable-panel h4,
.job-quote-materials h3 {
  margin: 0;
  color: #17212e;
  font-size: 14px;
}

.quote-cost-section-heading p {
  margin: 3px 0 0;
  color: #687384;
  font-size: 11px;
}

.quote-billable-panel h4 {
  margin: 16px 0 6px;
  font-size: 12px;
}

.quote-billable-panel h4 small {
  display: block;
  margin-top: 2px;
  color: #7a8490;
  font-size: 9px;
  font-weight: 400;
}

.quote-part-search {
  display: flex;
  align-items: stretch;
  min-width: 310px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.quote-part-search input {
  min-width: 220px;
  height: 31px;
  border: 1px solid #b9c2cc;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  padding: 0 9px;
  background: #ffffff;
  font-size: 10px;
}

.quote-part-search button {
  min-width: 82px;
  border: 1px solid #0875d1;
  border-radius: 0 2px 2px 0;
  background: #0875d1;
  color: #ffffff;
  font-size: 10px;
  cursor: pointer;
}

.quote-billable-controls {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(440px, 1.3fr);
  gap: 36px;
  margin-top: 14px;
  padding: 2px 0 6px;
}

.quote-inline-control,
.quote-supplier-controls,
.quote-labour-picker {
  display: flex;
  align-items: end;
  gap: 8px;
}

.quote-inline-control select,
.quote-supplier-controls select,
.quote-labour-picker select {
  height: 30px;
  min-width: 190px;
  border: 1px solid #b9c2cc;
  border-radius: 2px;
  background: #ffffff;
  color: #344252;
  font-size: 10px;
}

.quote-supplier-controls label {
  display: grid;
  gap: 4px;
}

.quote-supplier-controls label span {
  color: #566372;
  font-size: 9px;
  font-weight: 700;
}

.quote-service-fees {
  margin-top: 6px;
  border-top: 1px solid #e1e5ea;
}

.quote-service-fees span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  color: #45515f;
  font-size: 10px;
}

.quote-labour-heading {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 10px;
}

.quote-labour-heading h4 {
  margin-right: auto;
}

.quote-labour-heading > span {
  color: #566372;
  font-size: 10px;
}

.quote-labour-heading > span strong {
  color: #17212e;
}

.quote-labour-picker {
  max-width: 430px;
  margin: 7px 0 8px;
}

.quote-labour-picker select {
  flex: 1;
}

.quote-cost-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.quote-cost-table th,
.quote-cost-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #dce1e6;
  color: #344252;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
}

.quote-cost-table th {
  border-bottom-color: #9fa9b5;
  color: #5f6b79;
  font-weight: 600;
}

.quote-cost-table td:first-child {
  min-width: 170px;
  white-space: normal;
}

.quote-cost-table td strong,
.quote-cost-table td small {
  display: block;
}

.quote-cost-table td small {
  margin-top: 2px;
  color: #75808d;
}

.quote-billable-items-table th:not(:first-child),
.quote-billable-items-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-billable-items-table {
  min-width: 760px;
}

.quote-billable-items-table th:last-child,
.quote-billable-items-table td:last-child {
  width: 92px;
  text-align: center;
}

.quote-line-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.quote-line-edit-action {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #8db5d9;
  background: #ffffff;
  color: #0068b7;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.quote-line-edit-action:hover,
.quote-line-edit-action:focus-visible {
  border-color: #0068b7;
  background: #eaf4fc;
}

.quote-billable-items-table .icon-delete-action {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
  background: #d9165a;
  color: #ffffff;
  font-size: 17px;
  line-height: 22px;
}

.icon-delete-action {
  min-height: 24px;
  border: 0;
  background: transparent;
  color: #b42318;
  font-size: 10px;
  cursor: pointer;
}

.quote-cost-summary {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 390px;
  gap: 28px;
  margin-top: 24px;
}

.quote-cost-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0 24px;
  margin: 0;
}

.quote-cost-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e0e4e9;
}

.quote-cost-summary dt,
.quote-cost-summary dd {
  margin: 0;
  color: #44505d;
  font-size: 10px;
}

.quote-cost-summary dd {
  font-weight: 700;
}

.quote-cost-summary .quote-total-box {
  display: block;
  padding: 8px 14px;
  background: #f0f1f2;
}

.quote-summary-breakdown h4,
.quote-summary-breakdown p {
  margin: 0;
}

.quote-summary-breakdown h4 {
  color: #17212e;
  font-size: 12px;
}

.quote-summary-breakdown p {
  margin-top: 3px;
  color: #7a8490;
  font-size: 9px;
}

.quote-total-box div:last-child dt,
.quote-total-box div:last-child dd {
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}

.quote-empty-workspace {
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 24px;
  border-bottom: 1px solid #d9dfe6;
  color: #6b7683;
  text-align: center;
}

.quote-empty-workspace h3,
.quote-empty-workspace p {
  margin: 0 0 7px;
}

.quote-schedule-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(560px, 1fr);
  gap: 18px;
  padding-top: 15px;
}

.quote-resource-panel {
  border-right: 1px solid #d4dbe3;
  padding-right: 15px;
}

.quote-resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 28px;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-bottom: 1px solid #dce1e6;
}

.quote-resource-row span,
.quote-resource-row strong,
.quote-resource-row small {
  display: block;
  min-width: 0;
}

.quote-resource-row strong {
  overflow: hidden;
  color: #273444;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-resource-row small {
  margin-top: 2px;
  color: #75808d;
  font-size: 9px;
}

.quote-resource-row b {
  color: #475464;
  font-size: 10px;
  text-align: right;
}

.quote-resource-row button {
  width: 26px;
  height: 26px;
  border: 1px solid #0875d1;
  border-radius: 50%;
  background: #0875d1;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.quote-scheduled-panel .quote-site-summary {
  min-height: 190px;
  margin-top: 20px;
}

.quote-scheduled-panel .quote-location-canvas {
  min-height: 145px;
}

.workspace-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(25, 32, 40, 0.62);
}

.workspace-modal {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid #8f9aa6;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid #d5dbe2;
}

.modal-heading > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-heading h3,
.modal-heading p {
  margin: 0;
}

.modal-heading h3 {
  color: #111827;
  font-size: 16px;
}

.modal-heading p {
  margin-top: 3px;
  color: #687384;
  font-size: 10px;
}

.modal-heading > button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #55606d;
  cursor: pointer;
}

.resource-initials {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d9e7f6;
  color: #174f80;
  font-size: 12px;
  font-weight: 700;
}

.workspace-modal form {
  padding: 18px;
}

.quote-customer-modal {
  width: min(1380px, 98vw);
}

.quote-site-modal {
  width: min(1260px, 98vw);
}

.quote-customer-modal > form {
  padding: 0;
}

.quote-site-modal > form {
  padding: 0;
}

.quote-customer-modal-heading .resource-initials {
  border-radius: 3px;
}

.quote-customer-primary-tabs,
.quote-customer-secondary-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-customer-primary-tabs button,
.quote-customer-secondary-tabs button {
  min-height: 44px;
  border: 0;
  padding: 0 28px;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
}

.quote-customer-primary-tabs button.active {
  background: #e5e5e5;
  color: #111827;
  font-weight: 700;
}

.quote-customer-secondary-tabs {
  background: #e5e5e5;
}

.quote-customer-secondary-tabs button {
  min-height: 48px;
}

.quote-customer-secondary-tabs button.active {
  color: #111827;
  font-weight: 700;
}

.quote-customer-primary-tabs button:disabled,
.quote-customer-secondary-tabs button:disabled {
  opacity: 1;
  cursor: default;
}

.quote-customer-modal-body {
  padding: 22px 18px 26px;
}

.quote-customer-modal-body > h3 {
  margin: 0 0 15px;
  color: #111827;
  font-size: 18px;
}

.quote-customer-modal-body > h3:not(:first-child) {
  margin-top: 24px;
}

.quote-customer-kind {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
  font-size: 12px;
}

.quote-customer-kind label,
.quote-inline-check,
.quote-create-site-control label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quote-customer-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) repeat(3, minmax(0, 0.85fr));
  gap: 12px 16px;
  align-items: end;
}

.quote-customer-details-grid .field,
.quote-customer-location-grid .field,
.quote-customer-site-grid .field {
  min-width: 0;
}

.quote-customer-name-field {
  grid-column: span 2;
}

.quote-inline-check {
  min-height: 36px;
  font-size: 11px;
}

.quote-customer-location-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.quote-address-field {
  grid-column: span 2;
}

.quote-address-field textarea {
  min-height: 76px;
  resize: vertical;
}

.quote-postal-match {
  grid-column: span 2;
}

.quote-create-site-control {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #d5dbe2;
  color: #344252;
  font-size: 12px;
}

.quote-customer-site-grid {
  max-width: 680px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.quote-customer-site-grid.is-hidden {
  display: none;
}

.quote-customer-save-message {
  display: none;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid #86c995;
  background: #effaf1;
  color: #176b2c;
  font-size: 11px;
  font-weight: 700;
}

.quote-customer-save-message.visible {
  display: block;
}

.quote-customer-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: flex-end;
  border-top: 1px solid #d5dbe2;
  background: #ffffff;
}

.quote-site-modal-body {
  padding: 20px 18px 26px;
}

.quote-site-customer-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid #b9d6ef;
  background: #eef7ff;
  font-size: 11px;
}

.quote-site-customer-banner span {
  color: #687384;
}

.quote-site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: start;
}

.quote-site-layout h3,
.quote-site-contact-panel h3 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 18px;
}

.quote-site-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.quote-site-details-grid .field {
  min-width: 0;
}

.quote-site-address textarea {
  min-height: 90px;
  resize: vertical;
}

.quote-site-contact-panel {
  padding: 24px;
  background: #eeeeee;
}

.quote-site-contact-panel strong {
  display: block;
  color: #344252;
  font-size: 12px;
}

.quote-site-contact-panel p {
  margin: 10px 0 0;
  color: #687384;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .quote-customer-details-grid,
  .quote-customer-location-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .quote-customer-name-field,
  .quote-address-field,
  .quote-postal-match {
    grid-column: span 1;
  }

  .quote-site-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .quote-customer-primary-tabs,
  .quote-customer-secondary-tabs {
    overflow-x: auto;
  }

  .quote-customer-primary-tabs button,
  .quote-customer-secondary-tabs button {
    flex: 0 0 auto;
    padding: 0 16px;
  }

  .quote-customer-details-grid,
  .quote-customer-location-grid,
  .quote-customer-site-grid,
  .quote-site-details-grid {
    grid-template-columns: 1fr;
  }
}

.quote-time-modal {
  width: min(1240px, 98vw);
}

.quote-time-date {
  max-width: 220px;
}

.quote-week-controls {
  display: grid;
  grid-template-columns: 32px 210px minmax(170px, 1fr) 32px;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.quote-week-controls > strong {
  align-self: center;
  color: #263747;
  font-size: 13px;
  text-align: center;
}

.week-arrow-button {
  width: 32px;
  height: 32px;
  border: 1px solid #9aa5b1;
  border-radius: 2px;
  background: #ffffff;
  color: #0875d1;
  font-size: 18px;
  cursor: pointer;
}

.week-arrow-button:hover,
.week-arrow-button:focus-visible {
  border-color: #0875d1;
  background: #eaf6ff;
}

.quote-week-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #cfd6de;
}

.quote-week-grid {
  min-width: 1120px;
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
}

.quote-time-day {
  min-width: 0;
  border-right: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-time-day:last-child {
  border-right: 0;
}

.quote-time-day:nth-child(6),
.quote-time-day:nth-child(7) {
  background: #f8fafc;
}

.quote-time-day > header {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border-bottom: 1px solid #cfd6de;
  background: #edf4fa;
  text-align: center;
}

.quote-time-day > header strong {
  color: #17212e;
  font-size: 11px;
}

.quote-time-day > header span {
  color: #566372;
  font-size: 10px;
}

.quote-time-day .quote-time-segments {
  min-height: 205px;
}

.quote-time-day .quote-time-segment {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 9px 8px;
  border-bottom: 1px solid #e1e5ea;
}

.quote-time-day .quote-time-segment .segment-number {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 22px;
  height: 22px;
  margin: 16px 0 0;
}

.quote-time-day .quote-time-segment .field {
  grid-column: 2;
  min-width: 0;
}

.quote-time-day .quote-time-segment .field span {
  font-size: 9px;
}

.quote-time-day .quote-time-segment input,
.quote-time-day .quote-time-segment select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 6px;
  font-size: 10px;
}

.day-add-segment {
  width: calc(100% - 16px);
  min-height: 29px;
  margin: 9px 8px;
  border: 1px solid #9fc8e9;
  border-radius: 2px;
  background: #eef7ff;
  color: #0875d1;
  font-size: 10px;
  cursor: pointer;
}

.quote-time-day > footer {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid #cfd6de;
  color: #566372;
  font-size: 10px;
}

.quote-time-day > footer strong {
  color: #17212e;
}

.quote-time-segment {
  display: grid;
  grid-template-columns: 28px 145px 170px minmax(220px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #dce1e6;
}

.segment-number {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  border-radius: 50%;
  background: #e8edf2;
  color: #44505d;
  font-size: 10px;
  font-weight: 700;
}

.add-segment-action {
  margin-top: 12px;
}

.quote-time-total,
.one-off-preview {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  padding: 12px;
  background: #f2f4f6;
  color: #4b5663;
  font-size: 11px;
}

.quote-time-total strong {
  min-width: 70px;
  color: #111827;
  font-size: 14px;
  text-align: right;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #dce1e6;
}

.one-off-choice-row {
  display: flex;
  gap: 40px;
  margin-bottom: 14px;
}

.one-off-choice-row fieldset {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.one-off-choice-row legend {
  margin-bottom: 6px;
  color: #44505d;
  font-size: 10px;
  font-weight: 700;
}

.one-off-choice-row label {
  color: #344252;
  font-size: 11px;
}

.quote-one-off-modal textarea {
  min-height: 120px;
}

.quote-one-off-modal {
  width: min(1040px, 96vw);
}

.quote-one-off-modal input[readonly] {
  background: #eef2f5;
  color: #17212e;
  font-weight: 700;
}

.field-help {
  margin: 6px 0 12px;
  color: #75808d;
  font-size: 10px;
}

.one-off-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 12px 14px;
}

.one-off-preview span {
  min-width: 170px;
  text-align: right;
}

.one-off-preview strong {
  margin-left: 8px;
  color: #111827;
}

.job-quote-materials {
  margin-top: 20px;
}

.job-quote-materials h3 {
  margin-bottom: 8px;
}

/* Saved quote workspace. The live quote record sits above its cost-centre builder. */
.quote-live-primary-tabs,
.quote-live-detail-tabs {
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-live-primary-tabs button,
.quote-live-detail-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.quote-live-primary-tabs button:hover,
.quote-live-primary-tabs button.active {
  border-bottom-color: #0875d1;
  background: #e2e2e2;
  color: #17212e;
  font-weight: 700;
}

.quote-live-detail-tabs {
  min-height: 42px;
  background: #e5e5e5;
}

.quote-live-detail-tabs button {
  min-height: 42px;
  padding: 0 18px;
}

.quote-live-detail-tabs button:hover,
.quote-live-detail-tabs button.active {
  border-bottom-color: #0875d1;
  background: #ffffff;
  color: #17212e;
  font-weight: 700;
}

.quote-live-record-strip {
  min-height: 43px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 8px 12px;
  border-bottom: 1px solid #cfd6de;
  background: #ffffff;
  color: #566372;
  font-size: 10px;
}

.quote-live-record-strip strong {
  margin-left: 4px;
  color: #1d5f96;
}

.quote-live-record-strip .quote-live-status {
  display: inline-flex;
  margin-left: 4px;
  color: #46515f;
}

.quote-live-summary,
.quote-live-list-section,
.quote-cost-centre-list,
.quote-project-overview,
.quote-gantt {
  padding: 16px 14px;
}

.quote-record-link {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #075ea8;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.quote-record-link:hover,
.quote-record-link:focus-visible {
  color: #004a86;
  text-decoration: underline;
}

.quote-number-link {
  font-variant-numeric: tabular-nums;
}

.quote-summary-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.quote-summary-heading h3,
.quote-summary-heading p,
.quote-summary-heading span,
.quote-estimate-chart h4,
.quote-breakdown-panel h4,
.quote-activity-panel h4,
.quote-activity-panel h5 {
  margin: 0;
}

.quote-summary-heading h3 {
  font-size: 17px;
}

.quote-summary-heading p,
.quote-summary-heading span {
  margin-top: 3px;
  color: #687384;
  font-size: 11px;
}

.quote-summary-heading strong {
  color: #17212e;
}

.quote-summary-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(380px, 1.25fr) minmax(280px, .8fr);
  min-height: 470px;
  border: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-estimate-chart,
.quote-breakdown-panel,
.quote-activity-panel {
  min-width: 0;
  padding: 16px;
}

.quote-estimate-chart,
.quote-breakdown-panel {
  border-right: 1px solid #d7dde4;
}

.quote-estimate-chart h4,
.quote-breakdown-panel h4,
.quote-activity-panel h4 {
  color: #17212e;
  font-size: 14px;
}

.quote-cost-donut {
  width: min(230px, 78%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 44px auto 28px;
  border-radius: 50%;
}

.quote-cost-donut > div {
  width: 54%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
}

.quote-cost-donut strong {
  color: #17212e;
  font-size: 17px;
}

.quote-cost-donut span,
.quote-chart-legend span {
  color: #687384;
  font-size: 10px;
}

.quote-chart-legend {
  display: grid;
  gap: 8px;
}

.quote-chart-legend span {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 7px;
}

.quote-chart-legend i {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 2px;
  background: #0875d1;
}

.quote-chart-legend i.labour {
  background: #34a853;
}

.quote-chart-legend strong {
  color: #17212e;
}

.quote-breakdown-list {
  margin: 14px 0 0;
  border-top: 1px solid #aeb9c4;
}

.quote-breakdown-list > div {
  min-height: 31px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-bottom: 1px solid #dce1e6;
  color: #485565;
  font-size: 10px;
}

.quote-breakdown-list > div.nested {
  padding-left: 28px;
}

.quote-breakdown-list > div.is-total {
  background: #f1f3f5;
}

.quote-breakdown-list > div.is-grand {
  background: #e6eaee;
  color: #17212e;
  font-weight: 700;
}

.quote-breakdown-list dt,
.quote-breakdown-list dd {
  margin: 0;
}

.quote-breakdown-list dd {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.breakdown-arrow {
  margin-right: 7px;
  color: #75808d;
}

.quote-activity-panel {
  padding: 0;
  background: #f7f8fa;
}

.quote-activity-panel > h4 {
  padding: 12px 14px;
  border-left: 3px solid #0875d1;
  border-bottom: 1px solid #cfd6de;
  background: #e5e7e9;
}

.quote-activity-schedule,
.quote-activity-timeline {
  padding: 14px;
}

.quote-activity-schedule {
  border-bottom: 1px solid #d4dbe3;
  background: #ffffff;
}

.quote-activity-schedule p {
  margin: 9px 0 0;
  padding-left: 17px;
  color: #a12622;
  font-size: 10px;
  position: relative;
}

.quote-activity-schedule p::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  color: #d93025;
  font-weight: 800;
}

.quote-activity-schedule p.is-scheduled {
  color: #2e6f40;
}

.quote-activity-schedule p.is-scheduled::before {
  content: "\2713";
  color: #2e8b57;
}

.quote-timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.quote-timeline-heading span {
  color: #75808d;
  font-size: 9px;
}

.quote-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 13px;
  position: relative;
}

.quote-timeline-item::before {
  content: "";
  width: 1px;
  position: absolute;
  top: 17px;
  bottom: 0;
  left: 8px;
  background: #b9c6d1;
}

.quote-timeline-item:last-child::before {
  display: none;
}

.quote-timeline-item > i {
  width: 17px;
  height: 17px;
  display: block;
  border: 2px solid #1784d6;
  border-radius: 50%;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

.quote-timeline-item > i::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #1784d6;
}

.quote-timeline-item div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  background: #ffffff;
}

.quote-timeline-item strong,
.quote-timeline-item span,
.quote-timeline-item time {
  overflow-wrap: anywhere;
  font-size: 9px;
}

.quote-timeline-item strong {
  color: #1d5f96;
}

.quote-timeline-item span,
.quote-timeline-item time {
  color: #687384;
}

.quote-timeline-item .quote-timeline-actor {
  color: #1d5f96;
  font-weight: 700;
}

.quote-live-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  border-top: 1px solid #d4dbe3;
  border-left: 1px solid #d4dbe3;
  background: #ffffff;
}

.quote-live-summary-grid > div {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid #d4dbe3;
  border-bottom: 1px solid #d4dbe3;
}

.quote-live-summary-grid span {
  color: #687384;
  font-size: 10px;
}

.quote-live-summary-grid strong {
  overflow-wrap: anywhere;
  color: #17212e;
  font-size: 12px;
}

.quote-live-description-preview {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #d4dbe3;
  background: #f7f9fb;
}

.quote-live-description-preview h3,
.quote-live-list-section h3,
.quote-project-overview > h3 {
  margin: 0 0 9px;
  color: #17212e;
  font-size: 14px;
}

.quote-section-intro {
  margin: -3px 0 12px;
  color: #687384;
  font-size: 10px;
}

.quote-linked-customer-list {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  border: 1px solid #d4dbe3;
  background: #d4dbe3;
}

.quote-linked-customer-list span {
  padding: 9px 10px;
  background: #ffffff;
  color: #17212e;
  font-size: 11px;
}

.quote-live-description-preview p {
  min-height: 44px;
  margin: 0 0 10px;
  color: #3f4b59;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.quote-live-info-form {
  margin: 0;
}

.quote-info-editor-panel {
  padding: 16px 14px;
}

.quote-info-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.quote-info-heading h3 {
  margin: 0;
  color: #17212e;
  font-size: 14px;
}

.quote-info-heading > div:first-child {
  display: grid;
  gap: 4px;
}

.quote-info-document-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quote-info-heading span {
  color: #687384;
  font-size: 10px;
}

.quote-info-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start;
}

.quote-rich-field {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 30px auto;
  color: #273444;
  font-size: 11px;
  font-weight: 700;
}

.quote-field-label {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-field-label > small {
  font-weight: 400;
}

.quote-rich-field > span {
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.quote-rich-field small {
  color: #79838e;
  font-size: 9px;
  font-weight: 400;
}

.quote-rich-toolbar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid #b9c1ca;
  border-bottom: 0;
  background: #ffffff;
  color: #4d5966;
  white-space: nowrap;
}

.quote-rich-toolbar button {
  min-width: 25px;
  height: 24px;
  padding: 0 5px;
  border: 0;
  border-right: 1px solid #d4dbe3;
  background: #ffffff;
  color: #3f4b59;
  font-size: 10px;
  cursor: pointer;
}

.quote-rich-toolbar button:hover,
.quote-rich-toolbar button:focus-visible {
  background: #e8f3fc;
  color: #075ea8;
}

.quote-rich-toolbar span,
.quote-rich-toolbar b,
.quote-rich-toolbar i,
.quote-rich-toolbar u {
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
}

.quote-rich-field textarea {
  width: 100%;
  min-height: 255px;
  resize: vertical;
  border: 1px solid #b9c1ca;
  border-radius: 0;
  background: #ffffff;
  padding: 10px;
  color: #1f2937;
  font: 11px/1.5 Arial, sans-serif;
}

.quote-description-field {
  grid-template-rows: auto 30px auto auto;
}

.quote-customer-visible-note {
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #b9c1ca;
  border-top: 0;
  background: #eaf4fb;
  color: #315c7b;
}

.quote-private-notes textarea {
  min-height: 125px;
}

.quote-private-notes {
  grid-template-rows: auto auto;
  padding: 12px;
  background: #f0f1f2;
}

.quote-customer-preview-section {
  padding: 0 14px 24px;
}

.quote-preview-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 3px auto 12px;
  max-width: 900px;
}

.quote-preview-heading h3,
.quote-preview-heading p {
  margin: 0;
}

.quote-preview-heading h3 {
  color: #17212e;
  font-size: 14px;
}

.quote-preview-heading p,
.quote-preview-heading > span {
  margin-top: 3px;
  color: #687384;
  font-size: 10px;
}

.quote-preview-heading > span {
  padding: 4px 7px;
  border: 1px solid #8eb8d8;
  background: #eaf4fb;
  color: #1d5f96;
  font-weight: 700;
}

.quote-document-preview {
  width: min(100%, 900px);
  min-height: 1273px;
  margin: 0 auto;
  padding: 38px 42px 46px;
  border: 1px solid #bac3cc;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(25, 42, 58, .12);
  color: #171a1d;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.quote-document-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  min-height: 132px;
  margin: -38px -42px 0;
  padding: 18px 30px;
  border-bottom: 5px solid #2254a4;
  background: #071928;
}

.quote-document-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.quote-document-brand img {
  width: min(100%, 430px);
  height: 96px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.quote-document-company {
  min-width: 270px;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 3px;
  padding: 8px 0 8px 24px;
  border-left: 1px solid rgba(126, 169, 211, .62);
  background: transparent;
  color: #ffffff;
  font-size: 10px;
  text-align: right;
}

.quote-document-preview > h2 {
  margin: 28px 0 18px;
  color: #101820;
  font-size: 20px;
  text-align: right;
}

.quote-document-address-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: start;
  gap: 30px;
}

.quote-document-address-row address {
  display: grid;
  gap: 4px;
  padding-top: 22px;
  font-size: 12px;
  font-style: normal;
}

.quote-document-address-row dl {
  margin: 0;
  padding: 14px 18px;
  background: #e7e8e9;
}

.quote-document-address-row dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  min-height: 20px;
  font-size: 11px;
}

.quote-document-address-row dt,
.quote-document-address-row dd {
  margin: 0;
}

.quote-document-address-row dt {
  font-weight: 700;
}

.quote-document-description {
  min-height: 360px;
  margin-top: 42px;
  font-size: 12px;
  line-height: 1.45;
}

.quote-document-description p,
.quote-document-description h3,
.quote-document-description ul {
  margin: 0 0 10px;
}

.quote-document-description h3 {
  margin-top: 20px;
  font-size: 12px;
}

.quote-document-description ul {
  padding-left: 34px;
}

.quote-document-description br {
  display: block;
  content: "";
  height: 6px;
}

.quote-preview-placeholder {
  color: #8a949e;
  font-style: italic;
}

.quote-document-costs {
  margin-top: 34px;
}

.quote-document-costs table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.quote-document-costs th,
.quote-document-costs td {
  padding: 5px 7px;
  border: 1px solid #8d9297;
}

.quote-document-costs th {
  background: #96989a;
  color: #ffffff;
  text-align: center;
}

.quote-document-costs th:first-child,
.quote-document-costs td:first-child {
  width: 58%;
  text-align: left;
}

.quote-document-costs td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-document-costs dl {
  width: 330px;
  margin: 95px 0 0 auto;
  padding: 7px 0;
  border-top: 1px solid #31363a;
  border-bottom: 1px solid #31363a;
}

.quote-document-costs dl > div {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 14px;
  min-height: 20px;
  font-size: 12px;
}

.quote-document-costs dt,
.quote-document-costs dd {
  margin: 0;
  text-align: right;
}

.quote-document-costs dt {
  font-weight: 700;
}

.quote-forms-workspace {
  padding: 16px 14px 24px;
}

.quote-forms-heading,
.quote-email-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.quote-forms-heading h3,
.quote-email-heading h3,
.quote-email-activity h3 {
  margin: 0;
  color: #17212e;
  font-size: 14px;
}

.quote-forms-heading span {
  color: #687384;
  font-size: 10px;
}

.quote-form-config {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(220px, 280px) minmax(180px, 230px) auto;
  align-items: end;
  gap: 10px 16px;
}

.quote-form-config .field select,
.quote-email-composer .field input {
  border-radius: 0;
  background: #ffffff;
}

.quote-switch-control {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #46515f;
  font-size: 10px;
  cursor: pointer;
}

.quote-switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-switch-control > span {
  position: relative;
  width: 34px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid #aeb7c2;
  border-radius: 10px;
  background: #d5dbe2;
}

.quote-switch-control > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transition: transform 120ms ease;
}

.quote-switch-control input:checked + span {
  border-color: #0875d1;
  background: #0875d1;
}

.quote-switch-control input:checked + span::after {
  transform: translateX(16px);
}

.quote-switch-control input:focus-visible + span {
  outline: 2px solid #85bdec;
  outline-offset: 2px;
}

.quote-switch-control b {
  font-size: 10px;
  font-weight: 600;
}

.quote-generated-document {
  max-width: 1020px;
  margin: 12px 0 18px;
}

.quote-document-actions {
  min-height: 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.quote-document-actions button {
  border: 0;
  background: transparent;
  color: #0875d1;
  font-size: 10px;
  cursor: pointer;
}

.quote-document-actions button:hover,
.quote-document-actions button:focus-visible {
  text-decoration: underline;
}

.quote-document-row {
  min-height: 53px;
  display: grid;
  grid-template-columns: 38px minmax(240px, 1fr) 170px 70px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #cfd6de;
  background: #ffffff;
  color: #566372;
  font-size: 10px;
}

.quote-document-row > div strong,
.quote-document-row > div small {
  display: block;
}

.quote-document-row > div strong {
  overflow: hidden;
  color: #0875d1;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-document-row > div small {
  margin-top: 3px;
  color: #75808d;
  font-size: 9px;
}

.quote-document-row > span {
  text-align: right;
}

.quote-document-row label {
  color: #0875d1;
  font-weight: 600;
}

.quote-document-icon {
  width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d06c64;
  background: #fff5f4;
  color: #b42318;
  font-size: 9px;
  font-weight: 700;
}

.quote-email-composer {
  max-width: 1180px;
  padding-top: 15px;
  border-top: 1px solid #d4dbe3;
}

.quote-email-heading {
  justify-content: flex-start;
}

.quote-email-recipient-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(160px, 0.45fr) minmax(160px, 0.45fr);
  gap: 10px 14px;
}

.quote-email-subject {
  margin-top: 10px;
}

.quote-email-body-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.4fr) minmax(300px, 0.7fr);
  gap: 20px;
  margin-top: 10px;
  align-items: start;
}

.quote-email-body-grid .quote-rich-field textarea {
  min-height: 230px;
}

.quote-email-attachments {
  min-height: 286px;
  border: 1px solid #b9c1ca;
  background: #ffffff;
}

.quote-email-attachments > strong {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #d4dbe3;
  color: #273444;
  font-size: 10px;
}

.quote-email-attachments > div {
  min-height: 250px;
  display: grid;
  align-content: start;
  padding: 10px;
}

.quote-email-attachments > div > span {
  align-self: center;
  color: #9099a4;
  font-size: 10px;
  text-align: center;
}

.quote-attachment-item {
  min-height: 46px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid #d4dbe3;
  background: #f8fafc;
}

.quote-attachment-item strong,
.quote-attachment-item small {
  display: block;
  overflow-wrap: anywhere;
}

.quote-attachment-item strong {
  color: #273444;
  font-size: 10px;
}

.quote-attachment-item small {
  margin-top: 3px;
  color: #75808d;
  font-size: 9px;
}

.quote-email-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.quote-email-activity {
  max-width: 1180px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #d4dbe3;
}

.quote-email-activity h3 {
  margin-bottom: 8px;
}

.quote-email-activity > div {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 110px 100px;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  border-bottom: 1px solid #dce1e6;
  color: #566372;
  font-size: 10px;
}

.quote-email-activity > div:first-of-type {
  border-top: 1px solid #dce1e6;
}

.quote-email-activity span strong,
.quote-email-activity span small {
  display: block;
}

.quote-email-activity span strong {
  color: #17212e;
}

.quote-email-activity span small {
  margin-top: 2px;
  color: #75808d;
}

.quote-email-activity b {
  color: #0875d1;
  font-size: 10px;
}

.quote-log-row {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 10px;
  border-bottom: 1px solid #dce1e6;
  color: #566372;
  font-size: 11px;
}

.quote-log-row:first-of-type {
  border-top: 1px solid #dce1e6;
}

.quote-log-row strong {
  color: #17212e;
}

.quote-cost-centre-list .quote-cost-section-heading,
.quote-gantt .quote-cost-section-heading {
  margin-bottom: 14px;
}

.quote-cost-list-tabs {
  margin: -16px -14px 0;
}

.quote-cost-centre-filter {
  display: grid;
  grid-template-columns: minmax(260px, 430px) auto auto 1fr;
  align-items: end;
  gap: 8px;
  margin-bottom: 18px;
  padding: 13px 16px;
  background: #eef0f2;
}

.quote-cost-centre-filter label,
.quote-add-cost-section label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #344252;
  font-size: 10px;
  font-weight: 700;
}

.quote-cost-centre-filter input,
.quote-add-cost-section input,
.quote-add-cost-section select {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #bfc9d3;
  border-radius: 0;
  background: #ffffff;
  color: #17212e;
  font: inherit;
}

.quote-cost-sections-builder {
  border: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-cost-centre-total {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 12px;
  border-top: 1px solid #cfd6de;
  background: #eef0f2;
}

.quote-cost-centre-total > div {
  min-width: 165px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px;
  border-left: 1px solid #c7d0d9;
}

.quote-cost-centre-total dt,
.quote-cost-centre-total dd {
  margin: 0;
  color: #17212e;
  font-size: 11px;
}

.quote-cost-centre-total dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quote-cost-centre-breadcrumbs {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid #cfd6de;
  background: #ffffff;
  color: #687384;
  font-size: 11px;
}

.quote-cost-centre-breadcrumbs button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #075ea8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.quote-cost-centre-breadcrumbs button:hover,
.quote-cost-centre-breadcrumbs button:focus-visible {
  text-decoration: underline;
}

.quote-cost-centre-breadcrumbs strong {
  color: #17212e;
}

.quote-cost-centre-summary,
.quote-cost-centre-info {
  padding: 16px 14px 28px;
}

.quote-cost-centre-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.5fr);
  min-height: 460px;
  border: 1px solid #cfd6de;
  background: #ffffff;
}

.quote-cost-centre-summary-grid > .quote-estimate-chart {
  border-right: 1px solid #d7dde4;
}

.quote-cost-centre-parts-summary {
  min-width: 0;
  padding: 16px;
}

.quote-cost-centre-parts-summary h4 {
  margin: 0 0 12px;
  color: #17212e;
  font-size: 14px;
}

.quote-cost-centre-parts-summary table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 10px;
}

.quote-cost-centre-parts-summary .table-wrap {
  overflow: visible;
}

.quote-cost-centre-parts-summary th,
.quote-cost-centre-parts-summary td {
  padding: 8px;
  border-bottom: 1px solid #dce1e6;
  text-align: left;
}

.quote-cost-centre-parts-summary th:not(:first-child),
.quote-cost-centre-parts-summary td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-cost-centre-breakdown {
  margin-top: 18px;
}

.quote-cost-centre-info h3 {
  margin: 0 0 14px;
  font-size: 17px;
}

.quote-cost-sections-title {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #cfd6de;
}

.quote-cost-sections-title h4,
.quote-cost-sections-title span {
  margin: 0;
}

.quote-cost-sections-title h4 {
  color: #17212e;
  font-size: 14px;
}

.quote-cost-sections-title span {
  color: #687384;
  font-size: 10px;
}

.quote-add-cost-section {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr) minmax(230px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 13px 12px;
  border-bottom: 1px solid #cfd6de;
  background: #f4f5f6;
}

.quote-add-cost-section small {
  color: #75808d;
  font-weight: 400;
}

.quote-cost-centre-list .quote-cost-table {
  min-width: 1000px;
}

.quote-cost-centre-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quote-cost-centre-actions .icon-action {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c7d0d9;
  background: #ffffff;
  color: #ad201c;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.quote-cost-centre-empty {
  padding: 18px 12px;
  color: #687384;
  font-size: 11px;
}

.quote-cost-options-panel {
  max-width: 720px;
  border-top: 1px solid #cfd6de;
}

.quote-cost-options-panel h4 {
  margin: 0 0 4px;
  color: #17212e;
  font-size: 14px;
}

.quote-cost-options-panel > p {
  margin: 0 0 12px;
  color: #687384;
  font-size: 10px;
}

.quote-cost-options-panel > div {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 9px;
  border-bottom: 1px solid #dce1e6;
  font-size: 10px;
}

.quote-cost-options-panel > div strong {
  color: #1d5f96;
}

.quote-cost-centre-list .quote-cost-table td small {
  display: block;
  margin-top: 3px;
  color: #75808d;
  font-size: 9px;
}

.quote-cost-centre-heading {
  min-height: 43px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #d4dbe3;
}

.quote-cost-centre-heading > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.quote-cost-centre-heading strong {
  color: #17212e;
  font-size: 11px;
}

.quote-project-overview .quote-site-summary {
  margin-top: 16px;
}

.quote-project-overview {
  padding: 0;
}

.quote-overview-tabs {
  min-height: 42px;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #cfd6de;
  background: #e5e5e5;
}

.quote-overview-tabs button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 22px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.quote-overview-tabs button:hover,
.quote-overview-tabs button.active {
  border-bottom-color: #0875d1;
  background: #ffffff;
  color: #17212e;
  font-weight: 700;
}

.quote-overview-materials,
.quote-overview-resources,
.quote-overview-simple {
  padding: 16px 14px 24px;
}

.quote-overview-materials > h3,
.quote-overview-resources > h3,
.quote-overview-simple > h3 {
  margin: 0 0 14px;
  color: #17212e;
  font-size: 14px;
}

.quote-material-adjustment {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 240px)) 80px;
  align-items: end;
  gap: 14px 18px;
  margin-bottom: 14px;
}

.quote-material-adjustment label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #46515f;
  font-size: 10px;
  font-weight: 700;
}

.quote-material-adjustment label > div {
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  border: 1px solid #b9c1ca;
  background: #ffffff;
}

.quote-material-adjustment label:nth-child(3) > div {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.quote-material-adjustment label b {
  display: grid;
  place-items: center;
  background: #eeeeee;
  color: #566372;
  font-size: 10px;
}

.quote-material-adjustment input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 4px 8px;
  background: #ffffff;
  color: #17212e;
  font: inherit;
  text-align: right;
}

.quote-material-adjustment input[readonly] {
  background: #eeeeee;
}

.quote-material-overview-table-wrap {
  border-top: 1px solid #cfd6de;
}

.quote-material-overview-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  table-layout: fixed;
}

.quote-material-overview-table th,
.quote-material-overview-table td {
  height: 34px;
  padding: 5px 9px;
  border-bottom: 1px solid #dce1e6;
  color: #46515f;
  font-size: 10px;
  text-align: right;
}

.quote-material-overview-table th {
  background: #eef1f4;
  color: #344252;
  font-weight: 700;
}

.quote-material-overview-table th:first-child,
.quote-material-overview-table td:first-child {
  width: 340px;
  text-align: left;
}

.quote-material-overview-table thead tr:first-child th[colspan] {
  border-right: 1px solid #c3cbd4;
  border-left: 1px solid #c3cbd4;
  text-align: center;
}

.quote-material-overview-table tbody tr:hover:not(.quote-material-cost-centre-row):not(.quote-material-select-row) td {
  background: #f2f9ff;
}

.quote-material-overview-table label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #273444;
}

.quote-material-select-row td {
  background: #d5fbfb;
}

.quote-material-cost-centre-row td {
  background: #e9ecef;
  color: #0875d1;
}

.quote-material-cost-centre-row strong {
  margin-left: 32px;
}

.quote-material-group-row label {
  text-transform: uppercase;
}

.quote-material-overview-table tfoot td {
  color: #17212e;
  font-weight: 700;
}

.quote-projected-material-cost {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 7px 9px;
  border-bottom: 1px solid #dce1e6;
  color: #46515f;
  font-size: 10px;
}

.quote-projected-material-cost strong {
  min-width: 120px;
  padding: 6px 9px;
  border: 1px solid #b9c1ca;
  background: #ffffff;
  color: #17212e;
  text-align: right;
}

.quote-material-purchasing {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(280px, 340px) minmax(180px, 250px) 150px;
  align-items: end;
  gap: 14px 24px;
  margin-top: 14px;
  padding: 16px 14px;
  background: #eeeeee;
}

.quote-material-purchasing > label,
.quote-material-purchasing fieldset {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #46515f;
  font-size: 10px;
  font-weight: 700;
}

.quote-material-purchasing select {
  width: 100%;
  height: 30px;
  border: 1px solid #b9c1ca;
  border-radius: 0;
  background: #ffffff;
  color: #273444;
  font: inherit;
}

.quote-material-purchasing fieldset {
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  column-gap: 18px;
}

.quote-material-purchasing legend {
  grid-column: 1 / -1;
  margin-bottom: 5px;
}

.quote-material-purchasing fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
}

.quote-supplier-quote-activity {
  margin-top: 16px;
}

.quote-supplier-quote-activity h4 {
  margin: 0 0 8px;
  color: #17212e;
  font-size: 12px;
}

.quote-supplier-quote-activity > div,
.quote-adjustment-row {
  min-height: 39px;
  display: grid;
  grid-template-columns: 100px minmax(220px, 1fr) 110px 100px;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  border-top: 1px solid #dce1e6;
  color: #566372;
  font-size: 10px;
}

.quote-supplier-quote-activity strong,
.quote-adjustment-row strong {
  color: #0875d1;
}

.quote-overview-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-bottom: 16px;
  border-top: 1px solid #d4dbe3;
  border-left: 1px solid #d4dbe3;
}

.quote-overview-metric-row > div {
  min-height: 60px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 11px;
  border-right: 1px solid #d4dbe3;
  border-bottom: 1px solid #d4dbe3;
}

.quote-overview-metric-row span {
  color: #687384;
  font-size: 10px;
}

.quote-overview-metric-row strong {
  color: #17212e;
  font-size: 12px;
}

.quote-overview-resource-table {
  min-width: 880px;
}

/* Weekly schedule and visual timesheet. */
.weekly-schedule-page {
  max-width: none;
}

.schedule-view-tabs {
  min-height: 40px;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #cfd6de;
}

.schedule-view-tabs button {
  min-width: 86px;
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: #ffffff;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.schedule-view-tabs button:hover,
.schedule-view-tabs button.active {
  border-bottom-color: #0875d1;
  background: #dedede;
  color: #17212e;
  font-weight: 700;
}

.schedule-subview-tabs {
  min-height: 38px;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid #cfd6de;
  background: #ffffff;
}

.schedule-subview-tabs button {
  min-width: 96px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #0875d1;
  font-size: 11px;
  cursor: pointer;
}

.schedule-subview-tabs button.active {
  border-bottom-color: #0875d1;
  color: #17212e;
  font-weight: 700;
}

.schedule-filter-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 1fr) minmax(190px, 0.8fr) minmax(190px, 0.8fr);
  gap: 12px 18px;
  padding: 12px 14px;
  border: 1px solid #cfd6de;
  background: #eeeeee;
}

.schedule-filter-panel label,
.schedule-week-controls label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #46515f;
  font-size: 10px;
  font-weight: 700;
}

.schedule-filter-panel select,
.schedule-week-controls input {
  width: 100%;
  min-width: 0;
  height: 30px;
  border: 1px solid #b9c1ca;
  border-radius: 0;
  background: #ffffff;
  color: #273444;
  padding: 4px 8px;
  font: inherit;
}

.schedule-week-controls {
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #cfd6de;
  background: #f7f8fa;
}

.schedule-date-stepper {
  display: grid;
  grid-template-columns: 32px minmax(190px, 230px) 32px;
  align-items: end;
  gap: 10px;
}

.schedule-date-stepper > button {
  width: 32px;
  height: 30px;
  border: 1px solid #9aa5b1;
  border-radius: 0;
  background: #ffffff;
  color: #0875d1;
  font-size: 17px;
  cursor: pointer;
}

.schedule-week-controls > strong {
  align-self: center;
  color: #273444;
  font-size: 12px;
  text-align: center;
}

.schedule-week-scroll {
  height: min(760px, calc(100vh - 285px));
  min-height: 500px;
  max-width: 100%;
  margin-top: 10px;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  border: 1px solid #bfc7d0;
  background: #ffffff;
  scrollbar-gutter: stable;
}

.schedule-week-sheet {
  min-width: 1260px;
  display: grid;
  grid-template-columns: 76px repeat(7, minmax(160px, 1fr));
  grid-template-rows: 48px 1152px;
}

.schedule-week-corner,
.schedule-day-header {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 0;
  display: grid;
  align-content: center;
  border-right: 1px solid #c7ced7;
  border-bottom: 1px solid #c7ced7;
  background: #f0f2f4;
}

.schedule-week-corner {
  padding: 6px 8px;
}

.schedule-week-corner strong,
.schedule-week-corner span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-week-corner strong {
  color: #273444;
  font-size: 9px;
}

.schedule-week-corner span {
  margin-top: 3px;
  color: #0875d1;
  font-size: 9px;
}

.schedule-day-header {
  grid-template-columns: 36px 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 4px 8px;
}

.schedule-day-header b {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  margin: -4px 8px -4px -8px;
  background: #218bd4;
  color: #ffffff;
  font-size: 11px;
}

.schedule-day-header span {
  align-self: end;
  color: #17212e;
  font-size: 10px;
  font-weight: 700;
}

.schedule-day-header small {
  color: #687384;
  font-size: 9px;
}

.schedule-day-header.today {
  background: #fff1a5;
}

.schedule-time-axis,
.schedule-day-column {
  position: relative;
  height: 1152px;
  min-width: 0;
  border-right: 1px solid #c7ced7;
}

.schedule-time-axis {
  background: #f7f8fa;
}

.schedule-time-axis span {
  position: absolute;
  right: 6px;
  height: 12px;
  color: #4d5966;
  font-size: 8px;
  line-height: 12px;
}

.schedule-day-column {
  touch-action: none;
  background-color: #ffffff;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 11px, #dfe4e9 11px, #dfe4e9 12px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #aeb8c3 47px, #aeb8c3 48px);
  cursor: crosshair;
  user-select: none;
}

.schedule-day-column.today {
  background-color: #fffdf2;
}

.schedule-time-block {
  position: absolute;
  right: 4px;
  left: 4px;
  z-index: 2;
  min-height: 28px;
  overflow: hidden;
  border: 1px solid rgba(20, 31, 43, 0.35);
  border-left: 4px solid rgba(20, 31, 43, 0.55);
  border-radius: 2px;
  background: var(--job-colour);
  color: #ffffff;
  padding: 5px 21px 4px 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  cursor: grab;
  touch-action: none;
}

.schedule-time-block.compact {
  padding-top: 6px;
  padding-bottom: 4px;
}

.schedule-time-block.compact small,
.schedule-time-block.compact em {
  display: none;
}

.schedule-time-block.locked {
  cursor: default;
  border-style: solid;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 5px, transparent 5px, transparent 10px);
}

.schedule-time-block.locked .schedule-resize-handle {
  display: none;
}

.schedule-time-block.cut-pending {
  opacity: 0.48;
  outline: 2px dashed #17212e;
}

.schedule-time-block:hover,
.schedule-time-block:focus-visible,
.schedule-time-block.dragging {
  z-index: 5;
  outline: 2px solid #17212e;
  outline-offset: 1px;
}

.schedule-time-block.dragging {
  cursor: grabbing;
  opacity: 0.9;
}

.schedule-time-block strong,
.schedule-time-block small,
.schedule-time-block em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-time-block strong {
  font-size: 10px;
}

.schedule-time-block small,
.schedule-time-block em {
  margin-top: 2px;
  font-size: 8px;
}

.schedule-time-block em {
  font-style: normal;
  opacity: 0.9;
}

.schedule-time-block > button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.88);
  color: #273444;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
}

.schedule-lock-icon {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: #17212e;
  font-size: 11px;
  line-height: 1;
}

.schedule-clipboard-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  border: 1px solid #8eb9dd;
  background: #eaf5fd;
  color: #273444;
  padding: 7px 10px;
  font-size: 11px;
}

.schedule-clipboard-status button {
  border: 0;
  background: transparent;
  color: #0875d1;
  font-weight: 700;
  cursor: pointer;
}

.schedule-context-dismiss {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border: 0;
  background: transparent;
  cursor: default;
}

.schedule-context-menu {
  position: fixed;
  z-index: 1001;
  width: 190px;
  display: grid;
  border: 1px solid #8d98a5;
  background: #ffffff;
  padding: 4px 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
}

.schedule-context-menu strong {
  overflow: hidden;
  border-bottom: 1px solid #d8dee5;
  padding: 7px 10px;
  color: #273444;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-context-menu button {
  min-height: 31px;
  border: 0;
  background: #ffffff;
  color: #17212e;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
}

.schedule-context-menu button:hover,
.schedule-context-menu button:focus-visible {
  background: #e7f2fb;
}

.schedule-context-menu button:disabled {
  color: #9aa5b1;
  background: #f7f8fa;
  cursor: not-allowed;
}

.schedule-resize-handle {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 6px;
  cursor: ns-resize;
}

.schedule-resize-handle.top {
  top: 0;
}

.schedule-resize-handle.bottom {
  bottom: 0;
}

.schedule-time-draft {
  z-index: 6;
  pointer-events: none;
  opacity: 0.72;
}

.schedule-legend {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 8px 10px;
  border: 1px solid #cfd6de;
  border-top: 0;
  background: #f7f8fa;
  color: #566372;
  font-size: 9px;
}

.schedule-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-legend i,
.schedule-job-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.schedule-overview,
.schedule-alternate-view {
  margin-top: 10px;
  padding: 14px 0;
}

.schedule-alternate-view h3 {
  margin: 0 0 10px;
  color: #17212e;
  font-size: 14px;
}

.schedule-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-bottom: 14px;
  border-top: 1px solid #d4dbe3;
  border-left: 1px solid #d4dbe3;
}

.schedule-overview-metrics > div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 11px;
  border-right: 1px solid #d4dbe3;
  border-bottom: 1px solid #d4dbe3;
}

.schedule-overview-metrics span {
  color: #687384;
  font-size: 10px;
}

.schedule-overview-metrics strong {
  color: #17212e;
  font-size: 14px;
}

.schedule-entry-table {
  min-width: 1000px;
}

.schedule-entry-table .schedule-job-dot {
  margin-right: 6px;
  vertical-align: -1px;
}

.schedule-month-scroll {
  max-width: 100%;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid #bfc7d0;
  background: #ffffff;
}

.schedule-month-sheet {
  min-width: calc(360px + (var(--month-days) * 34px));
  display: grid;
  grid-template-columns: 360px repeat(var(--month-days), minmax(34px, 1fr));
  grid-auto-rows: minmax(76px, auto);
}

.schedule-month-corner,
.schedule-month-day,
.schedule-month-job,
.schedule-month-cell {
  min-width: 0;
  border-right: 1px solid #d2d8df;
  border-bottom: 1px solid #d2d8df;
}

.schedule-month-corner {
  position: sticky;
  left: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 14px;
  background: #e5e7e9;
}

.schedule-month-corner strong {
  color: #17212e;
  font-size: 13px;
}

.schedule-month-corner span {
  color: #687384;
  font-size: 10px;
}

.schedule-month-day {
  display: grid;
  place-content: center;
  gap: 3px;
  background: #f0f2f4;
  color: #687384;
  text-align: center;
}

.schedule-month-day span {
  font-size: 8px;
  text-transform: uppercase;
}

.schedule-month-day b {
  color: #273444;
  font-size: 11px;
}

.schedule-month-day.today {
  background: #218bd4;
  color: #ffffff;
}

.schedule-month-day.today b {
  color: #ffffff;
}

.schedule-month-job {
  position: sticky;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px 8px;
  padding: 10px 12px 10px 8px;
  background: #ffffff;
}

.schedule-month-job > i {
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 48px;
}

.schedule-month-job strong,
.schedule-month-job span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-month-job strong {
  color: #273444;
  font-size: 12px;
}

.schedule-month-job span {
  color: #687384;
  font-size: 10px;
}

.schedule-month-cell {
  min-height: 76px;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 3px;
  background: #ffffff;
}

.schedule-month-cell:nth-child(even) {
  background-color: #fbfcfd;
}

.schedule-month-cell.today {
  background: #fff9d9;
}

.schedule-month-block {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: grid;
  align-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(20, 31, 43, 0.34);
  border-radius: 2px;
  background: var(--job-colour);
  color: #ffffff;
  padding: 5px 4px;
  text-align: left;
  cursor: pointer;
}

.schedule-month-block:hover,
.schedule-month-block:focus-visible {
  z-index: 2;
  outline: 2px solid #17212e;
  outline-offset: 1px;
}

.schedule-month-block strong,
.schedule-month-block span,
.schedule-month-block small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.schedule-month-block strong {
  font-size: 8px;
}

.schedule-month-block span,
.schedule-month-block small {
  font-size: 8px;
}

.schedule-month-block small {
  opacity: 0.88;
}

.schedule-month-empty {
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid #d4dbe3;
  color: #687384;
  text-align: center;
}

.schedule-month-empty strong {
  color: #273444;
}

.quote-gantt-list {
  display: grid;
  border-top: 1px solid #d4dbe3;
}

.quote-gantt-list > div {
  min-height: 42px;
  display: grid;
  grid-template-columns: 110px 190px minmax(180px, 1fr) 70px;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #d4dbe3;
  color: #566372;
  font-size: 10px;
}

.quote-gantt-list strong,
.quote-gantt-list b {
  color: #17212e;
  font-size: 10px;
}

.quote-gantt-list i {
  width: calc((var(--gantt-hours) / 12) * 100%);
  min-width: 12px;
  max-width: 100%;
  height: 16px;
  display: block;
  background: #2b91da;
}

@media (max-width: 1100px) {
  .quote-editor-topbar {
    flex-wrap: wrap;
  }

  .quote-total-summary {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .quote-total-summary span {
    flex: 1;
  }

  .quote-schedule-layout,
  .quote-cost-summary,
  .quote-billable-controls {
    grid-template-columns: 1fr;
  }

  .quote-resource-panel {
    border-right: 0;
    border-bottom: 1px solid #d4dbe3;
    padding: 0 0 15px;
  }

  .quote-live-summary-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .quote-summary-workspace {
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
  }

  .quote-activity-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .quote-activity-panel > h4 {
    grid-column: 1 / -1;
  }

  .quote-add-cost-section {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .quote-cost-centre-summary-grid {
    grid-template-columns: minmax(240px, .7fr) minmax(420px, 1.3fr);
  }

  .quote-info-grid {
    grid-template-columns: 1fr;
  }

  .quote-document-preview {
    min-height: 980px;
    padding: 28px 30px 38px;
  }

  .quote-form-config {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  .quote-email-body-grid {
    grid-template-columns: 1fr;
  }

  .quote-email-attachments {
    min-height: 150px;
  }

  .quote-email-attachments > div {
    min-height: 112px;
  }

  .quote-material-adjustment,
  .quote-material-purchasing {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  .quote-overview-metric-row {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .schedule-filter-panel {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

@media (max-width: 760px) {
  .quote-workspace-tabs,
  .quote-costing-tabs {
    overflow-x: auto;
  }

  .quote-workspace-tabs button,
  .quote-costing-tabs button {
    flex: 0 0 auto;
  }

  .quote-live-primary-tabs button,
  .quote-live-detail-tabs button {
    padding: 0 13px;
  }

  .quote-live-summary,
  .quote-live-list-section,
  .quote-cost-centre-list,
  .quote-project-overview,
  .quote-gantt,
  .quote-info-editor-panel {
    padding-right: 0;
    padding-left: 0;
  }

  .quote-live-summary-grid {
    grid-template-columns: 1fr;
  }

  .quote-summary-heading {
    display: grid;
  }

  .quote-summary-workspace,
  .quote-activity-panel {
    grid-template-columns: 1fr;
  }

  .quote-estimate-chart,
  .quote-breakdown-panel {
    border-right: 0;
    border-bottom: 1px solid #d7dde4;
  }

  .quote-cost-centre-filter,
  .quote-add-cost-section {
    grid-template-columns: 1fr;
  }

  .quote-cost-centre-total {
    display: grid;
    justify-content: stretch;
  }

  .quote-cost-centre-total > div {
    min-height: 30px;
    border-left: 0;
    border-bottom: 1px solid #c7d0d9;
  }

  .quote-cost-centre-summary,
  .quote-cost-centre-info {
    padding-right: 0;
    padding-left: 0;
  }

  .quote-cost-centre-summary-grid {
    grid-template-columns: 1fr;
  }

  .quote-cost-centre-summary-grid > .quote-estimate-chart {
    border-right: 0;
    border-bottom: 1px solid #d7dde4;
  }

  .quote-info-heading {
    display: grid;
  }

  .quote-info-document-actions,
  .quote-preview-heading {
    align-items: stretch;
  }

  .quote-document-header,
  .quote-document-address-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .quote-document-header {
    gap: 12px;
    margin: -38px -42px 0;
    padding: 18px 24px;
  }

  .quote-document-company {
    justify-items: start;
    min-width: 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(126, 169, 211, .62);
    border-left: 0;
    text-align: left;
  }

  .quote-document-preview > h2 {
    text-align: left;
  }

  .quote-document-costs {
    overflow-x: auto;
  }

  .quote-document-costs table {
    min-width: 620px;
  }

  .quote-document-costs dl {
    width: min(100%, 330px);
    margin-top: 45px;
  }

  .quote-rich-field textarea {
    min-height: 190px;
  }

  .quote-private-notes textarea {
    min-height: 120px;
  }

  .quote-gantt-list {
    overflow-x: auto;
  }

  .quote-gantt-list > div {
    min-width: 700px;
  }

  .quote-forms-workspace {
    padding-right: 0;
    padding-left: 0;
  }

  .quote-overview-materials,
  .quote-overview-resources,
  .quote-overview-simple {
    padding-right: 0;
    padding-left: 0;
  }

  .quote-material-adjustment,
  .quote-material-purchasing,
  .quote-overview-metric-row {
    grid-template-columns: 1fr;
  }

  .quote-material-purchasing fieldset {
    grid-template-columns: 1fr;
  }

  .schedule-filter-panel,
  .schedule-overview-metrics {
    grid-template-columns: 1fr;
  }

  .schedule-week-controls {
    grid-template-columns: 1fr;
  }

  .schedule-date-stepper {
    grid-template-columns: 32px minmax(160px, 1fr) 32px;
  }

  .schedule-week-controls > strong {
    grid-column: auto;
    grid-row: auto;
  }

  .quote-forms-heading,
  .quote-email-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .quote-form-config,
  .quote-email-recipient-grid {
    grid-template-columns: 1fr;
  }

  .quote-document-row {
    grid-template-columns: 38px minmax(190px, 1fr) 72px;
  }

  .quote-document-row > span:not(.quote-document-icon) {
    grid-column: 2;
    text-align: left;
  }

  .quote-document-row > label {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .quote-forecast-fields,
  .one-off-grid,
  .quote-cost-summary dl {
    grid-template-columns: 1fr;
  }

  .quote-part-search,
  .quote-inline-control,
  .quote-supplier-controls,
  .quote-labour-picker,
  .quote-labour-heading {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .quote-part-search input,
  .quote-inline-control select,
  .quote-supplier-controls select,
  .quote-labour-picker select {
    min-width: 0;
    flex: 1 1 180px;
  }

  .quote-time-segment {
    grid-template-columns: 28px 1fr;
  }

  .quote-time-segment .field {
    grid-column: 2;
  }

  .quote-time-segment .segment-number {
    grid-row: 1;
  }

  .workspace-modal-backdrop {
    padding: 6px;
  }

  .quote-time-modal {
    width: 100%;
    max-height: 96vh;
  }

  .quote-week-controls {
    grid-template-columns: 32px minmax(160px, 1fr) 32px;
  }

  .quote-week-controls > strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Final mobile shell rules must follow the desktop Simpro overrides above. */
@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 80;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav-list {
    display: flex;
    gap: 0;
    padding: 0;
    overflow-x: auto;
  }

  .nav-group {
    flex: 0 0 68px;
  }

  .nav-item {
    width: 68px;
    min-height: 40px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 5px;
  }

  .nav-flyout {
    display: none;
  }

  .workspace {
    min-width: 0;
  }

  .topbar {
    position: static;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 0;
  }

  .company-tab,
  .open-work-tab {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 0 10px;
    border-right: 0;
    border-bottom: 1px solid #d8dde5;
  }

  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 30px;
    gap: 2px;
    margin: 0;
    padding: 5px 8px;
  }

  .search-box {
    width: 100%;
    min-width: 0;
  }

  .user-chip {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
  }

  .user-chip span {
    max-width: calc(100vw - 110px);
  }

  .content {
    margin: 0;
    padding: 12px 10px 28px;
  }

  .alert-strip {
    margin: 8px 10px 0;
  }

  .page-title-row,
  .quote-editor-topbar,
  .quote-register-heading,
  .panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid > *,
  .dashboard-live-panel,
  .dashboard-projects-panel {
    grid-column: 1 / -1;
  }

  .quote-total-summary {
    overflow-x: auto;
  }

  .quote-total-summary span {
    flex: 0 0 100px;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Materials and purchase orders */
.materials-page {
  max-width: none;
}

.materials-tabs,
.material-order-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.materials-tabs button,
.material-order-tabs button {
  white-space: nowrap;
}

.materials-section-heading,
.materials-register-heading,
.purchase-order-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 0 12px;
}

.materials-section-heading h2,
.materials-register-heading h2,
.purchase-order-heading h2,
.purchase-order-details h3,
.purchase-order-notes h3,
.purchase-order-workspace-grid h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.materials-section-heading h2 span,
.materials-register-heading h2 span {
  color: #687384;
  font-weight: 500;
}

.materials-section-heading p,
.materials-register-heading p,
.purchase-order-notes p,
.purchase-order-heading small {
  margin: 4px 0 0;
  color: #657180;
  font-size: 11px;
}

.materials-empty-panel {
  min-height: 240px;
  display: grid;
  place-content: center;
  gap: 6px;
  border-top: 1px solid #cad3dc;
  color: #677486;
  text-align: center;
}

.materials-empty-panel strong {
  color: #344153;
}

.materials-notice {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid #7bc78d;
  background: #ebf8ee;
  color: #17642a;
  font-size: 11px;
  font-weight: 700;
}

.materials-order-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(880px, 100%);
  margin: 0 0 12px;
}

.materials-order-search input {
  flex: 1 1 420px;
  min-width: 180px;
  min-height: 32px;
  border: 1px solid #9db4c8;
  border-radius: 0;
  background: #e8f5ff;
  padding: 6px 9px;
}

.materials-order-search > span {
  color: #687384;
  font-size: 10px;
}

.materials-table-wrap {
  border-top: 1px solid #8f9ca7;
  overflow: visible;
}

.materials-register-table {
  width: 100%;
  min-width: 1320px;
}

.materials-register-table td {
  vertical-align: middle;
}

.material-order-link {
  border: 0;
  background: transparent;
  color: #0870c7;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.material-order-link:hover,
.material-order-link:focus-visible {
  text-decoration: underline;
}

.material-order-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.material-order-status i {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
  background: #31d9d4;
}

.material-order-status.status-quotes i { background: #a8d8ff; }
.material-order-status.status-received i { background: #63c174; }
.material-order-status.status-complete i { background: #7b61c9; }

.material-order-options {
  position: relative;
}

.material-order-row-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 8px;
  z-index: 35;
  width: 210px;
  display: grid;
  padding: 7px;
  border: 1px solid #bac5cf;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(31, 45, 61, .18);
}

.material-order-row-menu button,
.material-order-row-menu strong {
  min-height: 29px;
  display: flex;
  align-items: center;
  border: 0;
  background: #ffffff;
  color: #253244;
  padding: 5px 8px;
  font-size: 11px;
  text-align: left;
}

.material-order-row-menu strong {
  min-height: 24px;
  border-top: 1px solid #d8dee5;
  color: #6c7785;
  font-size: 9px;
  text-transform: uppercase;
}

.material-order-row-menu button:hover,
.material-order-row-menu button:focus-visible {
  background: #e8f4fd;
}

.material-order-row-menu button.danger {
  border-top: 1px solid #edc7c7;
  color: #b42318;
}

.purchase-order-heading > div:first-child > span {
  color: #0875d1;
  font-size: 11px;
  font-weight: 700;
}

.purchase-order-heading > div:last-child {
  display: flex;
  gap: 8px;
}

.purchase-order-form {
  padding: 14px 0 36px;
}

.purchase-order-details {
  padding-bottom: 18px;
  border-bottom: 1px solid #d5dce3;
}

.purchase-order-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px 20px;
  margin-top: 14px;
}

.purchase-order-grid .field input,
.purchase-order-grid .field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #9eacb9;
  border-radius: 0;
  background: #ffffff;
  padding: 6px 9px;
}

.purchase-order-grid .field input[readonly] {
  background: #eef2f5;
  color: #273445;
  font-weight: 700;
}

.purchase-order-grid .field small {
  color: #728093;
  font-size: 9px;
  font-weight: 400;
}

.purchase-order-assignment-preview {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid #a8c7df;
  background: #eaf5fd;
}

.purchase-order-assignment-preview strong {
  color: #135f97;
  font-size: 11px;
}

.purchase-order-assignment-preview span {
  color: #526777;
  font-size: 10px;
}

.purchase-order-notes {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0 0;
}

.purchase-order-notes .quote-rich-field textarea {
  min-height: 210px;
}

.purchase-order-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 10px 12px;
  border: 1px solid #e0c261;
  background: #fff7cf;
  color: #6f5710;
  font-size: 11px;
}

.purchase-order-record-strip {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 8px 12px;
  border-bottom: 1px solid #cbd4dc;
  color: #596675;
  font-size: 10px;
}

.purchase-order-record-strip strong {
  margin-left: 4px;
  color: #172334;
}

.purchase-order-workspace-grid {
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(420px, 1.1fr);
  gap: 24px;
  padding: 18px 0;
}

.purchase-order-workspace-grid > section {
  border: 1px solid #d0d8e0;
}

.purchase-order-workspace-grid h3 {
  padding: 10px 12px;
  border-bottom: 1px solid #d0d8e0;
  background: #eceeef;
}

.purchase-order-workspace-grid dl {
  margin: 0;
}

.purchase-order-workspace-grid dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #e1e5e9;
}

.purchase-order-workspace-grid dl > div:last-child {
  border-bottom: 0;
}

.purchase-order-workspace-grid dt {
  color: #667281;
  font-size: 10px;
  font-weight: 700;
}

.purchase-order-workspace-grid dd {
  margin: 0;
  color: #202c3b;
  font-size: 11px;
}

.purchase-order-supplier-notes {
  min-height: 220px;
  padding: 12px;
  color: #263241;
  font-size: 11px;
  line-height: 1.5;
}

.purchase-order-supplier-notes > span {
  color: #75808d;
}

.purchase-order-supplier-notes-form {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.purchase-order-supplier-notes-form textarea {
  min-height: 170px;
  resize: vertical;
}

.purchase-order-supplier-notes-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.purchase-order-tabs {
  overflow-x: auto;
}

.purchase-order-tabs button {
  min-width: 104px;
  white-space: nowrap;
}

.purchase-order-forms,
.purchase-order-empty-workspace,
.purchase-order-log {
  padding: 18px 0 34px;
}

.purchase-order-section-heading,
.purchase-order-empty-workspace > div:first-child,
.purchase-order-log > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.purchase-order-section-heading h3,
.purchase-order-empty-workspace h3,
.purchase-order-log h3,
.purchase-order-email h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.purchase-order-section-heading p,
.purchase-order-empty-workspace p,
.purchase-order-log p,
.purchase-order-email p {
  margin: 4px 0 0;
  color: #657180;
  font-size: 10px;
}

.purchase-order-pdf-actions {
  display: flex;
  gap: 8px;
}

.purchase-order-form-controls {
  width: min(710px, 100%);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
  gap: 18px;
  margin-bottom: 14px;
}

.purchase-order-form-controls input,
.purchase-order-form-controls select,
.purchase-order-email input,
.purchase-order-email textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid #aeb9c4;
  border-radius: 0;
  background: #ffffff;
  padding: 6px 9px;
}

.purchase-order-form-controls input[readonly] {
  background: #eef2f5;
  color: #253244;
  font-weight: 700;
}

.purchase-order-document-row {
  width: min(980px, 100%);
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(190px, 1fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #cbd4dc;
  background: #ffffff;
  color: #4d5968;
  font-size: 10px;
}

.purchase-order-document-row > button,
.purchase-order-document-row > div button {
  border: 0;
  background: transparent;
  color: #0870c7;
  padding: 4px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.purchase-order-document-row > div {
  display: flex;
  gap: 7px;
}

.purchase-order-paperclip {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #e45c5c;
  color: #c32020;
  font-size: 9px;
  font-weight: 800;
}

.purchase-order-email {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  gap: 12px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #cbd4dc;
}

.purchase-order-email > h3,
.purchase-order-email > p,
.purchase-order-email > .field:first-of-type,
.purchase-order-email > .field:last-child {
  grid-column: 1 / -1;
}

.purchase-order-email textarea {
  min-height: 170px;
  resize: vertical;
}

.purchase-order-empty-state {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 5px;
  border-top: 1px solid #cbd4dc;
  color: #728093;
  text-align: center;
  font-size: 11px;
}

.purchase-order-empty-state strong {
  color: #344153;
}

.purchase-order-log-list {
  width: min(880px, 100%);
  display: grid;
  gap: 10px;
}

.purchase-order-log-list article {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d2d9e0;
  background: #f7f9fb;
}

.purchase-order-log-list article > i {
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border: 3px solid #2694dc;
  border-radius: 50%;
  background: #ffffff;
}

.purchase-order-log-list article > div {
  display: grid;
  gap: 3px;
  color: #536071;
  font-size: 10px;
}

.purchase-order-log-list article strong {
  color: #1669a7;
}

.purchase-order-log-list article small,
.purchase-order-log-list article time {
  color: #75808d;
  font-size: 9px;
}

@media (max-width: 1100px) {
  .purchase-order-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .purchase-order-workspace-grid {
    grid-template-columns: 1fr;
  }

  .purchase-order-email {
    grid-template-columns: 1fr;
  }

  .purchase-order-email > * {
    grid-column: 1 !important;
  }
}

@media (max-width: 760px) {
  .materials-section-heading,
  .materials-register-heading,
  .purchase-order-heading,
  .purchase-order-warning {
    align-items: stretch;
    flex-direction: column;
  }

  .materials-order-search {
    align-items: stretch;
    flex-direction: column;
  }

  .materials-order-search input {
    flex-basis: auto;
  }

  .materials-table-wrap {
    overflow-x: auto;
  }

  .purchase-order-grid,
  .purchase-order-notes {
    grid-template-columns: 1fr;
  }

  .purchase-order-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-order-section-heading,
  .purchase-order-empty-workspace > div:first-child,
  .purchase-order-log > div:first-child {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-order-pdf-actions {
    flex-direction: column;
  }

  .purchase-order-form-controls {
    grid-template-columns: 1fr;
  }

  .purchase-order-document-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .purchase-order-document-row > span:nth-child(3),
  .purchase-order-document-row > div {
    grid-column: 2;
  }
}