@import url('/workflow-status.css');

:root {
  --coral: #f06348;
  --coral-deep: #d94f37;
  --coral-wash: #fff0ec;
  --graphite: #44454a;
  --ink: #26272b;
  --silver: #c6c6c8;
  --mist: #f5f5f6;
  --paper: #ffffff;
  --line: #e4e4e6;
  --success: #1e6f55;
  --info: #245b9b;
  --danger: #a7373d;
  --shadow: 0 18px 48px rgb(68 69 74 / 10%);
  --shadow-strong: 0 28px 72px rgb(38 39 43 / 16%);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font-ui: "Rajdhani", "Avenir Next", Avenir, system-ui, sans-serif;
  --radius-field: 9px;
  --radius-frame: 20px;
  color: var(--ink);
  background: var(--mist);
  font-family: var(--font-ui);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--mist); }
body { min-width: 320px; margin: 0; background: var(--mist); color: var(--ink); font-family: var(--font-ui); font-size: 18px; font-weight: 500; line-height: 1.35; }
a { color: var(--coral-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { color: var(--ink); background: #ffd5cd; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { border: 3px solid var(--mist); border-radius: 10px; background: #a5a5a9; }
::-webkit-scrollbar-thumb:hover { background: var(--graphite); }
[hidden] { display: none !important; }

.form-shell, .admin-shell, .technician-shell, .detail-shell, .catalogue-shell { width: min(1100px, calc(100% - 56px)); min-height: min(780px, calc(100dvh - 56px)); margin: 28px auto; padding: 48px 52px 60px; border-radius: var(--radius-frame); background: var(--paper); box-shadow: var(--shadow-strong); }
.form-shell { max-width: 760px; }
header { margin-bottom: 34px; }
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.brand img { display: block; width: auto; height: 38px; }
.brand span { min-width:0; white-space:normal; overflow-wrap:anywhere; color: var(--graphite); font-size: 14px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.eyebrow, .step-number { display: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; }
h1 { max-width: 12ch; margin-bottom: 12px; font-size: 48px; line-height: 1.1; }
h2 { margin-bottom: 9px; font-size: 30px; line-height: 1.15; }
h3 { margin-bottom: 6px; font-size: 22px; line-height: 1.08; }
.lede, header > p { max-width: 54ch; margin-bottom: 0; color: var(--graphite); font-size: 18px; font-weight: 500; line-height: 1.4; }

.form-shell header, .admin-header, .technician-header, .catalogue-header, .detail-header, .work-header { position: relative; padding-left: 20px; }
.form-shell header::before, .admin-header::before, .technician-header::before, .catalogue-header::before, .detail-header::before, .work-header::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: var(--coral); }
.form-shell header { padding-bottom: 27px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.admin-header, .technician-header { padding: 34px 38px 36px 42px; margin: -48px -52px 42px; border-radius: var(--radius-frame) var(--radius-frame) 0 0; background: var(--graphite); }
.admin-header::before, .technician-header::before { left: 28px; background: var(--coral); }
.admin-header .brand, .technician-header .brand { margin-bottom: 28px; }
.admin-header .brand span, .technician-header .brand span, .admin-header h1, .technician-header h1, .admin-header .lede, .technician-header p { color: var(--paper); }
.admin-header .lede, .technician-header p { color: #f0f0f1; }
.admin-heading, .section-heading, .detail-header, .work-header, .panel-title, .list-heading, .field-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.catalogue-header { padding-bottom: 28px; border-bottom: 1px solid var(--line); }

.status-pill, .status-badge { display: inline-flex; align-items: center; width: max-content; min-height: 30px; padding: 5px 10px; border: 1px solid #d4d4d7; border-radius: 6px; color: var(--graphite); background: var(--mist); font-size: 14px; font-weight: 700; line-height: 1; }
.status-badge { border-color: #f2c7bd; color: var(--coral-deep); background: var(--coral-wash); }
.status-badge.status-valide, .status-badge.status-envoye, .status-badge.status-convertie, .status-badge.status-acceptee, .status-badge.status-envoyee { border-color: #b7d6c8; color: var(--success); background: #eef8f3; }
.status-badge.status-a_valider, .status-badge.status-assigne, .status-badge.status-en_cours, .status-badge.status-nouvelle, .status-badge.status-en_revision, .status-badge.status-contactee { border-color: #bdd2ef; color: var(--info); background: #f0f6ff; }
.status-badge.status-brouillon { border-color: #d6d6d9; color: var(--graphite); background: #f3f3f4; }
.status-badge.status-annule, .status-badge.status-fermee, .status-badge.status-refusee { border-color: #efc5c8; color: var(--danger); background: #fff3f4; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.feedback { min-height: 0; margin: 20px 0 0; color: var(--success); font-size: 17px; font-weight: 700; }
.feedback[data-type="error"] { color: var(--danger); }
.feedback:empty { display: none; }

form, .request-card { display: grid; gap: 20px; }
fieldset { min-inline-size: 0; }
.form-section { display: grid; gap: 20px; padding: 30px 0; margin: 0; border: 0; }
.form-section + .form-section { border-top: 1px solid var(--line); }
.form-section legend { padding: 0; margin-bottom: 2px; color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: 0; }
.form-note { margin: -4px 0 0; color: var(--graphite); font-size: 16px; line-height: 1.42; }
label { display: grid; gap: 8px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
input, select, textarea, button { width: 100%; min-height: 54px; border: 1px solid var(--silver); border-radius: var(--radius-field); padding: 12px 15px; color: var(--ink); background: var(--paper); font: inherit; }
input, select, textarea { font-size: 18px; font-weight: 600; letter-spacing: 0; }
input::placeholder, textarea::placeholder { color: #77777d; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); outline: 3px solid rgb(240 99 72 / 22%); outline-offset: 1px; }
textarea { min-height: 132px; resize: vertical; }
.field-hint { display: block; margin-top: -1px; color: var(--graphite); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
button { border-color: var(--coral); background: var(--coral); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { button:hover { border-color: var(--coral-deep); background: var(--coral-deep); box-shadow: 0 7px 15px rgb(217 79 55 / 18%); transform: translateY(-2px); } }
button:active { transform: scale(.98); box-shadow: none; }
button:focus-visible, a:focus-visible { outline: 3px solid rgb(240 99 72 / 58%); outline-offset: 3px; }
button:disabled { opacity: .58; cursor: wait; }
.button-secondary, .text-button { border-color: var(--silver); color: var(--ink); background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .button-secondary:hover, .text-button:hover { border-color: var(--graphite); color: var(--ink); background: var(--mist); box-shadow: none; } }
.danger-button { border-color: #e8b4b6; color: var(--danger); background: #fffafa; }
@media (hover: hover) and (pointer: fine) { .danger-button:hover { border-color: var(--danger); color: #fff; background: var(--danger); } }

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phone-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
.phone-number { min-width: 0; }
.check { grid-template-columns: auto 1fr; align-items: start; color: var(--graphite); font-size: 16px; font-weight: 500; line-height: 1.4; }
.check input { width: 20px; min-height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--coral); }
.trap { display: none; }

.workspace { padding: 42px 0; border-bottom: 1px solid var(--line); }
.requests-workspace { border-bottom: 0; }
.section-heading { align-items: end; margin-bottom: 24px; }
.section-heading > p { max-width: 40ch; margin: 0; color: var(--graphite); font-size: 17px; line-height: 1.35; text-align: right; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; }
.admin-card, .orders-panel, .catalogue-panel { padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.admin-card { border-top: 4px solid var(--graphite); }
.card-heading { display: block; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.card-heading p { max-width: 44ch; margin: 0; color: var(--graphite); font-size: 16px; line-height: 1.35; }
.form-divider { height: 1px; margin: 30px 0; border: 0; background: var(--line); }
.assignment-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 20px; align-items: start; }
.assignment-card { border-top-color: var(--coral); background: #fffdfc; }
.orders-panel { min-height: 100%; background: var(--mist); }
.panel-title { align-items: baseline; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--silver); }
.panel-title h3 { margin: 0; }
.panel-title span { color: var(--graphite); font-size: 15px; }
.request-list { display: grid; gap: 12px; }
.request-card { gap: 11px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.request-card > strong { font-size: 20px; line-height: 1.1; }
.request-card > span:not(.status-badge) { display: inline-flex; align-self: start; width: max-content; padding: 5px 8px; border-radius: 6px; color: var(--coral-deep); background: var(--coral-wash); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.request-card p { margin: 0; color: var(--graphite); font-size: 16px; line-height: 1.38; }
.request-card button { min-height: 48px; font-size: 16px; }
.request-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.request-actions > label { grid-column: 1 / -1; }
.request-attachments { display: flex; flex-wrap: wrap; gap: 9px; }
.request-attachments a { font-weight: 700; }
.work-order-link { display: grid; color: inherit; text-decoration: none; transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .work-order-link:hover { border-color: var(--coral); background: var(--coral-wash); transform: translateY(-2px); } }
.empty-state { margin: 0; color: var(--graphite); font-size: 16px; }
.notification-banner, .locked-notice { display: grid; gap: 8px; margin-top: 20px; padding: 18px; border: 1px solid #b7d6c8; border-radius: 10px; background: #eef8f3; }
.locked-notice h3 { margin-bottom: 1px; color: var(--success); }
.locked-notice p { margin: 0; color: #24583f; font-size: 16px; line-height: 1.4; }

.detail-shell, .technician-shell { max-width: 1040px; }
.back-link, .back-button { display: inline-flex; width: auto; min-height: 0; margin-bottom: 26px; padding: 0 0 4px; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; color: var(--coral-deep); background: transparent; font-size: 16px; font-weight: 700; text-decoration: none; }
.back-button:hover { color: var(--coral-deep); background: transparent; transform: none; box-shadow: none; }
.detail-header, .work-header { align-items: flex-start; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--silver); }
.detail-header h1, .work-header h2 { margin-bottom: 8px; }
.detail-header p, .work-header p { margin: 0; color: var(--graphite); line-height: 1.4; }
.detail-kicker { margin-bottom: 8px; color: var(--coral-deep) !important; font-size: 16px !important; font-weight: 700 !important; }
.detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; }
.detail-block, .site-brief, .field-section, .finish-section { padding: 25px 0; border-bottom: 1px solid var(--line); }
.detail-grid .detail-block { padding: 0 0 25px; }
.detail-block h2, .field-section h3, .site-brief h3, .finish-section h3 { margin-bottom: 12px; font-size: 24px; }
.detail-block p, .site-brief p, .finish-section p { margin: 0; color: var(--graphite); font-size: 17px; line-height: 1.45; }
.detail-block dl { display: grid; gap: 16px; margin: 0; }
.detail-block dl div { display: grid; gap: 4px; }
.order-totals dl { max-width: 560px; }
.order-totals dl div { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 6px 0; border-bottom: 1px solid #e1e5e8; }
.order-totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.order-totals dl div:last-child { font-weight: 700; }
.detail-shell :is(p, dt, dd, strong, small, h1, h2), .work-detail :is(p, dt, dd, strong, small, h2) { overflow-wrap: anywhere; min-width: 0; }
.detail-block, .validation-line > div { min-width: 0; }
.detail-block dd { white-space: pre-wrap; }
.detail-block dt { color: var(--graphite); font-size: 15px; font-weight: 600; }
.detail-block dd { margin: 0; font-size: 18px; line-height: 1.35; }
.detail-lines { display: grid; gap: 0; }
.detail-lines > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-lines strong { font-size: 18px; }
.detail-lines span, .detail-lines small { color: var(--graphite); font-size: 15px; }
.detail-lines small { grid-column: 1 / -1; }
.job-list-panel { padding-top: 6px; }
.list-heading { align-items: baseline; margin-bottom: 18px; }
.list-heading h2 { font-size: 30px; }
.list-heading p { margin: 0; color: var(--graphite); font-size: 16px; }
.job-list { display: grid; gap: 10px; }
.job-card { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: start; padding: 20px; border-color: var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; }
@media (hover: hover) and (pointer: fine) { .job-card:hover { border-color: var(--coral); background: var(--coral-wash); } }
.job-card-number { color: var(--coral-deep); font-size: 16px; font-weight: 700; }
.job-card strong { grid-column: 1 / -1; font-size: 23px; }
.job-card small, .job-card p { grid-column: 1 / -1; margin: 0; color: var(--graphite); font-size: 16px; font-weight: 500; line-height: 1.35; }
.job-card .status-badge { grid-column: 2; grid-row: 1; }
.empty-work { padding: 42px 22px; border: 1px dashed var(--silver); border-radius: 10px; text-align: center; }
.empty-work h2 { font-size: 28px; }
.empty-work p { margin: 8px 0 0; color: var(--graphite); font-size: 17px; }
.field-section-heading { align-items: baseline; margin-bottom: 18px; }
.field-section-heading p { margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.35; text-align: right; }
.compact-form { padding: 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); }
.product-results { display: grid; gap: 8px; }
.product-result { display: flex; justify-content: space-between; gap: 14px; min-height: 0; padding: 13px; border-color: var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 15px; text-align: left; }
@media (hover: hover) and (pointer: fine) { .product-result:hover { border-color: var(--coral); background: var(--coral-wash); box-shadow: none; transform: none; } }
.product-result { flex-wrap: wrap; overflow-wrap: anywhere; }
.product-result strong { font-size: 17px; }
.search-suggestion { color: var(--graphite); font-size: 14px; }
.product-result .search-suggestion { flex-basis: 100%; }
.product-result span { color: var(--graphite); }
.selected-product { margin: 0; color: var(--success); font-size: 16px; font-weight: 700; }
.field-lines { display: grid; gap: 0; }
.field-line { display: grid; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.field-line > div:first-child { display: grid; gap: 5px; }
.field-line strong { font-size: 18px; }
.field-line span { color: var(--graphite); font-size: 16px; }
.line-flag { color: var(--coral-deep) !important; font-size: 15px !important; font-weight: 700; }
.line-controls { display: grid; grid-template-columns: 104px 132px minmax(0, 1fr) auto auto; align-items: end; gap: 10px; }
.line-controls label { gap: 5px; font-size: 14px; }
.line-controls input { min-height: 44px; padding: 9px 10px; font-size: 16px; }
.text-button { width: auto; min-height: 44px; padding: 9px 12px; font-size: 15px; }
.finish-section { padding-bottom: 0; }
.finish-section button { margin-top: 18px; }
.detail-loading { padding: 34px 0; color: var(--graphite); }

.validation-form { display: grid; gap: 0; }
.validation-note { color: var(--graphite); font-size: 17px; line-height: 1.42; }
.validation-line { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.validation-line > div:first-child { display: grid; align-content: start; gap: 6px; }
.validation-line span { color: var(--graphite); font-size: 16px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.pricing-grid.one-rate { grid-template-columns: 165px 1fr; }
.pricing-grid p { margin: 0 0 11px; color: var(--graphite); font-size: 16px; }
.confirm-other { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font-size: 15px; }
.confirm-other input { width: 18px; min-height: 18px; padding: 0; accent-color: var(--coral); }
.validation-actions { padding: 28px 0 0; }
.validation-actions p { color: var(--graphite); line-height: 1.45; }
.validation-actions > div { display: flex; flex-wrap: wrap; gap: 12px; }
.validation-actions button, .button-link { width: auto; text-decoration: none; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 15px; border: 1px solid var(--coral); border-radius: var(--radius-field); color: #fff; background: var(--coral); font-size: 17px; font-weight: 700; }

.catalogue-shell { max-width: 1100px; }
.catalogue-header { display: flex; justify-content: space-between; gap: 20px; }
.catalogue-header p { color: var(--graphite); line-height: 1.4; }
.catalogue-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(310px, .7fr); gap: 20px; margin-top: 30px; }
.catalogue-grid.catalogue-readonly { grid-template-columns: minmax(0, 1fr); }
.catalogue-panel h2 { margin-bottom: 18px; font-size: 28px; }
.catalogue-results { display: grid; gap: 0; }
.catalogue-row { display: grid; gap: 7px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.catalogue-row strong { font-size: 18px; }
.catalogue-row span, .catalogue-row small { color: var(--graphite); font-size: 16px; }
.catalogue-pricing { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink) !important; font-weight: 700; }
.lumen-check { width: fit-content; min-height: 44px; margin-top: 6px; padding: 9px 12px; font-size: 15px; }
.lumen-result { margin: 3px 0 0; color: var(--graphite); font-size: 15px; line-height: 1.4; }
.catalogue-import { display: grid; gap: 14px; }
.catalogue-import code { display: block; padding: 12px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 8px; background: var(--mist); color: var(--graphite); font-family: ui-monospace, monospace; font-size: 13px; }

@media (max-width: 960px) {
  .form-shell, .admin-shell, .technician-shell, .detail-shell, .catalogue-shell { width: min(100% - 36px, 1100px); padding: 42px 34px 52px; }
  .admin-header, .technician-header { margin: -42px -34px 36px; padding: 30px 34px 32px 40px; }
  .admin-header::before, .technician-header::before { left: 22px; }
  .assignment-layout, .catalogue-grid { grid-template-columns: 1fr; }
  .orders-panel { min-height: auto; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .form-shell, .admin-shell, .technician-shell, .detail-shell, .catalogue-shell { width: 100%; min-height: 100dvh; margin: 0; padding: 34px 20px 48px; border-radius: 0; box-shadow: none; }
  .admin-header, .technician-header { padding: 30px 22px 30px 30px; margin: -34px -20px 32px; border-radius: 0; }
  .admin-header::before, .technician-header::before { left: 16px; }
  .brand { margin-bottom: 26px; }
  .brand img { height: 34px; }
  .brand span { font-size: 12px; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  .admin-heading, .section-heading, .detail-header, .work-header, .catalogue-header { align-items: flex-start; flex-direction: column; }
  .section-heading > p, .field-section-heading p { text-align: left; }
  .admin-grid, .detail-grid { grid-template-columns: 1fr; }
  .workspace { padding: 34px 0; }
  .admin-card, .orders-panel, .catalogue-panel { padding: 20px; }
  .line-controls { grid-template-columns: 1fr 1fr; }
  .line-controls label:nth-child(3) { grid-column: 1 / -1; }
  .line-controls .text-button { width: 100%; }
  .validation-line, .pricing-grid, .pricing-grid.one-rate { grid-template-columns: 1fr; }
  .detail-grid .detail-block { padding: 0 0 24px; }
}
@media (max-width: 480px) {
  .grid.two, .phone-grid, .line-controls, .request-actions { grid-template-columns: 1fr; }
  .request-actions > label { grid-column: auto; }
  .form-section { padding: 26px 0; }
  .form-section legend { font-size: 22px; }
  .status-badge { font-size: 13px; }
  .panel-title, .field-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.delivery-panel { padding:24px 0; border-top:1px solid #d9dee5; margin-top:20px; }
.delivery-panel p,.delivery-history li { overflow-wrap:anywhere; }
.delivery-panel h3,.delivery-panel h4 { margin:0 0 12px; }
.delivery-actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 24px; }
.delivery-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.delivery-actions button svg { width:18px; height:18px; flex:0 0 18px; }
.delivery-actions [data-action=refresh-delivery] { width:44px; min-height:44px; padding:0; flex:0 0 44px; }
.delivery-history { list-style:none; padding:0; margin:0; }
.delivery-history li { padding:12px 0; border-bottom:1px solid #e5e7eb; font-size:13px; line-height:1.6; }
.document-email-editor { margin: 18px 0; min-width: 0; width: 100%; }
.validation-actions > .document-email-editor { display: block; }
.validation-actions > #review-warnings { display: block; }
#review-warnings:empty { display: none; }
.order-secondary-options { border-top: 1px solid var(--line); padding: 16px 0; }
.order-secondary-options > summary { cursor: pointer; font-weight: 600; }
.order-secondary-options > section { margin-top: 12px; }
.document-email-editor fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.document-email-editor label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.document-email-editor input, .document-email-editor select, .document-email-editor textarea { width: 100%; min-width: 0; font-size: 16px; }
.document-email-editor select { overflow: hidden; text-overflow: ellipsis; }
.document-email-editor textarea { min-height: 130px; resize: vertical; }
.document-email-editor [readonly] { background: #f5f6f7; }
.document-email-editor [role=status], .document-email-copy { white-space: pre-wrap; overflow-wrap: anywhere; }
.delivery-warning { color:#9b381e; }
.order-profitability > p { color: var(--graphite); font-size: 14px; line-height: 1.5; }
.profitability-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.profitability-row h3 { margin: 0 0 12px; }
.profitability-row dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profitability-row dd { font-variant-numeric: tabular-nums; }
.profitability-row[data-profit-category=total] dd { font-weight: 700; }
.profitability-row .profit-loss { color: #ad2424; }
.bulk-margin-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.bulk-margin-toolbar > label:not(.confirm-other) { width: 150px; max-width: 100%; }
.bulk-margin-toolbar .confirm-other { align-self: center; }
.bulk-margin-toolbar > span { align-self: center; font-size: 14px; color: var(--graphite); }
.bulk-margin-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bulk-margin-toolbar button svg { width: 18px; height: 18px; flex-shrink: 0; }
.bulk-margin-toolbar button:disabled { opacity: .5; cursor: not-allowed; }
.material-selection { margin-bottom: 8px; }
#bulk-margin-message { font-size: 14px; margin: 12px 0 0; }
#bulk-margin-message:empty { display: none; }
.catalogue-row-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.catalogue-row-heading strong, .catalogue-row-heading h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.catalogue-row-heading button { flex: 0 0 38px; width: 38px; height: 38px; padding: 8px; }
.catalogue-selection { width: 18px; height: 18px; flex: 0 0 18px; }
.catalogue-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 18px 0; }
.catalogue-toolbar > strong { align-self: center; min-width: 100px; }
.catalogue-toolbar > label { max-width: 100%; }
.catalogue-toolbar input[type=number] { width: 100px; }
.catalogue-toolbar .confirm-other { align-self: center; }
.catalogue-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.catalogue-detail { border-block: 1px solid var(--line); padding: 24px 0; scroll-margin-top: 80px; }
.catalogue-detail section, .mapping-form { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.catalogue-detail p, .catalogue-detail li { overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.catalogue-detail .confirm-other { margin: 12px 0; }
.catalogue-detail h3 { margin: 0 0 16px; }
.availability-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; font-size: 14px; }
.availability-details dd { margin: 4px 0 0; }
.catalogue-refresh { padding: 12px 0; }
@media (max-width: 760px) { .catalogue-fields { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .profitability-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}