/* Order details: a single editing flow for the work order and its line items. */
.order-detail {
  padding: 24px;
}

.order-detail .detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding-top: 22px;
}

.order-detail .detail-form > .span-two,
.order-detail .detail-form > .form-actions {
  grid-column: 1 / -1;
}

.order-detail .detail-form textarea {
  min-height: 92px;
}

.order-detail .order-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -24px -24px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
}

.order-detail .order-form-actions .button {
  min-width: 214px;
}

.order-line-manager {
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.order-line-manager > .section-heading {
  min-height: 72px;
  padding: 16px 22px;
}

.order-line-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-line-manager-grid > div {
  min-width: 0;
  padding: 18px;
}

.order-line-manager-grid > div + div {
  border-left: 1px solid var(--line);
}

.order-line-manager-grid h3 {
  margin: 0 0 12px;
  color: #506064;
  font-size: 13px;
}

.order-line-editor {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid #edf0f0;
}

.order-line-editor:first-of-type {
  border-top: 0;
}

.order-line-editor > form:first-child {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 72px 105px 34px;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.order-line-editor input {
  min-width: 0;
  min-height: 35px;
  padding: 7px 8px;
  font-size: 12px;
}

.order-line-editor .icon-button {
  min-width: 34px;
  min-height: 35px;
  border: 1px solid var(--line);
}

.order-lines-empty {
  margin: 0;
  padding: 14px 0;
  color: var(--muted);
  font-size: 12px;
}

/* The former lists duplicate the editor above; retain only the add-item forms. */
.order-detail + .order-line-manager + .order-lines .order-lines-list,
.order-line-manager + .order-lines .order-lines-list {
  display: none;
}

.order-line-manager + .order-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.order-line-manager + .order-lines .line-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.order-line-manager + .order-lines .line-form h3,
.order-line-manager + .order-lines .line-form > label:first-of-type,
.order-line-manager + .order-lines .line-form .button {
  grid-column: 1 / -1;
}

.order-line-manager + .order-lines .line-form h3 {
  margin: 0;
  font-size: 14px;
}

.order-line-manager + .order-lines .line-form .button {
  justify-self: start;
}

/* Printed form: compact confirmation block with distinct legal text and signatures. */
.print-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin-top: 28px;
  padding: 16px 18px 0;
  color: #4f5b5e;
  font-size: 11px;
  line-height: 1.48;
  border: 1px solid #cfd8d7;
  border-left: 3px solid var(--teal);
  break-inside: avoid;
  page-break-inside: avoid;
}

.print-footer::before {
  content: "Заказчик подтверждает, что принял транспортное средство после выполнения работ, ознакомлен с результатом работ, указанным в настоящем заказе-наряде, и не имеет к Исполнителю претензий по объему, качеству и срокам выполненных работ на момент приемки.";
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 17px;
  padding: 0;
  border: 0;
  color: #344144;
}

.print-footer > div {
  display: block;
  padding: 12px 0 14px;
  border-top: 1px solid #dbe2e1;
  color: #3e4a4d;
  font-size: 11px;
  font-weight: 700;
}

@media print {
  .print-footer {
    margin-top: 20px;
  }
}

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

  .order-detail .detail-form,
  .order-line-manager-grid,
  .order-line-manager + .order-lines {
    grid-template-columns: 1fr;
  }

  .order-line-manager-grid > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .order-line-editor > form:first-child {
    grid-template-columns: minmax(95px, 1fr) 58px 82px 34px;
  }

  .order-line-manager + .order-lines .line-form {
    grid-template-columns: 1fr;
  }

  .order-line-manager + .order-lines .line-form h3,
  .order-line-manager + .order-lines .line-form > label:first-of-type,
  .order-line-manager + .order-lines .line-form .button {
    grid-column: auto;
  }

  .order-detail .order-form-actions {
    margin: 4px -18px -18px;
    padding: 12px 18px;
  }

  .order-detail .order-form-actions .button {
    width: 100%;
  }

  .print-footer {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Intake form, arranged for a fast front-desk workflow. */
#order-form { display: none; }
.order-intake-form { max-width: none; margin: 0; background: #fff; border: 0; border-radius: 0; }
.order-intake-form.hidden { display: none; }
.order-intake-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; background: #f4f7f8; border-bottom: 1px solid #e1e7e7; }
.order-intake-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 19px; }
.order-intake-heading h2 svg { width: 22px; color: var(--teal); }
.order-intake-section { padding: 20px 22px; border: 0; }
.order-intake-section:last-of-type { padding-bottom: 14px; }
.order-intake-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.order-intake-section h3 svg { width: 18px; color: var(--teal); }
.order-intake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.order-intake-grid.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.order-intake-grid.clients-row { grid-template-columns: minmax(230px, 1.35fr) minmax(220px, 1fr) minmax(250px, 1.2fr); }
.order-intake-grid.service-row { grid-template-columns: minmax(260px, 1.5fr) 140px 180px; }
.order-intake-grid.part-row { grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1.35fr) 130px 170px; }
.order-intake-grid label { min-width: 0; }
.order-intake-grid input, .order-intake-grid select, .order-intake-section textarea { width: 100%; background: #fbfcfc; }
.order-intake-grid option[hidden] { display: none; }
.order-client-search-field { position: relative; }
.client-search-suggestions { position: absolute; z-index: 12; top: calc(100% - 1px); right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: 5px; border: 1px solid #cfdcda; background: #fff; box-shadow: 0 10px 22px rgba(25, 49, 48, .14); }
.client-search-suggestion { display: block; width: 100%; min-height: 38px; padding: 8px 10px; overflow: hidden; border: 0; border-radius: 3px; background: transparent; color: #263538; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.client-search-suggestion:hover, .client-search-suggestion:focus-visible { background: #e8f4f1; color: #0c675c; outline: none; }
.order-intake-new-client { margin-top: 14px; padding-top: 16px; border-top: 1px dashed #d9e0e0; }
.order-intake-new-client[hidden], .order-intake-vehicle-fields[hidden] { display: none; }
.order-intake-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.order-client-history { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; padding: 11px 13px; border-left: 3px solid var(--teal); background: #f1f7f6; color: #304044; }
.order-client-history svg { width: 18px; flex: 0 0 auto; color: var(--teal); }
.order-client-history div { display: grid; gap: 3px; min-width: 0; }
.order-client-history strong { font-size: 13px; }
.order-client-history span { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.order-intake-employees { display: flex; flex-wrap: wrap; gap: 9px; }
.order-intake-employees label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; background: #f5f8f8; border: 1px solid #e0e7e6; border-radius: 5px; color: #334144; font-size: 12px; font-weight: 700; }
.order-intake-employees input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--teal); }
.order-intake-actions { display: flex; justify-content: flex-start; padding: 18px 22px 28px; border: 0; background: #fff; }
.order-intake-actions .button { min-width: 220px; }
body.order-intake-open .page-toolbar, body.order-intake-open .orders-board { display: none; }

/* Editing uses the same uninterrupted sheet as the intake form. */
body.order-edit-open .page-toolbar,
body.order-edit-open .orders-board,
body.order-edit-open #order-form { display: none; }
body.order-edit-open .order-edit-sheet { display: block; margin: 0; background: #fff; }
body.order-edit-open .order-edit-sheet > .order-intake-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
body.order-edit-open .order-edit-sheet > .order-intake-form { display: block; }
body.order-edit-open .order-edit-sheet .order-edit-title { grid-column: span 2; }
body.order-edit-open .order-detail { margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; }
body.order-edit-open .order-detail .detail-heading { min-height: 70px; padding: 14px 22px; background: #f4f7f8; border-bottom: 1px solid #e1e7e7; }
body.order-edit-open .order-detail .detail-form { padding: 22px; }
body.order-edit-open .order-line-manager { margin: 0; padding: 0 22px; overflow: visible; border: 0; border-radius: 0; background: #fff; }
body.order-edit-open .order-line-manager > .section-heading { min-height: auto; padding: 16px 0; background: transparent; border-bottom: 0; }
body.order-edit-open .order-line-manager-grid { border: 0; }
body.order-edit-open .order-line-manager-grid > div { padding: 10px 0 18px; }
body.order-edit-open .order-line-manager-grid > div + div { padding-left: 22px; border-left: 0; }
body.order-edit-open .order-line-manager + .order-lines { margin: 0; padding: 0 22px 28px; background: #fff; }
body.order-edit-open .order-line-manager + .order-lines .line-form { padding: 14px 0 0; border: 0; border-top: 1px solid #e6ebea; border-radius: 0; background: transparent; }
body.order-edit-open .order-edit-final-actions { justify-content: flex-end; padding-top: 20px; border-top: 1px solid #e1e7e7; }

/* Printout in the standard work-order form. */
.print-reference-view { margin-top: 24px; color: #101820; font-family: Arial, sans-serif; }
.print-reference-brand { padding: 8px 20px 30px; text-align: center; border-bottom: 3px double #273239; }
.print-reference-brand h1 { margin: 0 0 14px; font-size: 32px; letter-spacing: 2px; text-transform: uppercase; }
.print-reference-brand p { margin: 4px 0; color: #303c42; font-size: 13px; }
.print-reference-title { padding: 36px 0 30px; text-align: center; }
.print-reference-title h2 { margin: 0 0 16px; font-size: 30px; letter-spacing: 1px; }
.print-reference-title strong { font-size: 18px; }
.print-reference-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.print-reference-table th, .print-reference-table td { padding: 12px 16px; border: 1px solid #394349; font-size: 13px; line-height: 1.25; vertical-align: middle; word-break: break-word; }
.print-reference-table th { width: 15%; color: #111a20; background: #f1f3f4; font-weight: 800; text-align: left; text-transform: uppercase; }
.print-reference-table td { width: 35%; color: #18242a; font-weight: 600; }
.print-reference-executor { margin-top: 26px; break-inside: avoid; page-break-inside: avoid; }
.print-reference-executor h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; }
.print-reference-executor p { margin: 0; padding: 14px 16px; border: 1px solid #394349; font-size: 13px; }
.print-reference-total { display: flex; justify-content: space-between; gap: 18px; margin-top: 34px; padding: 21px 26px; border: 1px solid #263137; border-top: 2px solid #263137; font-size: 19px; font-weight: 800; text-transform: uppercase; }
.print-reference-total strong { white-space: nowrap; }
.print-reference-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 180px; margin: 118px 0 34px; }
.print-reference-signatures div { display: grid; gap: 9px; text-align: center; }
.print-reference-signatures span { height: 1px; background: #303a3e; }
.print-reference-signatures small { font-size: 12px; font-weight: 700; }
.print-reference-footer { padding: 15px 20px; border-top: 2px solid #263137; color: #425055; text-align: center; font-size: 12px; line-height: 1.45; }
.print-document:has(.print-reference-view) > .print-header, .print-document:has(.print-reference-view) > .print-title, .print-document:has(.print-reference-view) > .print-grid, .print-document:has(.print-reference-view) > .print-work, .print-document:has(.print-reference-view) > .print-footer { display: none; }

@media print {
  .print-reference-view { margin-top: 0; }
  .print-reference-brand { padding-top: 0; }
  .print-reference-signatures { margin-top: 65px; }
}

@media (max-width: 760px) {
  .order-intake-heading, .order-intake-section { padding-right: 16px; padding-left: 16px; }
  .order-intake-grid, .order-intake-grid.clients-row, .order-intake-grid.four-columns, .order-intake-grid.service-row, .order-intake-grid.part-row { grid-template-columns: 1fr; }
  .order-intake-actions { padding: 15px 16px; }
  .order-intake-actions .button { width: 100%; }
  .order-intake-employees { display: grid; grid-template-columns: 1fr; }
  body.order-edit-open .order-detail .detail-heading,
  body.order-edit-open .order-detail .detail-form,
  body.order-edit-open .order-line-manager,
  body.order-edit-open .order-line-manager + .order-lines { padding-right: 16px; padding-left: 16px; }
  body.order-edit-open .order-edit-sheet .order-edit-title { grid-column: auto; }
  body.order-edit-open .order-line-manager-grid > div + div { padding-left: 0; border-top: 0; }
  .print-reference-brand h1 { font-size: 23px; }
  .print-reference-title { padding: 24px 0 20px; }
  .print-reference-title h2 { font-size: 23px; }
  .print-reference-table th, .print-reference-table td { padding: 9px; font-size: 10px; }
  .print-reference-signatures { gap: 35px; margin-top: 52px; }
}