/* LeadUs look: the approved "Mix" mockup (v2 frame, v1 personality). */
:root {
  --lu-bar: #222;
  --lu-bar-border: #080808;
  --lu-navlink: #b5b5b5;
  --lu-navlink-hover: #036589;
  --lu-orange: #e4531b;
  --lu-page: #eff2f7;
  --lu-panel-border: #ddd;
  --lu-blue: #337ab7;
}

html {
  font-size: 14px;
}

body {
  margin: 0;
  background: var(--lu-page);
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.43;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lu-nav {
  background: var(--lu-bar);
  border-bottom: 1px solid var(--lu-bar-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.lu-nav-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.lu-brand {
  text-decoration: none;
  padding: 10px 18px 10px 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.lu-brand-lead {
  color: #fff;
}

.lu-brand-us {
  background: var(--lu-orange);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px 4px 6px;
}

.lu-navlink {
  color: var(--lu-navlink);
  text-decoration: none;
  padding: 15px 12px;
  display: block;
}

a.lu-navlink:hover {
  background: var(--lu-navlink-hover);
  color: #fff;
}

.lu-navlink-current {
  color: #fff;
  background: var(--lu-bar-border);
}

.lu-navlink-off {
  opacity: 0.55;
  cursor: default;
}

.lu-nav-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lu-nav-right form {
  margin: 0;
}

.lu-user {
  color: var(--lu-navlink);
  padding: 15px 10px;
}

.lu-navlink-button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.lu-navlink-button:hover {
  background: var(--lu-navlink-hover);
  color: #fff;
}

.lu-narrow {
  max-width: 480px;
  margin: 20px auto;
}

.lu-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lu-label {
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.lu-error {
  color: #a94442;
  font-size: 13px;
}

.lu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  cursor: pointer;
}

.lu-check input {
  width: 16px;
  height: 16px;
}

.lu-gap {
  margin-top: 12px;
}

.lu-code {
  max-width: 200px;
  font-size: 22px;
  letter-spacing: 4px;
}

.lu-status {
  background: #dff0d8;
  border: 1px solid #a3cf98;
  color: #2b542c;
  border-radius: 4px;
  padding: 7px 10px;
}

.lu-status-error {
  background: #f2dede;
  border-color: #dca7a7;
  color: #a94442;
}

.lu-link-button {
  padding: 0;
  vertical-align: baseline;
  font-size: 13px;
}

.lu-submit {
  margin-top: 14px;
  align-self: flex-start;
}

.lu-main {
  flex: 1;
  width: 100%;
  /* The office pages use the full width of the browser with a small side margin (Doug, 25 Oct 2026). Plain forms and Settings
     stop at a sensible width instead (.lu-page-narrow, .lu-settings). The glazier's phone pages set their own width (phone.css). */
  max-width: none;
  margin: 0 auto;
  padding: 15px 16px;
  box-sizing: border-box;
}

.lu-panel {
  background: #fff;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
  padding: 15px;
}

.lu-panel-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 700;
  color: #222;
}

.lu-checks {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 15px;
}

.lu-checks li {
  padding: 3px 0;
}

.lu-ok {
  color: #2b8a3e;
  font-weight: 700;
  margin-right: 6px;
}

.lu-fail {
  color: #c9302c;
  font-weight: 700;
  margin-right: 6px;
}

.lu-hint {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.lu-footer {
  text-align: center;
  color: #555;
  font-size: 13px;
  padding: 6px 0 12px 0;
}

a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--lu-blue);
  outline-offset: 2px;
}

/* Buttons in the mockup colours (Bootstrap 5 reads these variables). */
.btn-primary {
  --bs-btn-bg: var(--lu-blue);
  --bs-btn-border-color: #2e6da4;
  --bs-btn-hover-bg: #286090;
  --bs-btn-hover-border-color: #204d74;
  --bs-btn-active-bg: #204d74;
  --bs-btn-active-border-color: #122b40;
}

.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #d4d4d4;
  --bs-btn-active-border-color: #8c8c8c;
}

.btn-danger {
  --bs-btn-bg: #c9302c;
  --bs-btn-border-color: #ac2925;
  --bs-btn-hover-bg: #ac2925;
  --bs-btn-hover-border-color: #761c19;
  --bs-btn-active-bg: #761c19;
  --bs-btn-active-border-color: #4c1210;
}

.lu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.lu-inline {
  display: inline;
  margin: 0;
}

.lu-nowrap {
  white-space: nowrap;
}

.lu-strong {
  font-weight: 700;
}

/* Panels with a header bar (Settings and later screens). */
.lu-box {
  background: #fff;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
}

.lu-box-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--lu-panel-border);
}

.lu-box-h h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.lu-box-count {
  font-weight: 400;
  font-size: 13px;
  color: #555;
}

.lu-box-b {
  padding: 15px;
}

.lu-scroll {
  overflow-x: auto;
}

.lu-form-box {
  max-width: 640px;
}

