:root {
  --brand: #bd3f34;
  --brand-dark: #9f3028;
  --ink: #292929;
  --muted: #454545;
  --line: #dedede;
  --soft: #f6f6f6;
  --white: #fff;
  --shadow: 0 10px 28px rgba(35, 35, 35, .09);
}
.permission-section { padding: 18px; margin-bottom: 16px; }
.permission-section summary { cursor: pointer; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 16px; margin-top: 18px; }
.permission-control { min-width: 0; }
.permission-control label, .permission-control small { display: block; }
.permission-control select { width: 100%; min-width: 0; margin: 8px 0; }
.report-menu { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.report-menu-card { display: block; padding: 22px; font-weight: 700; text-decoration: none; }
.report-tabs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; }
.report-tabs [aria-current="page"] { font-weight: 800; color: #24523c; }
.report-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px; align-items: end; padding: 16px; }
.report-filters > div { min-width: 0; }
.report-filters label { display: block; font-size: 13px; }
.report-filters :is(input,select) { width: 100%; min-width: 0; font-size: 13px; }
.report-filters .errorlist { grid-column: 1 / -1; color: #982e27; }
.report-note { line-height: 1.8; color: #4b5d66; }
.report-table th { white-space: normal; min-width: 105px; }
.report-table td { font-variant-numeric: tabular-nums; }
.report-pagination { display: flex; justify-content: center; gap: 18px; padding: 14px; }
* { box-sizing: border-box; }
html { background: var(--white); }
body { margin: 0; background: var(--white); color: var(--ink); font: 15px/1.65 Inter, "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
a { color: var(--brand-dark); }
.topbar { position: sticky; top: 0; z-index: 50; min-height: 70px; display: flex; align-items: stretch; background: var(--brand); box-shadow: 0 2px 12px rgba(65, 23, 19, .18); }
.brand { flex: 0 0 190px; display: grid; place-items: center; padding: 13px 22px; background: var(--white); color: var(--brand); font-size: 22px; font-weight: 900; letter-spacing: -.04em; line-height: 1; text-decoration: none; }
.primary-nav { flex: 1; display: flex; align-items: stretch; gap: 2px; padding-inline: 18px; }
.nav-group { position: relative; display: flex; }
.nav-group summary, .nav-direct { display: flex; align-items: center; gap: 7px; min-height: 70px; padding: 0 17px; color: var(--white); font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; border-bottom: 4px solid transparent; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: "⌄"; font-size: 13px; transition: transform .18s ease; }
.nav-group[open] summary::after { transform: rotate(180deg); }
.nav-group.active summary, .nav-direct.active, .nav-group summary:hover, .nav-group summary:focus-visible, .nav-direct:hover, .nav-direct:focus-visible { background: rgba(255,255,255,.12); border-bottom-color: var(--white); outline: none; }
.nav-menu { display: none; position: absolute; inset-block-start: calc(100% - 1px); inset-inline-start: 0; min-width: 230px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 0 0 9px 9px; box-shadow: var(--shadow); }
.nav-group[open] .nav-menu { display: grid; }
.nav-menu a { padding: 10px 12px; color: var(--ink); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: #f9e9e7; color: var(--brand-dark); outline: none; }
.nav-count { display: inline-grid; min-width: 23px; height: 23px; place-items: center; padding: 0 6px; background: var(--white); color: var(--brand); border-radius: 99px; font-size: 12px; }
.actions { display: flex; align-items: center; gap: 12px; padding: 0 22px; color: var(--white); }
.actions form { display: inline-flex; margin: 0; }
.actions select { min-width: 92px; background: var(--white); color: var(--ink); border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; }
.user-name { white-space: nowrap; font-weight: 650; }
.link-button { padding: 8px 4px; color: var(--white); background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.link-button:hover, .link-button:focus-visible { text-decoration: underline; }
.shell { width: min(1380px, 100%); margin: 0 auto; padding: 38px clamp(20px, 4vw, 58px) 70px; background: var(--white); }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 4px 0 7px; font-size: clamp(28px, 3.3vw, 43px); line-height: 1.15; }
.page-heading p { max-width: 720px; margin: 0; color: var(--muted); }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.button, button { min-height: 40px; padding: 9px 17px; border: 1px solid var(--brand); border-radius: 6px; background: var(--brand); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button:hover, button:hover { background: var(--brand-dark); }
.button.secondary { background: var(--white); color: var(--brand); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.metrics article, .panel, .form-card, .warehouse-card, .login-card { background: var(--white); border: 1px solid var(--line); border-radius: 9px; }
.metrics article { padding: 20px; }
.metrics span { display: block; color: var(--muted); }
.metrics strong { display: block; margin-top: 5px; color: var(--ink); font-size: 28px; }
.panel { overflow: hidden; margin-bottom: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel h2 { font-size: 21px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--white); }
th { background: var(--soft); color: #505050; font-size: 12px; font-weight: 800; text-align: start; }
th, td { padding: 13px 16px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
tbody tr:hover { background: #fdf8f7; }
label { font-weight: 650; color: #3f3f3f; }
input, textarea, select { max-width: 100%; min-height: 40px; padding: 9px 11px; background: var(--white); color: var(--ink); border: 1px solid #cfcfcf; border-radius: 6px; font: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); outline: 3px solid rgba(189,63,52,.13); }
textarea { min-height: 105px; }
.form-card { max-width: 940px; padding: 26px; }
.form-card form > div, .form-card > div { margin-bottom: 15px; }
.form-card input, .form-card textarea, .form-card select { width: 100%; max-width: 720px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 16px; align-items: end; padding: 20px 22px; }
.filter-grid label { display: grid; gap: 6px; }
.detail-grid, .image-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.detail-card, .image-card, .detail-panel { padding: 22px; }
.detail-card dl, .detail-list { display: grid; grid-template-columns: minmax(145px,.7fr) minmax(0,1.3fr); gap: 9px 16px; }
.detail-card dt, .detail-list dt { color: var(--muted); font-weight: 650; }
.detail-card dd, .detail-list dd { margin: 0; overflow-wrap: anywhere; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 20px; background: #eee; font-size: 12px; }
.pill.posted { background: #e5efe9; color: #24523c; }
.pill.void { background: #f3e0de; color: #862f28; }
.card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.warehouse-card { padding: 22px; }
.search-bar { padding: 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 9px; }
.search-bar > div { display: flex; gap: 10px; }
.search-bar input { flex: 1; }
.image-card img { display: block; width: 100%; max-height: 460px; object-fit: contain; background: var(--soft); border-radius: 7px; }
.message { margin-bottom: 20px; padding: 12px 15px; background: #e5efe9; border-radius: 6px; }
.message.error { background: #fce8e6; color: #982e27; border: 1px solid #d88a83; }
.dashboard-reminders a { color: #24523c; font-weight: 700; text-decoration: none; }
.dashboard-reminders a:hover { text-decoration: underline; }
.dashboard-reminders .pill { margin-inline-start: 10px; padding: 2px 10px; color: #fff; background: #24523c; border: 0; font-weight: 700; }
.list-search-fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
.list-search-panel { padding: 14px 16px; }
.list-search-fields > div, .sales-list-filters > label { min-width: 0; }
.list-search-fields label, .sales-list-filters label { font-size: 13px; line-height: 1.5; }
.list-search-fields :is(input, select), .sales-list-filters :is(input, select) { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 8px; font-size: 13px; box-sizing: border-box; }
.sales-list-filters { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 10px; padding: 14px 16px; }
.sales-list-filters > button { min-width: 0; min-height: 36px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 700px) {
  .list-search-fields, .sales-list-filters { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .list-search-fields, .sales-list-filters { grid-template-columns: minmax(0, 1fr); }
}
.list-search-fields label { display: block; margin-bottom: 6px; }
.list-search-fields input, .list-search-fields select { width: 100%; min-width: 0; }
.list-search-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-top: 14px; }
.saved-search-panel { margin-top: 18px; border-top: 1px solid #dce4e8; padding-top: 14px; }
.saved-search-panel summary { cursor: pointer; font-weight: 700; }
.saved-search-list { padding-inline-start: 20px; }
.saved-search-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.saved-search-list form { margin: 0; }
.order-overview .order-status-cards { margin-bottom: 16px; }
.order-overview .order-status-cards article { border-color: #dce4e8; padding: 18px; }
.order-overview .order-status-cards strong { color: #344b59; font-size: 22px; line-height: 1.5; }
.order-status-cards small { display: block; color: #856027; margin-top: 8px; }
.order-financial-summary { padding: 22px; margin-bottom: 12px; }
.order-financial-summary h2 { margin: 0 0 18px; }
.order-money-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.order-money-grid span { display: block; font-size: 13px; color: #61717d; }
.order-money-grid strong { display: block; margin-top: 7px; font-size: 22px; color: #263d49; }
.order-money-footnote { padding-top: 15px; margin-bottom: 0; border-top: 1px solid #e5eaed; color: #61717d; font-size: 13px; }
.order-customer-balance { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 22px; margin-bottom: 24px; background: #edf3f6; border-radius: 8px; font-size: 13px; }
.order-customer-balance small { display: block; margin-top: 4px; color: #61717d; }
.order-next-actions { padding: 20px 24px; border-inline-start: 4px solid #ba8530; background: #fffaf0; }
.order-next-actions h2 { margin: 0 0 10px; }
.order-next-actions ul { padding: 0; margin: 0; list-style: none; }
.order-next-actions li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; }
.order-journal-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5eaed; }
.order-journal-heading h2 { margin: 0 0 4px; }
.order-journal-heading p { margin: 0; color: #61717d; font-size: 13px; }
.order-journal ol { list-style: none; padding: 0 24px; margin: 0; }
.order-journal li + li { border-top: 1px solid #edf0f2; }
.order-event summary { cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 0; list-style: none; }
.order-event summary::-webkit-details-marker { display: none; }
.event-marker { width: 9px; height: 9px; border-radius: 50%; background: #a33d35; flex: 0 0 9px; box-shadow: 0 0 0 4px #f7eeec; }
.event-main { flex: 1; min-width: 0; }
.event-main strong { color: #344b59; }
.event-brief { display: block; margin-top: 4px; color: #61717d; font-size: 13px; overflow-wrap: anywhere; }
.event-main small { display: block; color: #6b7880; margin-top: 4px; }
.event-amount { font-weight: 700; color: #344b59; white-space: nowrap; }
.event-toggle { font-size: 12px; color: #8c3932; white-space: nowrap; }
.event-body { margin: 0 23px 17px; padding: 15px 18px; background: #f6f8fa; border-radius: 6px; overflow-wrap: anywhere; }
.event-body a { display: inline-block; margin-top: 10px; }
.order-detail-fold { border: 1px solid #dce4e8; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.order-detail-fold > summary { cursor: pointer; padding: 17px 22px; font-weight: 700; color: #344b59; background: #f4f7f9; }
.order-detail-fold > .panel { margin: 0; border: 0; border-radius: 0; }
#required-actions { border-color: #e6c58f; border-inline-start: 4px solid #bf8934; border-radius: 10px; box-shadow: 0 3px 12px rgba(133, 92, 28, .07); }
#required-actions > summary { color: #694819; background: #fff4df; transition: background-color .15s ease; }
#required-actions > summary:hover { background: #fbeaca; }
#required-actions > summary:focus-visible { outline-color: #8a5b1b; }
#required-actions > summary::marker { color: #966321; }
#required-actions > summary .pill { margin-inline-start: 10px; padding: 2px 10px; color: #fff; background: #80531c; border: 0; font-weight: 700; }
#required-actions[open] > summary { border-bottom: 1px solid #e6c58f; }
#required-actions > .panel { background: #fffcf6; }
.order-section-title { font-size: 20px; margin: 28px 0 16px; }
.order-event summary:focus-visible, .order-detail-fold > summary:focus-visible { outline: 3px solid #bd3f34; outline-offset: -3px; }
@media (max-width: 760px) {
  .order-money-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .order-customer-balance { align-items: stretch; flex-direction: column; gap: 10px; }
  .order-event summary { flex-wrap: wrap; gap: 10px; }
  .event-main { flex-basis: calc(100% - 25px); }
  .event-amount { margin-inline-start: 23px; }
  .order-next-actions li { flex-wrap: wrap; }
}
.errorlist { color: #982e27; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[dir=rtl] body { font-family: "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
[dir=rtl] .nav-menu { inset-inline-start: 0; }

@media (max-width: 1050px) {
  .topbar { flex-wrap: wrap; }
  .brand { flex-basis: 175px; }
  .primary-nav { order: 3; width: 100%; overflow: visible; min-height: 54px; padding-inline: 10px; }
  .nav-group summary, .nav-direct { min-height: 54px; padding-inline: 13px; }
  .actions { margin-inline-start: auto; min-height: 70px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .brand { flex-basis: 150px; padding-inline: 14px; }
  .brand { font-size: 19px; }
  .actions { padding-inline: 12px; gap: 8px; }
  .user-name { display: none; }
  .primary-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; }
  .nav-group, .nav-direct { width: 100%; }
  .nav-group summary, .nav-direct { width: 100%; min-height: 44px; justify-content: center; padding: 7px 10px; }
  .nav-menu { position: fixed; inset-inline: 10px; inset-block-start: auto; margin-top: 44px; min-width: 0; max-height: 60vh; overflow: auto; border-radius: 8px; }
  .shell { padding: 26px 14px 50px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .metrics, .card-grid, .detail-grid, .image-grid { grid-template-columns: 1fr; }
  .detail-card dl, .detail-list { grid-template-columns: 1fr; }
  .detail-card dd, .detail-list dd { margin-bottom: 8px; }
  th, td { padding: 11px 12px; }
}
/* Keep native small controls usable in full-width forms. */
input[type="checkbox"], input[type="radio"], .form-card input[type="checkbox"], .form-card input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--brand); }
.nav-menu { max-height: calc(100vh - 100px); overflow-y: auto; }
.panel { overflow-x: auto; }

/* Soft brand tint separates section headings from white content. */
.panel-heading { background: #edf2f5; border-bottom-color: #dce3e8; }
.panel-heading h2 { color: #303e49; }

.panel > h2.standalone-heading { margin: 0; display: block; color: #303e49; }
.panel > p { padding-inline: 22px; }

/* Larger navigation bar: desktop height 70px -> 98px (+40%). */
.topbar { min-height: 98px; }
.topbar .brand { font-size: 30px; flex-basis: 215px; }
.nav-group summary, .nav-direct { min-height: 98px; font-size: 18px; white-space: nowrap; }
.topbar .actions { font-size: 18px; }
.topbar .actions select { font-size: 17px; }
.nav-menu a { font-size: 17px; }
.nav-count { min-width: 27px; height: 27px; font-size: 14px; }
.nav-menu { max-height: calc(100vh - 125px); }
@media (max-width: 1250px) {
  .topbar { flex-wrap: wrap; }
  .topbar .actions { margin-inline-start: auto; min-height: 98px; }
  .primary-nav { order: 3; flex-basis: 100%; min-height: 76px; }
  .nav-group summary, .nav-direct { min-height: 76px; }
  .nav-menu { max-height: calc(100vh - 200px); }
}
@media (max-width: 680px) {
  .topbar .brand { flex-basis: 150px; font-size: 26px; }
  .topbar .actions { min-height: 98px; font-size: 16px; gap: 6px; padding-inline: 8px; }
  .topbar .actions select { min-width: 75px; font-size: 15px; }
  .nav-group summary, .nav-direct { min-height: 62px; font-size: 17px; }
  .nav-menu { margin-top: 62px; max-height: 50vh; }
}

/* Consistent, compact page and section headings. */
.shell .page-heading,
.shell h1, .shell h2, .shell h3 {
  background: #edf2f5;
  color: #303e49;
  border: 1px solid #dce3e8;
  border-radius: 8px;
  padding: 14px 20px;
  overflow-wrap: anywhere;
}
.shell .page-heading { align-items: center; margin-bottom: 22px; }
.shell h1 { font-size: 28px; line-height: 1.4; margin: 0 0 20px; }
.shell h2, .shell .panel h2 { font-size: 20px; line-height: 1.5; }
.shell h3 { font-size: 17px; line-height: 1.5; }
/* A heading inside an existing header shares its box rather than nesting one. */
.shell .page-heading :is(h1,h2,h3),
.shell .panel-heading :is(h1,h2,h3) {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0;
}
.shell .page-heading h1 { font-size: 28px; line-height: 1.4; margin: 3px 0 6px; }
.shell .panel > h2.standalone-heading { border: 0; border-bottom: 1px solid #dce3e8; border-radius: 0; }
.shell .panel-heading { padding: 14px 20px; }
@media (max-width: 680px) {
  .shell .page-heading, .shell h1, .shell h2, .shell h3 { padding: 12px 14px; }
  .shell h1, .shell .page-heading h1 { font-size: 24px; }
  .shell h2, .shell .panel h2 { font-size: 18px; }
  .shell h3 { font-size: 16px; }
  .shell .page-heading :is(h1,h2,h3), .shell .panel-heading :is(h1,h2,h3) { padding: 0; }
}

/* Arabic font trial, bundled locally; preserve Latin brand styling. */
html[lang="ar"] body { font-family: "Tajawal", Tahoma, system-ui, sans-serif; }
html[lang="ar"] .topbar .brand { font-family: Inter, Tahoma, system-ui, sans-serif; }

.topbar .brand-logo { display: block; width: 90%; max-width: 171px; height: auto; object-fit: contain; justify-self: center; }

/* Keep desktop navigation and account controls on one aligned row. */
.topbar .actions form, .topbar .link-button { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 1100px) {
  .topbar { flex-wrap: nowrap; }
  .topbar .brand { flex-basis: 170px; padding-inline: 16px; }
  .topbar .primary-nav { order: 0; flex: 1 1 auto; width: auto; padding-inline: 8px; gap: 6px; }
  .topbar .nav-group summary, .topbar .nav-direct { min-height: 98px; font-size: 16px; padding-inline: 10px; gap: 5px; }
  .topbar .actions { flex-shrink: 0; margin-inline-start: 0; gap: 8px; padding-inline: 12px; font-size: 15px; }
  .topbar .actions select { min-width: 76px; font-size: 14px; padding-inline: 8px; }
  .topbar .nav-count { min-width: 23px; height: 23px; font-size: 12px; padding-inline: 5px; }
}
@media (min-width: 1100px) and (max-width: 1400px) {
  .topbar .brand { flex-basis: 145px; padding-inline: 10px; }
  .topbar .nav-group summary, .topbar .nav-direct { font-size: 14px; padding-inline: 7px; }
  .topbar .actions { font-size: 13px; gap: 6px; padding-inline: 8px; }
  .topbar .actions select { min-width: 70px; font-size: 13px; }
}

.dashboard-metrics article { background: #fff; border-color: var(--brand); }
.dashboard-metrics article span, .dashboard-metrics article strong { color: var(--brand); }

/* Increase dashboard metric labels only by 15%. */
.dashboard-metrics article > span { font-size: 115%; }

.action-buttons { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; vertical-align: bottom; }

/* Compact, readable document facts. */
p.document-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; color: #000; line-height: 1.8; }
p.document-facts > span { color: #000; }

/* Keep visible separators between document facts. */
p.document-facts > span + span::before { content: "|"; display: inline-block; margin-inline-end: 20px; color: #000; }

/* Keep login fields vertically aligned in Arabic and English. */
.login-card { width: 100%; max-width: 480px; margin-inline: auto; padding: 24px; }
.login-card form.stack { display: grid; gap: 18px; }
.login-card form.stack > div { display: grid; gap: 7px; min-width: 0; }
.login-card form.stack label { display: block; }
.login-card form.stack input { width: 100%; min-width: 0; }
.login-card form.stack button { justify-self: start; }
.login-card .errorlist { margin: 0; }

.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 16px 24px; }
.order-actions > form { display: block; margin: 0; padding: 0; }
.order-actions .button, .order-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; box-sizing: border-box; }

.payment-review-form { display: grid; gap: 10px; min-width: 160px; margin: 0; }
.payment-review-form textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; }
.payment-review-actions { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.payment-review-actions button { flex: 1; margin: 0; white-space: nowrap; }

/* Proposed payment facts on the sales approval page. */
.proposed-payment-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 24px; }
.proposed-payment-details > div { min-width: 0; padding: 16px; border: 1px solid #dce3e8; border-radius: 8px; background: #f8fafb; }
.proposed-payment-details dt { margin: 0 0 8px; color: #52616d; font-size: 14px; font-weight: 600; }
.proposed-payment-details dd { margin: 0; color: #243441; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.proposed-payment-details .proposed-payment-amount { color: var(--brand); font-size: 20px; font-weight: 700; }
.proposed-payment-details .proposed-payment-notes { grid-column: 1 / -1; background: #fff; }
@media (max-width: 900px) { .proposed-payment-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proposed-payment-details { grid-template-columns: minmax(0, 1fr); } }

/* Correction and return forms share readable labels and compact spacing. */
.dispatch-operation-form { display: grid; gap: 16px; margin-block: 16px 24px; padding: 20px; border: 1px solid #dce3e8; border-radius: 8px; background: #fff; }
.dispatch-operation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.dispatch-operation-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.dispatch-operation-field label { display: block; margin: 0; font-weight: 600; }
.dispatch-operation-field :is(input,select,textarea) { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0; box-sizing: border-box; }
.dispatch-operation-wide { grid-column: 1 / -1; }
.dispatch-operation-form textarea { min-height: 90px; resize: vertical; }
.dispatch-operation-form > button, .dispatch-operation-form > .action-buttons { justify-self: start; margin: 0; }
.dispatch-operation-form .errorlist { margin: 0; }
.amendment-review-form { display: grid; gap: 10px; width: 100%; max-width: 640px; margin: 0; padding-block-start: 16px; border-block-start: 1px solid #dce3e8; }
.amendment-review-form label { font-weight: 650; }
.amendment-review-form textarea { display: block; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; margin: 0; }
.amendment-review-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 4px; }
.amendment-review-actions button { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 160px; min-height: 44px; margin: 0; box-sizing: border-box; }
.amendment-review-actions .button.secondary:hover { background: #fbeceb; }
@media (max-width: 480px) { .amendment-review-actions button { flex: 1 1 140px; } }
@media (max-width: 640px) { .dispatch-operation-fields { grid-template-columns: minmax(0, 1fr); } .dispatch-operation-form { padding: 14px; } }

.quantity-progress-caption { margin: 16px 0 8px; font-weight: 600; }
.quantity-progress-table { min-width: 860px; }
.quantity-progress-table th, .quantity-progress-table td { text-align: center; vertical-align: middle; }
.quantity-progress-table th:first-child, .quantity-progress-table td:first-child { text-align: start; }
.shell .quantity-progress-table th { white-space: normal; overflow-wrap: normal; word-break: normal; min-width: 85px; line-height: 1.6; }
.quantity-progress-note { display: block; margin-top: 6px; color: #8b3b27; font-size: 12px; line-height: 1.6; }

/* Keep each payment's notes on a separate full-width row. */
.recorded-payments-table .payment-notes-row td { padding: 12px 16px 18px; border-bottom: 2px solid #dce3e8; background: #f8fafb; }
.payment-notes-content { min-width: 0; text-align: start; }
.payment-notes-content strong { display: block; margin-bottom: 6px; color: #52616d; }
.payment-notes-content > div { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }

/* Free text must not determine the width of the operational columns. */
.shell td, .shell th, .shell li, .shell p { overflow-wrap: anywhere; }
.samples-table { min-width: 1000px; }
.shell .samples-table th, .shell .samples-table td {
  padding: 15px 12px;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.7;
}
.samples-table th { white-space: nowrap; }
.samples-table td:nth-child(1), .samples-table td:nth-child(2),
.samples-table td:nth-child(6), .samples-table td:nth-child(7),
.samples-table td:nth-child(8) { white-space: nowrap; }
.samples-table th:nth-child(6), .samples-table td:nth-child(6),
.samples-table th:nth-child(7), .samples-table td:nth-child(7),
.samples-table th:nth-child(8), .samples-table td:nth-child(8) { text-align: center; }
.samples-table td:nth-child(3) { min-width: 100px; }
.samples-table td:nth-child(4) { min-width: 160px; }
.samples-table td:nth-child(5) { min-width: 140px; }
.samples-table td:last-child { min-width: 135px; }
.record-detail-row > td { padding: 12px 16px 18px; background: #f8fafb; border-bottom: 2px solid #dce3e8; }
.record-detail-content { min-width: 0; text-align: start; }
.record-detail-content > strong { display: block; margin-bottom: 6px; color: #52616d; }
.record-detail-content > div, .long-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }
.review-reason { display: grid; gap: 8px; margin-block: 12px; max-width: 720px; }
.review-reason textarea { width: 100%; box-sizing: border-box; }
.payment-review-actions { flex-wrap: wrap; }
.payment-review-actions button { flex: 1 1 auto; }
.order-actions > button, .action-buttons > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.record-table { min-width: 680px; }
.record-table th { overflow-wrap: normal; }

.payment-source-breakdown { display: block; margin-block-start: 6px; color: var(--muted); font-size: .85em; }

.allocation-requests-table { min-width: 620px; }
.shell .allocation-requests-table th, .shell .allocation-requests-table td { vertical-align: middle; overflow-wrap: normal; word-break: normal; }
.allocation-requests-table th:nth-child(3), .allocation-requests-table td:nth-child(3),
.allocation-requests-table th:nth-child(4), .allocation-requests-table td:nth-child(4) { white-space: nowrap; text-align: center; }
.allocation-review-row > td { background: #f8fafb; padding: 18px 22px; border-bottom: 2px solid #dce3e8; }
.allocation-review-form { display: grid; gap: 10px; max-width: 580px; margin: 0; }
.allocation-review-form label { display: block; }
.allocation-review-form textarea { display: block; width: 100%; min-height: 80px; box-sizing: border-box; resize: vertical; }
.allocation-review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.allocation-review-actions button { min-width: 100px; margin: 0; }
.allocation-review-actions .allocation-reject-button { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.allocation-review-actions .allocation-reject-button:hover { background: #fff1ef; }