/* Settings: section menu on the left, the chosen section on the right (stacks on a phone). Left aligned, not stretched across a big screen. */
.lu-settings {
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.lu-side {
  flex: 1 1 220px;
  max-width: 260px;
  min-width: 200px;
  padding: 8px 0;
}

.lu-side-title {
  margin: 4px 15px 8px 15px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.lu-side-item {
  display: block;
  padding: 9px 15px;
  min-height: 44px;
  color: #222;
  text-decoration: none;
}

a.lu-side-item:hover {
  background: #f4f6f9;
  color: #222;
}

.lu-side-current,
a.lu-side-current:hover {
  background: #aed546;
  color: #000;
}

.lu-side-off {
  color: #888;
}

.lu-side-label {
  display: block;
  font-weight: 700;
}

.lu-side-who {
  display: block;
  font-size: 12px;
  color: #555;
}

.lu-side-off .lu-side-who {
  color: #888;
}

.lu-settings-main {
  flex: 999 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (max-width: 600px) {
  .lu-side {
    max-width: none;
  }
}

/* Lists in the mockup's table style. */
.lu-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  border: 1px solid var(--lu-panel-border);
}

.lu-grid th {
  text-align: left;
  padding: 8px;
  border-bottom: 2px solid var(--lu-panel-border);
  white-space: nowrap;
  font-weight: 700;
}

.lu-grid td {
  padding: 7px 8px;
  border-top: 1px solid var(--lu-panel-border);
  vertical-align: middle;
}

.lu-row-off td {
  color: #777;
  background: #f7f7f7;
}

.lu-you {
  font-weight: 400;
  color: #555;
  margin-left: 4px;
}

.lu-tag-off {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 12px;
  color: #555;
}

.lu-role-help {
  margin: 6px 0 0 0;
  padding-left: 18px;
}

.lu-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.lu-setting-row:last-child {
  border-bottom: none;
}

form.lu-setting-row {
  margin: 0;
}

.lu-setting-name {
  display: block;
  font-weight: 700;
}

.lu-setting-label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.lu-setting-value {
  font-weight: 700;
  white-space: nowrap;
}

.lu-setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lu-setting-control .form-select {
  width: 150px;
}

/* On/Off switches: Bootstrap's switch in the mockup green, with "On" or "Off" beside it. */
.lu-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  min-height: 0;
}

.lu-switch .form-check-input {
  width: 46px;
  height: 26px;
  margin: 0;
  float: none;
  cursor: pointer;
}

.lu-switch .form-check-input:checked {
  background-color: #2b8a3e;
  border-color: #2b8a3e;
}

.lu-switch-state {
  font-size: 13px;
  font-weight: 700;
  min-width: 26px;
}

.lu-switch-state::after {
  content: "Off";
}

.lu-switch .form-check-input:checked ~ .lu-switch-state::after {
  content: "On";
}

/* Settings forms: fields in two columns (one on a phone), with the Save bar underneath. */
.lu-settings-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lu-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lu-fields-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lu-fields .lu-label {
  display: block;
  margin-top: 0;
  margin-bottom: 4px;
}

.lu-span-2 {
  grid-column: 1 / -1;
}

.lu-fields .lu-hint {
  display: block;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .lu-fields,
  .lu-fields-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lu-savebar {
  padding: 12px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lu-grid-narrow {
  max-width: 640px;
}

/* Company logo. */
.lu-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.lu-logo {
  width: 160px;
  height: 80px;
  object-fit: contain;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
  background: #fff;
}

.lu-logo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  font-size: 12px;
  color: #555;
}

.lu-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  max-width: 420px;
}

.lu-logo-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.lu-logo-upload .lu-label {
  margin-top: 0;
}

/* The "Are you sure?" popup. */
.lu-dialog {
  border: none;
  border-radius: 6px;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.lu-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.lu-dialog-inner {
  padding: 16px;
}

.lu-dialog-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.lu-dialog-text {
  margin: 0;
}

.lu-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Settings › Jobs: the statuses table, the chip lists and the Add rows. */
.lu-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-muted {
  color: #555;
}

.lu-empty {
  margin: 0;
  color: #555;
}

.lu-jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

@media (max-width: 800px) {
  .lu-jobs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lu-tab-select {
  max-width: 150px;
}

.lu-tick input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.lu-buttons-flush {
  margin-top: 0;
  align-items: center;
}

.lu-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  padding: 10px 12px;
  background: #f7f7f7;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
}

.lu-add-row .lu-label {
  display: block;
  margin: 0 0 4px 0;
}

.lu-add-row .lu-check {
  margin: 0 0 6px 0;
}

.lu-add-buttons {
  display: flex;
  gap: 8px;
}

.lu-add-error {
  flex-basis: 100%;
  margin: 0;
}

.lu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lu-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 16px;
  padding: 0 4px 0 12px;
  font-size: 13px;
  min-height: 30px;
}

.lu-chip-off {
  background: #fafafa;
  color: #777;
}

.lu-chip-edit {
  padding: 4px;
  gap: 6px;
  background: #fff;
}

.lu-chip-btn {
  border: 0;
  background: none;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  border-radius: 12px;
}

.lu-chip-btn:hover,
.lu-chip-btn:focus-visible {
  background: #e6e6e6;
  color: #000;
}

/* Customers (and the screens after it): a page of panels under the top menu. */
.lu-page {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Plain forms (a customer, a supplier, a product, the import): a sensible width, left aligned, not stretched across a big screen. */
.lu-page-narrow {
  max-width: 1100px;
}

.lu-page-title {
  margin: 0;
  font-size: 22px;
  color: #222;
}

.lu-searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lu-search {
  width: 320px;
  max-width: 100%;
}

.lu-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.lu-pagehead {
  padding: 12px 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lu-pagehead-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.lu-buttons-flat {
  margin-top: 0;
}

.lu-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}

@media (max-width: 900px) {
  .lu-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lu-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.lu-kv dt {
  font-weight: 700;
  color: #444;
}

.lu-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The yellow "possible duplicate" note. */
.lu-warning {
  margin-top: 14px;
  background: #fcf8e3;
  border: 1px solid #e6d28a;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: #5a4a00;
}

.lu-tabs {
  display: flex;
  gap: 16px;
  margin: 0 0 10px 0;
}

/* Settings: the "days" box, and the glazier-only switch on Edit user. */
.lu-days-box {
  width: 90px;
}

.lu-nodate-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Home: the office job list (the approved MainMix mockup). */
.lu-home {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.lu-home-side {
  flex: 1 1 250px;
  max-width: 300px;
  min-width: 230px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-quick-btn {
  background: #ff9c1d;
  color: #111;
  border: 1px solid #d9800f;
  font-weight: 700;
  font-size: 15px;
  min-height: 42px;
}

.lu-quick-btn:disabled {
  background: #ff9c1d;
  color: #111;
  opacity: 0.55;
}

.lu-side-heading {
  margin: 4px 0 0 0;
  font-size: 15px;
  font-weight: 700;
}

.lu-home-main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-home-box {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lu-home-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.lu-home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 3px solid #aed546;
}

.lu-home-tab {
  background: #111;
  color: #fff;
  border-radius: 4px 4px 0 0;
  padding: 9px 18px;
  font-weight: 700;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.lu-home-tab:hover {
  color: #fff;
  background: #333;
}

.lu-home-tab-on,
.lu-home-tab-on:hover {
  background: #aed546;
  color: #000;
  padding-top: 10px;
}

.lu-home-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.lu-home-heading-2 {
  margin-top: 8px;
}

.lu-block {
  display: block;
}

.lu-sub {
  font-size: 12px;
  color: #444;
}

.lu-tick {
  font-weight: 800;
  color: #111;
}

.lu-jobs td {
  vertical-align: middle;
}

.lu-group-row th {
  background: #f1f1f1;
  border-top: 2px solid #bbb;
  font-size: 13px;
}

.lu-undated {
  background: #fff;
}

.lu-key-chip {
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 3px 8px;
  background: #fff;
}

/* The weekday colours on the Field and Factory tabs, copied from the old app. */
.lu-day-mon { background: #b9f3f4; }
.lu-day-tue { background: #eae5a3; }
.lu-day-wed { background: #b7edc9; }
.lu-day-thu { background: #f1dcf9; }
.lu-day-fri { background: #dbf5ac; }
.lu-day-sat { background: #f6e4e0; }
.lu-day-sun { background: #f7ead9; }

/* A job nobody in the office has opened yet. */
.lu-row-new { background: #ff9c1d; }

.lu-pill {
  display: inline-block;
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 700;
  font-size: 12px;
}

.lu-pill-orange {
  background: #f26a2e;
  color: #111;
}

.lu-pill-red {
  background: #c9302c;
  color: #fff;
}

.lu-doby {
  display: block;
  width: max-content;
  margin-top: 3px;
  font-size: 12px;
}

.lu-doby-later {
  color: #444;
}

/* Accepted but not finished (and urgent jobs) flash. With "reduce motion" switched on, a red outline instead. */
@keyframes lu-flash {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}

.lu-flashing {
  animation: lu-flash 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lu-flashing {
    animation: none;
    outline: 2px solid #c0392b;
    outline-offset: -2px;
  }
}

.lu-icon-btn {
  min-width: 32px;
  text-align: center;
}

/* A button for something built in a later step: shown, but greyed and not clickable. */
.lu-soon {
  opacity: 0.45;
  cursor: not-allowed;
}

.lu-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.lu-key-chip.lu-pill-red,
.lu-key-chip.lu-pill-orange {
  border-radius: 3px;
  font-size: 12px;
}

/* The job screen (the approved JobMix mockup). */
.lu-badge {
  background: var(--lu-blue);
  color: #fff;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
}

.lu-light {
  font-weight: 400;
  color: #555;
}

.lu-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.lu-radios-sep {
  align-self: stretch;
  border-left: 1px solid #ddd;
}

.lu-job-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lu-job-grid .lu-label {
  display: block;
  margin-bottom: 4px;
}

.lu-span-3 {
  grid-column: span 3;
}

.lu-span-4 {
  grid-column: span 4;
}

.lu-hint-end {
  align-self: end;
  padding-bottom: 6px;
}

@media (max-width: 900px) {
  .lu-job-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lu-span-3,
  .lu-span-4 {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .lu-job-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lu-span-2,
  .lu-span-3,
  .lu-span-4 {
    grid-column: span 1;
  }
}

.lu-techs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 34px;
}

/* The Technicians drop-down (job-technicians.js). Without scripts .lu-techs is just the plain tick boxes above. */
.lu-multi {
  position: relative;
}

.lu-multi-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lu-multi-button:focus-visible {
  outline: 2px solid #66afe9;
  outline-offset: 0;
}

.lu-multi-button.lu-multi-chosen {
  color: #222;
}

.lu-multi-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lu-multi-panel {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  padding: 8px 10px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.lu-multi-panel[hidden] {
  display: none;
}

.lu-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.lu-subhead {
  margin: 18px 0 10px 0;
  padding-top: 14px;
  border-top: 1px solid #eee;
  font-size: 15px;
  font-weight: 700;
}

.lu-maps-cell {
  align-self: end;
}

.lu-job-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.lu-job-col {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lu-customer-name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}

.lu-customer-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  font-size: 13px;
}

.lu-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lu-step {
  border-radius: 4px;
  padding: 8px 10px;
}

.lu-step-done {
  background: #dff0d8;
  border: 1px solid #a3cf98;
  color: #2b542c;
}

.lu-step-next {
  background: #fff;
  border: 1px dashed #bbb;
  color: #555;
}

.lu-step-when {
  font-size: 12px;
}

.lu-testaid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed #bbb;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fafafa;
}

.lu-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.lu-contact-who {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.lu-contact-name {
  font-weight: 700;
  font-size: 15px;
}

.lu-contact-numbers {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

.lu-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lu-subform {
  border: 1px solid #2e6da4;
  background: #f5f9fd;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-subform-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.lu-subform .lu-label {
  display: block;
  margin-bottom: 4px;
}

.lu-line-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.lu-line-grid[hidden] {
  display: none;
}

.lu-line-product {
  grid-column: span 3;
  position: relative;
}

.lu-line-grid > div:nth-child(4) {
  grid-column: span 1;
}

.lu-line-notes {
  grid-column: span 4;
}

.lu-line-area {
  grid-column: span 2;
  padding-bottom: 8px;
}

.lu-line-received {
  padding-bottom: 6px;
}

.lu-line-total {
  padding-bottom: 6px;
}

.lu-line-total strong {
  font-size: 16px;
}

@media (max-width: 700px) {
  .lu-line-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lu-line-product,
  .lu-line-notes,
  .lu-line-area {
    grid-column: span 2;
  }
}

.lu-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lu-suggest[hidden] {
  display: none;
}

.lu-suggest-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  border-bottom: 1px solid #eee;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.lu-suggest-item:hover,
.lu-suggest-item:focus-visible {
  background: #eaf2fa;
}

.lu-suggest-foot {
  padding: 6px 10px;
  font-size: 13px;
  color: #555;
}

.lu-num {
  text-align: right;
  white-space: nowrap;
}

.lu-muted-text {
  color: #555;
}

.lu-totals-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.lu-totals-note {
  max-width: 520px;
}

.lu-totals {
  font-size: 14px;
  border-collapse: collapse;
  min-width: 260px;
}

.lu-totals th {
  padding: 3px 12px;
  color: #555;
  font-weight: 400;
}

.lu-totals td {
  padding: 3px 0;
  text-align: right;
  color: #555;
}

.lu-totals .lu-totals-main th,
.lu-totals .lu-totals-main td {
  padding: 6px 12px 6px 12px;
  color: #333;
  font-weight: 700;
  border-bottom: 2px solid #333;
}

.lu-later {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
}

.lu-later li {
  border: 1px dashed #bbb;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: default;
}

/* A job with a note for the glazier (cyan wins over the other row colours, as in the mockup). */
.lu-row-glazier { background: #66ddfe; }

/* A filed job: grey badge and a notice at the top of the job screen. */
.lu-badge-filed {
  background: #666;
}

.lu-status-filed {
  background: #f4f4f4;
  border-color: #bbb;
  color: #333;
}

/* Notes on the job screen: the add-note box and the "All notes" list (the approved JobMix mockup). */
.lu-noteform {
  background: #f6f8fb;
  border-color: #ccd5e4;
}

.lu-note-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lu-note-grid textarea {
  resize: vertical;
}

.lu-emailto {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.lu-emailto legend {
  float: left;
  width: auto;
  margin: 0 6px 0 0;
}

.lu-other-email {
  width: 230px;
  height: 30px;
  font-size: 13px;
}

.lu-note-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.lu-flex-1 {
  flex: 1;
}

.lu-notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.lu-note-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #333;
}

.lu-note-key span {
  border-radius: 3px;
  padding: 2px 8px;
}

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

.lu-note,
.lu-note-key span {
  border: 1px solid #ddd;
  background: #fff;
}

.lu-note {
  border-radius: 4px;
  padding: 8px 10px;
}

.lu-note.lu-note-glazier,
.lu-note-key .lu-note-glazier {
  border-color: #2ab3d8;
  background: #e3f8fe;
}

.lu-note.lu-note-sent,
.lu-note-key .lu-note-sent {
  border-color: #e0b57a;
  background: #fff1dc;
}

.lu-note-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: #444;
}

.lu-note-top strong {
  color: #222;
}

.lu-note-subject {
  margin-top: 3px;
  font-weight: 700;
}

.lu-note-text {
  margin-top: 3px;
  white-space: pre-line;
}

.lu-note-to {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #7a4100;
}

.lu-note-vis {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #0b5d75;
}

/* History: collapsed until "Show history" is pressed. */
.lu-history > summary {
  list-style: none;
  cursor: pointer;
}

.lu-history > summary::-webkit-details-marker {
  display: none;
}

.lu-history > summary:focus-visible .lu-history-toggle {
  outline: 2px solid var(--lu-blue);
  outline-offset: 2px;
}

.lu-history .lu-when-open,
.lu-history[open] .lu-when-closed {
  display: none;
}

.lu-history[open] .lu-when-open {
  display: inline;
}

.lu-history[open] > summary {
  border-bottom: 1px solid #ddd;
}

/* Quick Enquiry: the orange button, Recent enquiries and the form (the approved MainMix mockup). */
.lu-enq-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.lu-enq-head .lu-side-heading {
  margin: 0;
}

.lu-enq-key {
  font-size: 11px;
  color: #333;
  background: #dff4f4;
  border: 1px solid #66c2c2;
  border-radius: 3px;
  padding: 1px 6px;
}

.lu-enq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lu-enq {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e5e5e5;
}

.lu-enq-noprice {
  background: #dff4f4;
  border-color: #66c2c2;
}

.lu-enq-edit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lu-enq-edit:hover .lu-enq-name,
.lu-enq-edit:focus-visible .lu-enq-name {
  text-decoration: underline;
}

.lu-enq-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #222;
}

.lu-enq-small {
  font-size: 12px;
  color: #444;
}

.lu-enq-desc {
  font-size: 12px;
  color: #333;
  white-space: pre-line;
}

.lu-enq-who {
  font-size: 11px;
  color: #555;
}

.lu-enq-actions {
  display: flex;
  gap: 4px;
}

.lu-enq-actions .btn {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  padding: 3px 6px;
}

.lu-enq-actions form {
  display: flex;
  flex: 0 0 auto;
}

.lu-enq-actions .lu-enq-hide {
  flex: 0 0 30px;
  width: 30px;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
}

.lu-enq-hidden {
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.lu-enq-note {
  margin: 0;
  font-size: 12.5px;
}

.lu-qe-dialog {
  max-width: 560px;
}

.lu-qe-form {
  display: flex;
  flex-direction: column;
}

.lu-qe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

.lu-qe-head h2 {
  margin: 0;
  font-size: 18px;
}

.lu-qe-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.lu-qe-body {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lu-qe-body .lu-span-2 {
  grid-column: span 2;
}

.lu-qe-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #ddd;
}

/* The page that turns an enquiry into a quote or a job. */
.lu-convert {
  max-width: 720px;
}

.lu-convert-list {
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 700px) {
  .lu-note-grid {
    grid-template-columns: 1fr;
  }

  .lu-note-grid .lu-span-3 {
    grid-column: auto;
  }

  .lu-qe-body {
    grid-template-columns: 1fr;
  }

  .lu-qe-body .lu-span-2 {
    grid-column: auto;
  }
}

/* Billing (who pays) on the job screen */
.lu-billing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
}

.lu-billing-grid[hidden],
.lu-box-b > [hidden] {
  display: none;
}

.lu-billing-grid .lu-label {
  display: block;
  margin-bottom: 4px;
}

.lu-b-2 {
  grid-column: span 2;
}

.lu-b-4 {
  grid-column: span 4;
}

@media (max-width: 560px) {
  .lu-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lu-b-4 {
    grid-column: span 2;
  }
}

.lu-side-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid #b9cfe6;
  border-radius: 10px;
  background: #e8f0f8;
  color: #1f4e79;
  font-size: 12px;
  font-weight: 400;
  vertical-align: middle;
}

.lu-contact-number {
  font-size: 15px;
}

.lu-maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

/* Popups over a page (Edit customer, Billing). Same look as the "Are you sure?" popup, just wider. */
.lu-dialog-wide {
  max-width: 720px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.lu-popup-body {
  display: block;
}

.lu-popup-section .lu-fields + .lu-subhead {
  margin-top: 16px;
}

.lu-popup-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.lu-popup-buttons[hidden],
.lu-fields[hidden] {
  display: none;
}

.lu-popup-problem {
  margin: 0 0 10px 0;
}

.lu-payer-summary {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

/* Address suggestions under a street box. */
.lu-suggest-host {
  position: relative;
}

.lu-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lu-suggest li {
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.lu-suggest li:last-child {
  border-bottom: none;
}

.lu-suggest li:hover,
.lu-suggest li[aria-selected="true"] {
  background: #e8f0f8;
}

/* Settings › Address suggestions */
.lu-key-box {
  max-width: 460px;
  font-family: Consolas, "Courier New", monospace;
}

.lu-test-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#address-test-result[hidden] {
  display: none;
}

/* Archive (the approved ArchiveMix mockup): the heading line and the footer with the page buttons. */
.lu-archive-head,
.lu-archive-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.lu-archive-sub,
.lu-archive-foot {
  font-size: 13px;
  color: #555;
}

.lu-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* The search box at the top of the left panel (Home and Archive). */
.lu-home-search {
  display: flex;
}

.lu-home-search .form-control {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: 4px 0 0 4px;
}

.lu-home-search-btn {
  background: #337ab7;
  border: 1px solid #2e6da4;
  border-radius: 0 4px 4px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.lu-home-search-btn:hover {
  background: #286090;
}

/* Search results (the approved SearchMix mockup). */
.lu-search-top {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-search-top .lu-hint {
  margin: 0;
}

.lu-search-input {
  width: 360px;
  max-width: 100%;
}

.lu-search-days {
  width: auto;
}

.lu-label-inline {
  margin: 0;
}

.lu-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.lu-search-summary .lu-chip {
  padding: 2px 10px;
  background: #eef3f9;
  border-color: #c9d6e6;
  min-height: 0;
}

.lu-nomatches {
  margin: 0;
}

.lu-found {
  color: #1f4e79;
}

/* Filed jobs, hidden customers, inactive suppliers: a little greyer than the rest. */
.lu-row-filed {
  background: #f7f7f7;
}

.lu-pill-grey {
  background: #777;
  color: #fff;
}

/* The printed job sheet (the approved JobSheetMix mockup): A4, grey headings with black text. */
.lu-sheet-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #111;
  font-size: 13px;
  line-height: 1.4;
}

.lu-sheet-bar {
  width: 794px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
  padding: 10px 12px;
}

.lu-sheet-bar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}

.lu-sheet-bar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lu-sheet-msg {
  margin: 0;
  width: 100%;
}

.lu-sheet {
  background: #fff;
  width: 794px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 34px 38px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lu-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid #111;
  padding-bottom: 8px;
}

.lu-sheet-business {
  font-size: 20px;
  font-weight: 800;
}

.lu-sheet-businessline {
  font-size: 11px;
  color: #333;
}

.lu-sheet-dates {
  text-align: right;
  font-size: 12.5px;
}

.lu-sheet-lbl {
  font-weight: 700;
}

.lu-sheet-underline {
  text-decoration: underline;
}

.lu-sheet-jobline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.lu-sheet-jobno {
  font-size: 19px;
  font-weight: 800;
}

.lu-sheet-project {
  font-size: 15px;
}

.lu-sheet-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lu-sheet-box {
  border: 1px solid #bbb;
  padding: 6px 8px;
}

.lu-sheet-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

.lu-sheet-grid th {
  background: #e3e3e3;
  color: #111;
  text-align: left;
  padding: 5px 6px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid #bbb;
}

.lu-sheet-grid td {
  padding: 5px 6px;
  border: 1px solid #bbb;
  vertical-align: top;
  height: 16px;
}

.lu-sheet-grid th.lu-sheet-nohead {
  background: #fff;
}

.lu-sheet-grid th.lu-sheet-centre {
  text-align: center;
  font-size: 13px;
}

.lu-sheet-grid .lu-sheet-qty {
  width: 34px;
}

.lu-sheet-blank td {
  height: 18px;
}

.lu-sheet-num {
  text-align: right;
  white-space: nowrap;
}

.lu-sheet-nowrap {
  white-space: nowrap;
}

.lu-sheet-small {
  font-size: 10.5px;
  color: #333;
  line-height: 1.45;
  text-align: justify;
  margin: 0;
}

.lu-sheet-bottom {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  break-inside: avoid;
}

.lu-sheet-paragraphs {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lu-sheet-pay {
  flex: 1.3;
  border: 1px solid #bbb;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.9;
}

.lu-sheet-paysub {
  font-size: 11px;
  color: #333;
  line-height: 1.4;
  margin: -4px 0 2px 0;
}

.lu-sheet-fill {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.lu-sheet-line {
  border-bottom: 1px solid #888;
  flex: 1;
  min-width: 40px;
  height: 18px;
}

.lu-sheet-sign {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 6px;
}

.lu-sheet-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #444;
  border-top: 1px solid #ccc;
  padding-top: 5px;
}

/* The printed purchase order: the same A4 sheet look as the job sheet, in the order the PDF draws it (logo and business on the left,
   "Supplier Purchase Order" and the PO number on the right, the four boxes, the line items, the totals). */
.lu-po-sheet {
  gap: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}

.lu-po-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid #111;
  padding-bottom: 8px;
}

.lu-po-sheet-logo {
  display: block;
  max-height: 68px;
  max-width: 260px;
  margin-bottom: 4px;
}

.lu-po-sheet-grey {
  font-size: 11.5px;
  color: #555;
}

.lu-po-sheet-title {
  text-align: right;
  font-size: 12.5px;
}

.lu-po-sheet-heading {
  font-size: 18px;
  font-weight: 700;
}

.lu-po-sheet-number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}

.lu-po-sheet-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #bbb;
}

.lu-po-sheet-box {
  padding: 6px 9px;
  border: 1px solid #bbb;
  margin: -1px 0 0 -1px;
}

.lu-po-sheet-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: #555;
  margin-bottom: 2px;
}

.lu-po-sheet-lines {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0 0;
}

.lu-po-sheet-grid,
.lu-po-sheet-totals {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.lu-po-sheet-grid th {
  background: #eee;
  border-bottom: 1.5px solid #111;
  text-align: left;
  padding: 5px 5px;
  font-size: 11px;
}

.lu-po-sheet-grid td {
  border-bottom: 1px solid #bbb;
  padding: 5px 5px;
  vertical-align: top;
}

.lu-po-sheet-grid .lu-num,
.lu-po-sheet-totals td {
  text-align: right;
}

.lu-po-sheet-totals {
  width: 260px;
  margin-left: auto;
}

.lu-po-sheet-totals th {
  text-align: left;
  font-weight: 400;
  padding: 3px 5px;
}

.lu-po-sheet-totals td {
  padding: 3px 5px;
}

.lu-po-sheet-totals .lu-po-sheet-main th,
.lu-po-sheet-totals .lu-po-sheet-main td {
  font-weight: 700;
  font-size: 13.5px;
  border-top: 2px solid #111;
}

.lu-po-sheet-foot {
  font-size: 10.5px;
  color: #555;
  border-top: 1px solid #bbb;
  padding-top: 5px;
  margin-top: 8px;
}

@media print {
  .lu-po-sheet-grid tr,
  .lu-po-sheet-boxes,
  .lu-po-sheet-totals {
    break-inside: avoid;
  }

  .lu-po-sheet-grid thead {
    display: table-header-group;
  }
}

/* On paper: only the sheet. The top menu, the preview buttons and the footer stay off the page. */
@page {
  size: A4;
  margin: 12mm;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 9pt;
    color: #444;
  }
}

@media print {
  body {
    background: #fff;
  }

  body > header,
  .lu-footer,
  .no-print,
  #lu-confirm {
    display: none !important;
  }

  .lu-main {
    padding: 0;
  }

  .lu-sheet {
    box-shadow: none;
    width: auto;
    padding: 0;
  }

  .lu-sheet-grid {
    break-inside: avoid;
  }
}

/* ---- The bell and its panel (phase 4): on the office top bar and the glazier's phone bar ---- */
.lu-bell,
.lu-menu {
  position: relative;
}

.lu-bell > summary,
.lu-menu > summary {
  list-style: none;
}

.lu-bell > summary::-webkit-details-marker,
.lu-menu > summary::-webkit-details-marker {
  display: none;
}

.lu-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--lu-navlink);
  cursor: pointer;
}

.lu-bell-btn:hover,
.lu-bell[open] > .lu-bell-btn {
  color: #fff;
}

.lu-bell-btn:focus-visible,
.lu-menu-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.lu-bell-count {
  position: absolute;
  top: 3px;
  right: 1px;
  background: #f26a2e;
  color: #111;
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 6px;
  font-weight: 700;
  line-height: 1.3;
}

.lu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  color: #222;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  z-index: 30;
}

.lu-pop-head {
  padding: 8px 12px;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  background: #f4f4f4;
  border-radius: 6px 6px 0 0;
}

.lu-pop-item {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}

.lu-pop-item a {
  color: #222;
  text-decoration: none;
  display: block;
}

.lu-pop-item a:hover,
.lu-pop-item a:focus-visible {
  text-decoration: underline;
}

.lu-pop-unseen {
  background: #fff7e6;
}

.lu-pop-empty {
  color: #555;
}

.lu-pop-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lu-pop-when {
  color: #555;
  white-space: nowrap;
}

.lu-pop-menuitem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #eee;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  min-height: 44px;
  color: #222;
}

.lu-pop-menuitem:hover,
.lu-pop-menuitem:focus-visible {
  background: #f1f6fb;
}

.lu-pop-menuitem span {
  display: block;
  font-size: 12px;
  color: #555;
}

.lu-pop form {
  margin: 0;
}

.lu-finish-select {
  min-width: 230px;
}

/* ---- job photos (phase 4, round 2): the tiles are shared by the glazier's phone and the office screens */
.lu-contents {
  display: contents;
}

.lu-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: #e9edf3;
  border: 1px solid #ccd5e4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #444;
  text-align: center;
  box-sizing: border-box;
}

.lu-photo > a {
  display: block;
  flex: 1;
  min-height: 0;
}

.lu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lu-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.lu-photo-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.lu-photo-by {
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lu-photo-tag {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
}

.lu-photo-tag-after {
  background: #dff0d8;
  color: #2b542c;
  border-color: #a3cf98;
}

.lu-photo-x {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid #999;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.lu-photo-remove {
  margin: 0;
}

.lu-photo-waiting {
  border: 1px dashed #b59a2a;
}

.lu-photo-waiting .lu-photo-state {
  color: #7a5a00;
}

.lu-photo-failed {
  border-color: #c9302c;
}

.lu-photo-failed .lu-photo-state {
  color: #c9302c;
  white-space: normal;
}

.lu-photo-failed figcaption {
  position: static;
}

.lu-photo-banner {
  background: #fcf8e3;
  border: 1px solid #e6d28a;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  margin-bottom: 6px;
}

.lu-photo-banner[hidden] {
  display: none;
}

.lu-photo-none {
  grid-column: 1 / -1;
  margin: 0;
}

.lu-photos-grid:has([data-waiting]) .lu-photo-none {
  display: none;
}

.lu-photo-message {
  min-height: 1.2em;
  margin: 0;
}

.lu-photos-d {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 170px));
  gap: 12px;
}

.lu-photos-d .lu-photo {
  aspect-ratio: 17 / 12;
}

.lu-photos-d .lu-photo-x {
  width: auto;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.lu-photos-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The bar Home shows the Owner and Office on a narrow screen, offering the phone view (never forced; see view-choice.js). */
.lu-phone-offer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #e8f1fa;
  border: 1px solid #b6d0e8;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .lu-phone-offer {
    display: flex;
  }
}

/* ---- My preferences (phase 4 round 3) */
.lu-pref-tabs {
  display: flex;
  gap: 3px;
  border-bottom: 3px solid #aed546;
  margin-bottom: 12px;
}

.lu-pref-tab {
  padding: 9px 18px;
  min-height: 40px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
  background: #111;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.lu-pref-tab:hover { color: #fff; background: #333; }

.lu-pref-tab-on,
.lu-pref-tab-on:hover { background: #aed546; color: #000; }

.lu-pref-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px 0;
}

.lu-pref-pick .lu-label { margin: 0; }
.lu-pref-pick .form-select { width: auto; min-width: 220px; }

.lu-pref-cols { border: none; margin: 0; padding: 0; }

.lu-pref-collist {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-width: 460px;
}

.lu-pref-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  background: #fafafa;
}

.lu-pref-col .lu-check-inline { margin: 0; min-height: 36px; display: flex; align-items: center; gap: 8px; }
.lu-pref-move { display: flex; gap: 4px; }
.lu-pref-move .btn { min-width: 36px; min-height: 34px; }

.lu-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.lu-pref-actions form { margin: 0; }

.lu-pref-phone {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lu-pref-phone-form { display: flex; flex-direction: column; gap: 16px; }
.lu-pref-phone-form fieldset { border: none; margin: 0; padding: 0; }
.lu-pref-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lu-pref-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.lu-pref-locked { opacity: 0.5; cursor: not-allowed; }

.lu-pref-phone .lu-check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

@media (max-width: 800px) {
  .lu-pref-phone { grid-template-columns: minmax(0, 1fr); }
  .lu-pref-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lu-pv-phone {
  width: 310px;
  max-width: 100%;
  border: 8px solid #222;
  border-radius: 18px;
  overflow: hidden;
  background: #eff2f7;
}

.lu-pv-bar {
  background: #222;
  padding: 7px 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  gap: 2px;
}

.lu-pv-lead { color: #fff; }
.lu-pv-us { background: #e4531b; color: #fff; border-radius: 3px; padding: 1px 4px 3px 4px; }
.lu-pv-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lu-pv-tabs { display: flex; gap: 3px; }

.lu-pv-tab {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 3px 3px 0 0;
  background: #111;
  color: #fff;
}

.lu-pv-tab-on { background: #aed546; color: #000; }
.lu-pv-day { background: #f1f1f1; font-size: 11.5px; font-weight: 700; padding: 3px 8px; }

.lu-pv-row {
  background: #dbf5ac;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

.lu-pv-row[hidden],
.lu-pv-phone [hidden] { display: none; }

.lu-pv-time { font-weight: 700; font-size: 12.5px; align-self: flex-start; width: 52px; flex: none; }
.lu-pv-row .lu-pv-time { display: block; }
.lu-pv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lu-pv-name { font-size: 14px; }
.lu-pv-addr { font-size: 12.5px; }
.lu-pv-meta { font-size: 11.5px; color: #222; }

.lu-pv-days { margin: 2px 0 0 0; font-size: 11px; color: #555; }

/* Purchase orders (phase 5): the status badge colours from the PurchaseOrderMix, the Needed by boxes and the Deliver to address. */
.lu-badge.lu-po-draft { background: #f4f4f4; color: #444; border: 1px solid #ccc; }
.lu-badge.lu-po-ordered { background: #337ab7; color: #fff; border: 1px solid #2e6da4; }
.lu-badge.lu-po-partreceived { background: #fcf8e3; color: #5a4a00; border: 1px solid #e6d28a; }
.lu-badge.lu-po-received { background: #dff0d8; color: #2b542c; border: 1px solid #a3cf98; }
.lu-badge.lu-po-return { background: #f2dede; color: #7a1f1f; border: 1px solid #d9a3a3; }
.lu-badge.lu-po-filed { background: #eee; color: #333; border: 1px solid #bbb; }

.lu-po-needed {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 8px;
}

.lu-po-address {
  font-size: 13px;
  color: #333;
  background: #f6f8fb;
  border: 1px solid #ccd5e4;
  border-radius: 4px;
  padding: 4px 10px;
}

.lu-po-address[hidden] {
  display: none;
}

.lu-po-recv {
  white-space: nowrap;
}

.lu-po-recv .lu-hint {
  display: block;
  font-size: 11px;
}

/* Email order: the subject line (always the PO number), the attached files and the PDF preview. */
.lu-po-subject {
  font-weight: 700;
  padding: 6px 0;
}

.lu-po-attached {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.lu-po-preview {
  width: 100%;
  height: 720px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f4f4f4;
}

/* Purchase order: Notes and activity beside Photos and documents (the mockup puts them side by side), and the photo picker. */
.lu-po-two {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
}

.lu-po-notes {
  flex: 2 1 560px;
  min-width: 0;
}

.lu-po-photos {
  flex: 1 1 300px;
  min-width: 0;
}

.lu-po-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lu-po-pick-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.lu-po-pick-card img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  background: #e9edf3;
}

.lu-po-pick-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.lu-po-pick-on {
  border-color: #337ab7;
}

.lu-po-attached-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lu-po-photo {
  margin: 0;
  width: 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lu-po-photo img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccd5e4;
  background: #e9edf3;
}

.lu-po-photo figcaption {
  font-size: 11px;
}

.lu-linkbtn {
  background: none;
  border: none;
  color: #337ab7;
  text-decoration: underline;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

/* Quotes and invoices (phase 6, round 6a): the status badge colours from DocMix, the two-column screen and the live preview. */
.lu-badge.lu-doc-draft { background: #f4f4f4; color: #444; border: 1px solid #ccc; }
.lu-badge.lu-doc-sent { background: #337ab7; color: #fff; border: 1px solid #2e6da4; }
.lu-badge.lu-doc-partpaid { background: #fcf8e3; color: #5a4a00; border: 1px solid #e6d28a; }
.lu-badge.lu-doc-paid { background: #dff0d8; color: #2b542c; border: 1px solid #a3cf98; }
.lu-badge.lu-doc-accepted { background: #dff0d8; color: #2b542c; border: 1px solid #a3cf98; }
.lu-badge.lu-doc-declined { background: #f2dede; color: #7a1f1f; border: 1px solid #d9a3a3; }
.lu-badge.lu-doc-expired { background: #eee; color: #555; border: 1px solid #bbb; }

.lu-doc-savehint {
  flex-basis: 100%;
  margin: 0;
}

.lu-doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  gap: 15px;
  align-items: start;
}

.lu-doc-left,
.lu-doc-left .lu-job-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.lu-doc-right {
  position: sticky;
  top: 10px;
}

@media (max-width: 1100px) {
  .lu-doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lu-doc-right {
    position: static;
  }
}

.lu-doc-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 700px) {
  .lu-doc-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lu-doc-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.lu-doc-pct {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lu-doc-pct .form-control {
  width: 72px;
}

.lu-doc-warn {
  color: #8a6d3b;
}

.lu-doc-full-width {
  flex-basis: 100%;
  margin: 0;
}

.lu-doc-small {
  min-width: 84px;
  max-width: 120px;
  text-align: right;
}

.lu-doc-lines td {
  vertical-align: top;
}

.lu-doc-newline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 120px auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 700px) {
  .lu-doc-newline-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.lu-doc-pay-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 700px) {
  .lu-doc-pay-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The preview: an A4-looking page, drawn from the same words and sums as the PDF. */
.lu-doc-preview {
  margin-top: 4px;
}

.lu-docp {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  padding: 26px 28px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lu-docp table {
  border-collapse: collapse;
  width: 100%;
}

.lu-docp th {
  background: #337ab7;
  color: #fff;
  text-align: left;
  padding: 4px 6px;
  font-size: 10.5px;
}

.lu-docp th.lu-num {
  text-align: right;
}

.lu-docp td {
  padding: 4px 6px;
  border-bottom: 1px solid #e3e3e3;
  vertical-align: top;
}

.lu-docp-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.lu-docp-business {
  font-weight: 700;
  font-size: 14px;
}

.lu-docp-logo {
  max-width: 140px;
  max-height: 54px;
  object-fit: contain;
}

.lu-docp-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #337ab7;
  padding-bottom: 4px;
}

.lu-docp-name {
  font-size: 20px;
}

.lu-docp-number {
  font-size: 16px;
}

.lu-docp-boxes {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 8px;
  background: #eef4fa;
  padding: 8px;
}

.lu-docp-totals-wrap {
  display: flex;
  justify-content: flex-end;
}

.lu-docp-totals {
  width: 230px;
}

.lu-docp-totals td {
  border-bottom: 0;
}

.lu-docp-totals .lu-docp-big td {
  background: #337ab7;
  color: #fff;
  font-weight: 700;
}

.lu-docp-terms {
  white-space: pre-line;
  border-top: 1px solid #ddd;
  padding-top: 6px;
}

.lu-docp-accept {
  color: #555;
}

.lu-doc-newline {
  margin-top: 12px;
}

/* Round 6b: the Send box, the orange "emailed" line in a document's Activity, and Convert quote to job */
.lu-row-sent td {
  background: #fff1dc;
}

.lu-send-pick-label {
  margin-top: 8px;
}

.lu-doc-send .form-select {
  max-width: 480px;
}

.lu-convert-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lu-convert-pick {
  max-width: 320px;
}

/* Settings › Jobs: the row of jump links at the top (round 6b), and less empty space between its sections */
html:has(.lu-jobs-main) {
  scroll-behavior: smooth;
}

.lu-jumpbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  background: #fff;
  border: 1px solid var(--lu-panel-border);
  border-radius: 4px;
  padding: 8px 12px;
}

.lu-jumpbar-label {
  font-weight: 700;
  margin-right: 4px;
}

.lu-jumpbar a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #c9d6e6;
  border-radius: 14px;
  background: #f5f9fd;
  text-decoration: none;
  font-size: 13px;
}

.lu-jumpbar a:hover,
.lu-jumpbar a:focus-visible {
  background: #e3effa;
}

.lu-jobs-main [id] {
  scroll-margin-top: 12px;
}

.lu-template-text {
  font-family: inherit;
  min-height: 200px;
}

.lu-template-fields code {
  font-size: 13px;
}

/* The purchase order's "For job" search box (round 6b) */
.lu-picker {
  position: relative;
}

.lu-picker-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
}

.lu-picker-list li {
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.lu-picker-list li:hover,
.lu-picker-list li[aria-selected='true'] {
  background: #e3effa;
}

.lu-picker-none {
  color: #555;
  cursor: default;
}

/* The small forms behind the buttons in the statuses table take no room (they used to add a gap each: about 300px of empty space) */
.lu-hidden-forms {
  display: none;
}

.lu-jobs-grid {
  align-items: start;
}

/* Settings › Xero (phase 7, round 7a) */
.lu-xero-select {
  max-width: 340px;
}

.lu-xero-steps {
  margin: 0;
  padding-left: 20px;
}

.lu-xero-steps li {
  margin-bottom: 4px;
}

/* The Xero panel on an invoice, and the Xero cell in the invoice lists */
.lu-xero-panel .lu-xero-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lu-badge.lu-xero-sent { background: #13b5ea; color: #fff; border: 1px solid #0fa3d3; }
.lu-badge.lu-xero-notsent { background: #f4f4f4; color: #444; border: 1px solid #ccc; }
.lu-badge.lu-xero-failed { background: #f2dede; color: #7a1f1f; border: 1px solid #d9a3a3; }

/* Round 8a: "What the email carries" on the Send boxes. */
.lu-carries {
    border: 1px solid #c9d6e6;
    background: #f5f9fd;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lu-carries [hidden] { display: none; }
.lu-carries-link {
    align-self: flex-start;
    background: #337ab7;
    color: #fff;
    border-radius: 4px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 14px;
}

.lu-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* Round 8a: the small tag for what the emailed link did (Viewed, Opened, Accepted, Received). */
.lu-online { border: 1px solid; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.lu-online-viewed { background: #e8f0f8; border-color: #b9cfe6; color: #1f4e79; }
.lu-online-opened { background: #f4f4f4; border-color: #ccc; color: #444; }
.lu-online-accepted, .lu-online-received { background: #dff0d8; border-color: #a3cf98; color: #2b542c; }

/* Round 8a: the one-line Job note column (an ellipsis when it is long; the full text shows on hover). */
.lu-jobnote { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Round 8a: the Notes speech-bubble in the Actions column and the popup it opens. */
.lu-notes-btn { position: relative; }
.lu-notes-count { position: absolute; top: -6px; right: -6px; background: #f26a2e; color: #111; border-radius: 9px; font-size: 10px; padding: 0 5px; font-weight: 700; }
.lu-jobnote-box { background: #f5f9fd; border: 1px solid #c9d6e6; border-radius: 4px; padding: 8px 10px; }
.lu-notes-popup .lu-notes { max-height: 40vh; overflow-y: auto; }

/* My preferences: Open directions in (one choice, shown on both tabs). */
.lu-pref-maps { max-width: 420px; display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; margin: 0 0 12px 0; }
.lu-pref-maps .lu-label { flex-basis: 100%; margin: 0; }
.lu-pref-maps select { flex: 1; min-width: 160px; }
.lu-pref-maps .lu-hint { flex-basis: 100%; margin: 0; }