/* User Management access editor */
form.modal[data-workflow="user-record"] { width: min(1080px, 100%); }
form.modal[data-workflow="user-record"] .modal-head { padding: 24px 28px 18px; }
form.modal[data-workflow="user-record"] .modal-head h2 { font-size: 20px; }
form.modal[data-workflow="user-record"] .modal-body { padding: 22px 28px 26px; background: #f8fbfa; }
form.modal[data-workflow="user-record"] .modal-footer { padding: 16px 28px 22px; border-top: 1px solid var(--line); background: #fff; }

.user-details-card,
.permission-section { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 18px; }
.user-details-card { margin-bottom: 16px; }
.user-section-heading { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 16px; }
.user-section-heading h3 { margin: 2px 0 0; color: var(--ink); font-size: 15px; }
.user-section-heading p { margin: 1px 0 0; max-width: 460px; color: var(--muted); font-size: 11px; text-align: end; }
.user-kicker { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.user-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-form-grid .field:last-child { grid-column: 2 / 3; }

.permission-intro { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 14px; border: 1px solid #c9e5da; border-radius: 9px; background: var(--green-pale); color: #28665d; font-size: 11px; }
.permission-intro b { color: var(--green-dark); font-size: 11px; white-space: nowrap; }
.permission-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.permission-group { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.permission-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 12px; }
.permission-row > span { min-width: 0; }
.permission-row b { display: block; color: var(--ink); font-size: 12px; }
.permission-row small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.permission-row select { flex: 0 0 112px; width: 112px; border: 1px solid #ceddd8; border-radius: 7px; padding: 7px 25px 7px 8px; background: #fff; color: var(--ink); font-size: 11px; }
.permission-row:not(.child) { background: #f2f8f5; border-bottom: 1px solid var(--line); }
.permission-row:not(.child) b::before { content: "•"; color: var(--green); margin-inline-end: 6px; }
.permission-children { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-row.child { min-height: 48px; border-top: 1px solid #edf2ef; }
.permission-row.child:nth-child(-n+2) { border-top: 0; }
.permission-row.child:nth-child(odd) { border-inline-end: 1px solid #edf2ef; }
.permission-row.child select { flex-basis: 94px; width: 94px; }

@media (max-width: 800px) {
  form.modal[data-workflow="user-record"] .modal-head,
  form.modal[data-workflow="user-record"] .modal-body,
  form.modal[data-workflow="user-record"] .modal-footer { padding-inline: 18px; }
  .user-section-heading { display: block; }
  .user-section-heading p { margin-top: 5px; text-align: start; }
  .user-form-grid,
  .permission-matrix,
  .permission-children { grid-template-columns: 1fr; }
  .user-form-grid .field:last-child { grid-column: auto; }
  .permission-row.child:nth-child(odd) { border-inline-end: 0; }
  .permission-row.child:nth-child(2) { border-top: 1px solid #edf2ef; }
}

/* Operational landing pages for users, shelters, and warehouses. */
.management-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0 0 17px; }
.management-stat { position: relative; min-height: 124px; overflow: hidden; padding: 16px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 2px 6px #153f3806; }
.management-stat::after { position: absolute; inset-inline-end: -22px; bottom: -32px; width: 90px; height: 90px; border-radius: 50%; background: var(--green-pale); content: ""; opacity: .75; }
.management-stat.blue::after { background: var(--blue-pale); }
.management-stat.amber::after { background: var(--amber-pale); }
.management-stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 750; }
.management-stat-top i { position: relative; z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; font-style: normal; font-weight: 900; }
.management-stat.blue .management-stat-top i { background: var(--blue-pale); color: var(--blue); }
.management-stat.amber .management-stat-top i { background: var(--amber-pale); color: var(--amber); }
.management-stat > b { position: relative; z-index: 1; display: block; margin: 13px 0 1px; color: var(--ink); font-size: 26px; line-height: 1; letter-spacing: -.9px; }
.management-stat > small { position: relative; z-index: 1; display: block; max-width: 185px; color: var(--muted); font-size: 10px; }

.management-directory { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 4px 13px #153f3805; }
.management-directory-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 20px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, #fbfdfc, #f2f8f5); }
.management-kicker { display: block; color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.management-directory-head h2 { margin: 4px 0 3px; color: var(--ink); font-size: 17px; letter-spacing: -.2px; }
.management-directory-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; }
.management-note { flex: 0 0 auto; margin-top: 3px; border: 1px solid #cbe4da; border-radius: 999px; padding: 6px 9px; background: #fff; color: var(--green-dark); font-size: 10px; font-weight: 750; text-align: center; }
.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.management-card { position: relative; min-width: 0; border: 1px solid #dae7e2; border-radius: 13px; background: #fff; padding: 16px; transition: border-color .18s, box-shadow .18s, transform .18s; }
.management-card:hover { border-color: #bcdcd1; box-shadow: 0 8px 20px #153f3810; transform: translateY(-1px); }
.management-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.management-ident { display: flex; min-width: 0; align-items: center; gap: 10px; }
.management-ident > div { min-width: 0; }
.management-ident h3 { overflow: hidden; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.management-ident p { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.management-avatar { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: var(--green-dark); font-size: 12px; font-weight: 900; }
.user-avatar { background: #dff1ea; }
.shelter-avatar { background: var(--blue-pale); color: var(--blue); }
.warehouse-avatar { background: #fff0da; color: var(--amber); }
.management-card .status { margin-top: 1px; }
.management-location { display: flex; min-height: 38px; align-items: center; gap: 7px; margin-top: 14px; border-top: 1px solid #edf2ef; color: var(--muted); font-size: 11px; }
.management-location span { color: var(--green); font-size: 14px; }
.management-card footer { display: flex; min-height: 35px; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 11px; border-top: 1px solid #edf2ef; }
.management-footer-note { color: var(--muted); font-size: 10px; }
.management-card .table-actions { display: flex; gap: 11px; align-items: center; white-space: nowrap; }
.management-card .link-btn { font-size: 11px; }
.management-card .danger-link { color: var(--red); }

.user-role-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf2ef; }
.user-role-row .role-label, .access-block small, .warehouse-owner small, .category-block > small { display: block; color: var(--muted); font-size: 10px; }
.user-role-row b { color: var(--ink-2); font-size: 11px; }
.access-block { display: grid; grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 10px; min-height: 48px; padding: 10px 11px; border-radius: 9px; background: #f6faf8; }
.access-block b { display: block; margin-top: 1px; color: var(--ink); font-size: 11px; }
.permission-summary { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.permission-pill { border-radius: 999px; padding: 3px 6px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.permission-pill.admin { background: #e7f0fb; color: #386895; }
.permission-pill.user { background: var(--green-pale); color: #176457; }
.permission-pill.read_only { background: #f0f3f2; color: #627a75; }

.capacity-block { margin-top: 4px; border-radius: 10px; padding: 11px; background: #f6faf8; }
.capacity-block > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.capacity-block > div:first-child b { color: var(--ink); font-size: 15px; }
.capacity-block small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.capacity-meter { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e2ebe7; }
.capacity-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.capacity-meter i.warn { background: var(--amber); }
.management-key-values { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 12px; border: 1px solid #edf2ef; border-radius: 9px; overflow: hidden; }
.management-key-values span { padding: 8px 10px; border-inline-end: 1px solid #edf2ef; }
.management-key-values span:last-child { border-inline-end: 0; }
.management-key-values small { display: block; color: var(--muted); font-size: 9px; }
.management-key-values b { display: block; margin-top: 1px; color: var(--ink); font-size: 12px; }

.warehouse-owner { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #edf2ef; }
.owner-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: #f0f5f3; color: var(--green); font-size: 13px; }
.warehouse-owner b { display: block; color: var(--ink); font-size: 11px; }
.category-block { min-height: 50px; padding: 10px 0 2px; border-top: 1px solid #edf2ef; }
.category-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.category-pills span { border-radius: 999px; padding: 3px 7px; background: var(--amber-pale); color: #97601e; font-size: 9px; font-weight: 800; }
.category-pills .muted-pill { background: #f0f3f2; color: var(--muted); }
.management-empty { display: grid; min-height: 250px; grid-column: 1 / -1; place-items: center; align-content: center; padding: 30px; border: 1px dashed #b9d8cd; border-radius: 13px; background: #fbfdfc; text-align: center; }
.management-empty-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--green-pale); color: var(--green); font-size: 22px; }
.management-empty h3 { margin: 11px 0 3px; color: var(--ink); font-size: 14px; }
.management-empty p { max-width: 330px; margin: 0 0 13px; color: var(--muted); font-size: 11px; }

@media (max-width: 1050px) {
  .management-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .management-overview, .management-grid { grid-template-columns: 1fr; }
  .management-directory-head { display: block; }
  .management-note { display: inline-block; margin-top: 10px; }
}
@media (max-width: 480px) {
  .management-directory-head, .management-grid { padding: 14px; }
  .access-block { grid-template-columns: 1fr; }
  .permission-summary { justify-content: flex-start; }
  .management-card footer { align-items: flex-start; flex-direction: column; }
}

/* Warehouse-linked Store product masters and stock history. */
.store-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0 0 17px; }
.store-stat { min-height: 112px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 2px 6px #153f3806; }
.store-stat small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .65px; }
.store-stat b { display: block; margin: 9px 0 2px; color: var(--ink); font-size: 26px; line-height: 1; letter-spacing: -.8px; }
.store-stat span { color: var(--muted); font-size: 10px; }
.store-stat.attention { border-color: #efd9b5; background: linear-gradient(145deg, #fff, #fff9ef); }
.store-stat.attention b { color: var(--amber); }
.inventory-directory { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 4px 13px #153f3805; }
.inventory-directory-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 19px 20px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, #fbfdfc, #f2f8f5); }
.inventory-directory-head h2 { margin: 4px 0 3px; color: var(--ink); font-size: 17px; letter-spacing: -.2px; }
.inventory-directory-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; }
.inventory-directory .table-card { border: 0; border-radius: 0; }
.inventory-table { min-width: 690px; table-layout: fixed; }
.inventory-table th, .inventory-table td { padding-inline: 11px; }
.inventory-table th:nth-child(1) { width: 24%; }
.inventory-table th:nth-child(2) { width: 19%; }
.inventory-table th:nth-child(3) { width: 16%; }
.inventory-table th:nth-child(4) { width: 16%; }
.inventory-table th:nth-child(5) { width: 12%; }
.inventory-table th:nth-child(6) { width: 13%; }
.inventory-product { display: flex; min-width: 0; align-items: center; gap: 9px; }
.inventory-product > span:last-child { min-width: 0; }
.inventory-product b { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-product small { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-product-mark { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; font-weight: 900; }
.inventory-actions { display: flex; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.inventory-actions .link-btn { font-size: 10px; }
.inventory-form-grid .field.full textarea { min-height: 74px; }
.inventory-history-modal { width: min(760px, 100%); }
.movement-list { display: grid; gap: 0; }
.movement-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #edf2ef; }
.movement-row:first-child { border-top: 0; }
.movement-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 18px; font-weight: 900; }
.movement-icon.out { background: var(--amber-pale); color: var(--amber); }
.movement-row b { display: block; color: var(--ink); font-size: 12px; text-transform: capitalize; }
.movement-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.movement-row strong { font-size: 11px; white-space: nowrap; }
.movement-row strong.positive { color: var(--green); }
.movement-row strong.negative { color: var(--amber); }
.production-toolbar { align-items: flex-end; }
.production-entry-controls { display: flex; align-items: flex-end; gap: 10px; }
.compact-field { min-width: 144px; }
.compact-field input, .compact-field select { min-width: 144px; }
.production-entry-controls .compact-field:last-child { min-width: 250px; }
.production-entry-controls .compact-field:last-child select { min-width: 250px; }
.inventory-inline-warning { margin: -2px 0 15px; border: 1px solid #efd9b5; border-radius: 9px; padding: 9px 11px; background: #fff9ef; color: #956116; font-size: 11px; }

@media (max-width: 1050px) {
  .store-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .store-overview { grid-template-columns: 1fr; }
  .inventory-directory-head { display: block; }
  .inventory-directory-head .management-note { display: inline-block; margin-top: 10px; }
  .production-toolbar, .production-entry-controls { align-items: stretch; flex-direction: column; }
  .production-entry-controls .compact-field, .production-entry-controls .compact-field input, .production-entry-controls .compact-field select { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .inventory-directory-head { padding: 15px; }
  .movement-row { grid-template-columns: 31px minmax(0, 1fr); }
  .movement-row strong { grid-column: 2; }
}

/* Product Catalogue: classified master data, price governance, and fast finding. */
.catalogue-overview { margin-bottom: 17px; }
.catalogue-toolbar { display: grid; grid-template-columns: minmax(230px, 1.55fr) repeat(5, minmax(132px, .7fr)) auto; gap: 10px; align-items: end; padding: 15px 16px; border-bottom: 1px solid var(--line); background: #fbfdfc; }
.catalogue-search { display: flex; min-height: 38px; align-items: center; gap: 8px; border: 1px solid #cbdcd5; border-radius: 9px; padding: 0 10px; background: #fff; color: var(--green); }
.catalogue-search input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.catalogue-filter { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 780; letter-spacing: .4px; text-transform: uppercase; }
.catalogue-filter select { width: 100%; min-height: 38px; border: 1px solid #cbdcd5; border-radius: 8px; padding: 0 26px 0 9px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; text-transform: none; }
.catalogue-clear { align-self: end; min-height: 38px; white-space: nowrap; }
.catalogue-result-bar { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #edf2ef; background: #fff; color: var(--muted); font-size: 10px; }
.catalogue-result-bar b { color: var(--ink); }
.catalogue-result-hint { max-width: 600px; text-align: end; }
.catalogue-table { min-width: 970px; table-layout: fixed; }
.catalogue-table th, .catalogue-table td { vertical-align: top; }
.catalogue-table th:nth-child(1) { width: 24%; }
.catalogue-table th:nth-child(2) { width: 19%; }
.catalogue-table th:nth-child(3) { width: 12%; }
.catalogue-table th:nth-child(4) { width: 21%; }
.catalogue-table th:nth-child(5) { width: 12%; }
.catalogue-table th:nth-child(6) { width: 12%; }
.catalogue-product { display: flex; min-width: 0; align-items: center; gap: 9px; }
.catalogue-product-mark { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 10px; background: var(--green-pale); color: var(--green); font-size: 15px; font-weight: 900; }
.catalogue-product-mark.medicine { background: #fff0da; color: #9b641c; }
.catalogue-product-mark.farm_output { background: var(--blue-pale); color: var(--blue); }
.catalogue-product-mark.other { background: #f0f3f2; color: #637a74; }
.catalogue-product > span:last-child { min-width: 0; }
.catalogue-product b { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-product small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-code { color: var(--green-dark); font-size: 9px; font-weight: 850; letter-spacing: .65px; }
.catalogue-classification { display: grid; gap: 4px; }
.catalogue-category { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 3px 7px; background: #edf7f2; color: var(--green-dark); font-size: 9px; font-weight: 800; }
.catalogue-category.medicine { background: #fff0da; color: #956016; }
.catalogue-category.farm_output { background: #eaf2fb; color: #3f6f9b; }
.catalogue-category.other { background: #f0f3f2; color: #637a74; }
.catalogue-classification b { color: var(--ink); font-size: 11px; line-height: 1.25; }
.catalogue-classification small, .catalogue-unit small, .catalogue-store small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.catalogue-unit b, .catalogue-store b { color: var(--ink); font-size: 11px; }
.catalogue-price-cell { display: grid; gap: 3px; }
.catalogue-price-main { color: var(--ink); font-size: 12px; font-weight: 850; }
.catalogue-price-main.unset { color: var(--amber); }
.catalogue-price-caption { color: var(--muted); font-size: 9px; }
.catalogue-actual-cost { color: var(--green-dark); font-size: 10px; }
.catalogue-actual-cost.pending { color: var(--muted); }
.catalogue-price-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.catalogue-price-actions .link-btn { padding: 0; font-size: 10px; }
.catalogue-actions { display: flex; justify-content: flex-end; gap: 9px; white-space: nowrap; }
.catalogue-actions .link-btn { font-size: 10px; }
.catalogue-empty { padding: 43px 24px !important; text-align: center; }
.catalogue-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.catalogue-empty span { color: var(--muted); font-size: 11px; }
.catalogue-governance { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; margin: 15px 16px 0; border: 1px solid #c8e4d9; border-radius: 10px; padding: 10px 12px; background: linear-gradient(100deg, #f7fcf9, #f0f8f4); }
.catalogue-governance > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; font-style: normal; font-weight: 900; }
.catalogue-governance b { display: block; color: var(--green-dark); font-size: 11px; }
.catalogue-governance span { display: block; margin-top: 2px; color: #527a70; font-size: 10px; line-height: 1.35; }
.catalogue-product-editor .catalogue-governance { grid-column: 1 / -1; margin: 0 0 4px; }
.product-medicine-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 15px; }
.product-medicine-fields[hidden] { display: none; }
.product-medicine-fields > .field.full { grid-column: 1 / -1; }
.product-editor-hint { grid-column: 1 / -1; margin: -2px 0 1px; color: var(--muted); font-size: 10px; }
.catalogue-price-modal { width: min(820px, 100%); }
.catalogue-price-context { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: #f8fbfa; }
.catalogue-price-context b { display: block; color: var(--ink); font-size: 12px; }
.catalogue-price-context small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
/* Reference-price changes are effective-dated: make that guidance and any
   inline validation unmistakable without changing the shared modal pattern. */
[data-workflow="catalogue-price-change"] { border: 1px solid #d6e7e0; box-shadow: 0 26px 64px #08221e5c; }
[data-workflow="catalogue-price-change"] .modal-head { position: relative; border-bottom-color: #d7e7e1; padding-bottom: 17px; background: linear-gradient(108deg, #f9fdfb 0%, #f0f8f4 100%); }
[data-workflow="catalogue-price-change"] .modal-head > div { max-inline-size: 540px; }
[data-workflow="catalogue-price-change"] .modal-head h2 { color: var(--green-dark); letter-spacing: -.2px; }
[data-workflow="catalogue-price-change"] .modal-head p { margin-top: 6px; color: #54776f; line-height: 1.5; }
[data-workflow="catalogue-price-change"] .modal-body { padding-top: 17px; }
[data-workflow="catalogue-price-change"] .catalogue-price-context { border-color: #c8e3d7; padding: 12px; background: linear-gradient(105deg, #f7fcf9, #eff8f4); box-shadow: inset 3px 0 0 var(--green); }
[data-workflow="catalogue-price-change"] .catalogue-price-context .catalogue-product-mark { box-shadow: 0 0 0 4px #0a74680d; }
[data-workflow="catalogue-price-change"] .catalogue-price-context small { margin-top: 3px; color: #52766d; }
[data-workflow="catalogue-price-change"] .field { position: relative; gap: 7px; }
[data-workflow="catalogue-price-change"] .field input { min-block-size: 42px; border-color: #c7dcd4; background: #fefefe; }
[data-workflow="catalogue-price-change"] .field input:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px #0a74681a; }
[data-workflow="catalogue-price-change"] .field input:invalid:not(:placeholder-shown),
[data-workflow="catalogue-price-change"] .field input:invalid:focus { border-color: #d2766d; box-shadow: 0 0 0 3px #bd4d4214; }
[data-workflow="catalogue-price-change"] .field:has(input[type="number"])::after { align-self: center; color: var(--muted); content: "Planning value"; font-size: 9px; font-weight: 700; grid-column: 1; letter-spacing: .25px; text-transform: uppercase; }
html[dir="rtl"] [data-workflow="catalogue-price-change"] .field:has(input[type="number"])::after { content: "قيمة التخطيط"; }
[data-workflow="catalogue-price-change"] .catalogue-price-feedback,
[data-workflow="catalogue-price-change"] .catalogue-price-status,
[data-workflow="catalogue-price-change"] .catalogue-price-error,
[data-workflow="catalogue-price-change"] .field-validation-message { display: flex; align-items: flex-start; gap: 8px; grid-column: 1 / -1; margin-top: -3px; border: 1px solid #d4e5df; border-radius: 9px; padding: 9px 10px; background: #f6fbf9; color: #426c62; font-size: 10px; font-weight: 650; line-height: 1.45; }
[data-workflow="catalogue-price-change"] .catalogue-price-feedback { margin-top: 13px; }
[data-workflow="catalogue-price-change"] .field-validation-message[hidden] { display: none; }
[data-workflow="catalogue-price-change"] .catalogue-price-feedback::before,
[data-workflow="catalogue-price-change"] .catalogue-price-status::before,
[data-workflow="catalogue-price-change"] .field-validation-message::before { flex: 0 0 auto; color: var(--green); content: "i"; font-family: Georgia, serif; font-size: 13px; font-weight: 800; line-height: 1; }
[data-workflow="catalogue-price-change"] .catalogue-price-error,
[data-workflow="catalogue-price-change"] .field-validation-message.error { border-color: #efc2bb; background: #fff8f7; color: #9f463d; }
[data-workflow="catalogue-price-change"] .catalogue-price-error::before,
[data-workflow="catalogue-price-change"] .field-validation-message.error::before { flex: 0 0 auto; color: var(--red); content: "!"; font-size: 12px; font-weight: 900; line-height: 1.15; }
[data-workflow="catalogue-price-change"] .modal-footer { padding-top: 2px; }
[data-workflow="catalogue-price-change"] .modal-footer .btn-primary { min-inline-size: 176px; }
.catalogue-price-discard-prompt { z-index: 40; }
.catalogue-price-discard-prompt .catalogue-price-feedback { display: flex; align-items: flex-start; gap: 8px; border: 1px solid #d4e5df; border-radius: 9px; padding: 10px 11px; background: #f6fbf9; color: #426c62; font-size: 11px; line-height: 1.5; }
.catalogue-price-discard-prompt .catalogue-price-feedback::before { flex: 0 0 auto; color: var(--green); content: "i"; font-family: Georgia, serif; font-size: 14px; font-weight: 800; line-height: 1; }
.price-history-list { display: grid; margin-top: 15px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.price-history-row { display: grid; grid-template-columns: minmax(125px, .8fr) minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 12px; border-top: 1px solid #edf2ef; }
.price-history-row:first-child { border-top: 0; }
.price-history-row.current { background: #f4fbf7; }
.price-history-row b { color: var(--ink); font-size: 12px; }
.price-history-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.price-history-row .status { justify-self: end; }
.catalogue-history-note { margin-top: 13px; border: 1px solid #d8e6e1; border-radius: 9px; padding: 10px 11px; background: #fbfdfc; color: var(--muted); font-size: 10px; line-height: 1.45; }
.catalogue-lot-summary { margin-top: 15px; }
.catalogue-lot-summary h3 { margin: 0 0 7px; color: var(--ink); font-size: 12px; }
.catalogue-lot-summary p { margin: 0; color: var(--muted); font-size: 10px; }

@media (max-width: 1320px) {
  .catalogue-toolbar { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(135px, 1fr)); }
  .catalogue-clear { grid-column: 3 / 4; }
}
@media (max-width: 760px) {
  .catalogue-toolbar { grid-template-columns: 1fr 1fr; }
  .catalogue-search { grid-column: 1 / -1; }
  .catalogue-clear { grid-column: auto; }
  .catalogue-result-bar { align-items: flex-start; flex-direction: column; }
  .catalogue-result-hint { text-align: start; }
  .product-medicine-fields { grid-template-columns: 1fr; }
  [data-workflow="catalogue-price-change"] .modal-head { padding: 17px 16px 14px; }
  [data-workflow="catalogue-price-change"] .modal-body { padding: 15px 16px 17px; }
  [data-workflow="catalogue-price-change"] .modal-footer { padding: 0 16px 16px; }
  [data-workflow="catalogue-price-change"] .modal-footer .btn-primary { flex: 1 1 auto; }
  .price-history-row { grid-template-columns: 1fr; gap: 4px; }
  .price-history-row .status { justify-self: start; }
}

/* Finance-led Store receipts. */
.finance-workflow-note { display: flex; align-items: center; gap: 12px; margin: -7px 0 18px; border: 1px solid #c9e5da; border-radius: 12px; padding: 12px 14px; background: linear-gradient(100deg, #f7fcf9, #eff8f4); }
.finance-workflow-note > span { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--green-pale); color: var(--green); font-weight: 900; }
.finance-workflow-note b { display: block; color: var(--green-dark); font-size: 12px; }
.finance-workflow-note p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.purchase-receipt-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 17px; border: 1px solid #c9e5da; border-radius: 10px; padding: 10px; background: #f5fbf8; color: var(--green-dark); font-size: 10px; }
.purchase-receipt-note b { font-size: 10px; }
.purchase-receipt-note span { color: var(--green); font-weight: 900; }
.purchase-form-divider { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; margin-top: 2px; padding: 11px 12px; border-radius: 9px; background: #f4f8f6; color: var(--ink); }
.purchase-form-divider b { font-size: 12px; }
.purchase-form-divider span { color: var(--muted); font-size: 10px; }
.purchase-total-hint { grid-column: 1 / -1; border: 1px solid #dbe8e2; border-radius: 9px; padding: 9px 11px; background: #fbfdfc; color: var(--muted); font-size: 10px; }
.finance-table td:nth-child(3) { min-width: 190px; }

@media (max-width: 800px) {
  .finance-workflow-note { align-items: flex-start; }
  .purchase-receipt-note { align-items: flex-start; flex-direction: column; }
  .purchase-receipt-note span { display: none; }
  .purchase-form-divider { display: block; }
  .purchase-form-divider span { display: block; margin-top: 3px; }
}

/* Guided Product Catalogue builder. */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
form.modal.product-builder-modal { display: flex; flex-direction: column; width: min(1040px, 100%); max-height: min(92vh, 900px); overflow: hidden; background: #f7faf8; }
.product-builder-head { flex: 0 0 auto; padding: 23px 27px 19px; border-bottom: 1px solid #d9e7e1; background: linear-gradient(118deg, #ffffff 0%, #f2faf6 63%, #e9f5ef 100%); }
.product-builder-head > div { min-inline-size: 0; }
.product-builder-head h2 { margin-top: 6px; font-size: 21px; letter-spacing: -.35px; }
.product-builder-head p { max-inline-size: 700px; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.product-builder-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--green-dark); font-size: 10px; font-weight: 850; letter-spacing: .85px; text-transform: uppercase; }
.product-builder-eyebrow span { border-radius: 999px; padding: 4px 7px; background: var(--green-pale); color: var(--green-dark); }
.product-builder-eyebrow small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .25px; text-transform: none; }
.product-builder-head .close { flex: 0 0 auto; border: 1px solid #d6e5df; background: #fff; transition: background .18s, border-color .18s, transform .18s; }
.product-builder-head .close:hover { border-color: #b9d9ce; background: var(--green-pale); transform: translateY(-1px); }
.product-builder-body { display: grid; flex: 1 1 auto; min-block-size: 0; gap: 15px; overflow: auto; padding: 19px 27px 28px; background: #f7faf8; overscroll-behavior: contain; scroll-padding-block: 4px 30px; scrollbar-gutter: stable; }
.product-builder-section { min-inline-size: 0; border: 1px solid #dbe8e3; border-radius: 14px; padding: 17px; background: #fff; box-shadow: 0 2px 5px #153f3805; }
.product-section-head { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 14px; }
.product-section-head > div { min-inline-size: 0; }
.product-section-number { display: grid; inline-size: 28px; block-size: 28px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.product-section-head h3 { margin: 1px 0 2px; color: var(--ink); font-size: 14px; letter-spacing: -.15px; }
.product-section-head p { max-inline-size: 680px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.product-section-required, .product-locked-badge { align-self: center; border: 1px solid #cfe5db; border-radius: 999px; padding: 4px 7px; background: #f8fcfa; color: var(--green-dark); font-size: 9px; font-weight: 800; white-space: nowrap; }
.product-locked-badge { border-color: #dce3e0; background: #f5f7f6; color: #627a74; }
.product-category-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; border: 0; padding: 0; }
.product-category-choice { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 17px; gap: 8px; min-block-size: 128px; align-content: start; align-items: start; border: 1px solid #d5e4de; border-radius: 12px; padding: 12px; background: #fff; color: var(--ink); cursor: pointer; text-align: start; transition: border-color .18s, box-shadow .18s, background .18s, transform .18s; }
.product-category-choice:hover { border-color: #a9d1c3; box-shadow: 0 7px 16px #153f3810; transform: translateY(-1px); }
.product-category-choice.selected { border-color: #6bb69f; background: linear-gradient(145deg, #ffffff, #eff9f4); box-shadow: 0 0 0 2px #0a746814; }
.product-category-choice-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; opacity: 0; }
.product-category-choice:has(.product-category-choice-input:focus-visible) { outline: 3px solid #0a746833; outline-offset: 2px; }
.product-category-choice-input:focus-visible + .product-category-choice-icon { outline: 3px solid #0a746833; outline-offset: 2px; }
.product-category-choice-icon { display: grid; grid-area: auto !important; align-self: start; justify-self: start; inline-size: 33px; block-size: 33px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; font-weight: 900; }
.product-category-choice-icon.medicine { background: #fff0da; color: #97601e; }
.product-category-choice-icon.farm_output { background: var(--blue-pale); color: var(--blue); }
.product-category-choice-icon.other { background: #f0f3f2; color: #617771; }
.product-category-choice-copy { grid-area: auto !important; min-inline-size: 0; text-align: start; }
.product-category-choice-copy b { display: block; color: var(--ink); font-size: 11px; line-height: 1.25; }
.product-category-choice-copy small { display: -webkit-box; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.product-category-choice-check { display: grid; grid-area: auto !important; justify-self: end; inline-size: 17px; block-size: 17px; place-items: center; border: 1px solid #cfddd7; border-radius: 50%; color: transparent; font-size: 10px; font-weight: 900; }
.product-category-choice.selected .product-category-choice-check { border-color: var(--green); background: var(--green); color: #fff; }
.product-context { margin-top: 12px; border: 1px solid #cce6db; border-radius: 11px; padding: 10px 12px; background: linear-gradient(100deg, #f8fcfa, #eff8f4); }
.product-context-inner { display: grid; grid-template-columns: 31px minmax(0, 1fr) minmax(140px, .65fr); gap: 10px; align-items: center; }
.product-context-icon { display: grid; inline-size: 30px; block-size: 30px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 14px; font-weight: 900; }
.product-context-icon.medicine { background: #fff0da; color: #97601e; }
.product-context-icon.farm_output { background: var(--blue-pale); color: var(--blue); }
.product-context-icon.other { background: #f0f3f2; color: #617771; }
.product-context-kicker, .product-code-kicker { display: block; color: var(--green); font-size: 8px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.product-context b { display: block; margin-top: 1px; color: var(--green-dark); font-size: 11px; }
.product-context p { margin: 2px 0 0; color: #55786f; font-size: 9px; line-height: 1.35; }
.product-context > .product-context-inner > small { color: #55786f; font-size: 9px; line-height: 1.4; text-align: start; }
.product-context-locked { margin-top: 0; }
.product-code-context { display: grid; grid-template-columns: minmax(0, 1fr) minmax(205px, .7fr); gap: 16px; align-items: center; margin-bottom: 15px; border: 1px solid #dbe8e3; border-radius: 11px; padding: 12px; background: #f8fbfa; }
.product-code-context b { display: block; margin-top: 2px; color: var(--ink); font-size: 12px; }
.product-code-context > div > small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.product-code-field { display: grid; gap: 4px; color: var(--ink-2); font-size: 10px; font-weight: 800; }
.product-code-field input { inline-size: 100%; border: 1px solid #bed8cd; border-radius: 8px; padding: 9px 10px; background: #fff; color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 850; letter-spacing: .35px; unicode-bidi: isolate; }
.product-code-field small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.35; }
.product-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.product-builder-grid .field { min-inline-size: 0; color: var(--ink-2); }
.product-builder-grid .field > small, .product-name-field > small { display: block; margin-top: -1px; color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.35; }
.product-builder-grid .field > small b { color: var(--green-dark); font-size: inherit; font-weight: 750; }
.product-name-field input { font-size: 14px; font-weight: 650; }
/* When the optional manufacturer field is present, keep it paired with the
   product name instead of leaving the name as a full-width orphaned row. */
.product-identity-grid:has([name="manufacturer"], [name="manufacturer_name"], [data-product-manufacturer]) .product-name-field { grid-column: auto; }
.product-identity-grid .field:has([name="manufacturer"], [name="manufacturer_name"], [data-product-manufacturer]) { min-inline-size: 0; }
.product-identity-grid .field:has([name="manufacturer"], [name="manufacturer_name"], [data-product-manufacturer]) input { font-weight: 550; }
.product-builder-grid .field input[readonly] { border-style: dashed; background: #f4f7f5; color: #607772; cursor: not-allowed; }
.product-use-suggestions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 1px; }
.product-use-case-input-wrap { display: grid; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 650; }
.product-use-case-field > .product-use-suggestions { margin-top: 0; }
.product-use-suggestions > span { margin-inline-end: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
.product-use-suggestions button { border: 1px solid #d2e5dd; border-radius: 999px; padding: 3px 7px; background: #f8fcfa; color: var(--green-dark); font-size: 9px; font-weight: 750; line-height: 1.25; }
.product-use-suggestions button:hover, .product-use-suggestions button:focus-visible { border-color: #8bc5b3; background: var(--green-pale); outline: none; }
.product-safety-section { border-color: #eddab9; background: linear-gradient(140deg, #fffdf9, #fff7ea); }
.product-safety-section .product-section-number { background: #fff0da; color: #9b641c; }
.product-safety-mark { display: grid; inline-size: 28px; block-size: 28px; place-items: center; border-radius: 9px; background: #fff0da; color: #9b641c; font-size: 14px; font-weight: 900; }
.product-pricing-section { border-color: #d4e3ee; background: linear-gradient(140deg, #ffffff, #f5f9fd); }
.product-pricing-section .product-section-number { background: var(--blue-pale); color: var(--blue); }
.product-price-toggle { display: inline-flex; align-items: center; gap: 7px; align-self: center; color: var(--ink-2); cursor: pointer; font-size: 10px; }
.product-price-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.product-price-toggle > span { position: relative; inline-size: 31px; block-size: 18px; border-radius: 999px; background: #cbdad4; transition: background .18s; }
.product-price-toggle > span::after { position: absolute; inset-block: 3px; inset-inline-start: 3px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #153f3840; content: ""; transition: transform .18s; }
.product-price-toggle input:checked + span { background: var(--green); }
.product-price-toggle input:checked + span::after { transform: translateX(13px); }
html[dir="rtl"] .product-price-toggle input:checked + span::after { transform: translateX(-13px); }
.product-price-toggle:has(input:focus-visible) > span { outline: 3px solid #0a746833; outline-offset: 2px; }
.product-price-toggle b { font-size: 10px; }
.product-price-panel { margin-top: 2px; border-top: 1px solid #dbe7ef; padding-top: 14px; }
.product-price-panel[hidden] { display: none; }
.product-price-panel-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; border-radius: 9px; padding: 9px 10px; background: #eaf2fb; color: #466b90; font-size: 10px; line-height: 1.4; }
.product-price-panel-note i { display: grid; flex: 0 0 auto; inline-size: 20px; block-size: 20px; place-items: center; border-radius: 6px; background: #d7e8f7; color: var(--blue); font-size: 11px; font-style: normal; font-weight: 900; }
.product-edit-price-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid #d5e3ee; border-radius: 10px; padding: 12px; background: #f8fbfe; }
.product-edit-price-card > div { min-inline-size: 0; }
.product-edit-price-card small, .product-edit-price-card span { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.product-edit-price-card b { display: block; margin: 2px 0; color: var(--ink); font-size: 15px; letter-spacing: -.2px; }
.product-edit-price-card .btn { flex: 0 0 auto; }
.product-builder-review { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; flex: 0 0 auto; gap: 10px; align-items: center; margin: 0 27px; border: 1px solid #c9e5da; border-radius: 12px; padding: 10px 12px; background: linear-gradient(100deg, #f6fcf8, #edf8f2); }
.product-review-icon { display: grid; inline-size: 32px; block-size: 32px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; font-weight: 900; }
.product-review-icon.medicine { background: #fff0da; color: #97601e; }
.product-review-icon.farm_output { background: var(--blue-pale); color: var(--blue); }
.product-review-icon.other { background: #f0f3f2; color: #617771; }
.product-builder-review > span:nth-child(2) { min-inline-size: 0; }
.product-builder-review small { display: block; color: #527a70; font-size: 9px; font-weight: 700; }
.product-builder-review b { display: block; overflow: hidden; color: var(--green-dark); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-builder-review em { display: block; overflow: hidden; margin-top: 1px; color: #66847c; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.product-builder-review strong { border: 1px solid #ecdab8; border-radius: 999px; padding: 4px 7px; background: #fff8ed; color: #93621c; font-size: 9px; white-space: nowrap; }
.product-builder-review strong.ready { border-color: #c7e3d8; background: #f9fdfb; color: var(--green-dark); }
.product-builder-footer { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 15px; align-items: center; margin-top: 12px; padding: 14px 27px 20px; border-top: 1px solid #dce8e3; background: #fff; }
.product-builder-footer-note { display: flex; max-inline-size: 570px; gap: 7px; align-items: flex-start; color: var(--muted); }
.product-builder-footer-note > span { display: grid; flex: 0 0 auto; inline-size: 19px; block-size: 19px; place-items: center; border-radius: 6px; background: var(--green-pale); color: var(--green); font-size: 10px; font-weight: 900; }
.product-builder-footer-note p { margin: 1px 0 0; font-size: 9px; line-height: 1.4; }
.product-builder-footer-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.product-builder-footer-actions .btn-primary span { font-size: 13px; line-height: 1; }

/* A product image is optional, but it gives a Store user a much faster visual cue. */
.product-photo-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 13px; align-items: center; margin: 0 0 15px; border: 1px solid #d6e8e0; border-radius: 12px; padding: 11px; background: linear-gradient(104deg, #fbfdfc, #f3faf7); color: var(--ink); text-align: start; transition: border-color .18s, box-shadow .18s, background .18s; }
.product-photo-card.is-drop-target { border-color: #5eae97; background: #f0faf5; box-shadow: 0 0 0 3px #0a746814; }
.product-photo-preview { display: grid; grid-area: auto !important; inline-size: 86px; block-size: 86px; place-items: center; overflow: hidden; border: 1px solid #cfe2da; border-radius: 12px; background: #e9f5ef; }
.product-photo-preview.has-image { background: #fff; }
.product-photo-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-photo-fallback { display: grid; grid-area: auto !important; inline-size: 42px; block-size: 42px; place-items: center; border-radius: 12px; background: var(--green-pale); color: var(--green); font-size: 20px; font-weight: 900; }
.product-photo-fallback.medicine { background: #fff0da; color: #97601e; }
.product-photo-fallback.farm_output { background: var(--blue-pale); color: var(--blue); }
.product-photo-fallback.other { background: #f0f3f2; color: #617771; }
.product-photo-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; min-inline-size: 0; align-items: center; }
.product-photo-copy > div:first-child { min-inline-size: 0; }
.product-photo-kicker { display: block; color: var(--green); font-size: 8px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.product-photo-copy b { display: block; margin-top: 2px; color: var(--ink); font-size: 12px; }
.product-photo-copy p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.product-photo-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; align-items: center; }
.product-photo-choose { min-block-size: 33px; padding: 7px 9px; font-size: 10px; }
.product-photo-choose span { font-size: 12px; }
.product-photo-remove { padding: 5px 1px; color: #98714a; font-size: 10px; }
.product-photo-status { flex-basis: 100%; color: #5f7c73; font-size: 9px; line-height: 1.35; text-align: end; }
.product-photo-status.error { color: var(--red); }
.is-uploading-product-image .product-photo-card { opacity: .72; pointer-events: none; }
.is-uploading-product-image .product-builder-footer-actions .btn-primary { min-inline-size: 148px; }

/* The dashboard's generic .feed/.medicine grid-area helpers must not leak into product UI modifiers. */
.product-builder-modal .product-category-choice-icon,
.product-builder-modal .product-context-icon,
.product-builder-modal .product-review-icon,
.product-builder-modal .product-photo-fallback,
.catalogue-product-mark,
.catalogue-category,
.catalogue-product-photo,
.catalogue-product-photo-fallback { grid-area: auto !important; }
.catalogue-product-photo { display: grid; grid-area: auto !important; flex: 0 0 auto; inline-size: 33px; block-size: 33px; place-items: center; overflow: hidden; border-radius: 10px; background: var(--green-pale); color: var(--green); }
.catalogue-product-photo.has-image { background: #fff; border: 1px solid #d5e4de; }
.catalogue-product-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.catalogue-product-photo-fallback { display: grid; inline-size: 100%; block-size: 100%; place-items: center; font-size: 15px; font-weight: 900; }
.catalogue-product-photo.medicine .catalogue-product-photo-fallback { background: #fff0da; color: #9b641c; }
.catalogue-product-photo.farm_output .catalogue-product-photo-fallback { background: var(--blue-pale); color: var(--blue); }
.catalogue-product-photo.other .catalogue-product-photo-fallback { background: #f0f3f2; color: #637a74; }

@media (max-width: 920px) {
  .product-category-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-category-choice { min-block-size: 102px; }
  .product-code-context { grid-template-columns: 1fr; gap: 10px; }
  .product-code-field { max-inline-size: 330px; }
}
@media (max-width: 680px) {
  form.modal.product-builder-modal { max-height: 96vh; border-radius: 13px; }
  .product-builder-head, .product-builder-body { padding-inline: 16px; }
  .product-builder-head { padding-block: 17px 14px; }
  .product-builder-head h2 { font-size: 18px; }
  .product-builder-head p { font-size: 11px; }
  .product-builder-body { gap: 12px; padding-block: 13px 17px; }
  .product-builder-section { padding: 13px; border-radius: 12px; }
  .product-section-head { grid-template-columns: 29px minmax(0, 1fr); gap: 8px; }
  .product-section-required, .product-locked-badge, .product-safety-mark, .product-price-toggle { grid-column: 2; justify-self: start; }
  .product-section-head p { font-size: 9px; }
  .product-category-choices, .product-builder-grid { grid-template-columns: 1fr; }
  .product-category-choice { min-block-size: 91px; }
  .product-category-choice-copy small { -webkit-line-clamp: 2; }
  .product-context-inner { grid-template-columns: 30px minmax(0, 1fr); }
  .product-context > .product-context-inner > small { grid-column: 2; }
  .product-edit-price-card, .product-builder-footer { align-items: flex-start; flex-direction: column; }
  .product-edit-price-card .btn, .product-builder-footer-actions { inline-size: 100%; }
  .product-builder-footer-actions .btn { flex: 1 1 0; }
  .product-builder-review { grid-template-columns: 32px minmax(0, 1fr); margin-inline: 16px; }
  .product-builder-review strong { grid-column: 2; justify-self: start; }
  .product-builder-footer { gap: 12px; padding: 13px 16px 16px; }
  .product-builder-footer-note { max-inline-size: none; }
  .product-price-toggle { margin-top: 1px; }
  .product-photo-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .product-photo-preview { inline-size: 64px; block-size: 64px; border-radius: 10px; }
  .product-photo-fallback { inline-size: 34px; block-size: 34px; border-radius: 10px; font-size: 16px; }
  .product-photo-copy { grid-template-columns: 1fr; gap: 7px; }
  .product-photo-actions { justify-content: flex-start; }
  .product-photo-status { text-align: start; }
}

/* Product Catalogue quick view: a read-first reference panel, not another editor. */
.product-details-modal {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
  overflow: hidden;
  border: 1px solid #d2e3dc;
  background: #f7faf8;
  box-shadow: 0 28px 72px #08221e63;
}
.product-details-modal .modal-head,
.product-details-head {
  flex: 0 0 auto;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #d7e7e1;
  background: linear-gradient(116deg, #fff 0%, #f2faf6 62%, #e8f4ee 100%);
}
.product-details-modal .modal-head > div,
.product-details-head > div { min-inline-size: 0; }
.product-details-modal .modal-head h2,
.product-details-head h2 { margin-top: 4px; color: var(--green-dark); font-size: 20px; letter-spacing: -.3px; }
.product-details-modal .modal-head p,
.product-details-head p { max-inline-size: 650px; margin-top: 5px; color: #54776f; font-size: 11px; line-height: 1.5; }
.product-details-modal .modal-head .close,
.product-details-head .close { flex: 0 0 auto; border: 1px solid #d2e4dc; background: #fff; transition: border-color .18s, background .18s, transform .18s; }
.product-details-modal .modal-head .close:hover,
.product-details-head .close:hover { border-color: #afd3c6; background: var(--green-pale); transform: translateY(-1px); }

.product-details-modal .modal-body,
.product-details-body {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  min-block-size: 0;
  gap: 15px;
  overflow: auto;
  padding: 20px 26px 25px;
  background: #f7faf8;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.product-details-hero {
  --product-details-accent: #0a7a65;
  --product-details-accent-ink: #075a4b;
  --product-details-accent-soft: #e1f6ed;
  --product-details-accent-wash: #f8fcfa;
  --product-details-accent-border: #b8e1d1;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-inline-size: 0;
  min-block-size: 146px;
  overflow: hidden;
  border: 1px solid var(--product-details-accent-border);
  border-radius: 18px;
  padding: 17px;
  background:
    radial-gradient(circle at 100% 0%, var(--product-details-accent-soft) 0, transparent 36%),
    linear-gradient(118deg, #fff 0%, var(--product-details-accent-wash) 100%);
  box-shadow: 0 9px 22px #153f3810;
}
.product-details-hero::before {
  position: absolute;
  z-index: 0;
  inset-block-end: -54px;
  inset-inline-end: -36px;
  inline-size: 172px;
  block-size: 172px;
  border: 22px solid #ffffff80;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.product-details-hero > * { position: relative; z-index: 1; }
.product-details-hero--feed,
.product-details-hero:has(.product-details-photo--feed) {
  --product-details-accent: #087862;
  --product-details-accent-ink: #07594a;
  --product-details-accent-soft: #e0f6ed;
  --product-details-accent-wash: #f8fcfa;
  --product-details-accent-border: #b7dfcf;
}
.product-details-hero--medicine,
.product-details-hero:has(.product-details-photo--medicine) {
  --product-details-accent: #b56020;
  --product-details-accent-ink: #874313;
  --product-details-accent-soft: #fff0df;
  --product-details-accent-wash: #fffaf4;
  --product-details-accent-border: #f0c99e;
}
.product-details-hero--farm-output,
.product-details-hero--farm_output,
.product-details-hero:has(.product-details-photo--farm_output) {
  --product-details-accent: #287dbd;
  --product-details-accent-ink: #1d5d91;
  --product-details-accent-soft: #e5f3ff;
  --product-details-accent-wash: #f7fbff;
  --product-details-accent-border: #bedaf1;
}
.product-details-hero--other,
.product-details-hero:has(.product-details-photo--other) {
  --product-details-accent: #62729a;
  --product-details-accent-ink: #4b5a80;
  --product-details-accent-soft: #edf0fa;
  --product-details-accent-wash: #fafbfe;
  --product-details-accent-border: #d0d7ea;
}
.product-details-photo {
  display: grid;
  inline-size: 112px;
  block-size: 112px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  outline: 1px solid var(--product-details-accent-border);
  border-radius: 16px;
  background: var(--product-details-accent-soft);
  box-shadow: 0 9px 18px #0c38201a;
  color: var(--product-details-accent);
}
.product-details-photo.has-image { background: #fff; }
.product-details-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-details-photo-fallback {
  display: grid;
  inline-size: 48px;
  block-size: 48px;
  place-items: center;
  border-radius: 15px;
  background: #ffffffd9;
  color: var(--product-details-accent);
  font-size: 24px;
  font-weight: 900;
}
.product-details-photo--medicine { background: #fff0df; color: #a3551b; }
.product-details-photo--medicine .product-details-photo-fallback { color: #a3551b; }
.product-details-photo--farm_output { background: #e5f3ff; color: #287dbd; }
.product-details-photo--farm_output .product-details-photo-fallback { color: #287dbd; }
.product-details-photo--other { background: #edf0fa; color: #62729a; }
.product-details-photo--other .product-details-photo-fallback { color: #62729a; }
.product-details-summary { min-inline-size: 0; text-align: start; }
.product-details-title-row {
  display: flex;
  min-inline-size: 0;
  gap: 8px 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-block-end: 7px;
}
.product-details-kicker,
.product-details-code,
.product-details-code-pill {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  min-block-size: 25px;
  border: 1px solid var(--product-details-accent-border);
  border-radius: 999px;
  padding: 4px 9px;
  background: #ffffffc7;
  box-shadow: 0 2px 5px #153f3808;
  color: var(--product-details-accent-ink);
  direction: ltr;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .62px;
  line-height: 1;
  text-transform: uppercase;
  unicode-bidi: isolate;
}
.product-details-kicker {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green-dark);
  font-size: 9px;
}
.product-details-summary > .product-details-code:not(.product-details-code-pill) { margin-block-end: 8px; }
.product-details-summary :is(h2, h3),
.product-details-title-row :is(h2, h3) {
  overflow: hidden;
  margin: 0;
  color: #153e36;
  font-size: clamp(20px, 2.15vw, 25px);
  font-weight: 850;
  letter-spacing: -.55px;
  line-height: 1.16;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.product-details-title-row .product-details-name { flex: 1 1 210px; min-inline-size: 0; max-inline-size: 100%; }
.product-details-summary > :is(h2, h3) + .product-details-manufacturer,
.product-details-summary > :is(h2, h3) + .product-details-manufacturer-card,
.product-details-title-row + .product-details-manufacturer-card { margin-top: 9px; }
.product-details-summary p { max-inline-size: 600px; margin: 8px 0 0; color: #55766e; font-size: 11px; line-height: 1.5; }
.product-details-use-case { display: grid; gap: 1px; }
.product-details-use-case-label { color: #69847c; font-size: 9px; font-weight: 800; letter-spacing: .48px; text-transform: uppercase; }
.product-details-use-case-value { color: #315b51; font-size: 11px; font-weight: 750; }
.product-details-manufacturer,
.product-details-manufacturer-card {
  display: inline-flex;
  max-inline-size: 100%;
  gap: 6px;
  align-items: baseline;
  border: 1px solid #ffffffb8;
  border-inline-start: 3px solid var(--product-details-accent);
  border-radius: 9px;
  padding: 5px 8px;
  background: #ffffff9e;
  color: var(--product-details-accent-ink);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.product-details-manufacturer-card { align-items: center; }
.product-details-manufacturer-icon {
  display: grid;
  flex: 0 0 auto;
  inline-size: 19px;
  block-size: 19px;
  place-items: center;
  border-radius: 7px;
  background: var(--product-details-accent-soft);
  color: var(--product-details-accent);
  font-size: 12px;
  line-height: 1;
}
.product-details-manufacturer-copy { display: grid; min-inline-size: 0; gap: 1px; }
.product-details-manufacturer-card :is(small, span:first-child) { color: #5d796f; font-size: 9px; font-weight: 750; }
.product-details-manufacturer-card :is(b, strong) { display: block; color: var(--product-details-accent-ink); font-size: 10px; font-weight: 850; }
.product-details-badges,
.product-details-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.product-details-badge,
.product-details-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: 23px;
  border: 1px solid var(--product-details-accent-border, #cce5db);
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffffbd;
  color: var(--product-details-accent-ink, var(--green-dark));
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.product-details-badge.medicine,
.product-details-tag.medicine { border-color: #edd9bb; background: #fff7ea; color: #956016; }
.product-details-badge.inactive,
.product-details-tag.inactive { border-color: #dce4e0; background: #f4f6f5; color: #6d817b; }
.product-details-badge.warning,
.product-details-tag.warning { border-color: #efd3ae; background: var(--amber-pale); color: var(--amber); }

.product-details-content,
.product-details-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 14px; align-items: start; }
.product-details-section {
  min-inline-size: 0;
  border: 1px solid #dbe8e3;
  border-radius: 13px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 5px #153f3805;
}
.product-details-section + .product-details-section { margin-top: 14px; }
.product-details-section-head { display: flex; gap: 9px; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; }
.product-details-section-head > div { min-inline-size: 0; }
.product-details-section-head :is(h3, h4) { margin: 0; color: var(--ink); font-size: 13px; letter-spacing: -.1px; }
.product-details-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.product-details-section-icon { display: grid; flex: 0 0 auto; inline-size: 28px; block-size: 28px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 13px; font-weight: 900; }

.product-details-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.product-details-fact {
  --product-details-fact-bg: #f8fcfa;
  --product-details-fact-border: #dbe9e3;
  --product-details-fact-label: #5a776e;
  --product-details-fact-value: #173f37;
  min-inline-size: 0;
  padding: 11px 12px;
  border: 1px solid var(--product-details-fact-border);
  border-radius: 11px;
  background: linear-gradient(135deg, #fff 0%, var(--product-details-fact-bg) 100%);
  box-shadow: 0 2px 5px #153f3806;
}
.product-details-fact :is(dt, small) { display: block; color: var(--product-details-fact-label); font-size: 9px; font-weight: 800; line-height: 1.3; }
.product-details-fact :is(dd, b, strong) { display: block; overflow: hidden; margin: 3px 0 0; color: var(--product-details-fact-value); font-size: 11px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.product-details-fact dd { margin-inline-start: 0; }
.product-details-fact--code,
.product-details-fact.is-code { --product-details-fact-bg: #f2f0ff; --product-details-fact-border: #d9d1fb; --product-details-fact-label: #67599c; --product-details-fact-value: #3f3372; }
.product-details-fact--manufacturer { --product-details-fact-bg: #fff5e5; --product-details-fact-border: #f0d3a5; --product-details-fact-label: #9a631c; --product-details-fact-value: #70410f; }
.product-details-fact--category { --product-details-fact-bg: #e9f8f1; --product-details-fact-border: #c7e8d9; --product-details-fact-label: #287564; --product-details-fact-value: #0f5547; }
.product-details-fact--classification { --product-details-fact-bg: #edf5ff; --product-details-fact-border: #cedff5; --product-details-fact-label: #3d6d9d; --product-details-fact-value: #254e79; }
.product-details-fact--unit { --product-details-fact-bg: #f3efff; --product-details-fact-border: #ddd2fa; --product-details-fact-label: #735ca6; --product-details-fact-value: #4d397d; }
.product-details-fact--use { --product-details-fact-bg: #fff9e7; --product-details-fact-border: #f0dfa8; --product-details-fact-label: #907322; --product-details-fact-value: #665116; }
.product-details-fact--availability { --product-details-fact-bg: #eaf8ef; --product-details-fact-border: #c9e7d3; --product-details-fact-label: #337757; --product-details-fact-value: #14563a; }
.product-details-fact--availability.is-inactive,
.product-details-fact--availability.inactive { --product-details-fact-bg: #f2f4f4; --product-details-fact-border: #dbe1df; --product-details-fact-label: #6d7f7a; --product-details-fact-value: #475a54; }
.product-details-fact--medicine,
.product-details-fact--medicine-type { --product-details-fact-bg: #fff0e5; --product-details-fact-border: #f3cfb5; --product-details-fact-label: #a65925; --product-details-fact-value: #7b3712; }
.product-details-fact--vaccine,
.product-details-fact--vaccine-type { --product-details-fact-bg: #eef2ff; --product-details-fact-border: #d6ddfb; --product-details-fact-label: #596fa7; --product-details-fact-value: #354d85; }
.product-details-fact--code :is(dd, b, strong),
.product-details-fact.is-code :is(dd, b, strong),
.product-details-fact.is-numeric :is(dd, b, strong) { direction: ltr; unicode-bidi: isolate; }
.product-details-description {
  margin: 0;
  border: 1px solid #e0ebe6;
  border-radius: 10px;
  padding: 11px 12px;
  background: #fbfdfc;
  color: #4f7068;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
}
.product-details-description:empty { display: none; }

.product-details-finance,
.product-details-store { position: relative; overflow: hidden; }
.product-details-finance { border-color: #cce5da; background: linear-gradient(138deg, #fbfefc 0%, #eff9f4 100%); }
.product-details-store { border-color: #d6e4e5; background: linear-gradient(138deg, #fcfefe 0%, #f0f7f7 100%); }
.product-details-finance::before,
.product-details-store::before { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--green); content: ""; }
.product-details-store::before { background: #4d8d8a; }
.product-details-finance .product-details-section-head,
.product-details-store .product-details-section-head { margin-inline-start: 2px; }
.product-details-finance-value,
.product-details-store-value,
.product-details-amount {
  display: block;
  margin: 7px 0 2px;
  color: var(--green-dark);
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.45px;
  line-height: 1.15;
}
.product-details-store-value { color: #21645f; }
.product-details-finance-caption,
.product-details-store-caption { display: block; color: #58786f; font-size: 10px; line-height: 1.4; }
.product-details-finance-list,
.product-details-store-list,
.product-details-activity { display: grid; gap: 0; margin-top: 11px; border-top: 1px solid #d9e9e2; }
.product-details-store-list,
.product-details-store .product-details-activity { border-top-color: #d9e7e7; }
.product-details-finance-row,
.product-details-store-row,
.product-details-activity-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #dfece7; }
.product-details-store-row,
.product-details-store .product-details-activity-row { border-bottom-color: #e0eaeb; }
.product-details-finance-row > span:first-child,
.product-details-store-row > span:first-child,
.product-details-activity-row > span:first-child { min-inline-size: 0; color: #54756d; font-size: 10px; }
.product-details-finance-row > b,
.product-details-store-row > b,
.product-details-activity-row > b { flex: 0 0 auto; color: var(--ink); font-size: 10px; text-align: end; }
.product-details-finance-empty,
.product-details-store-empty { margin: 8px 0 0; color: #607d75; font-size: 10px; line-height: 1.45; }
.product-details-price-history { display: grid; margin-top: 11px; overflow: hidden; border: 1px solid #d8e8e1; border-radius: 10px; background: #fff; }
.product-details-price-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 11px; border-block-end: 1px solid #e3eee9; }
.product-details-price-history-row:last-child { border-block-end: 0; }
.product-details-price-history-row.current { background: #f3fbf6; }
.product-details-price-history-row > span { min-inline-size: 0; }
.product-details-price-history-row b { display: block; color: var(--ink); font-size: 10px; }
.product-details-price-history-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-details-price-history-row > :last-child { color: var(--green-dark); font-size: 10px; font-weight: 850; text-align: end; }
.product-details-loading { display: flex; min-block-size: 72px; align-items: center; justify-content: center; border: 1px dashed #c9ded5; border-radius: 10px; color: #638077; font-size: 10px; font-weight: 700; text-align: center; }

.product-details-modal .modal-footer,
.product-details-footer { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 26px 19px; border-top: 1px solid #dce8e3; background: #fff; }
.product-details-footer-note { display: flex; max-inline-size: 570px; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 10px; line-height: 1.4; }
.product-details-footer-note > i { display: grid; flex: 0 0 auto; inline-size: 19px; block-size: 19px; place-items: center; border-radius: 6px; background: var(--green-pale); color: var(--green); font-style: normal; font-weight: 900; }
.product-details-footer-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Catalogue cells reveal the same product details through clear keyboard-friendly affordances. */
button.catalogue-product-detail-trigger,
button.catalogue-product-detail-photo,
button.catalogue-product-detail-name {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
button.catalogue-product-detail-trigger { display: flex; min-inline-size: 0; align-items: center; gap: 9px; cursor: pointer; }
button.catalogue-product-detail-photo { display: grid; flex: 0 0 auto; cursor: pointer; }
button.catalogue-product-detail-name { display: block; max-inline-size: 100%; cursor: pointer; }
button.catalogue-product-detail-trigger:hover .catalogue-product b,
button.catalogue-product-detail-trigger:focus-visible .catalogue-product b,
button.catalogue-product-detail-name:hover,
button.catalogue-product-detail-name:focus-visible,
button.catalogue-product-detail-name:hover b,
button.catalogue-product-detail-name:focus-visible b { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
button.catalogue-product-detail-trigger:focus-visible,
button.catalogue-product-detail-photo:focus-visible,
button.catalogue-product-detail-name:focus-visible { border-radius: 7px; outline: 3px solid #0a746833; outline-offset: 3px; }

@media (max-width: 720px) {
  .product-details-modal { max-height: 96vh; border-radius: 13px; }
  .product-details-modal .modal-head,
  .product-details-head { padding: 17px 16px 14px; }
  .product-details-modal .modal-head h2,
  .product-details-head h2 { font-size: 18px; }
  .product-details-modal .modal-body,
  .product-details-body { gap: 12px; padding: 14px 16px 17px; }
  .product-details-hero { grid-template-columns: 82px minmax(0, 1fr); min-block-size: 108px; gap: 12px; padding: 13px; border-radius: 15px; }
  .product-details-hero::before { inset-block-end: -70px; inset-inline-end: -62px; inline-size: 140px; block-size: 140px; border-width: 18px; }
  .product-details-photo { inline-size: 82px; block-size: 82px; border-radius: 13px; }
  .product-details-photo-fallback { inline-size: 40px; block-size: 40px; border-radius: 12px; font-size: 19px; }
  .product-details-summary :is(h2, h3),
  .product-details-title-row :is(h2, h3) { font-size: 18px; }
  .product-details-title-row { gap: 6px 8px; }
  .product-details-manufacturer,
  .product-details-manufacturer-card { padding: 4px 7px; font-size: 9px; }
  .product-details-badges,
  .product-details-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .product-details-content,
  .product-details-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-details-section { padding: 13px; border-radius: 12px; }
  .product-details-section + .product-details-section { margin-top: 12px; }
  .product-details-price-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-details-modal .modal-footer,
  .product-details-footer { align-items: flex-start; flex-direction: column; padding: 13px 16px 16px; }
  .product-details-footer-note { max-inline-size: none; }
  .product-details-footer-actions { inline-size: 100%; }
  .product-details-footer-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 440px) {
  .product-details-hero { grid-template-columns: 68px minmax(0, 1fr); min-block-size: 90px; gap: 10px; padding: 11px; }
  .product-details-photo { inline-size: 68px; block-size: 68px; }
  .product-details-facts { grid-template-columns: 1fr; }
  .product-details-fact,
  .product-details-fact:nth-child(2n),
  .product-details-fact:nth-last-child(-n + 2),
  .product-details-fact:last-child { border: 1px solid var(--product-details-fact-border); }
  .product-details-finance-value,
  .product-details-store-value,
  .product-details-amount { font-size: 19px; }
  .product-details-price-history-row { grid-template-columns: 1fr; gap: 3px; }
  .product-details-price-history-row > :last-child { text-align: start; }
}

/* Finance purchase receipts: one supplier document with many controlled Store lines. */
.purchase-receipt-page {
  --purchase-accent: #0b7665;
  --purchase-accent-ink: #07554a;
  --purchase-accent-soft: #e4f6ef;
  --purchase-accent-wash: #f7fcfa;
  --purchase-accent-border: #c3e6da;
}
.purchase-receipt-page--medicine,
.purchase-receipt-page[data-category="medicine"] {
  --purchase-accent: #b66725;
  --purchase-accent-ink: #824312;
  --purchase-accent-soft: #fff0df;
  --purchase-accent-wash: #fffaf4;
  --purchase-accent-border: #f0cda7;
}
.purchase-receipt-page--feed,
.purchase-receipt-page[data-category="feed"] {
  --purchase-accent: #227a61;
  --purchase-accent-ink: #105b48;
  --purchase-accent-soft: #e4f6ed;
  --purchase-accent-wash: #f7fcf9;
  --purchase-accent-border: #c1e4d5;
}
.purchase-receipt-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}
.purchase-receipt-kpi {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #fff 0%, var(--purchase-accent-wash) 100%);
  box-shadow: 0 4px 12px #153f3808;
}
.purchase-receipt-kpi::after {
  position: absolute;
  inset-block-start: -20px;
  inset-inline-end: -13px;
  inline-size: 76px;
  block-size: 76px;
  border: 13px solid #ffffffa8;
  border-radius: 50%;
  content: "";
}
.purchase-receipt-kpi > * { position: relative; z-index: 1; }
.purchase-receipt-kpi small { display: block; color: #5b7870; font-size: 10px; font-weight: 800; letter-spacing: .48px; text-transform: uppercase; }
.purchase-receipt-kpi b { display: block; margin: 7px 0 2px; color: var(--purchase-accent-ink); font-size: 24px; font-weight: 900; letter-spacing: -.7px; line-height: 1.08; }
.purchase-receipt-kpi span { display: block; color: #668178; font-size: 10px; line-height: 1.35; }
.purchase-receipt-kpi--posted { border-color: #c9e4d7; background: linear-gradient(135deg, #fff 0%, #eff9f3 100%); }
.purchase-receipt-kpi--lines { border-color: #d3def1; background: linear-gradient(135deg, #fff 0%, #eff5fd 100%); }
.purchase-receipt-kpi--lines b { color: #2d5f8f; }
.purchase-receipt-kpi--suppliers { border-color: #dfd3f5; background: linear-gradient(135deg, #fff 0%, #f5f0fd 100%); }
.purchase-receipt-kpi--suppliers b { color: #654789; }
.purchase-receipt-toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  margin: 0 0 13px;
  padding: 13px;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 14px;
  background: linear-gradient(110deg, #fff, var(--purchase-accent-wash));
}
.purchase-receipt-toolbar .search { flex: 1 1 240px; min-inline-size: 210px; }
.purchase-receipt-toolbar .filter-group { flex: 1 1 auto; }
.purchase-receipt-toolbar select,
.purchase-receipt-toolbar input {
  min-block-size: 38px;
  border: 1px solid #cfdfd9;
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}
.purchase-receipt-register {
  overflow: hidden;
  border: 1px solid #d8e7e1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 12px #153f3807;
}
.purchase-receipt-register .table { min-inline-size: 930px; }
.purchase-receipt-register .table th { background: #f8fbfa; }
.purchase-receipt-register .table tbody tr { transition: background .16s ease; }
.purchase-receipt-register .table tbody tr:hover { background: var(--purchase-accent-wash); }
.purchase-receipt-register .table td { padding-block: 14px; }
.purchase-receipt-register .subtle { display: inline-block; max-inline-size: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.purchase-receipt-line-preview { display: flex; max-inline-size: 260px; gap: 5px; flex-wrap: wrap; }
.purchase-receipt-line-preview > span,
.purchase-receipt-product-chip {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--purchase-accent-soft);
  color: var(--purchase-accent-ink);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purchase-receipt-status,
.purchase-receipt-register .status {
  min-block-size: 23px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 850;
}
.purchase-receipt-status.draft,
.purchase-receipt-register .status.draft { background: #fff4e5; color: #96601a; }
.purchase-receipt-status.posted,
.purchase-receipt-register .status.posted { background: #e8f7ef; color: #196844; }
.purchase-receipt-status.voided,
.purchase-receipt-register .status.voided { background: #f2f4f4; color: #61716d; }
.purchase-receipt-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }

.purchase-receipt-modal {
  display: flex;
  flex-direction: column;
  inline-size: min(1240px, 100%);
  max-block-size: 94vh;
  min-block-size: 0;
  overflow: hidden;
  border-radius: 18px;
}
.purchase-receipt-modal .modal-head {
  flex: 0 0 auto;
  padding: 21px 25px 16px;
  border-bottom-color: var(--purchase-accent-border);
  background: linear-gradient(112deg, #fff 0%, var(--purchase-accent-wash) 100%);
}
.purchase-receipt-modal .modal-head h2 { color: var(--purchase-accent-ink); font-size: 21px; letter-spacing: -.4px; }
.purchase-receipt-modal .modal-head p { max-inline-size: 760px; font-size: 11px; }
.purchase-receipt-modal .modal-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 25px 23px;
  background: #f8fbfa;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px 28px;
  -webkit-overflow-scrolling: touch;
}
.purchase-receipt-modal .modal-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 25px 18px;
  border-top: 1px solid #dce8e3;
  background: #fff;
}
.purchase-receipt-editor { display: flex; flex-direction: column; min-block-size: 0; }
.purchase-receipt-editor > :is(section, div) { min-inline-size: 0; }
.purchase-receipt-editor-header,
.purchase-receipt-header {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #fff, var(--purchase-accent-wash));
}
.purchase-receipt-editor .field { min-inline-size: 0; color: #355b52; font-size: 10px; font-weight: 800; }
.purchase-receipt-editor .field :is(input, select, textarea) {
  min-inline-size: 0;
  border: 1px solid #ccddd7;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.purchase-receipt-editor .field :is(input, select, textarea):focus { border-color: var(--purchase-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purchase-accent) 13%, transparent); }
.purchase-receipt-editor .field textarea { min-block-size: 70px; }
.purchase-receipt-lines,
.purchase-receipt-lines-panel {
  overflow: hidden;
  border: 1px solid #d7e6e0;
  border-radius: 14px;
  background: #fff;
}
.purchase-receipt-lines-head,
.purchase-receipt-lines-panel > header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid #dfebe6;
  background: #fbfdfc;
}
.purchase-receipt-lines-head h3,
.purchase-receipt-lines-panel h3 { margin: 0; color: var(--ink); font-size: 13px; }
.purchase-receipt-lines-head p,
.purchase-receipt-lines-panel header p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.purchase-receipt-lines-body { display: grid; gap: 9px; padding: 11px; }
.purchase-receipt-line {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) minmax(120px, 1fr) minmax(72px, .55fr) minmax(90px, .65fr) minmax(92px, .65fr) minmax(112px, .8fr) minmax(112px, .8fr) auto;
  gap: 8px;
  align-items: end;
  padding: 11px;
  border: 1px solid #dce9e4;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #fbfdfc);
  box-shadow: 0 2px 5px #153f3805;
}
.purchase-receipt-line:hover { border-color: var(--purchase-accent-border); }
.purchase-receipt-line .field { gap: 4px; font-size: 9px; }
.purchase-receipt-line .field :is(input, select) { min-block-size: 34px; padding: 7px 8px; font-size: 10px; }
.purchase-receipt-line-total { display: flex; min-block-size: 35px; align-items: center; justify-content: flex-end; color: var(--purchase-accent-ink); font-size: 11px; font-weight: 900; text-align: end; white-space: nowrap; }
.purchase-receipt-remove-line { display: grid; inline-size: 34px; block-size: 34px; place-items: center; border: 1px solid #f0cfca; border-radius: 9px; background: #fff7f5; color: #b65045; font-size: 16px; line-height: 1; }
.purchase-receipt-remove-line:hover { background: #fdeae7; }
.purchase-receipt-add-line { margin: 0 11px 12px; }
.purchase-receipt-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(255px, .43fr);
  gap: 14px;
  align-items: start;
}
.purchase-receipt-summary > :last-child,
.purchase-receipt-total-card {
  position: sticky;
  inset-block-start: 0;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(140deg, #fff, var(--purchase-accent-wash));
}
.purchase-receipt-total-card small { display: block; color: #628077; font-size: 9px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.purchase-receipt-total-card b { display: block; margin: 5px 0 9px; color: var(--purchase-accent-ink); font-size: 24px; font-weight: 900; letter-spacing: -.7px; }
.purchase-receipt-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #dcebe5; color: #56766d; font-size: 10px; }
.purchase-receipt-total-row strong { color: var(--ink); font-size: 11px; }
.purchase-receipt-detail-modal { inline-size: min(1060px, 100%); }
.purchase-receipt-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 14px; }
.purchase-receipt-detail-card { border: 1px solid #dbe8e3; border-radius: 13px; padding: 14px; background: #fff; }
.purchase-receipt-detail-card h3 { margin: 0 0 9px; color: var(--ink); font-size: 13px; }
.purchase-receipt-detail-card .key-value { gap: 0 13px; }
.purchase-receipt-detail-card .key-value div { padding-block: 8px; }
.purchase-receipt-empty { padding: 35px 18px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 1020px) {
  .purchase-receipt-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-receipt-editor-header,
  .purchase-receipt-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-receipt-line { grid-template-columns: minmax(160px, 1.3fr) minmax(120px, 1fr) repeat(2, minmax(75px, .55fr)); }
  .purchase-receipt-line > :nth-last-child(-n + 4) { grid-column: auto; }
  .purchase-receipt-summary,
  .purchase-receipt-detail-grid { grid-template-columns: 1fr; }
  .purchase-receipt-summary > :last-child,
  .purchase-receipt-total-card { position: static; }
}
@media (max-width: 720px) {
  .purchase-receipt-overview { gap: 9px; margin-bottom: 13px; }
  .purchase-receipt-kpi { padding: 12px; border-radius: 12px; }
  .purchase-receipt-kpi b { font-size: 20px; }
  .purchase-receipt-toolbar { align-items: stretch; flex-direction: column; padding: 11px; }
  .purchase-receipt-toolbar .search { min-inline-size: 0; }
  .purchase-receipt-modal { max-block-size: 96vh; border-radius: 13px; }
  .purchase-receipt-modal .modal-head { padding: 16px 16px 13px; }
  .purchase-receipt-modal .modal-body { padding: 13px 16px 17px; }
  .purchase-receipt-modal .modal-footer { align-items: stretch; flex-wrap: wrap; padding: 12px 16px 15px; }
  .purchase-receipt-modal .modal-footer .btn { flex: 1 1 auto; }
  .purchase-receipt-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .purchase-receipt-line .field:first-child,
  .purchase-receipt-line .field:nth-child(2) { grid-column: 1 / -1; }
  .purchase-receipt-line-total { justify-content: flex-start; }
}
@media (max-width: 440px) {
  .purchase-receipt-overview,
  .purchase-receipt-editor-header,
  .purchase-receipt-header,
  .purchase-receipt-line { grid-template-columns: 1fr; }
  .purchase-receipt-line .field:first-child,
  .purchase-receipt-line .field:nth-child(2) { grid-column: auto; }
  .purchase-receipt-lines-head,
  .purchase-receipt-lines-panel > header { align-items: flex-start; flex-direction: column; }
}

/* The receipt editor deliberately uses cards rather than a compressed ledger
   row: supplier invoices need enough space for product identity, batch, expiry,
   and a clean financial total.  These selectors cover the rendered editor
   markup while retaining the compact list view above. */
.purchase-receipt-editor-body {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 15px;
}
.purchase-receipt-header-card,
.purchase-receipt-lines-card {
  border: 1px solid var(--purchase-accent-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 14px #153f3808;
}
.purchase-receipt-header-card {
  overflow: visible;
  padding: 15px;
  background: linear-gradient(135deg, #fff, var(--purchase-accent-wash));
}
.purchase-receipt-section-head,
.purchase-receipt-summary-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 13px;
}
.purchase-receipt-section-head > div,
.purchase-receipt-summary-head { display: flex; gap: 9px; }
.purchase-receipt-section-head > div > span,
.purchase-receipt-summary-head > span {
  display: grid;
  flex: 0 0 auto;
  inline-size: 31px;
  block-size: 31px;
  place-items: center;
  border-radius: 10px;
  background: var(--purchase-accent-soft);
  color: var(--purchase-accent-ink);
  font-weight: 900;
}
.purchase-receipt-section-head b,
.purchase-receipt-summary-head b { display: block; color: var(--ink); font-size: 12px; }
.purchase-receipt-section-head small,
.purchase-receipt-summary-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.38; }
.purchase-receipt-section-head em {
  flex: 0 0 auto;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 999px;
  padding: 4px 7px;
  background: #fff;
  color: var(--purchase-accent-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.purchase-receipt-header-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 13px; }
.purchase-receipt-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(255px, .31fr); gap: 15px; align-items: start; }
.purchase-receipt-lines-card { overflow: hidden; border-color: #d8e7e1; }
.purchase-receipt-lines-card > .purchase-receipt-lines-head { padding: 15px 16px; }
.purchase-receipt-lines-head > div:last-child { display: flex; flex: 0 0 auto; gap: 9px; align-items: center; }
.purchase-receipt-line-count {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--purchase-accent-soft);
  color: var(--purchase-accent-ink);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.purchase-receipt-line-list { display: grid; gap: 10px; padding: 12px; background: #f8fbfa; }
.purchase-receipt-line {
  display: block;
  padding: 12px;
  border-color: #d7e6e0;
  background: #fff;
}
.purchase-receipt-line-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 11px; }
.purchase-receipt-line-number {
  display: grid;
  inline-size: 29px;
  block-size: 29px;
  place-items: center;
  border-radius: 9px;
  background: var(--purchase-accent-soft);
  color: var(--purchase-accent-ink);
  font-size: 10px;
  font-weight: 900;
}
.purchase-receipt-remove-line {
  inline-size: auto;
  min-inline-size: 66px;
  padding-inline: 9px;
  color: #a6493f;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.purchase-receipt-line-grid { grid-template-columns: minmax(160px, 1.5fr) minmax(132px, 1.12fr) repeat(3, minmax(92px, .7fr)) minmax(106px, .82fr); gap: 9px; }
.purchase-receipt-line-grid .purchase-receipt-line-total { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 7px 9px; border: 1px solid var(--purchase-accent-border); border-radius: 9px; background: var(--purchase-accent-wash); }
.purchase-receipt-line-grid .purchase-receipt-line-total output { color: var(--purchase-accent-ink); font-size: 12px; font-weight: 900; }
.purchase-receipt-line-detail { margin-top: 10px; border-top: 1px dashed #d8e6e1; padding-top: 9px; }
.purchase-receipt-line-detail summary { cursor: pointer; color: var(--purchase-accent-ink); font-size: 10px; font-weight: 850; }
.purchase-receipt-line-detail > div { margin-top: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.purchase-receipt-line-product { display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 8px; align-items: center; min-inline-size: 0; }
.purchase-receipt-line-product img,
.purchase-receipt-line-product i {
  display: grid;
  inline-size: 33px;
  block-size: 33px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 9px;
  background: var(--purchase-accent-soft);
  color: var(--purchase-accent-ink);
  font-size: 14px;
  font-style: normal;
  object-fit: cover;
}
.purchase-receipt-line-product span { min-inline-size: 0; }
.purchase-receipt-line-product b,
.purchase-receipt-line-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-receipt-line-product b { color: var(--ink); font-size: 10px; }
.purchase-receipt-line-product small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.purchase-receipt-line-product em { grid-column: 1 / -1; color: #668178; font-size: 9px; font-style: normal; }
.purchase-receipt-product-empty { color: var(--muted); font-size: 10px; }
.purchase-receipt-editor-layout.purchase-receipt-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(255px, .31fr);
  gap: 15px;
  align-items: start;
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.purchase-receipt-summary-card,
.purchase-receipt-total-card {
  display: block;
  position: sticky;
  inset-block-start: 8px;
  padding: 15px;
  border: 1px solid var(--purchase-accent-border);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, var(--purchase-accent-wash));
  box-shadow: 0 5px 14px #153f3808;
}
.purchase-receipt-summary-head { margin-bottom: 14px; }
.purchase-receipt-summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #dcebe5; color: #56766d; font-size: 10px; }
.purchase-receipt-summary-row b { color: var(--ink); font-size: 11px; }
.purchase-receipt-summary-total { margin-top: 9px; border-top: 2px solid var(--purchase-accent-border); color: var(--purchase-accent-ink); font-weight: 850; }
.purchase-receipt-summary-total b { color: var(--purchase-accent-ink); font-size: 17px; }
.purchase-receipt-summary-card .field,
.purchase-receipt-total-card .field { display: grid; gap: 4px; margin-top: 9px; }
.purchase-receipt-summary-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed #d4e3dd; color: #678077; font-size: 9px; line-height: 1.48; }
.purchase-receipt-toolbar .catalogue-search { flex: 1 1 270px; min-inline-size: 220px; }
.purchase-receipt-toolbar .catalogue-filter { flex: 0 1 145px; }
.purchase-receipt-reference { border: 0; padding: 0; background: transparent; color: var(--purchase-accent-ink); cursor: pointer; font: inherit; text-align: start; }
.purchase-receipt-reference:hover { text-decoration: underline; text-underline-offset: 2px; }
.purchase-receipt-product-chip { gap: 5px; }
.purchase-receipt-product-chip img,
.purchase-receipt-product-chip i { inline-size: 18px; block-size: 18px; border-radius: 50%; object-fit: cover; font-style: normal; text-align: center; }
.purchase-receipt-product-chip span { min-inline-size: 0; }
.purchase-receipt-product-chip b,
.purchase-receipt-product-chip small { display: block; max-inline-size: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-receipt-product-chip small { margin-top: 1px; color: #668178; font-size: 8px; }
.purchase-receipt-status--draft { background: #fff4e5; color: #96601a; }
.purchase-receipt-status--posted { background: #e8f7ef; color: #196844; }
.purchase-receipt-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 15px; border: 1px solid var(--purchase-accent-border); border-radius: 13px; background: var(--purchase-accent-wash); }
.purchase-receipt-detail-hero h3 { margin: 4px 0; color: var(--purchase-accent-ink); font-size: 18px; }
.purchase-receipt-detail-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.purchase-receipt-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.purchase-receipt-detail-stats > div { min-inline-size: 0; padding: 10px; border: 1px solid #d9e7e1; border-radius: 10px; background: #fff; }
.purchase-receipt-detail-stats small,.purchase-receipt-detail-stats b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-receipt-detail-stats small { color: var(--muted); font-size: 9px; }
.purchase-receipt-detail-stats b { margin-top: 4px; color: var(--ink); font-size: 11px; }
.purchase-receipt-detail-section { margin-top: 14px; }
.purchase-receipt-detail-section-head { margin-bottom: 8px; }
.purchase-receipt-detail-section-head h3 { margin: 0; color: var(--ink); font-size: 13px; }
.purchase-receipt-detail-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.purchase-receipt-detail-product { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; min-inline-size: 170px; }
.purchase-receipt-detail-product img,
.purchase-receipt-detail-product i { display: grid; inline-size: 36px; block-size: 36px; place-items: center; overflow: hidden; border-radius: 10px; background: var(--purchase-accent-soft); color: var(--purchase-accent-ink); font-style: normal; object-fit: cover; }
.purchase-receipt-detail-product b,.purchase-receipt-detail-product small { display: block; }
.purchase-receipt-detail-product small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.purchase-receipt-detail-note { margin-top: 13px; padding: 12px; border-inline-start: 3px solid var(--purchase-accent); border-radius: 0 10px 10px 0; background: var(--purchase-accent-wash); }
.purchase-receipt-detail-note b { color: var(--purchase-accent-ink); font-size: 10px; }
.purchase-receipt-detail-note p { margin: 5px 0 0; color: var(--ink); font-size: 10px; line-height: 1.5; }

@media (max-width: 1080px) {
  .purchase-receipt-editor-layout { grid-template-columns: 1fr; }
  .purchase-receipt-editor-layout.purchase-receipt-summary { grid-template-columns: 1fr; }
  .purchase-receipt-summary-card,
  .purchase-receipt-total-card { position: static; }
  .purchase-receipt-line-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .purchase-receipt-line-detail > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .purchase-receipt-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-receipt-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-receipt-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-receipt-toolbar .catalogue-search { min-inline-size: 0; }
}
@media (max-width: 460px) {
  .purchase-receipt-header-grid,.purchase-receipt-line-grid,.purchase-receipt-line-detail > div,.purchase-receipt-detail-stats { grid-template-columns: 1fr; }
  .purchase-receipt-section-head { align-items: flex-start; flex-direction: column; }
  .purchase-receipt-line-head { grid-template-columns: auto minmax(0, 1fr); }
  .purchase-receipt-line-head .purchase-receipt-remove-line { grid-column: 1 / -1; justify-self: end; }
}

/* Posted receipt traceability: corrective metadata is recorded separately from
   the Finance/Store evidence.  The modal intentionally uses the same fixed
   header, scrolling body, and fixed footer pattern as purchase receipts. */
form.modal.lot-traceability-modal,
form.modal[data-workflow="lot-traceability"] {
  --traceability-accent: #a35d1e;
  --traceability-accent-ink: #7d4011;
  --traceability-accent-soft: #fff0df;
  --traceability-accent-wash: #fffaf4;
  --traceability-accent-border: #efd0ad;
  display: flex;
  flex-direction: column;
  inline-size: min(790px, 100%);
  max-block-size: min(94vh, 830px);
  min-block-size: 0;
  overflow: hidden;
  border: 1px solid #ead8c4;
  border-radius: 18px;
  background: #fff;
}
.lot-traceability-modal .modal-head,
[data-workflow="lot-traceability"] .modal-head {
  flex: 0 0 auto;
  padding: 21px 25px 16px;
  border-bottom-color: var(--traceability-accent-border);
  background: linear-gradient(112deg, #fff 0%, var(--traceability-accent-wash) 100%);
}
.lot-traceability-modal .modal-head h2,
[data-workflow="lot-traceability"] .modal-head h2 { color: var(--traceability-accent-ink); font-size: 20px; letter-spacing: -.35px; }
.lot-traceability-modal .modal-head p,
[data-workflow="lot-traceability"] .modal-head p { max-inline-size: 620px; color: #7a634e; font-size: 11px; line-height: 1.48; }
.lot-traceability-modal .modal-head .close,
[data-workflow="lot-traceability"] .modal-head .close { border: 1px solid #ead7bf; background: #fffaf4; color: var(--traceability-accent-ink); }
.lot-traceability-modal .modal-head .close:hover,
[data-workflow="lot-traceability"] .modal-head .close:hover { border-color: #d8a979; background: var(--traceability-accent-soft); }
.lot-traceability-modal .modal-body,
[data-workflow="lot-traceability"] .modal-body {
  display: grid;
  flex: 1 1 auto;
  min-block-size: 0;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 25px 23px;
  background: #fbfaf8;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px 28px;
  -webkit-overflow-scrolling: touch;
}
.lot-traceability-modal .modal-footer,
[data-workflow="lot-traceability"] .modal-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 25px 18px;
  border-top: 1px solid #eadfd3;
  background: #fff;
}

/* The source document is reference-only, making it clear that this is an
   audited completion rather than an edit to a posted invoice. */
.traceability-context {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--traceability-accent-border);
  border-radius: 13px;
  padding: 11px 12px;
  background: linear-gradient(105deg, #fff, var(--traceability-accent-wash));
  box-shadow: inset 3px 0 0 var(--traceability-accent);
  text-align: start;
}
.traceability-context > i,
.traceability-context-icon {
  display: grid;
  inline-size: 35px;
  block-size: 35px;
  place-items: center;
  border-radius: 10px;
  background: var(--traceability-accent-soft);
  color: var(--traceability-accent-ink);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}
.traceability-context-copy { min-inline-size: 0; }
.traceability-context :is(small, .traceability-context-kicker) { display: block; color: #8a7057; font-size: 9px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.traceability-context :is(b, strong, .traceability-context-title) { display: block; overflow: hidden; margin-top: 2px; color: var(--traceability-accent-ink); font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.traceability-context .traceability-badge { justify-self: end; }

.traceability-provenance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  background: #fff;
}
.traceability-provenance > :is(div, dt, dd, li) {
  min-inline-size: 0;
  padding: 10px 11px;
  border-inline-start: 1px solid #f0e9e1;
}
.traceability-provenance > :is(div, dt, dd, li):nth-child(3n + 1) { border-inline-start: 0; }
.traceability-provenance :is(small, dt, .traceability-provenance-label) { display: block; overflow: hidden; color: #827568; font-size: 9px; font-weight: 800; letter-spacing: .35px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.traceability-provenance :is(b, strong, dd, .traceability-provenance-value) { display: block; overflow: hidden; margin: 4px 0 0; color: var(--ink); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.traceability-provenance :is(code, .traceability-lot-code) { color: var(--traceability-accent-ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-weight: 850; letter-spacing: .16px; unicode-bidi: isolate; }

.traceability-status-guide,
.traceability-locked {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #efd5b5;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff8ef;
  color: #805020;
  font-size: 10px;
  line-height: 1.45;
  text-align: start;
}
.traceability-status-guide > :is(i, .traceability-status-guide-icon),
.traceability-locked > :is(i, .traceability-locked-icon) {
  display: grid;
  inline-size: 21px;
  block-size: 21px;
  place-items: center;
  border-radius: 7px;
  background: #ffe9cd;
  color: #a66120;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.traceability-status-guide :is(b, strong),
.traceability-locked :is(b, strong) { color: #79410f; font-size: 10px; }
.traceability-status-guide :is(p, small),
.traceability-locked :is(p, small) { display: block; margin: 2px 0 0; color: inherit; font-size: inherit; }
.traceability-locked { border-color: #e6dfe0; background: #f7f6f5; color: #6e6661; }
.traceability-locked > :is(i, .traceability-locked-icon) { background: #ebe8e5; color: #756c65; }
.traceability-locked :is(b, strong) { color: #534d48; }

.traceability-form-grid,
.traceability-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lot-traceability-modal .field,
[data-workflow="lot-traceability"] .field { min-inline-size: 0; color: #4d5049; font-size: 10px; font-weight: 800; text-align: start; }
.lot-traceability-modal .field :is(input, select, textarea),
[data-workflow="lot-traceability"] .field :is(input, select, textarea) {
  min-inline-size: 0;
  border: 1px solid #d8d0c7;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.lot-traceability-modal .field :is(input, select, textarea):focus,
[data-workflow="lot-traceability"] .field :is(input, select, textarea):focus { border-color: var(--traceability-accent); box-shadow: 0 0 0 3px #a35d1e1a; }
.lot-traceability-modal .field :is(input, select, textarea):disabled,
[data-workflow="lot-traceability"] .field :is(input, select, textarea):disabled { border-style: dashed; background: #f3f1ee; color: #847d76; cursor: not-allowed; }
.traceability-reason,
.traceability-evidence { grid-column: 1 / -1; }
.traceability-reason textarea { min-block-size: 98px; resize: vertical; }
.traceability-evidence :is(small, .field-hint) { display: block; margin-top: -1px; color: #887f75; font-size: 9px; font-weight: 550; line-height: 1.4; }
.traceability-validation,
.traceability-feedback {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  grid-column: 1 / -1;
  border: 1px solid #ead6bd;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fffaf5;
  color: #805020;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
  text-align: start;
}
.traceability-validation[hidden],
.traceability-feedback[hidden] { display: none; }
.traceability-validation::before,
.traceability-feedback::before { flex: 0 0 auto; color: var(--traceability-accent); content: "!"; font-size: 12px; font-weight: 900; line-height: 1.15; }
.traceability-validation.success,
.traceability-feedback.success { border-color: #cfe5d8; background: #f6fbf8; color: #3e6e5b; }
.traceability-validation.success::before,
.traceability-feedback.success::before { color: var(--green); content: "✓"; }

/* Compact, readable lot state in receipt detail rows and Store snapshots. */
.traceability-badge,
.traceability-status {
  display: inline-flex;
  min-block-size: 23px;
  max-inline-size: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid #d9dfdc;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f4f6f5;
  color: #62736d;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  text-align: start;
  white-space: nowrap;
}
.traceability-badge::before,
.traceability-status::before { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; content: ""; opacity: .9; }
.traceability-badge--pending,
.traceability-badge.pending,
.traceability-status--pending,
.traceability-status.pending,
.traceability-badge[data-traceability-status="pending"],
.traceability-status[data-traceability-status="pending"] { border-color: #efd2aa; background: #fff6e9; color: #a55e18; }
.traceability-badge--complete,
.traceability-badge.complete,
.traceability-status--complete,
.traceability-status.complete,
.traceability-badge[data-traceability-status="complete"],
.traceability-status[data-traceability-status="complete"] { border-color: #cbe4d7; background: #eff9f4; color: #226a4b; }
.traceability-badge--not-applicable,
.traceability-badge--not_applicable,
.traceability-badge.not-applicable,
.traceability-badge.not_applicable,
.traceability-status--not-applicable,
.traceability-status--not_applicable,
.traceability-status.not-applicable,
.traceability-status.not_applicable,
.traceability-badge[data-traceability-status="not_applicable"],
.traceability-badge[data-traceability-status="not-applicable"],
.traceability-status[data-traceability-status="not_applicable"],
.traceability-status[data-traceability-status="not-applicable"] { border-color: #d9e1e5; background: #f2f6f8; color: #5a7180; }
.traceability-badge--locked,
.traceability-badge.locked,
.traceability-status--locked,
.traceability-status.locked,
.traceability-badge[data-traceability-status="locked"],
.traceability-status[data-traceability-status="locked"] { border-color: #e3dddd; background: #f7f5f5; color: #756966; }
.traceability-action {
  display: inline-flex;
  min-block-size: 29px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e1ba91;
  border-radius: 8px;
  padding: 6px 9px;
  background: #fff9f3;
  color: #8d4d16;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.traceability-action:hover:not(:disabled),
.traceability-action:focus-visible { border-color: #bd7b3d; background: var(--traceability-accent-soft); box-shadow: 0 0 0 3px #a35d1e14; outline: none; transform: translateY(-1px); }
.traceability-action--correct,
.traceability-action.correct { border-color: #b7cfdf; background: #f4f9fc; color: #3c668a; }
.traceability-action--correct:hover:not(:disabled),
.traceability-action.correct:hover:not(:disabled) { border-color: #7fa7c8; background: #eaf3f9; box-shadow: 0 0 0 3px #436d9b14; }
.traceability-action:disabled,
.traceability-action[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.purchase-receipt-detail-section .traceability-badge,
.purchase-receipt-detail-card .traceability-badge { margin-top: 5px; }
.purchase-receipt-detail-section .traceability-action,
.purchase-receipt-detail-card .traceability-action { margin-top: 7px; }
.traceability-cell { display: grid; min-inline-size: 152px; gap: 5px; align-items: start; text-align: start; }
.traceability-value { color: var(--ink); font-size: 10px; line-height: 1.4; }
.traceability-cell .traceability-locked { grid-template-columns: 16px minmax(0, 1fr); gap: 5px; padding: 6px 7px; font-size: 8px; }
.traceability-cell .traceability-locked > i { inline-size: 16px; block-size: 16px; border-radius: 5px; font-size: 9px; }
.traceability-footer-note { max-inline-size: 410px; color: #796b60; font-size: 9px; line-height: 1.4; text-align: start; }
.inventory-state-stack { display: grid; justify-items: start; gap: 5px; }
.inventory-state-stack > small { max-inline-size: 145px; color: #946027; font-size: 9px; font-weight: 700; line-height: 1.28; }

@media (max-width: 720px) {
  form.modal.lot-traceability-modal,
  form.modal[data-workflow="lot-traceability"] { max-block-size: 96vh; border-radius: 13px; }
  .lot-traceability-modal .modal-head,
  [data-workflow="lot-traceability"] .modal-head { padding: 16px 16px 13px; }
  .lot-traceability-modal .modal-body,
  [data-workflow="lot-traceability"] .modal-body { gap: 12px; padding: 13px 16px 17px; }
  .lot-traceability-modal .modal-footer,
  [data-workflow="lot-traceability"] .modal-footer { align-items: stretch; flex-wrap: wrap; padding: 12px 16px 15px; }
  .lot-traceability-modal .modal-footer .btn,
  [data-workflow="lot-traceability"] .modal-footer .btn { flex: 1 1 auto; }
  .traceability-context { grid-template-columns: 33px minmax(0, 1fr); }
  .traceability-context .traceability-badge { grid-column: 2; justify-self: start; }
  .traceability-provenance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traceability-provenance > :is(div, dt, dd, li) { border-inline-start: 1px solid #f0e9e1; }
  .traceability-provenance > :is(div, dt, dd, li):nth-child(3n + 1) { border-inline-start: 1px solid #f0e9e1; }
  .traceability-provenance > :is(div, dt, dd, li):nth-child(2n + 1) { border-inline-start: 0; }
}
@media (max-width: 460px) {
  .traceability-form-grid,
  .traceability-input-grid,
  .traceability-provenance { grid-template-columns: 1fr; }
  .traceability-provenance > :is(div, dt, dd, li),
  .traceability-provenance > :is(div, dt, dd, li):nth-child(3n + 1),
  .traceability-provenance > :is(div, dt, dd, li):nth-child(2n + 1) { border-inline-start: 0; border-top: 1px solid #f0e9e1; }
  .traceability-provenance > :is(div, dt, dd, li):first-child { border-top: 0; }
  .traceability-action { inline-size: 100%; }
  .traceability-footer-note { max-inline-size: none; }
}

/* Finance animal purchase invoices.  Animal identity stays line-level while
   shared supplier evidence and landed-cost charges stay at invoice level. */
.animal-purchase-page,
form.modal.animal-purchase-modal,
.animal-purchase-detail-modal {
  --animal-purchase-accent: #087469;
  --animal-purchase-accent-ink: #07544e;
  --animal-purchase-accent-soft: #e2f4ee;
  --animal-purchase-accent-wash: #f6fcfa;
  --animal-purchase-accent-border: #bfdfd5;
  --animal-purchase-gold: #a96520;
  --animal-purchase-gold-ink: #7c4511;
  --animal-purchase-gold-soft: #fff0de;
  --animal-purchase-gold-wash: #fffaf4;
  --animal-purchase-gold-border: #efd0ad;
}

/* Invoice workspace / register overview. */
.animal-purchase-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-block-end: 18px;
}
.animal-purchase-kpi {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--animal-purchase-accent-border);
  border-radius: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #fff 0%, var(--animal-purchase-accent-wash) 100%);
  box-shadow: 0 4px 12px #153f3808;
}
.animal-purchase-kpi::after {
  position: absolute;
  inset-block-start: -20px;
  inset-inline-end: -13px;
  inline-size: 76px;
  block-size: 76px;
  border: 13px solid #ffffffa8;
  border-radius: 50%;
  content: "";
}
.animal-purchase-kpi > * { position: relative; z-index: 1; }
.animal-purchase-kpi small { display: block; color: #5c7c73; font-size: 10px; font-weight: 800; letter-spacing: .48px; text-transform: uppercase; }
.animal-purchase-kpi b { display: block; margin: 7px 0 2px; color: var(--animal-purchase-accent-ink); font-size: 24px; font-weight: 900; letter-spacing: -.7px; line-height: 1.08; }
.animal-purchase-kpi span { display: block; color: #668178; font-size: 10px; line-height: 1.35; }
.animal-purchase-kpi:nth-child(2) { border-color: #d3e0f0; background: linear-gradient(135deg, #fff, #f2f7fc); }
.animal-purchase-kpi:nth-child(2) b { color: #315f8b; }
.animal-purchase-kpi:nth-child(3) { border-color: var(--animal-purchase-gold-border); background: linear-gradient(135deg, #fff, var(--animal-purchase-gold-wash)); }
.animal-purchase-kpi:nth-child(3) b { color: var(--animal-purchase-gold-ink); }
.animal-purchase-kpi:nth-child(4) { border-color: #dbd0ef; background: linear-gradient(135deg, #fff, #f7f2fc); }
.animal-purchase-kpi:nth-child(4) b { color: #67488b; }
.animal-purchase-reference { border: 0; padding: 0; background: transparent; color: var(--animal-purchase-accent-ink); cursor: pointer; font: inherit; text-align: start; }
.animal-purchase-reference:hover { text-decoration: underline; text-underline-offset: 2px; }
.animal-purchase-line-preview { display: block; max-inline-size: 250px; overflow: hidden; color: #496b61; font-size: 10px; line-height: 1.42; text-overflow: ellipsis; white-space: nowrap; }

/* A full-height invoice editor: only the body scrolls, so the financial
   decision and close controls never disappear beneath a long animal list. */
form.modal.animal-purchase-modal,
.animal-purchase-detail-modal {
  display: flex;
  flex-direction: column;
  inline-size: min(1280px, 100%);
  max-block-size: min(94vh, 940px);
  min-block-size: 0;
  overflow: hidden;
  border: 1px solid #d6e7e1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 72px #08221e63;
}
.animal-purchase-detail-modal { inline-size: min(1120px, 100%); }
.animal-purchase-modal .modal-head,
.animal-purchase-detail-modal .modal-head {
  flex: 0 0 auto;
  padding: 21px 25px 16px;
  border-bottom-color: var(--animal-purchase-accent-border);
  background: linear-gradient(112deg, #fff 0%, var(--animal-purchase-accent-wash) 100%);
}
.animal-purchase-modal .modal-head > div,
.animal-purchase-detail-modal .modal-head > div { min-inline-size: 0; }
.animal-purchase-modal .modal-head h2,
.animal-purchase-detail-modal .modal-head h2 { color: var(--animal-purchase-accent-ink); font-size: 21px; letter-spacing: -.4px; }
.animal-purchase-modal .modal-head p,
.animal-purchase-detail-modal .modal-head p { max-inline-size: 780px; color: #56766d; font-size: 11px; line-height: 1.48; }
.animal-purchase-modal .modal-head .close,
.animal-purchase-detail-modal .modal-head .close { flex: 0 0 auto; border: 1px solid #cce4da; background: #fff; color: var(--animal-purchase-accent-ink); transition: border-color .16s, background .16s, transform .16s; }
.animal-purchase-modal .modal-head .close:hover,
.animal-purchase-detail-modal .modal-head .close:hover { border-color: #9bcabd; background: var(--animal-purchase-accent-soft); transform: translateY(-1px); }
.animal-purchase-modal .modal-body,
.animal-purchase-detail-modal .modal-body {
  display: grid;
  flex: 1 1 auto;
  min-block-size: 0;
  align-content: start;
  gap: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 25px 23px;
  background: #f8fbfa;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px 28px;
  -webkit-overflow-scrolling: touch;
}
.animal-purchase-modal .modal-footer,
.animal-purchase-detail-modal .modal-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 25px 18px;
  border-top: 1px solid #dce8e3;
  background: #fff;
}
.animal-purchase-editor { min-block-size: 0; }
.animal-purchase-editor > :is(section, div) { min-inline-size: 0; }

/* Invoice document identity and shared cost inputs. */
.animal-purchase-header-card,
.animal-purchase-cost-card,
.animal-purchase-lines-card,
.animal-purchase-review-card {
  min-inline-size: 0;
  border: 1px solid var(--animal-purchase-accent-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 14px #153f3808;
}
.animal-purchase-header-card {
  overflow: visible;
  padding: 15px;
  background: linear-gradient(135deg, #fff, var(--animal-purchase-accent-wash));
}
.animal-purchase-header-card > :is(header, .animal-purchase-section-head),
.animal-purchase-cost-card > :is(header, .animal-purchase-section-head),
.animal-purchase-lines-head,
.animal-purchase-review-card > :is(header, .animal-purchase-review-head) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: 13px;
  text-align: start;
}
.animal-purchase-header-card :is(h3, h4),
.animal-purchase-cost-card :is(h3, h4),
.animal-purchase-lines-head h3,
.animal-purchase-review-card :is(h3, h4) { margin: 0; color: var(--ink); font-size: 13px; }
.animal-purchase-header-card :is(p, small),
.animal-purchase-cost-card :is(p, small),
.animal-purchase-lines-head p,
.animal-purchase-review-card :is(p, small) { display: block; margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.42; }
.animal-purchase-header-card > :is(header, .animal-purchase-section-head) > :is(span, i),
.animal-purchase-cost-card > :is(header, .animal-purchase-section-head) > :is(span, i),
.animal-purchase-review-card > :is(header, .animal-purchase-review-head) > :is(span, i) {
  display: grid;
  flex: 0 0 auto;
  inline-size: 31px;
  block-size: 31px;
  place-items: center;
  border-radius: 10px;
  background: var(--animal-purchase-accent-soft);
  color: var(--animal-purchase-accent-ink);
  font-style: normal;
  font-weight: 900;
}
.animal-purchase-header-card > :is(header, .animal-purchase-section-head) > :is(span, i),
.animal-purchase-cost-card > :is(header, .animal-purchase-section-head) > :is(span, i) { order: -1; }
.animal-purchase-section-head > div { display: flex; min-inline-size: 0; gap: 9px; }
.animal-purchase-section-head > div > span {
  display: grid; flex: 0 0 auto; inline-size: 31px; block-size: 31px; place-items: center;
  border-radius: 10px; background: var(--animal-purchase-accent-soft); color: var(--animal-purchase-accent-ink); font-weight: 900;
}
.animal-purchase-cost-card .animal-purchase-section-head > div > span { background: var(--animal-purchase-gold-soft); color: var(--animal-purchase-gold-ink); }
.animal-purchase-section-head em { flex: 0 0 auto; border: 1px solid var(--animal-purchase-accent-border); border-radius: 999px; padding: 4px 7px; background: #fff; color: var(--animal-purchase-accent-ink); font-size: 9px; font-style: normal; font-weight: 800; }
.animal-purchase-header-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 13px; }
.animal-purchase-editor .field { min-inline-size: 0; color: #355b52; font-size: 10px; font-weight: 800; text-align: start; }
.animal-purchase-editor .field :is(input, select, textarea) {
  min-inline-size: 0;
  border: 1px solid #ccddd7;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.animal-purchase-editor .field :is(input, select, textarea):focus { border-color: var(--animal-purchase-accent); box-shadow: 0 0 0 3px #08746917; }
.animal-purchase-editor .field textarea { min-block-size: 74px; }
.animal-purchase-editor .field :is(input, select, textarea):disabled { border-style: dashed; background: #f2f5f3; color: #6d817b; cursor: not-allowed; }
.animal-purchase-editor input[type="number"] { text-align: end; unicode-bidi: isolate; }
html[dir="rtl"] .animal-purchase-editor input[type="number"] { direction: ltr; }

.animal-purchase-cost-card {
  border-color: var(--animal-purchase-gold-border);
  padding: 15px;
  background: linear-gradient(136deg, #fff, var(--animal-purchase-gold-wash));
}
.animal-purchase-cost-card > :is(header, .animal-purchase-section-head) { margin-block-end: 14px; }
.animal-purchase-cost-card > :is(header, .animal-purchase-section-head) > :is(span, i) { background: var(--animal-purchase-gold-soft); color: var(--animal-purchase-gold-ink); }
.animal-purchase-cost-card .field { color: #75583d; }
.animal-purchase-cost-card .field :is(input, select, textarea) { border-color: #e2d0bf; }
.animal-purchase-cost-card .field :is(input, select, textarea):focus { border-color: var(--animal-purchase-gold); box-shadow: 0 0 0 3px #a9652017; }
.animal-purchase-cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 13px; }
.animal-purchase-cost-grid .field.full { grid-column: 1 / -1; }
.animal-purchase-cost-grid .field :is(input[type="number"], output) { color: var(--animal-purchase-gold-ink); font-weight: 800; }

/* Individual animals are cards rather than a compressed accounting row. */
.animal-purchase-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(278px, .34fr);
  gap: 15px;
  align-items: start;
}
.animal-purchase-lines-card { overflow: hidden; border-color: #d8e7e1; }
.animal-purchase-lines-head {
  margin: 0;
  padding: 15px 16px;
  border-bottom: 1px solid #dfece7;
  background: #fbfdfc;
}
.animal-purchase-lines-head > div { min-inline-size: 0; }
.animal-purchase-lines-head > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: flex-end; }
.animal-purchase-lines-head :is(.animal-purchase-line-count, .line-count) {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--animal-purchase-accent-soft);
  color: var(--animal-purchase-accent-ink);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.animal-purchase-line-list { display: grid; gap: 10px; padding: 12px; background: #f8fbfa; }
.animal-purchase-line {
  display: block;
  min-inline-size: 0;
  padding: 12px;
  border: 1px solid #d7e6e0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 5px #153f3805;
  transition: border-color .16s, box-shadow .16s;
}
.animal-purchase-line:hover { border-color: var(--animal-purchase-accent-border); box-shadow: 0 5px 13px #153f3809; }
.animal-purchase-line-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-block-end: 11px;
  text-align: start;
}
.animal-purchase-line-head > :nth-child(2) { min-inline-size: 0; }
.animal-purchase-line-head :is(h4, b) { display: block; overflow: hidden; margin: 0; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.animal-purchase-line-head :is(p, small) { display: block; overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.animal-purchase-line-number {
  display: grid;
  inline-size: 29px;
  block-size: 29px;
  place-items: center;
  border-radius: 9px;
  background: var(--animal-purchase-accent-soft);
  color: var(--animal-purchase-accent-ink);
  font-size: 10px;
  font-weight: 900;
  unicode-bidi: isolate;
}
.animal-purchase-line-head :is(.link-btn, .btn-danger, [data-action="remove-animal-purchase-line"]) { flex: 0 0 auto; min-inline-size: 66px; color: #a6493f; font-size: 10px; font-weight: 850; white-space: nowrap; }
.animal-purchase-line-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.animal-purchase-line-grid .field.full { grid-column: 1 / -1; }
.animal-purchase-line-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-block-start: 11px;
  overflow: hidden;
  border: 1px solid #cde4da;
  border-radius: 10px;
  background: linear-gradient(105deg, #f8fcfa, #f0f8f4);
}
.animal-purchase-line-metrics > :is(div, output, span) {
  display: block;
  min-inline-size: 0;
  padding: 8px 9px;
  border-inline-start: 1px solid #d9ebe4;
  color: #638077;
  font-size: 9px;
  line-height: 1.32;
  text-align: start;
}
.animal-purchase-line-metrics > :is(div, output, span):first-child { border-inline-start: 0; }
.animal-purchase-line-metrics :is(small, label) { display: block; overflow: hidden; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.animal-purchase-line-metrics :is(b, strong, output, .animal-purchase-money) { display: block; overflow: hidden; margin-block-start: 3px; color: var(--animal-purchase-accent-ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.animal-purchase-line-metrics > :last-child :is(b, strong, output, .animal-purchase-money),
.animal-purchase-line-metrics > :last-child:is(output, .animal-purchase-money) { color: var(--animal-purchase-gold-ink); }
.animal-purchase-line-details {
  margin-block-start: 10px;
  border-top: 1px dashed #d8e6e1;
  padding-block-start: 9px;
  color: var(--ink-2);
}
.animal-purchase-line-details summary { cursor: pointer; color: var(--animal-purchase-accent-ink); font-size: 10px; font-weight: 850; text-align: start; }
.animal-purchase-line-details > :not(summary) { margin-block-start: 10px; }
.animal-purchase-line-details > :is(div, section) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.animal-purchase-line-details .field.full { grid-column: 1 / -1; }

/* Calculation review is deliberately read-first and remains visible while
   adding animals on a wide screen. */
.animal-purchase-review-card {
  position: sticky;
  inset-block-start: 8px;
  padding: 15px;
  background: linear-gradient(145deg, #fff, var(--animal-purchase-accent-wash));
}
.animal-purchase-summary-head { display: flex; gap: 9px; align-items: flex-start; margin-block-end: 14px; text-align: start; }
.animal-purchase-summary-head > span { display: grid; flex: 0 0 auto; inline-size: 31px; block-size: 31px; place-items: center; border-radius: 10px; background: var(--animal-purchase-accent-soft); color: var(--animal-purchase-accent-ink); font-weight: 900; }
.animal-purchase-summary-head b { display: block; color: var(--ink); font-size: 12px; }
.animal-purchase-summary-head small { display: block; margin-block-start: 2px; color: var(--muted); font-size: 10px; line-height: 1.38; }
.animal-purchase-add-line-bottom { margin: 0 12px 13px; }
.animal-purchase-review-card > :is(header, .animal-purchase-review-head) { margin-block-end: 14px; }
.animal-purchase-review-card > :is(header, .animal-purchase-review-head) > :is(span, i) { background: var(--animal-purchase-accent-soft); color: var(--animal-purchase-accent-ink); }
.animal-purchase-review-rows { display: grid; }
.animal-purchase-review-rows > :is(div, li) {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 9px;
  border-top: 1px solid #dcebe5;
  color: #56766d;
  font-size: 10px;
  text-align: start;
}
.animal-purchase-review-rows > :is(div, li):first-child { border-top: 0; }
.animal-purchase-review-rows :is(b, strong, output) { flex: 0 0 auto; color: var(--ink); font-size: 11px; font-weight: 850; text-align: end; unicode-bidi: isolate; }
.animal-purchase-review-rows > :is(div, li).transport :is(b, strong, output),
.animal-purchase-review-rows > :is(div, li).commission :is(b, strong, output),
.animal-purchase-review-rows > :is(div, li).misc :is(b, strong, output),
.animal-purchase-review-rows > :is(div, li).header-cost :is(b, strong, output) { color: var(--animal-purchase-gold-ink); }
.animal-purchase-total {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 10px;
  border-top: 2px solid var(--animal-purchase-accent-border);
  padding-block-start: 11px;
  color: var(--animal-purchase-accent-ink);
  font-size: 11px;
  font-weight: 850;
  text-align: start;
}
.animal-purchase-total :is(b, strong, output) { color: var(--animal-purchase-accent-ink); font-size: 18px; font-weight: 900; letter-spacing: -.35px; text-align: end; unicode-bidi: isolate; }
.animal-purchase-review-card > :is(p, .animal-purchase-review-note) { margin: 12px 0 0; border-top: 1px dashed #d4e3dd; padding-top: 11px; color: #678077; font-size: 9px; line-height: 1.48; text-align: start; }
.animal-purchase-allocation-table {
  margin-block-start: 12px;
  overflow: auto;
  border: 1px solid #d7e7e1;
  border-radius: 11px;
  background: #fff;
  scrollbar-gutter: stable;
}
.animal-purchase-allocation-table table { inline-size: 100%; min-inline-size: 530px; border-collapse: collapse; }
table.animal-purchase-allocation-table { inline-size: 100%; min-inline-size: 500px; border-collapse: collapse; table-layout: fixed; }
.animal-purchase-allocation { overflow-x: auto; scrollbar-gutter: stable; }
.animal-purchase-allocation-table :is(th, td) { padding: 9px 10px; border-bottom: 1px solid #edf2ef; font-size: 9px; text-align: start; vertical-align: middle; }
.animal-purchase-allocation-table th { background: #f8fbfa; color: #668178; font-size: 8px; font-weight: 850; letter-spacing: .45px; text-transform: uppercase; }
.animal-purchase-allocation-table tr:last-child td { border-bottom: 0; }
.animal-purchase-allocation-table :is(td, th):is(.number, .amount, .weight, .animal-purchase-money) { text-align: end; unicode-bidi: isolate; }
.animal-purchase-allocation-table td:last-child { color: var(--animal-purchase-accent-ink); font-weight: 850; }

/* Read-only posted invoice detail. */
.animal-purchase-detail-hero {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--animal-purchase-accent-border);
  border-radius: 14px;
  padding: 15px;
  background: linear-gradient(115deg, #fff, var(--animal-purchase-accent-wash));
  text-align: start;
}
.animal-purchase-detail-hero > div { min-inline-size: 0; }
.animal-purchase-detail-hero :is(h3, h4) { overflow: hidden; margin: 4px 0; color: var(--animal-purchase-accent-ink); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.animal-purchase-detail-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.animal-purchase-detail-hero :is(.status, .animal-purchase-status) { flex: 0 0 auto; }
.animal-purchase-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}
.animal-purchase-detail-stats > :is(div, li) {
  min-inline-size: 0;
  border: 1px solid #d9e7e1;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  text-align: start;
}
.animal-purchase-detail-stats :is(small, span) { display: block; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.animal-purchase-detail-stats :is(b, strong, output) { display: block; overflow: hidden; margin-block-start: 4px; color: var(--ink); font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.animal-purchase-detail-stats > :nth-child(3) { border-color: var(--animal-purchase-gold-border); background: var(--animal-purchase-gold-wash); }
.animal-purchase-detail-stats > :nth-child(3) :is(b, strong, output) { color: var(--animal-purchase-gold-ink); }
.animal-purchase-detail-costs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--animal-purchase-gold-border);
  border-radius: 12px;
  background: #fffaf4;
}
.animal-purchase-detail-costs > :is(div, li) {
  min-inline-size: 0;
  padding: 10px 11px;
  border-inline-start: 1px solid #f0e3d5;
  text-align: start;
}
.animal-purchase-detail-costs > :is(div, li):first-child { border-inline-start: 0; }
.animal-purchase-detail-costs :is(small, span) { display: block; overflow: hidden; color: #8a7057; font-size: 9px; font-weight: 800; letter-spacing: .35px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.animal-purchase-detail-costs :is(b, strong, output) { display: block; overflow: hidden; margin-block-start: 4px; color: var(--animal-purchase-gold-ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.animal-purchase-detail-cost-total { grid-column: 1 / -1; border-top: 1px solid #efddca; background: linear-gradient(90deg,#fff8ee,#fff); }
.animal-purchase-detail-cost-total :is(b, strong, output) { color: var(--animal-purchase-accent-ink); font-size: 15px; }
.animal-purchase-detail-lines { margin-block-start: 15px; }
.animal-purchase-detail-lines > div:first-child { margin-block-end: 9px; }
.animal-purchase-detail-lines h3 { margin: 0; color: var(--ink); font-size: 13px; }
.animal-purchase-detail-lines p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.animal-purchase-detail-note { margin-block-start: 13px; border-inline-start: 3px solid var(--animal-purchase-gold); border-radius: 0 10px 10px 0; padding: 12px; background: var(--animal-purchase-gold-wash); text-align: start; }
.animal-purchase-detail-note b { color: var(--animal-purchase-gold-ink); font-size: 10px; }
.animal-purchase-detail-note p { margin: 5px 0 0; color: var(--ink); font-size: 10px; line-height: 1.5; }
.animal-purchase-footer-note { flex: 1 1 340px; max-inline-size: 580px; color: #657e75; font-size: 9px; line-height: 1.42; text-align: start; }
.animal-purchase-modal .modal-footer > div { display: flex; flex: 0 0 auto; gap: 9px; }

html[dir="rtl"] .animal-purchase-page,
html[dir="rtl"] .animal-purchase-modal,
html[dir="rtl"] .animal-purchase-detail-modal { text-align: start; }
html[dir="rtl"] .animal-purchase-line-metrics :is(b, strong, output, .animal-purchase-money),
html[dir="rtl"] .animal-purchase-review-rows :is(b, strong, output),
html[dir="rtl"] .animal-purchase-total :is(b, strong, output),
html[dir="rtl"] .animal-purchase-detail-stats :is(b, strong, output),
html[dir="rtl"] .animal-purchase-detail-costs :is(b, strong, output) { direction: ltr; }

@media (max-width: 1080px) {
  .animal-purchase-editor-layout { grid-template-columns: 1fr; }
  .animal-purchase-review-card { position: static; }
  .animal-purchase-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-purchase-line-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .animal-purchase-line-details > :is(div, section) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .animal-purchase-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-block-end: 13px; }
  .animal-purchase-kpi { padding: 12px; border-radius: 12px; }
  .animal-purchase-kpi b { font-size: 20px; }
  form.modal.animal-purchase-modal,
  .animal-purchase-detail-modal { max-block-size: 96vh; border-radius: 13px; }
  .animal-purchase-modal .modal-head,
  .animal-purchase-detail-modal .modal-head { padding: 16px 16px 13px; }
  .animal-purchase-modal .modal-body,
  .animal-purchase-detail-modal .modal-body { gap: 12px; padding: 13px 16px 17px; }
  .animal-purchase-modal .modal-footer,
  .animal-purchase-detail-modal .modal-footer { align-items: stretch; flex-wrap: wrap; padding: 12px 16px 15px; }
  .animal-purchase-modal .modal-footer .btn,
  .animal-purchase-detail-modal .modal-footer .btn { flex: 1 1 auto; }
  .animal-purchase-header-grid,
  .animal-purchase-cost-grid,
  .animal-purchase-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-purchase-lines-head { align-items: flex-start; flex-direction: column; }
  .animal-purchase-lines-head > div:last-child { inline-size: 100%; justify-content: flex-start; }
  .animal-purchase-line-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-purchase-line-metrics > :is(div, output, span):nth-child(2n + 1) { border-inline-start: 0; }
  .animal-purchase-detail-hero { align-items: flex-start; flex-direction: column; }
  .animal-purchase-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-purchase-detail-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-purchase-detail-costs > :is(div, li):nth-child(2n + 1) { border-inline-start: 0; }
}
@media (max-width: 460px) {
  .animal-purchase-overview,
  .animal-purchase-header-grid,
  .animal-purchase-cost-grid,
  .animal-purchase-line-grid,
  .animal-purchase-line-metrics,
  .animal-purchase-line-details > :is(div, section),
  .animal-purchase-detail-stats,
  .animal-purchase-detail-costs { grid-template-columns: 1fr; }
  .animal-purchase-header-card,
  .animal-purchase-cost-card,
  .animal-purchase-review-card { padding: 13px; border-radius: 12px; }
  .animal-purchase-line-head { grid-template-columns: auto minmax(0, 1fr); }
  .animal-purchase-line-head :is(.link-btn, .btn-danger, [data-action="remove-animal-purchase-line"]) { grid-column: 1 / -1; justify-self: end; }
  .animal-purchase-line-metrics > :is(div, output, span),
  .animal-purchase-line-metrics > :is(div, output, span):nth-child(2n + 1) { border-inline-start: 0; border-top: 1px solid #d9ebe4; }
  .animal-purchase-line-metrics > :is(div, output, span):first-child { border-top: 0; }
  .animal-purchase-detail-costs > :is(div, li),
  .animal-purchase-detail-costs > :is(div, li):nth-child(2n + 1) { border-inline-start: 0; border-top: 1px solid #f0e3d5; }
  .animal-purchase-detail-costs > :is(div, li):first-child { border-top: 0; }
  .animal-purchase-allocation-table { margin-inline: -1px; border-radius: 9px; }
}

/* Primary animal photos are useful identifiers, so intake keeps them compact
   and optional instead of turning every invoice line into a media editor. */
.animal-purchase-photo-card,
.animal-photo-thumbnail,
.animal-profile-photo,
.animal-photo-hero {
  --animal-purchase-accent: #087469;
  --animal-purchase-accent-ink: #07544e;
  --animal-purchase-accent-soft: #e2f4ee;
  --animal-purchase-accent-wash: #f6fcfa;
}
.animal-purchase-photo-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-inline-size: 0;
  margin-block: 10px 1px;
  border: 1px solid #cde3da;
  border-inline-start: 3px solid var(--animal-purchase-accent);
  border-radius: 12px;
  padding: 9px;
  background: linear-gradient(105deg, #fbfdfc, var(--animal-purchase-accent-wash));
  color: var(--ink);
  text-align: start;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.animal-purchase-photo-card[hidden] { display: none !important; }
.animal-purchase-photo-card:hover { border-color: #afd6c9; }
.animal-purchase-photo-card:focus-within,
.animal-purchase-photo-card.is-drop-target {
  border-color: var(--animal-purchase-accent);
  background: #f1faf6;
  box-shadow: 0 0 0 3px #08746914;
}
.animal-purchase-photo-preview {
  position: relative;
  display: grid;
  grid-area: auto !important;
  inline-size: 70px;
  block-size: 70px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cae1d8;
  border-radius: 11px;
  background: #e8f4ef;
}
.animal-purchase-photo-preview.has-image,
.animal-purchase-photo-preview:has(img:not([hidden])) { border-color: #c7ddd4; background: #fff; }
.animal-purchase-photo-preview img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.animal-purchase-photo-fallback {
  display: grid;
  grid-area: auto !important;
  inline-size: 37px;
  block-size: 37px;
  place-items: center;
  border-radius: 11px;
  background: var(--animal-purchase-accent-soft);
  color: var(--animal-purchase-accent-ink);
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}
.animal-purchase-photo-card.has-image .animal-purchase-photo-fallback,
.animal-purchase-photo-preview.has-image .animal-purchase-photo-fallback { display: none; }
.animal-purchase-photo-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  min-inline-size: 0;
}
.animal-purchase-photo-copy > div:first-child { min-inline-size: 0; }
.animal-purchase-photo-kicker {
  display: block;
  color: var(--animal-purchase-accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .78px;
  text-transform: uppercase;
}
.animal-purchase-photo-copy b {
  display: block;
  overflow: hidden;
  margin-block-start: 2px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.animal-purchase-photo-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.38;
}
.animal-purchase-photo-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.animal-purchase-photo-choose,
.animal-purchase-photo-replace {
  display: inline-flex;
  min-block-size: 29px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #b9dcd0;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--animal-purchase-accent-ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.animal-purchase-photo-choose:hover,
.animal-purchase-photo-replace:hover {
  border-color: var(--animal-purchase-accent);
  background: var(--animal-purchase-accent-soft);
  transform: translateY(-1px);
}
.animal-purchase-photo-choose:focus-visible,
.animal-purchase-photo-replace:focus-visible,
.animal-purchase-photo-remove:focus-visible {
  outline: 3px solid #0874692b;
  outline-offset: 2px;
}
.animal-purchase-photo-remove {
  border: 0;
  padding: 5px 1px;
  background: transparent;
  color: #a4554b;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.animal-purchase-photo-remove:hover { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.animal-purchase-photo-remove[hidden] { display: none !important; }
.animal-purchase-photo-status {
  grid-column: 1 / -1;
  color: #5c7b71;
  font-size: 9px;
  line-height: 1.35;
  text-align: end;
}
.animal-purchase-photo-status.error,
.animal-purchase-photo-status.is-error { color: var(--red); }
.animal-purchase-photo-status.success,
.animal-purchase-photo-status.is-success { color: var(--animal-purchase-accent-ink); }
.animal-purchase-photo-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.animal-purchase-photo-card.is-uploading {
  cursor: progress;
  opacity: .72;
  pointer-events: none;
}
.animal-purchase-photo-card.is-uploading .animal-purchase-photo-preview::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #07544ebd;
  color: #fff;
  content: "Uploading";
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* Directory thumbnails preserve scan speed in a dense register.  They can
   replace the existing animal mark without requiring a layout change. */
.animal-cell .animal-photo-thumbnail,
.animal-photo-thumbnail {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  inline-size: 38px;
  block-size: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cde2d9;
  border-radius: 11px;
  background: #e7f3ee;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.animal-photo-thumbnail.has-image,
.animal-photo-thumbnail:has(img:not([hidden])) { border-color: #c9ddd5; background: #fff; box-shadow: 0 1px 3px #153f3810; }
.animal-photo-thumbnail img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.animal-photo-thumbnail .animal-photo-fallback {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  background: #e7f3ee;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}
.animal-photo-thumbnail.has-image .animal-photo-fallback { display: none; }
.animal-photo-thumbnail-badge {
  position: absolute;
  inset-block-end: 1px;
  inset-inline-end: 1px;
  display: grid;
  inline-size: 12px;
  block-size: 12px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--animal-purchase-accent);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  line-height: 1;
}
button.animal-photo-thumbnail { cursor: pointer; }
button.animal-photo-thumbnail:focus-visible { outline: 3px solid #0a746833; outline-offset: 2px; }

/* A profile image is intentionally more prominent than a directory thumb,
   while remaining legible on the dark animal profile hero. */
.animal-profile-photo,
.animal-photo-hero {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  inline-size: 82px;
  block-size: 82px;
  place-items: center;
  overflow: hidden;
  margin: 0;
  border: 3px solid #ffffff4d;
  border-radius: 18px;
  background: #d9efe8;
  color: #07534c;
  box-shadow: 0 6px 18px #052a262b;
}
.animal-profile-photo.has-image,
.animal-photo-hero.has-image,
.animal-profile-photo:has(img:not([hidden])),
.animal-photo-hero:has(img:not([hidden])) { border-color: #ffffffad; background: #fff; }
.animal-profile-photo img,
.animal-photo-hero img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.animal-profile-photo .animal-photo-fallback,
.animal-photo-hero .animal-photo-fallback {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  background: #d9efe8;
  color: #07534c;
  font-size: 24px;
  font-weight: 900;
}
.animal-profile-photo.has-image .animal-photo-fallback,
.animal-photo-hero.has-image .animal-photo-fallback { display: none; }
.animal-photo-hero-badge {
  position: absolute;
  z-index: 1;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  display: grid;
  inline-size: 20px;
  block-size: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--animal-purchase-accent);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 720px) {
  .animal-purchase-photo-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .animal-purchase-photo-preview { inline-size: 62px; block-size: 62px; border-radius: 10px; }
  .animal-purchase-photo-fallback { inline-size: 33px; block-size: 33px; border-radius: 9px; font-size: 15px; }
  .animal-purchase-photo-copy { grid-template-columns: 1fr; gap: 6px; }
  .animal-purchase-photo-actions { justify-content: flex-start; }
  .animal-purchase-photo-status { text-align: start; }
  .animal-profile-photo,
  .animal-photo-hero { inline-size: 72px; block-size: 72px; border-radius: 16px; }
  .animal-profile-photo .animal-photo-fallback,
  .animal-photo-hero .animal-photo-fallback { font-size: 21px; }
}
@media (max-width: 460px) {
  .animal-purchase-photo-card { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; }
  .animal-purchase-photo-preview { inline-size: 56px; block-size: 56px; border-radius: 9px; }
  .animal-purchase-photo-copy b { font-size: 10px; }
  .animal-purchase-photo-copy p { font-size: 8px; }
  .animal-purchase-photo-choose,
  .animal-purchase-photo-replace { min-block-size: 28px; padding-inline: 7px; font-size: 8px; }
  .animal-photo-thumbnail { inline-size: 34px; block-size: 34px; border-radius: 10px; }
  .animal-profile-photo,
  .animal-photo-hero { inline-size: 64px; block-size: 64px; border-radius: 15px; }
}

/* Integrated treatment and medicine issue.  A treatment is one clinical
   decision; its medicine issue is a controlled Store movement.  The UI makes
   that distinction obvious without splitting it across two awkward dialogs. */
form.modal.treatment-issue-modal,
form.modal[data-workflow="treatment-issue"] {
  --treatment-issue-accent: #087469;
  --treatment-issue-ink: #07534d;
  --treatment-issue-soft: #e1f4ed;
  --treatment-issue-wash: #f6fcfa;
  --treatment-issue-border: #c3e1d7;
  --treatment-issue-gold: #aa621d;
  --treatment-issue-gold-soft: #fff0de;
  --treatment-issue-gold-wash: #fff9f2;
  --treatment-issue-gold-border: #efd0ad;
  display: flex;
  flex-direction: column;
  inline-size: min(1120px, 100%);
  max-block-size: min(94vh, 900px);
  min-block-size: 0;
  overflow: hidden;
  border: 1px solid #cfe4dc;
  border-radius: 18px;
  background: #fff;
}
.treatment-issue-modal .modal-head,
[data-workflow="treatment-issue"] .modal-head {
  flex: 0 0 auto;
  padding: 21px 25px 16px;
  border-bottom-color: var(--treatment-issue-border);
  background: linear-gradient(111deg, #fff 0%, var(--treatment-issue-wash) 100%);
}
.treatment-issue-modal .modal-head > div,
[data-workflow="treatment-issue"] .modal-head > div { min-inline-size: 0; }
.treatment-issue-modal .modal-head h2,
[data-workflow="treatment-issue"] .modal-head h2 { color: var(--treatment-issue-ink); font-size: 21px; letter-spacing: -.4px; }
.treatment-issue-modal .modal-head p,
[data-workflow="treatment-issue"] .modal-head p { max-inline-size: 760px; color: #55776e; font-size: 11px; line-height: 1.5; }
.treatment-issue-modal .modal-head .close,
[data-workflow="treatment-issue"] .modal-head .close {
  flex: 0 0 auto;
  border: 1px solid #cce3da;
  background: #fff;
  color: var(--treatment-issue-ink);
  transition: border-color .16s, background .16s, transform .16s;
}
.treatment-issue-modal .modal-head .close:hover,
[data-workflow="treatment-issue"] .modal-head .close:hover { border-color: #9fcbbb; background: var(--treatment-issue-soft); transform: translateY(-1px); }
.treatment-issue-modal .modal-body,
[data-workflow="treatment-issue"] .modal-body {
  display: grid;
  flex: 1 1 auto;
  min-block-size: 0;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 25px 23px;
  background: #f8fbfa;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px 28px;
  -webkit-overflow-scrolling: touch;
}
/* The integrated editor is a sequence of independently growing cards.  Using
   a constrained CSS grid here lets overflow-hidden cards shrink below their
   clinical fields; a normal scrolling flow keeps every field and medicine
   line fully available at any viewport height. */
.treatment-issue-modal .modal-body,
[data-workflow="treatment-issue"] .modal-body { display: block; }
.treatment-issue-modal .modal-body > * + *,
[data-workflow="treatment-issue"] .modal-body > * + * { margin-block-start: 14px; }
.treatment-issue-modal .modal-footer,
[data-workflow="treatment-issue"] .modal-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 25px 18px;
  border-top: 1px solid #d8e8e2;
  background: #fff;
}
.treatment-issue-modal .modal-footer > :first-child:not(.btn),
[data-workflow="treatment-issue"] .modal-footer > :first-child:not(.btn) { flex: 1 1 auto; }

/* Context carries the identity being treated into the controlled issue step. */
.treatment-issue-context,
.treatment-issue-animal,
.treatment-issue-animal-context {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--treatment-issue-border);
  border-radius: 13px;
  padding: 11px 12px;
  background: linear-gradient(104deg, #fff, var(--treatment-issue-wash));
  box-shadow: inset 3px 0 0 var(--treatment-issue-accent);
  text-align: start;
}
.treatment-issue-context > :is(i, .treatment-issue-context-icon, .treatment-issue-animal-icon),
.treatment-issue-animal > :is(i, .treatment-issue-context-icon, .treatment-issue-animal-icon),
.treatment-issue-animal-context > :is(i, .treatment-issue-context-icon, .treatment-issue-animal-icon) {
  display: grid;
  inline-size: 38px;
  block-size: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--treatment-issue-soft);
  color: var(--treatment-issue-ink);
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}
.treatment-issue-context-copy,
.treatment-issue-animal-copy { min-inline-size: 0; }
.treatment-issue-context :is(small, .treatment-issue-context-kicker),
.treatment-issue-animal :is(small, .treatment-issue-context-kicker),
.treatment-issue-animal-context :is(small, .treatment-issue-context-kicker) {
  display: block;
  overflow: hidden;
  color: #608077;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .45px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.treatment-issue-context :is(b, strong, .treatment-issue-context-title),
.treatment-issue-animal :is(b, strong, .treatment-issue-context-title),
.treatment-issue-animal-context :is(b, strong, .treatment-issue-context-title) {
  display: block;
  overflow: hidden;
  margin-block-start: 2px;
  color: var(--treatment-issue-ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-issue-context > :last-child:not(:only-child),
.treatment-issue-animal > :last-child:not(:only-child),
.treatment-issue-animal-context > :last-child:not(:only-child) { justify-self: end; }

/* The editor becomes a clinical column plus an always-readable issue summary. */
.treatment-issue-layout,
.treatment-issue-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(278px, .36fr);
  gap: 15px;
  align-items: start;
}
.treatment-issue-main,
.treatment-issue-editor-main,
.treatment-issue-form-stack { display: grid; min-inline-size: 0; gap: 14px; }
.treatment-issue-card,
.treatment-issue-clinical-card,
.treatment-issue-stock-card,
.treatment-issue-medicine-card,
.treatment-issue-lines-card {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid #d5e6e0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px #153f3805;
}
.treatment-issue-clinical-card { border-color: var(--treatment-issue-border); background: linear-gradient(145deg, #fff, #fbfefc); }
.treatment-issue-stock-card,
.treatment-issue-medicine-card { border-color: #dce8e3; }
.treatment-issue-card > :is(header, .treatment-issue-section-head),
.treatment-issue-clinical-card > :is(header, .treatment-issue-section-head),
.treatment-issue-stock-card > :is(header, .treatment-issue-section-head),
.treatment-issue-medicine-card > :is(header, .treatment-issue-section-head),
.treatment-issue-lines-card > :is(header, .treatment-issue-section-head) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 15px 12px;
  border-bottom: 1px solid #e2eee9;
  background: #fbfdfc;
  text-align: start;
}
.treatment-issue-clinical-card > :is(header, .treatment-issue-section-head) { border-bottom-color: #d9ebe4; background: linear-gradient(98deg, #fbfefc, var(--treatment-issue-wash)); }
.treatment-issue-section-head > div { display: flex; min-inline-size: 0; gap: 9px; }
.treatment-issue-section-head > div > :is(i, span.treatment-issue-section-icon) {
  display: grid;
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  place-items: center;
  border-radius: 10px;
  background: var(--treatment-issue-soft);
  color: var(--treatment-issue-ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}
.treatment-issue-section-head h3,
.treatment-issue-section-head h4,
.treatment-issue-card > header :is(h3, h4),
.treatment-issue-clinical-card > header :is(h3, h4),
.treatment-issue-stock-card > header :is(h3, h4),
.treatment-issue-medicine-card > header :is(h3, h4),
.treatment-issue-lines-card > header :is(h3, h4) { margin: 0; color: var(--ink); font-size: 13px; }
.treatment-issue-section-head p,
.treatment-issue-card > header p,
.treatment-issue-clinical-card > header p,
.treatment-issue-stock-card > header p,
.treatment-issue-medicine-card > header p,
.treatment-issue-lines-card > header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.treatment-issue-section-count,
.treatment-issue-line-count {
  flex: 0 0 auto;
  border: 1px solid var(--treatment-issue-border);
  border-radius: 999px;
  padding: 4px 7px;
  background: #fff;
  color: var(--treatment-issue-ink);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.treatment-issue-card > :not(header):not(.treatment-issue-section-head),
.treatment-issue-clinical-card > :not(header):not(.treatment-issue-section-head),
.treatment-issue-stock-card > :not(header):not(.treatment-issue-section-head),
.treatment-issue-medicine-card > :not(header):not(.treatment-issue-section-head) { margin-inline: 14px; }
.treatment-issue-card > :last-child,
.treatment-issue-clinical-card > :last-child,
.treatment-issue-stock-card > :last-child,
.treatment-issue-medicine-card > :last-child { margin-block-end: 14px; }

.treatment-issue-form-grid,
.treatment-issue-clinical-grid,
.treatment-issue-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 12px; }
.treatment-issue-form-grid .field.full,
.treatment-issue-clinical-grid .field.full,
.treatment-issue-input-grid .field.full { grid-column: 1 / -1; }
.treatment-issue-modal .field,
[data-workflow="treatment-issue"] .field { min-inline-size: 0; color: #355b52; font-size: 10px; font-weight: 800; text-align: start; }
.treatment-issue-modal .field :is(input, select, textarea),
[data-workflow="treatment-issue"] .field :is(input, select, textarea) {
  min-inline-size: 0;
  border: 1px solid #cadfd7;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.treatment-issue-modal .field :is(input, select, textarea):focus,
[data-workflow="treatment-issue"] .field :is(input, select, textarea):focus { border-color: var(--treatment-issue-accent); box-shadow: 0 0 0 3px #08746917; }
.treatment-issue-modal .field :is(input, select, textarea):disabled,
[data-workflow="treatment-issue"] .field :is(input, select, textarea):disabled { border-style: dashed; background: #f2f5f3; color: #71817d; cursor: not-allowed; }
.treatment-issue-modal .field textarea,
[data-workflow="treatment-issue"] .field textarea { min-block-size: 78px; resize: vertical; }
.treatment-issue-modal input[type="number"],
[data-workflow="treatment-issue"] input[type="number"],
.treatment-issue-numeric { text-align: end; unicode-bidi: isolate; }

/* A no-medicine clinical observation is an intentional, visible choice—not a
   blank issue section that looks like an accidental omission. */
.treatment-issue-observation,
.treatment-issue-no-medicine,
.treatment-issue-empty-state {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px dashed #c8dcd5;
  border-radius: 11px;
  padding: 11px;
  background: #f9fcfa;
  color: #55746c;
  text-align: start;
}
.treatment-issue-observation > :is(i, .treatment-issue-observation-icon, .treatment-issue-empty-icon),
.treatment-issue-no-medicine > :is(i, .treatment-issue-observation-icon, .treatment-issue-empty-icon),
.treatment-issue-empty-state > :is(i, .treatment-issue-observation-icon, .treatment-issue-empty-icon) {
  display: grid;
  inline-size: 30px;
  block-size: 30px;
  place-items: center;
  border-radius: 9px;
  background: #edf4f1;
  color: var(--treatment-issue-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}
.treatment-issue-observation :is(b, strong),
.treatment-issue-no-medicine :is(b, strong),
.treatment-issue-empty-state :is(b, strong) { display: block; color: var(--ink-2); font-size: 10px; }
.treatment-issue-observation :is(small, p),
.treatment-issue-no-medicine :is(small, p),
.treatment-issue-empty-state :is(small, p) { display: block; margin: 2px 0 0; color: inherit; font-size: 9px; line-height: 1.4; }
.treatment-issue-observation.is-selected,
.treatment-issue-no-medicine.is-selected,
.treatment-issue-empty-state.is-selected { border-color: #a7d5c5; border-style: solid; background: var(--treatment-issue-wash); box-shadow: inset 3px 0 0 var(--treatment-issue-accent); }

/* Each medicine line independently exposes stock, lot, expiry, quantity, and
   balance.  This prevents a practitioner from mistaking a product name for
   usable stock. */
.treatment-issue-line-list,
.treatment-issue-lines { display: grid; gap: 10px; padding: 12px; background: #f8fbfa; }
.treatment-issue-line {
  min-inline-size: 0;
  border: 1px solid #d5e6e0;
  border-radius: 13px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 2px 5px #153f3805;
  text-align: start;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.treatment-issue-line:hover { border-color: var(--treatment-issue-border); box-shadow: 0 5px 13px #153f380a; }
.treatment-issue-line.is-invalid,
.treatment-issue-line.has-error { border-color: #e8b4ae; background: #fffafa; }
.treatment-issue-line.is-expired,
.treatment-issue-line[data-expiry-state="expired"] { border-color: #e9bbb5; background: #fffafa; }
.treatment-issue-line-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-block-end: 11px;
}
.treatment-issue-line-number {
  display: grid;
  inline-size: 29px;
  block-size: 29px;
  place-items: center;
  border-radius: 9px;
  background: var(--treatment-issue-soft);
  color: var(--treatment-issue-ink);
  font-size: 10px;
  font-weight: 900;
  unicode-bidi: isolate;
}
.treatment-issue-line-head > :nth-child(2) { min-inline-size: 0; }
.treatment-issue-line-head :is(h4, b, .treatment-issue-line-title) { display: block; overflow: hidden; margin: 0; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-issue-line-head :is(p, small, .treatment-issue-line-caption) { display: block; overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-issue-remove-line,
.treatment-issue-line [data-action="remove-treatment-issue-line"] {
  flex: 0 0 auto;
  min-block-size: 28px;
  border: 1px solid #f0cbc6;
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff9f8;
  color: #a6483e;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}
.treatment-issue-remove-line:hover,
.treatment-issue-remove-line:focus-visible,
.treatment-issue-line [data-action="remove-treatment-issue-line"]:hover,
.treatment-issue-line [data-action="remove-treatment-issue-line"]:focus-visible { border-color: #db9188; background: var(--red-pale); outline: none; }
.treatment-issue-line-grid,
.treatment-issue-medicine-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(0, .72fr)); gap: 10px; }
.treatment-issue-line-grid .field.full,
.treatment-issue-medicine-grid .field.full { grid-column: 1 / -1; }
.treatment-issue-add-line,
.treatment-issue-add-medicine {
  display: inline-flex;
  min-block-size: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #9fcbbb;
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--treatment-issue-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.treatment-issue-add-line:hover,
.treatment-issue-add-line:focus-visible,
.treatment-issue-add-medicine:hover,
.treatment-issue-add-medicine:focus-visible { border-style: solid; border-color: var(--treatment-issue-accent); background: var(--treatment-issue-soft); box-shadow: 0 0 0 3px #08746913; outline: none; transform: translateY(-1px); }
.treatment-issue-add-line-bottom { margin: 0 12px 13px; }
.treatment-issue-add-line-bottom .treatment-issue-add-line,
.treatment-issue-add-line-bottom .treatment-issue-add-medicine { inline-size: 100%; }

.treatment-issue-stock-detail,
.treatment-issue-stock-facts,
.treatment-issue-stock-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-block-start: 10px;
  border: 1px solid #d2e6dd;
  border-radius: 10px;
  background: linear-gradient(104deg, #fbfefc, #f0f8f4);
}
.treatment-issue-stock-detail > :is(div, li, output, span),
.treatment-issue-stock-facts > :is(div, li, output, span),
.treatment-issue-stock-summary > :is(div, li, output, span) {
  min-inline-size: 0;
  border-inline-start: 1px solid #dcebe5;
  padding: 8px 9px;
  color: #628078;
  font-size: 9px;
  line-height: 1.32;
  text-align: start;
}
.treatment-issue-stock-detail > :first-child,
.treatment-issue-stock-facts > :first-child,
.treatment-issue-stock-summary > :first-child { border-inline-start: 0; }
.treatment-issue-stock-detail :is(small, label, .treatment-issue-stock-label),
.treatment-issue-stock-facts :is(small, label, .treatment-issue-stock-label),
.treatment-issue-stock-summary :is(small, label, .treatment-issue-stock-label) { display: block; overflow: hidden; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.treatment-issue-stock-detail :is(b, strong, output, .treatment-issue-stock-value),
.treatment-issue-stock-facts :is(b, strong, output, .treatment-issue-stock-value),
.treatment-issue-stock-summary :is(b, strong, output, .treatment-issue-stock-value) { display: block; overflow: hidden; margin-block-start: 3px; color: var(--treatment-issue-ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.treatment-issue-stock-detail > :last-child :is(b, strong, output, .treatment-issue-stock-value),
.treatment-issue-stock-facts > :last-child :is(b, strong, output, .treatment-issue-stock-value),
.treatment-issue-stock-summary > :last-child :is(b, strong, output, .treatment-issue-stock-value) { color: var(--treatment-issue-gold); }

/* Expired stock is kept visible for traceability, but unmistakably blocked. */
.treatment-issue-expiry,
.treatment-issue-expiry-state,
.treatment-issue-stock-state,
.treatment-issue-availability {
  display: inline-flex;
  min-block-size: 23px;
  max-inline-size: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid #cbe4d8;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eff9f4;
  color: #216c4d;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  text-align: start;
  white-space: nowrap;
}
.treatment-issue-expiry::before,
.treatment-issue-expiry-state::before,
.treatment-issue-stock-state::before,
.treatment-issue-availability::before { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; content: ""; opacity: .9; }
.treatment-issue-expiry--expiring,
.treatment-issue-expiry.expiring,
.treatment-issue-expiry-state.expiring,
.treatment-issue-stock-state.expiring,
.treatment-issue-availability.low,
.treatment-issue-expiry[data-expiry-state="expiring"],
.treatment-issue-expiry-state[data-expiry-state="expiring"],
.treatment-issue-stock-state[data-expiry-state="expiring"] { border-color: #efd1aa; background: #fff6e9; color: #a45e18; }
.treatment-issue-expiry--expired,
.treatment-issue-expiry.expired,
.treatment-issue-expiry-state.expired,
.treatment-issue-stock-state.expired,
.treatment-issue-availability.unavailable,
.treatment-issue-expiry[data-expiry-state="expired"],
.treatment-issue-expiry-state[data-expiry-state="expired"],
.treatment-issue-stock-state[data-expiry-state="expired"] { border-color: #ebc5c0; background: #fff3f1; color: #a8463b; }
.treatment-issue-expiry--blocked,
.treatment-issue-expiry.blocked,
.treatment-issue-stock-state.blocked,
.treatment-issue-availability.blocked { border-color: #e4dcda; background: #f7f5f4; color: #756a66; }

.treatment-issue-alert,
.treatment-issue-feedback,
.treatment-issue-validation {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #e8d0ad;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff9ef;
  color: #825220;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
  text-align: start;
}
.treatment-issue-alert[hidden],
.treatment-issue-feedback[hidden],
.treatment-issue-validation[hidden] { display: none; }
.treatment-issue-alert > :is(i, .treatment-issue-alert-icon),
.treatment-issue-feedback > :is(i, .treatment-issue-alert-icon),
.treatment-issue-validation > :is(i, .treatment-issue-alert-icon) {
  display: grid;
  inline-size: 21px;
  block-size: 21px;
  place-items: center;
  border-radius: 7px;
  background: #ffe9cd;
  color: #a66120;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.treatment-issue-alert :is(b, strong),
.treatment-issue-feedback :is(b, strong),
.treatment-issue-validation :is(b, strong) { display: block; color: #78410f; font-size: 10px; }
.treatment-issue-alert :is(p, small),
.treatment-issue-feedback :is(p, small),
.treatment-issue-validation :is(p, small) { display: block; margin: 2px 0 0; color: inherit; font-size: inherit; }
.treatment-issue-alert--danger,
.treatment-issue-alert.danger,
.treatment-issue-feedback.error,
.treatment-issue-validation.error { border-color: #ebc6c1; background: #fff5f3; color: #99473e; }
.treatment-issue-alert--danger > :is(i, .treatment-issue-alert-icon),
.treatment-issue-alert.danger > :is(i, .treatment-issue-alert-icon),
.treatment-issue-feedback.error > :is(i, .treatment-issue-alert-icon),
.treatment-issue-validation.error > :is(i, .treatment-issue-alert-icon) { background: #fde3df; color: #b54a40; }
.treatment-issue-alert--success,
.treatment-issue-alert.success,
.treatment-issue-feedback.success,
.treatment-issue-validation.success { border-color: #cde4d8; background: #f4fbf7; color: #3b6c59; }
.treatment-issue-alert--success > :is(i, .treatment-issue-alert-icon),
.treatment-issue-alert.success > :is(i, .treatment-issue-alert-icon),
.treatment-issue-feedback.success > :is(i, .treatment-issue-alert-icon),
.treatment-issue-validation.success > :is(i, .treatment-issue-alert-icon) { background: #def1e8; color: #147154; }

/* The issue review is deliberately read-first on desktop and becomes a normal
   card below the form as space tightens. */
.treatment-issue-summary,
.treatment-issue-summary-card,
.treatment-issue-review-card {
  position: sticky;
  inset-block-start: 8px;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--treatment-issue-border);
  border-radius: 14px;
  padding: 15px;
  background: linear-gradient(145deg, #fff, var(--treatment-issue-wash));
  box-shadow: 0 3px 8px #153f3807;
  text-align: start;
}
.treatment-issue-summary-head,
.treatment-issue-review-head { display: flex; gap: 9px; align-items: flex-start; margin-block-end: 13px; }
.treatment-issue-summary-head > :is(i, span),
.treatment-issue-review-head > :is(i, span) {
  display: grid;
  flex: 0 0 auto;
  inline-size: 31px;
  block-size: 31px;
  place-items: center;
  border-radius: 10px;
  background: var(--treatment-issue-soft);
  color: var(--treatment-issue-ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}
.treatment-issue-summary-head > div,
.treatment-issue-review-head > div { min-inline-size: 0; }
.treatment-issue-summary-head :is(b, strong),
.treatment-issue-review-head :is(b, strong) { display: block; color: var(--ink); font-size: 12px; }
.treatment-issue-summary-head small,
.treatment-issue-review-head small { display: block; margin-block-start: 2px; color: var(--muted); font-size: 10px; line-height: 1.38; }
.treatment-issue-summary-rows,
.treatment-issue-review-rows { display: grid; }
.treatment-issue-summary-rows > :is(div, li),
.treatment-issue-review-rows > :is(div, li) {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 9px;
  border-top: 1px solid #dcebe5;
  color: #58776e;
  font-size: 10px;
}
.treatment-issue-summary-rows > :first-child,
.treatment-issue-review-rows > :first-child { border-top: 0; }
.treatment-issue-summary-rows :is(b, strong, output),
.treatment-issue-review-rows :is(b, strong, output) { flex: 0 0 auto; color: var(--ink); font-size: 11px; font-weight: 850; text-align: end; unicode-bidi: isolate; }
.treatment-issue-summary-total,
.treatment-issue-review-total {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 9px;
  border-top: 2px solid var(--treatment-issue-border);
  padding-block-start: 11px;
  color: var(--treatment-issue-ink);
  font-size: 11px;
  font-weight: 850;
}
.treatment-issue-summary-total :is(b, strong, output),
.treatment-issue-review-total :is(b, strong, output) { color: var(--treatment-issue-ink); font-size: 18px; font-weight: 900; letter-spacing: -.35px; text-align: end; unicode-bidi: isolate; }
.treatment-issue-summary-note,
.treatment-issue-review-note { margin: 12px 0 0; border-top: 1px dashed #d4e3dd; padding-top: 11px; color: #647f75; font-size: 9px; line-height: 1.48; }

html[dir="rtl"] .treatment-issue-modal,
html[dir="rtl"] [data-workflow="treatment-issue"] { text-align: start; }
html[dir="rtl"] .treatment-issue-modal input[type="number"],
html[dir="rtl"] [data-workflow="treatment-issue"] input[type="number"],
html[dir="rtl"] .treatment-issue-stock-detail :is(b, strong, output, .treatment-issue-stock-value),
html[dir="rtl"] .treatment-issue-stock-facts :is(b, strong, output, .treatment-issue-stock-value),
html[dir="rtl"] .treatment-issue-stock-summary :is(b, strong, output, .treatment-issue-stock-value),
html[dir="rtl"] .treatment-issue-summary-rows :is(b, strong, output),
html[dir="rtl"] .treatment-issue-review-rows :is(b, strong, output),
html[dir="rtl"] .treatment-issue-summary-total :is(b, strong, output),
html[dir="rtl"] .treatment-issue-review-total :is(b, strong, output) { direction: ltr; }

@media (max-width: 1050px) {
  .treatment-issue-layout,
  .treatment-issue-editor-layout { grid-template-columns: 1fr; }
  .treatment-issue-summary,
  .treatment-issue-summary-card,
  .treatment-issue-review-card { position: static; }
  .treatment-issue-form-grid,
  .treatment-issue-clinical-grid,
  .treatment-issue-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment-issue-line-grid,
  .treatment-issue-medicine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  form.modal.treatment-issue-modal,
  form.modal[data-workflow="treatment-issue"] { max-block-size: 96vh; border-radius: 13px; }
  .treatment-issue-modal .modal-head,
  [data-workflow="treatment-issue"] .modal-head { padding: 16px 16px 13px; }
  .treatment-issue-modal .modal-body,
  [data-workflow="treatment-issue"] .modal-body { gap: 12px; padding: 13px 16px 17px; }
  .treatment-issue-modal .modal-footer,
  [data-workflow="treatment-issue"] .modal-footer { align-items: stretch; flex-wrap: wrap; padding: 12px 16px 15px; }
  .treatment-issue-modal .modal-footer .btn,
  [data-workflow="treatment-issue"] .modal-footer .btn { flex: 1 1 auto; }
  .treatment-issue-context,
  .treatment-issue-animal,
  .treatment-issue-animal-context { grid-template-columns: 36px minmax(0, 1fr); }
  .treatment-issue-context > :last-child:not(:only-child),
  .treatment-issue-animal > :last-child:not(:only-child),
  .treatment-issue-animal-context > :last-child:not(:only-child) { grid-column: 2; justify-self: start; }
  .treatment-issue-stock-detail,
  .treatment-issue-stock-facts,
  .treatment-issue-stock-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment-issue-stock-detail > :nth-child(2n + 1),
  .treatment-issue-stock-facts > :nth-child(2n + 1),
  .treatment-issue-stock-summary > :nth-child(2n + 1) { border-inline-start: 0; }
}
@media (max-width: 460px) {
  .treatment-issue-card > :is(header, .treatment-issue-section-head),
  .treatment-issue-clinical-card > :is(header, .treatment-issue-section-head),
  .treatment-issue-stock-card > :is(header, .treatment-issue-section-head),
  .treatment-issue-medicine-card > :is(header, .treatment-issue-section-head),
  .treatment-issue-lines-card > :is(header, .treatment-issue-section-head) { align-items: flex-start; flex-direction: column; }
  .treatment-issue-form-grid,
  .treatment-issue-clinical-grid,
  .treatment-issue-input-grid,
  .treatment-issue-line-grid,
  .treatment-issue-medicine-grid,
  .treatment-issue-stock-detail,
  .treatment-issue-stock-facts,
  .treatment-issue-stock-summary { grid-template-columns: 1fr; }
  .treatment-issue-form-grid .field.full,
  .treatment-issue-clinical-grid .field.full,
  .treatment-issue-input-grid .field.full,
  .treatment-issue-line-grid .field.full,
  .treatment-issue-medicine-grid .field.full { grid-column: auto; }
  .treatment-issue-line-head { grid-template-columns: auto minmax(0, 1fr); }
  .treatment-issue-remove-line,
  .treatment-issue-line [data-action="remove-treatment-issue-line"] { grid-column: 1 / -1; justify-self: end; }
  .treatment-issue-stock-detail > :is(div, li, output, span),
  .treatment-issue-stock-facts > :is(div, li, output, span),
  .treatment-issue-stock-summary > :is(div, li, output, span),
  .treatment-issue-stock-detail > :nth-child(2n + 1),
  .treatment-issue-stock-facts > :nth-child(2n + 1),
  .treatment-issue-stock-summary > :nth-child(2n + 1) { border-inline-start: 0; border-top: 1px solid #dcebe5; }
  .treatment-issue-stock-detail > :first-child,
  .treatment-issue-stock-facts > :first-child,
  .treatment-issue-stock-summary > :first-child { border-top: 0; }
  .treatment-issue-observation,
  .treatment-issue-no-medicine,
  .treatment-issue-empty-state { grid-template-columns: 30px minmax(0, 1fr); }
  .treatment-issue-observation > :last-child:not(:only-child),
  .treatment-issue-no-medicine > :last-child:not(:only-child),
  .treatment-issue-empty-state > :last-child:not(:only-child) { grid-column: 2; justify-self: start; }
}

/* Treatment Register — a calm clinical control centre rather than a dense
   transaction table.  These selectors are deliberately scoped so the
   integrated treatment & medicine issue modal retains its focused workflow. */
.treatment-register-page,
.treatment-register {
  --clinical-ink: #173d38;
  --clinical-accent: #087469;
  --clinical-accent-deep: #07564f;
  --clinical-mint: #e2f4ee;
  --clinical-wash: #f5fbf8;
  --clinical-line: #d4e6df;
  --clinical-blue: #356d9f;
  --clinical-blue-wash: #edf4fc;
  --clinical-amber: #91601c;
  --clinical-amber-wash: #fff7e8;
  --clinical-red: #a34e48;
  --clinical-red-wash: #fff1ef;
  --clinical-slate: #5f746f;
  color: var(--ink);
}
.treatment-register-page * { min-inline-size: 0; }
.treatment-register-kicker,
.clinical-kicker,
.treatment-register-eyebrow {
  display: block;
  color: var(--clinical-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .95px;
  line-height: 1.25;
  text-transform: uppercase;
}
.treatment-register-intro,
.clinical-register-intro {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-block: 0 16px;
}
.treatment-register-intro > div,
.clinical-register-intro > div { min-inline-size: 0; }
.treatment-register-intro h2,
.clinical-register-intro h2 { margin: 4px 0 3px; color: var(--clinical-ink); font-size: 20px; letter-spacing: -.35px; }
.treatment-register-intro p,
.clinical-register-intro p { max-inline-size: 780px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.treatment-register-intro .btn,
.clinical-register-intro .btn { flex: 0 0 auto; }

/* At-a-glance care status.  Variants use a left/end accent, not colour alone,
   so the meaning remains legible in low-colour displays. */
.treatment-kpi-grid,
.clinical-kpi-grid,
.treatment-register-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-block: 0 16px;
}
.treatment-kpi,
.clinical-kpi {
  position: relative;
  display: grid;
  min-block-size: 116px;
  overflow: hidden;
  border: 1px solid var(--clinical-line);
  border-radius: 14px;
  padding: 15px 16px 14px;
  background: #fff;
  box-shadow: 0 2px 7px #153f3807;
  isolation: isolate;
}
.treatment-kpi::after,
.clinical-kpi::after {
  position: absolute;
  z-index: -1;
  inset-inline-end: -27px;
  inset-block-end: -40px;
  inline-size: 102px;
  block-size: 102px;
  border-radius: 50%;
  background: var(--clinical-mint);
  content: "";
  opacity: .75;
}
.treatment-kpi > :is(small, span),
.clinical-kpi > :is(small, span) { align-self: start; color: var(--clinical-slate); font-size: 10px; font-weight: 780; line-height: 1.25; }
.treatment-kpi > :is(b, strong, output),
.clinical-kpi > :is(b, strong, output) { align-self: center; overflow: hidden; margin-block: 4px; color: var(--clinical-ink); font-size: 27px; font-weight: 900; letter-spacing: -1px; line-height: 1; text-overflow: ellipsis; unicode-bidi: isolate; white-space: nowrap; }
.treatment-kpi > :is(em, small:last-child, .treatment-kpi-note),
.clinical-kpi > :is(em, small:last-child, .clinical-kpi-note) { align-self: end; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.35; }
.treatment-kpi.overdue,
.treatment-kpi.danger,
.treatment-kpi.critical,
.clinical-kpi.overdue,
.clinical-kpi.danger,
.clinical-kpi.critical { border-color: #ecc7c3; background: linear-gradient(145deg, #fff, var(--clinical-red-wash)); }
.treatment-kpi.overdue::after,
.treatment-kpi.danger::after,
.treatment-kpi.critical::after,
.clinical-kpi.overdue::after,
.clinical-kpi.danger::after,
.clinical-kpi.critical::after { background: #f8d7d3; }
.treatment-kpi.overdue > :is(b, strong, output),
.treatment-kpi.danger > :is(b, strong, output),
.treatment-kpi.critical > :is(b, strong, output),
.clinical-kpi.overdue > :is(b, strong, output),
.clinical-kpi.danger > :is(b, strong, output),
.clinical-kpi.critical > :is(b, strong, output) { color: var(--clinical-red); }
.treatment-kpi.due,
.treatment-kpi.warning,
.treatment-kpi.attention,
.clinical-kpi.due,
.clinical-kpi.warning,
.clinical-kpi.attention { border-color: #eed8aa; background: linear-gradient(145deg, #fff, var(--clinical-amber-wash)); }
.treatment-kpi.due::after,
.treatment-kpi.warning::after,
.treatment-kpi.attention::after,
.clinical-kpi.due::after,
.clinical-kpi.warning::after,
.clinical-kpi.attention::after { background: #fae5bd; }
.treatment-kpi.due > :is(b, strong, output),
.treatment-kpi.warning > :is(b, strong, output),
.treatment-kpi.attention > :is(b, strong, output),
.clinical-kpi.due > :is(b, strong, output),
.clinical-kpi.warning > :is(b, strong, output),
.clinical-kpi.attention > :is(b, strong, output) { color: var(--clinical-amber); }
.treatment-kpi.withdrawal,
.treatment-kpi.info,
.clinical-kpi.withdrawal,
.clinical-kpi.info { border-color: #cbdced; background: linear-gradient(145deg, #fff, var(--clinical-blue-wash)); }
.treatment-kpi.withdrawal::after,
.treatment-kpi.info::after,
.clinical-kpi.withdrawal::after,
.clinical-kpi.info::after { background: #dbe8f7; }
.treatment-kpi.withdrawal > :is(b, strong, output),
.treatment-kpi.info > :is(b, strong, output),
.clinical-kpi.withdrawal > :is(b, strong, output),
.clinical-kpi.info > :is(b, strong, output) { color: var(--clinical-blue); }
.treatment-kpi.issue,
.treatment-kpi.pending-issue,
.clinical-kpi.issue,
.clinical-kpi.pending-issue { border-inline-start: 4px solid var(--clinical-accent); }

/* Search and filters sit in one deliberate, compact control strip. */
.treatment-toolbar,
.treatment-register-toolbar,
.clinical-toolbar {
  display: grid;
  grid-template-columns: minmax(238px, 1.55fr) repeat(4, minmax(128px, .72fr)) auto;
  gap: 9px;
  align-items: end;
  margin-block: 0 15px;
  border: 1px solid var(--clinical-line);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(105deg, #fff, var(--clinical-wash));
  box-shadow: 0 2px 6px #153f3805;
}
.treatment-search,
.treatment-register-search,
[data-treatment-search-wrap] {
  display: flex;
  min-block-size: 39px;
  align-items: center;
  gap: 8px;
  border: 1px solid #c9ddd4;
  border-radius: 9px;
  padding-inline: 10px;
  background: #fff;
  color: var(--clinical-accent);
  transition: border-color .16s, box-shadow .16s;
}
.treatment-search:focus-within,
.treatment-register-search:focus-within,
[data-treatment-search-wrap]:focus-within { border-color: var(--clinical-accent); box-shadow: 0 0 0 3px #08746914; }
.treatment-search :is(input, [data-treatment-search]),
.treatment-register-search :is(input, [data-treatment-search]),
[data-treatment-search-wrap] :is(input, [data-treatment-search]) { inline-size: 100%; min-inline-size: 0; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--ink); font: inherit; font-size: 11px; }
.treatment-search :is(input, [data-treatment-search])::placeholder,
.treatment-register-search :is(input, [data-treatment-search])::placeholder,
[data-treatment-search-wrap] :is(input, [data-treatment-search])::placeholder { color: #8b9d98; }
.treatment-filter,
.clinical-filter,
[data-treatment-filter] { display: grid; gap: 4px; color: var(--clinical-slate); font-size: 8px; font-weight: 830; letter-spacing: .48px; line-height: 1.15; text-transform: uppercase; }
.treatment-filter :is(select, input),
.clinical-filter :is(select, input),
[data-treatment-filter] :is(select, input) { inline-size: 100%; min-block-size: 39px; border: 1px solid #c9ddd4; border-radius: 9px; padding: 0 28px 0 9px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none; }
html[dir="rtl"] .treatment-filter :is(select, input),
html[dir="rtl"] .clinical-filter :is(select, input),
html[dir="rtl"] [data-treatment-filter] :is(select, input) { padding: 0 9px 0 28px; }
.treatment-filter :is(select, input):focus,
.clinical-filter :is(select, input):focus,
[data-treatment-filter] :is(select, input):focus { border-color: var(--clinical-accent); outline: 0; box-shadow: 0 0 0 3px #08746914; }
.treatment-toolbar .btn,
.treatment-register-toolbar .btn,
.clinical-toolbar .btn { min-block-size: 39px; white-space: nowrap; }
.treatment-toolbar .link-btn,
.treatment-register-toolbar .link-btn,
.clinical-toolbar .link-btn { min-block-size: 39px; padding-inline: 8px; color: var(--clinical-accent-deep); font-size: 10px; font-weight: 800; white-space: nowrap; }
.treatment-result-bar,
.clinical-result-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-block: -4px 12px;
  color: var(--muted);
  font-size: 10px;
}
.treatment-result-bar b,
.clinical-result-bar b { color: var(--clinical-ink); }
.treatment-result-bar > :last-child,
.clinical-result-bar > :last-child { text-align: end; }

/* The operational layout prioritises records but keeps risks in view. */
.treatment-register-layout,
.clinical-register-layout,
.treatment-register-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(272px, 316px);
  gap: 15px;
  align-items: start;
}
.treatment-register-list,
.clinical-treatment-list,
.treatment-cards {
  display: grid;
  gap: 11px;
}
.treatment-list-panel,
.clinical-list-panel {
  min-inline-size: 0;
  border: 1px solid var(--clinical-line);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 4px 13px #153f3805;
}
.treatment-list-panel > header,
.clinical-list-panel > header,
.treatment-list-head,
.clinical-list-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-block: 1px 13px; }
.treatment-list-panel h3,
.clinical-list-panel h3,
.treatment-list-head h3,
.clinical-list-head h3 { margin: 0; color: var(--clinical-ink); font-size: 14px; letter-spacing: -.12px; }
.treatment-list-panel p,
.clinical-list-panel p,
.treatment-list-head p,
.clinical-list-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.treatment-list-count,
.clinical-list-count { flex: 0 0 auto; border: 1px solid #c9e5da; border-radius: 999px; padding: 5px 8px; background: var(--clinical-mint); color: var(--clinical-accent-deep); font-size: 9px; font-weight: 850; white-space: nowrap; }

/* Every record carries its clinical identity, action state, and Store outcome
   without requiring an eye-tracking-heavy table. */
.treatment-card,
.clinical-treatment-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  border: 1px solid #d9e8e2;
  border-inline-start: 4px solid var(--clinical-accent);
  border-radius: 13px;
  padding: 13px 13px 12px;
  background: linear-gradient(105deg, #fff 60%, #f9fcfb);
  box-shadow: 0 1px 3px #153f3804;
  transition: border-color .17s, box-shadow .17s, transform .17s;
}
.treatment-card:hover,
.clinical-treatment-card:hover { border-color: #b5d8cb; box-shadow: 0 8px 21px #153f3810; transform: translateY(-1px); }
.treatment-card.overdue,
.treatment-card.danger,
.treatment-card.critical,
.clinical-treatment-card.overdue,
.clinical-treatment-card.danger,
.clinical-treatment-card.critical { border-color: #e8c1bd; border-inline-start-color: var(--clinical-red); background: linear-gradient(105deg, #fff, #fff7f5); }
.treatment-card.due,
.treatment-card.warning,
.clinical-treatment-card.due,
.clinical-treatment-card.warning { border-color: #ecd4a4; border-inline-start-color: var(--clinical-amber); background: linear-gradient(105deg, #fff, #fffaf1); }
.treatment-card.withdrawal,
.treatment-card.info,
.clinical-treatment-card.withdrawal,
.clinical-treatment-card.info { border-color: #cbddeb; border-inline-start-color: var(--clinical-blue); background: linear-gradient(105deg, #fff, #f7faff); }
.treatment-card-main,
.clinical-treatment-main { min-inline-size: 0; }
.treatment-card-ident,
.clinical-treatment-ident {
  display: flex;
  gap: 10px;
  align-items: center;
  min-inline-size: 0;
}
.treatment-card-ident > div,
.clinical-treatment-ident > div { min-inline-size: 0; }
.treatment-card-avatar,
.clinical-animal-avatar {
  display: grid;
  flex: 0 0 auto;
  inline-size: 39px;
  block-size: 39px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c9e2d8;
  border-radius: 12px;
  background: var(--clinical-mint);
  color: var(--clinical-accent-deep);
  font-size: 12px;
  font-weight: 900;
}
.treatment-card-avatar img,
.clinical-animal-avatar img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.treatment-card-ident h3,
.treatment-card-ident b,
.clinical-treatment-ident h3,
.clinical-treatment-ident b { display: block; overflow: hidden; margin: 0; color: var(--clinical-ink); font-size: 13px; line-height: 1.28; text-overflow: ellipsis; white-space: nowrap; }
.treatment-card-ident p,
.treatment-card-ident small,
.clinical-treatment-ident p,
.clinical-treatment-ident small { display: block; overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-card-diagnosis,
.clinical-diagnosis { overflow: hidden; margin: 11px 0 0; color: var(--ink); font-size: 12px; font-weight: 760; line-height: 1.38; text-overflow: ellipsis; white-space: nowrap; }
.treatment-card-diagnosis::before,
.clinical-diagnosis::before { color: var(--clinical-accent); content: "Clinical finding · "; font-size: 9px; font-weight: 850; letter-spacing: .3px; text-transform: uppercase; }
html[dir="rtl"] .treatment-card-diagnosis::before,
html[dir="rtl"] .clinical-diagnosis::before { content: "الملاحظة السريرية · "; letter-spacing: 0; text-transform: none; }
.treatment-card-meta,
.clinical-treatment-meta { display: flex; gap: 6px 7px; flex-wrap: wrap; margin-top: 10px; }
.treatment-chip,
.clinical-chip,
.medicine-pill,
.treatment-status-pill {
  display: inline-flex;
  max-inline-size: 100%;
  min-block-size: 22px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d4e6df;
  border-radius: 999px;
  padding: 3px 7px;
  background: #f7fbf9;
  color: #426a60;
  font-size: 9px;
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medicine-pill,
.treatment-chip.medicine,
.clinical-chip.medicine { border-color: #bfe0d4; background: var(--clinical-mint); color: var(--clinical-accent-deep); }
.treatment-chip.overdue,
.treatment-chip.danger,
.treatment-status-pill.overdue,
.treatment-status-pill.danger,
.clinical-chip.overdue,
.clinical-chip.danger { border-color: #ecc7c3; background: var(--clinical-red-wash); color: var(--clinical-red); }
.treatment-chip.due,
.treatment-chip.warning,
.clinical-chip.due,
.clinical-chip.warning { border-color: #eed9ad; background: var(--clinical-amber-wash); color: var(--clinical-amber); }
.treatment-chip.withdrawal,
.treatment-chip.info,
.clinical-chip.withdrawal,
.clinical-chip.info { border-color: #cbdeef; background: var(--clinical-blue-wash); color: var(--clinical-blue); }
.treatment-card-side,
.clinical-treatment-side { display: grid; gap: 8px; align-content: start; justify-items: end; min-inline-size: 118px; }
.treatment-card-date,
.clinical-treatment-date { color: var(--muted); font-size: 9px; font-weight: 760; text-align: end; unicode-bidi: isolate; }
.treatment-card-actions,
.clinical-treatment-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.treatment-card-actions .btn,
.clinical-treatment-actions .btn { min-block-size: 29px; padding: 6px 9px; font-size: 10px; }
.treatment-card-actions .link-btn,
.clinical-treatment-actions .link-btn { min-block-size: 28px; color: var(--clinical-accent-deep); font-size: 10px; font-weight: 800; white-space: nowrap; }
.treatment-card-actions .link-btn.issue,
.treatment-card-actions .link-btn.pending-issue,
.clinical-treatment-actions .link-btn.issue,
.clinical-treatment-actions .link-btn.pending-issue { color: var(--clinical-red); }

/* Expandable detail is intentionally low-noise until the user asks for it. */
.treatment-detail,
.clinical-treatment-detail { grid-column: 1 / -1; margin: 1px 0 0; border-top: 1px solid #e4eeea; padding-top: 9px; }
.treatment-detail > summary,
.clinical-treatment-detail > summary { display: flex; align-items: center; gap: 7px; color: var(--clinical-accent-deep); cursor: pointer; font-size: 10px; font-weight: 830; list-style: none; }
.treatment-detail > summary::-webkit-details-marker,
.clinical-treatment-detail > summary::-webkit-details-marker { display: none; }
.treatment-detail > summary::before,
.clinical-treatment-detail > summary::before { display: grid; inline-size: 17px; block-size: 17px; place-items: center; border: 1px solid #bcdcd0; border-radius: 50%; background: #fff; color: var(--clinical-accent); content: "+"; font-size: 14px; font-weight: 600; line-height: 1; }
.treatment-detail[open] > summary::before,
.clinical-treatment-detail[open] > summary::before { content: "–"; }
.treatment-detail-body,
.clinical-treatment-detail-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.treatment-detail-fact,
.clinical-detail-fact { min-inline-size: 0; border: 1px solid #dfece7; border-radius: 9px; padding: 8px 9px; background: #fbfdfc; }
.treatment-detail-fact small,
.clinical-detail-fact small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 790; letter-spacing: .35px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.treatment-detail-fact b,
.treatment-detail-fact strong,
.clinical-detail-fact b,
.clinical-detail-fact strong { display: block; overflow: hidden; margin-top: 4px; color: var(--ink); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.treatment-detail-note,
.clinical-detail-note { grid-column: 1 / -1; margin: 0; border-inline-start: 3px solid #bdddd1; border-radius: 0 8px 8px 0; padding: 9px 10px; background: var(--clinical-wash); color: #496d64; font-size: 10px; line-height: 1.48; }
.treatment-detail-note b,
.clinical-detail-note b { color: var(--clinical-accent-deep); }
.treatment-detail-movements,
.clinical-detail-movements { grid-column: 1 / -1; display: grid; gap: 6px; }
.treatment-detail-movement,
.clinical-detail-movement { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px dashed #dceae4; padding-top: 7px; color: var(--muted); font-size: 9px; }
.treatment-detail-movement:first-child,
.clinical-detail-movement:first-child { border-top: 0; padding-top: 0; }
.treatment-detail-movement b,
.clinical-detail-movement b { color: var(--clinical-accent-deep); font-size: 10px; }
.treatment-card-date small { display: block; max-inline-size: 150px; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.treatment-issued-line-administration { display: block; margin-top: 3px; color: var(--clinical-accent-deep); font-size: 9px; font-weight: 700; }

/* Side watchlist makes intervention conditions visible at a glance. */
.treatment-watchlist,
.clinical-watchlist,
.treatment-register-aside {
  position: sticky;
  inset-block-start: 12px;
  overflow: hidden;
  border: 1px solid var(--clinical-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 13px #153f3806;
}
.treatment-watchlist > header,
.clinical-watchlist > header,
.treatment-register-aside > header { padding: 15px 15px 13px; border-bottom: 1px solid #dcebe5; background: linear-gradient(105deg, #fbfefd, var(--clinical-wash)); }
.treatment-watchlist h3,
.clinical-watchlist h3,
.treatment-register-aside h3 { margin: 0; color: var(--clinical-ink); font-size: 14px; letter-spacing: -.14px; }
.treatment-watchlist p,
.clinical-watchlist p,
.treatment-register-aside p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.42; }
.treatment-watchlist-list,
.clinical-watchlist-list,
.treatment-watchlist > div:not(header) { display: grid; gap: 0; }
.treatment-watch-item,
.clinical-watch-item,
.treatment-watchlist .side-stat {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 11px 13px;
  border-top: 1px solid #edf3f0;
  background: #fff;
  transition: background .16s;
}
.treatment-watch-item:first-child,
.clinical-watch-item:first-child,
.treatment-watchlist .side-stat:first-child { border-top: 0; }
.treatment-watch-item:hover,
.clinical-watch-item:hover,
.treatment-watchlist .side-stat:hover { background: #fafdfc; }
.treatment-watch-item::before,
.clinical-watch-item::before,
.treatment-watchlist .side-stat::before { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--clinical-accent); box-shadow: 0 0 0 3px #08746915; content: ""; }
.treatment-watch-item.overdue::before,
.treatment-watch-item.danger::before,
.clinical-watch-item.overdue::before,
.clinical-watch-item.danger::before { background: var(--clinical-red); box-shadow: 0 0 0 3px #a34e4815; }
.treatment-watch-item.due::before,
.treatment-watch-item.warning::before,
.clinical-watch-item.due::before,
.clinical-watch-item.warning::before { background: var(--clinical-amber); box-shadow: 0 0 0 3px #91601c16; }
.treatment-watch-item.withdrawal::before,
.treatment-watch-item.info::before,
.clinical-watch-item.withdrawal::before,
.clinical-watch-item.info::before { background: var(--clinical-blue); box-shadow: 0 0 0 3px #356d9f16; }
.treatment-watch-item > div,
.clinical-watch-item > div { min-inline-size: 0; }
.treatment-watch-item b,
.clinical-watch-item b,
.treatment-watchlist .side-stat > span { display: block; overflow: hidden; color: var(--clinical-ink); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.treatment-watch-item small,
.clinical-watch-item small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-watch-item > :last-child,
.clinical-watch-item > :last-child { justify-self: end; }
.treatment-watchlist-empty,
.clinical-watchlist-empty { display: grid; min-block-size: 146px; place-items: center; align-content: center; padding: 18px; color: var(--muted); font-size: 10px; text-align: center; }
.treatment-watchlist-empty::before,
.clinical-watchlist-empty::before { display: grid; inline-size: 34px; block-size: 34px; place-items: center; margin-bottom: 8px; border-radius: 11px; background: var(--clinical-mint); color: var(--clinical-accent); content: "✓"; font-size: 17px; font-weight: 900; }

.treatment-register-empty,
.clinical-register-empty { display: grid; min-block-size: 252px; place-items: center; align-content: center; padding: 30px; border: 1px dashed #b7d8cb; border-radius: 13px; background: linear-gradient(145deg, #fff, #f8fcfa); color: var(--muted); text-align: center; }
.treatment-register-empty > :first-child,
.clinical-register-empty > :first-child { display: grid; inline-size: 42px; block-size: 42px; place-items: center; border-radius: 13px; background: var(--clinical-mint); color: var(--clinical-accent); font-size: 21px; font-style: normal; font-weight: 900; }
.treatment-register-empty h3,
.clinical-register-empty h3 { margin: 11px 0 3px; color: var(--clinical-ink); font-size: 14px; }
.treatment-register-empty p,
.clinical-register-empty p { max-inline-size: 320px; margin: 0 0 13px; font-size: 10px; line-height: 1.45; }

/* Keyboard users need the same unmissable route through actions and detail. */
.treatment-card :is(button, a, summary):focus-visible,
.clinical-treatment-card :is(button, a, summary):focus-visible,
.treatment-watchlist :is(button, a):focus-visible,
.clinical-watchlist :is(button, a):focus-visible { outline: 3px solid #08746930; outline-offset: 2px; }

html[dir="rtl"] .treatment-register-page,
html[dir="rtl"] .treatment-register { text-align: start; }
html[dir="rtl"] .treatment-card-date,
html[dir="rtl"] .clinical-treatment-date { direction: ltr; }
html[dir="rtl"] .treatment-detail-note,
html[dir="rtl"] .clinical-detail-note { border-radius: 8px 0 0 8px; }

@media (max-width: 1120px) {
  .treatment-toolbar,
  .treatment-register-toolbar,
  .clinical-toolbar { grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(130px, .75fr)); }
  .treatment-toolbar > :last-child,
  .treatment-register-toolbar > :last-child,
  .clinical-toolbar > :last-child { justify-self: start; }
  .treatment-register-layout,
  .clinical-register-layout,
  .treatment-register-content { grid-template-columns: minmax(0, 1fr) 276px; }
  .treatment-detail-body,
  .clinical-treatment-detail-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .treatment-register-kpis,
  .treatment-kpi-grid,
  .clinical-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment-toolbar,
  .treatment-register-toolbar,
  .clinical-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(155px, .65fr) minmax(155px, .65fr); }
  .treatment-register-layout,
  .clinical-register-layout,
  .treatment-register-content { grid-template-columns: 1fr; }
  .treatment-watchlist,
  .clinical-watchlist,
  .treatment-register-aside { position: static; }
  .treatment-watchlist-list,
  .clinical-watchlist-list,
  .treatment-watchlist > div:not(header) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment-watch-item:nth-child(2),
  .clinical-watch-item:nth-child(2) { border-top: 0; border-inline-start: 1px solid #edf3f0; }
}
@media (max-width: 660px) {
  .treatment-register-intro,
  .clinical-register-intro { align-items: flex-start; flex-direction: column; gap: 10px; }
  .treatment-register-intro .btn,
  .clinical-register-intro .btn { align-self: stretch; }
  .treatment-toolbar,
  .treatment-register-toolbar,
  .clinical-toolbar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .treatment-search,
  .treatment-register-search,
  [data-treatment-search-wrap] { grid-column: 1 / -1; }
  .treatment-toolbar > :last-child,
  .treatment-register-toolbar > :last-child,
  .clinical-toolbar > :last-child { justify-self: stretch; }
  .treatment-toolbar > :last-child .btn,
  .treatment-register-toolbar > :last-child .btn,
  .clinical-toolbar > :last-child .btn { inline-size: 100%; }
  .treatment-list-panel,
  .clinical-list-panel { border-radius: 14px; padding: 12px; }
  .treatment-card,
  .clinical-treatment-card { grid-template-columns: 1fr; gap: 11px; padding: 12px; }
  .treatment-card-side,
  .clinical-treatment-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; min-inline-size: 0; }
  .treatment-card-date,
  .clinical-treatment-date { text-align: start; }
  .treatment-card-actions,
  .clinical-treatment-actions { justify-content: end; }
  .treatment-watchlist-list,
  .clinical-watchlist-list,
  .treatment-watchlist > div:not(header) { grid-template-columns: 1fr; }
  .treatment-watch-item:nth-child(2),
  .clinical-watch-item:nth-child(2) { border-top: 1px solid #edf3f0; border-inline-start: 0; }
}
@media (max-width: 440px) {
  .treatment-register-kpis,
  .treatment-kpi-grid,
  .clinical-kpi-grid,
  .treatment-toolbar,
  .treatment-register-toolbar,
  .clinical-toolbar,
  .treatment-detail-body,
  .clinical-treatment-detail-body { grid-template-columns: 1fr; }
  .treatment-kpi,
  .clinical-kpi { min-block-size: 101px; padding: 13px; }
  .treatment-kpi > :is(b, strong, output),
  .clinical-kpi > :is(b, strong, output) { font-size: 23px; }
  .treatment-list-panel > header,
  .clinical-list-panel > header,
  .treatment-list-head,
  .clinical-list-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .treatment-card-ident,
  .clinical-treatment-ident { align-items: flex-start; }
  .treatment-card-diagnosis,
  .clinical-diagnosis { white-space: normal; }
  .treatment-card-side,
  .clinical-treatment-side { grid-template-columns: 1fr; gap: 7px; }
  .treatment-card-actions,
  .clinical-treatment-actions { justify-content: start; }
  .treatment-detail-movement,
  .clinical-detail-movement { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Treatment Register record detail / correction panel.
   `tr-` is a deliberately private namespace: a detail view may be mounted in
   the global modal root, so it declares its own clinical tokens rather than
   relying on the page-level Treatment Register variables above. */
.tr-detail-panel,
.tr-update-panel,
.tr-cost-panel,
.tr-finance-panel,
form.modal.tr-treatment-detail-modal,
form.modal.tr-treatment-update-modal {
  --tr-ink: #173d38;
  --tr-accent: #087469;
  --tr-accent-deep: #07564f;
  --tr-mint: #e2f4ee;
  --tr-wash: #f5fbf8;
  --tr-line: #d4e6df;
  --tr-blue: #356d9f;
  --tr-blue-wash: #edf4fc;
  --tr-amber: #91601c;
  --tr-amber-wash: #fff7e8;
  --tr-red: #a34e48;
  --tr-red-wash: #fff1ef;
  --tr-slate: #5f746f;
  color: var(--ink);
}
.tr-detail-panel *,
.tr-update-panel *,
.tr-cost-panel *,
.tr-finance-panel * { min-inline-size: 0; }

/* Modal framing is intentionally more generous than the compact issue modal:
   the operator needs to compare clinical, Store, and Finance evidence. */
form.modal.tr-treatment-detail-modal,
form.modal.tr-treatment-update-modal { inline-size: min(1040px, calc(100vw - 34px)); max-block-size: min(89vh, 900px); overflow: hidden; border: 1px solid #c9ded6; border-radius: 17px; background: #fff; box-shadow: 0 24px 60px #0b393026; }
form.modal.tr-treatment-detail-modal .modal-head,
form.modal.tr-treatment-update-modal .modal-head { flex: 0 0 auto; padding: 20px 23px 17px; border-bottom: 1px solid var(--tr-line); background: linear-gradient(112deg, #fff 0%, var(--tr-wash) 68%, #f0f6fc 100%); }
form.modal.tr-treatment-detail-modal .modal-head h2,
form.modal.tr-treatment-update-modal .modal-head h2 { margin: 3px 0 4px; color: var(--tr-ink); font-size: 20px; letter-spacing: -.35px; }
form.modal.tr-treatment-detail-modal .modal-head p,
form.modal.tr-treatment-update-modal .modal-head p { max-inline-size: 760px; margin: 0; color: var(--tr-slate); font-size: 11px; line-height: 1.47; }
form.modal.tr-treatment-detail-modal .modal-head .close,
form.modal.tr-treatment-update-modal .modal-head .close { border-color: #c6ddd4; background: #fff; color: var(--tr-accent-deep); }
form.modal.tr-treatment-detail-modal .modal-body,
form.modal.tr-treatment-update-modal .modal-body { min-block-size: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 22px 21px; background: #fbfdfc; scrollbar-gutter: stable; }
form.modal.tr-treatment-detail-modal .modal-footer,
form.modal.tr-treatment-update-modal .modal-footer { flex: 0 0 auto; gap: 10px; padding: 13px 22px 16px; border-top: 1px solid var(--tr-line); background: #fff; }
form.modal.tr-treatment-detail-modal .modal-footer > :first-child:not(.btn),
form.modal.tr-treatment-update-modal .modal-footer > :first-child:not(.btn) { flex: 1 1 auto; }

.tr-kicker,
.tr-eyebrow,
.tr-section-kicker { display: block; color: var(--tr-accent); font-size: 9px; font-weight: 860; letter-spacing: .86px; line-height: 1.2; text-transform: uppercase; }
.tr-detail-hero,
.tr-record-hero {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-block: 0 15px;
  border: 1px solid #cbe2d8;
  border-inline-start: 4px solid var(--tr-accent);
  border-radius: 14px;
  padding: 14px 15px;
  background: linear-gradient(111deg, #fff, var(--tr-wash));
  box-shadow: 0 2px 6px #153f3806;
}
.tr-detail-hero > div,
.tr-record-hero > div { min-inline-size: 0; }
.tr-record-ident,
.tr-detail-ident { display: flex; gap: 11px; align-items: center; min-inline-size: 0; }
.tr-record-ident > div,
.tr-detail-ident > div { min-inline-size: 0; }
.tr-animal-avatar,
.tr-record-avatar { display: grid; flex: 0 0 auto; inline-size: 47px; block-size: 47px; place-items: center; overflow: hidden; border: 1px solid #bdddd0; border-radius: 14px; background: var(--tr-mint); color: var(--tr-accent-deep); font-size: 15px; font-weight: 900; }
.tr-animal-avatar img,
.tr-record-avatar img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tr-record-ident h3,
.tr-record-ident b,
.tr-detail-ident h3,
.tr-detail-ident b { display: block; overflow: hidden; margin: 0; color: var(--tr-ink); font-size: 15px; line-height: 1.26; text-overflow: ellipsis; white-space: nowrap; }
.tr-record-ident p,
.tr-record-ident small,
.tr-detail-ident p,
.tr-detail-ident small { display: block; overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tr-record-reference,
.tr-reference { display: inline-flex; align-items: center; margin-top: 5px; border: 1px solid #cae2d8; border-radius: 999px; padding: 3px 7px; background: #fff; color: var(--tr-accent-deep); font-size: 9px; font-weight: 850; unicode-bidi: isolate; }
.tr-hero-status,
.tr-status-stack { display: flex; flex: 0 0 auto; gap: 6px; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; max-inline-size: 42%; }

/* The content grid gives the clinical record more visual weight and keeps the
   cost / posting decision in a consistently visible evidence rail. */
.tr-detail-layout,
.tr-update-layout,
.tr-record-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(264px, .74fr); gap: 14px; align-items: start; }
.tr-detail-main,
.tr-update-main,
.tr-clinical-column { display: grid; gap: 13px; min-inline-size: 0; }
.tr-detail-aside,
.tr-update-aside,
.tr-finance-column { display: grid; gap: 13px; min-inline-size: 0; }
.tr-section,
.tr-clinical-section,
.tr-store-section,
.tr-update-section,
.tr-cost-card,
.tr-finance-card,
.tr-audit-card { overflow: hidden; border: 1px solid var(--tr-line); border-radius: 13px; background: #fff; box-shadow: 0 1px 3px #153f3804; }
.tr-section > header,
.tr-clinical-section > header,
.tr-store-section > header,
.tr-update-section > header,
.tr-cost-card > header,
.tr-finance-card > header,
.tr-audit-card > header,
.tr-section-head,
.tr-cost-head,
.tr-finance-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 12px 13px 11px; border-bottom: 1px solid #e1eee9; background: linear-gradient(100deg, #fcfefd, #f6fbf9); }
.tr-section > header > div,
.tr-clinical-section > header > div,
.tr-store-section > header > div,
.tr-update-section > header > div,
.tr-cost-card > header > div,
.tr-finance-card > header > div,
.tr-audit-card > header > div,
.tr-section-head > div,
.tr-cost-head > div,
.tr-finance-head > div { min-inline-size: 0; }
.tr-section h3,
.tr-clinical-section h3,
.tr-store-section h3,
.tr-update-section h3,
.tr-cost-card h3,
.tr-finance-card h3,
.tr-audit-card h3,
.tr-section-head h3,
.tr-cost-head h3,
.tr-finance-head h3 { margin: 0; color: var(--tr-ink); font-size: 13px; letter-spacing: -.1px; }
.tr-section header p,
.tr-clinical-section header p,
.tr-store-section header p,
.tr-update-section header p,
.tr-cost-card header p,
.tr-finance-card header p,
.tr-audit-card header p,
.tr-section-head p,
.tr-cost-head p,
.tr-finance-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.42; }
.tr-section-body,
.tr-clinical-body,
.tr-store-body,
.tr-update-body,
.tr-cost-body,
.tr-finance-body,
.tr-audit-body { padding: 13px; }

.tr-fact-grid,
.tr-clinical-grid,
.tr-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-fact,
.tr-clinical-fact,
.tr-detail-fact { min-inline-size: 0; border: 1px solid #e0ece7; border-radius: 9px; padding: 9px; background: #fbfdfc; }
.tr-fact :is(small, span),
.tr-clinical-fact :is(small, span),
.tr-detail-fact :is(small, span) { display: block; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .35px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tr-fact :is(b, strong, output),
.tr-clinical-fact :is(b, strong, output),
.tr-detail-fact :is(b, strong, output) { display: block; overflow: hidden; margin-top: 4px; color: var(--ink); font-size: 10px; font-weight: 800; line-height: 1.37; text-overflow: ellipsis; white-space: nowrap; }
.tr-fact.is-risk,
.tr-clinical-fact.is-risk { border-color: #edd4a8; background: var(--tr-amber-wash); }
.tr-fact.is-risk :is(b, strong, output),
.tr-clinical-fact.is-risk :is(b, strong, output) { color: var(--tr-amber); }
.tr-fact.is-hold,
.tr-clinical-fact.is-hold { border-color: #caddeb; background: var(--tr-blue-wash); }
.tr-fact.is-hold :is(b, strong, output),
.tr-clinical-fact.is-hold :is(b, strong, output) { color: var(--tr-blue); }
.tr-notes,
.tr-clinical-notes { margin: 12px 13px 13px; border-inline-start: 3px solid #baddd0; border-radius: 0 9px 9px 0; padding: 10px 11px; background: var(--tr-wash); color: #466c61; font-size: 10px; line-height: 1.5; }
.tr-notes b,
.tr-clinical-notes b { color: var(--tr-accent-deep); font-size: 10px; }

/* Store evidence: issuance is separate from its cash cost, avoiding a visual
   suggestion that medicine use itself creates a second Finance expense. */
.tr-store-summary,
.tr-issue-summary { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 12px 13px 0; border: 1px solid #cde3da; border-radius: 10px; padding: 10px; background: linear-gradient(105deg, #fff, var(--tr-wash)); }
.tr-store-summary > div,
.tr-issue-summary > div { min-inline-size: 0; }
.tr-store-summary b,
.tr-issue-summary b { display: block; overflow: hidden; color: var(--tr-accent-deep); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tr-store-summary small,
.tr-issue-summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.tr-store-lines,
.tr-issue-lines { display: grid; margin: 12px 13px 13px; overflow: hidden; border: 1px solid #deece6; border-radius: 10px; }
.tr-store-line,
.tr-issue-line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border-top: 1px solid #e5efeb; background: #fff; }
.tr-store-line:first-child,
.tr-issue-line:first-child { border-top: 0; }
.tr-store-line-icon,
.tr-issue-line-icon { display: grid; inline-size: 27px; block-size: 27px; place-items: center; border-radius: 8px; background: var(--tr-mint); color: var(--tr-accent); font-size: 13px; font-style: normal; font-weight: 900; }
.tr-store-line > div,
.tr-issue-line > div { min-inline-size: 0; }
.tr-store-line b,
.tr-issue-line b { display: block; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tr-store-line small,
.tr-issue-line small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tr-store-line :is(strong, output),
.tr-issue-line :is(strong, output) { color: var(--tr-accent-deep); font-size: 10px; font-weight: 850; text-align: end; unicode-bidi: isolate; white-space: nowrap; }
.tr-store-empty,
.tr-issue-empty { display: grid; min-block-size: 94px; place-items: center; align-content: center; padding: 16px; border: 1px dashed #bedbd0; border-radius: 10px; background: #fbfefc; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.tr-store-empty::before,
.tr-issue-empty::before { display: grid; inline-size: 29px; block-size: 29px; place-items: center; margin-bottom: 6px; border-radius: 9px; background: var(--tr-mint); color: var(--tr-accent); content: "▣"; font-size: 14px; font-weight: 900; }
.tr-store-empty.is-required,
.tr-issue-empty.is-required { border-color: #e9d0a2; background: var(--tr-amber-wash); color: var(--tr-amber); }
.tr-store-empty.is-required::before,
.tr-issue-empty.is-required::before { background: #fae7c2; color: var(--tr-amber); content: "!"; }

/* Finance is rendered as an accounting decision, not an anonymous number.
   Clear state names prevent users from mistaking Store valuation for a cash
   expense or a pending approval for a posted entry. */
.tr-cost-card,
.tr-finance-card { border-color: #cbded6; }
.tr-cost-card > header,
.tr-finance-card > header,
.tr-cost-head,
.tr-finance-head { background: linear-gradient(105deg, #fbfefd, #eff8f4); }
.tr-cost-amount,
.tr-cost-total { display: flex; gap: 11px; align-items: center; justify-content: space-between; margin: 0 13px; border-bottom: 1px solid #e0ece7; padding: 13px 0; }
.tr-cost-amount > div,
.tr-cost-total > div { min-inline-size: 0; }
.tr-cost-amount small,
.tr-cost-total small { display: block; color: var(--muted); font-size: 9px; font-weight: 780; }
.tr-cost-amount b,
.tr-cost-total b { display: block; margin-top: 3px; color: var(--tr-ink); font-size: 22px; font-weight: 900; letter-spacing: -.55px; line-height: 1; unicode-bidi: isolate; }
.tr-cost-amount > :last-child,
.tr-cost-total > :last-child { text-align: end; }
.tr-cost-breakdown,
.tr-finance-breakdown { display: grid; gap: 0; margin: 0 13px; }
.tr-cost-row,
.tr-finance-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid #edf3f0; color: var(--tr-slate); font-size: 9px; }
.tr-cost-row:first-child,
.tr-finance-row:first-child { border-top: 0; }
.tr-cost-row b,
.tr-cost-row strong,
.tr-finance-row b,
.tr-finance-row strong { flex: 0 0 auto; color: var(--ink); font-size: 10px; font-weight: 830; text-align: end; unicode-bidi: isolate; }
.tr-cost-row.is-store,
.tr-finance-row.is-store { color: var(--tr-blue); }
.tr-cost-row.is-store :is(b, strong),
.tr-finance-row.is-store :is(b, strong) { color: var(--tr-blue); }
.tr-cost-row.is-external,
.tr-finance-row.is-external { color: var(--tr-accent-deep); }
.tr-cost-row.is-external :is(b, strong),
.tr-finance-row.is-external :is(b, strong) { color: var(--tr-accent-deep); }
.tr-cost-caption,
.tr-finance-caption { margin: 0 13px 13px; border-top: 1px dashed #d7e7e0; padding-top: 10px; color: var(--muted); font-size: 8.5px; line-height: 1.47; }
.tr-cost-caption b,
.tr-finance-caption b { color: var(--tr-accent-deep); }

.tr-posting-status,
.tr-finance-status,
.tr-cost-status { display: inline-flex; max-inline-size: 100%; min-block-size: 24px; align-items: center; gap: 5px; overflow: hidden; border: 1px solid #c5e1d5; border-radius: 999px; padding: 4px 8px; background: var(--tr-mint); color: var(--tr-accent-deep); font-size: 9px; font-weight: 850; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.tr-posting-status::before,
.tr-finance-status::before,
.tr-cost-status::before { display: inline-grid; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; content: ""; }
.tr-posting-status.is-pending,
.tr-finance-status.is-pending,
.tr-cost-status.is-pending,
.tr-posting-status[data-posting-status="pending"],
.tr-finance-status[data-posting-status="pending"],
.tr-cost-status[data-posting-status="pending"] { border-color: #e9d2a4; background: var(--tr-amber-wash); color: var(--tr-amber); }
.tr-posting-status.is-not-posted,
.tr-finance-status.is-not-posted,
.tr-cost-status.is-not-posted,
.tr-posting-status[data-posting-status="not_posted"],
.tr-finance-status[data-posting-status="not_posted"],
.tr-cost-status[data-posting-status="not_posted"] { border-color: #c9dceb; background: var(--tr-blue-wash); color: var(--tr-blue); }
.tr-posting-status.is-reversed,
.tr-finance-status.is-reversed,
.tr-cost-status.is-reversed,
.tr-posting-status.is-void,
.tr-finance-status.is-void,
.tr-cost-status.is-void,
.tr-posting-status[data-posting-status="reversed"],
.tr-finance-status[data-posting-status="reversed"],
.tr-cost-status[data-posting-status="reversed"] { border-color: #eac6c1; background: var(--tr-red-wash); color: var(--tr-red); }
.tr-posting-status.is-adjusted,
.tr-finance-status.is-adjusted,
.tr-cost-status.is-adjusted,
.tr-posting-status[data-posting-status="adjusted"],
.tr-finance-status[data-posting-status="adjusted"],
.tr-cost-status[data-posting-status="adjusted"] { border-color: #c7d9ea; background: #f1f6fb; color: #3c6993; }
.tr-finance-banner,
.tr-posting-banner,
.tr-cost-banner { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; margin: 12px 13px 0; border: 1px solid #c7dfd5; border-radius: 10px; padding: 10px; background: var(--tr-wash); color: #416a5f; }
.tr-finance-banner > i,
.tr-posting-banner > i,
.tr-cost-banner > i { display: grid; inline-size: 25px; block-size: 25px; place-items: center; border-radius: 8px; background: var(--tr-mint); color: var(--tr-accent); font-size: 13px; font-style: normal; font-weight: 900; }
.tr-finance-banner b,
.tr-posting-banner b,
.tr-cost-banner b { display: block; color: var(--tr-accent-deep); font-size: 10px; }
.tr-finance-banner p,
.tr-posting-banner p,
.tr-cost-banner p { margin: 2px 0 0; color: inherit; font-size: 9px; line-height: 1.43; }
.tr-finance-banner.is-pending,
.tr-posting-banner.is-pending,
.tr-cost-banner.is-pending { border-color: #ead4a7; background: var(--tr-amber-wash); color: #8b6729; }
.tr-finance-banner.is-pending > i,
.tr-posting-banner.is-pending > i,
.tr-cost-banner.is-pending > i { background: #fae7c1; color: var(--tr-amber); }
.tr-finance-banner.is-pending b,
.tr-posting-banner.is-pending b,
.tr-cost-banner.is-pending b { color: var(--tr-amber); }
.tr-finance-banner.is-reversed,
.tr-posting-banner.is-reversed,
.tr-cost-banner.is-reversed { border-color: #ebc9c4; background: var(--tr-red-wash); color: #955d57; }
.tr-finance-banner.is-reversed > i,
.tr-posting-banner.is-reversed > i,
.tr-cost-banner.is-reversed > i { background: #f9d8d4; color: var(--tr-red); }
.tr-finance-banner.is-reversed b,
.tr-posting-banner.is-reversed b,
.tr-cost-banner.is-reversed b { color: var(--tr-red); }
.tr-posting-list,
.tr-finance-postings { display: grid; gap: 0; margin: 12px 13px 13px; overflow: hidden; border: 1px solid #dcebe5; border-radius: 10px; }
.tr-posting-row,
.tr-finance-posting { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid #e7f0ec; background: #fff; }
.tr-posting-row:first-child,
.tr-finance-posting:first-child { border-top: 0; }
.tr-posting-icon,
.tr-finance-posting-icon { display: grid; inline-size: 25px; block-size: 25px; place-items: center; border-radius: 8px; background: var(--tr-blue-wash); color: var(--tr-blue); font-size: 12px; font-style: normal; font-weight: 900; }
.tr-posting-row.is-posted .tr-posting-icon,
.tr-finance-posting.is-posted .tr-finance-posting-icon { background: var(--tr-mint); color: var(--tr-accent); }
.tr-posting-row.is-reversed .tr-posting-icon,
.tr-finance-posting.is-reversed .tr-finance-posting-icon { background: #f9d9d5; color: var(--tr-red); }
.tr-posting-row > div,
.tr-finance-posting > div { min-inline-size: 0; }
.tr-posting-row b,
.tr-finance-posting b { display: block; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tr-posting-row small,
.tr-finance-posting small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tr-posting-row :is(strong, output),
.tr-finance-posting :is(strong, output) { color: var(--tr-accent-deep); font-size: 10px; font-weight: 880; text-align: end; unicode-bidi: isolate; white-space: nowrap; }
.tr-posting-row.is-reversed :is(strong, output),
.tr-finance-posting.is-reversed :is(strong, output) { color: var(--tr-red); }
.tr-finance-actions,
.tr-posting-actions,
.tr-cost-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 12px 13px 13px; }
.tr-finance-actions .btn,
.tr-posting-actions .btn,
.tr-cost-actions .btn { min-block-size: 30px; padding: 6px 9px; font-size: 10px; }
.tr-finance-actions .link-btn,
.tr-posting-actions .link-btn,
.tr-cost-actions .link-btn { min-block-size: 30px; color: var(--tr-accent-deep); font-size: 10px; font-weight: 830; white-space: nowrap; }
.tr-finance-actions .danger-link,
.tr-posting-actions .danger-link,
.tr-cost-actions .danger-link { color: var(--tr-red); }

/* An update form makes change scope obvious.  It does not imply that a posted
   treatment or a posted Finance entry can be silently edited. */
.tr-update-panel,
.tr-update-section { text-align: start; }
.tr-update-section.is-locked,
.tr-update-section[data-update-state="locked"] { border-color: #e7d1a8; background: #fffdf8; }
.tr-update-section.is-locked > header,
.tr-update-section[data-update-state="locked"] > header { border-bottom-color: #eedfbe; background: var(--tr-amber-wash); }
.tr-update-grid,
.tr-update-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 11px; padding: 13px; }
.tr-update-grid .field.full,
.tr-update-fields .field.full { grid-column: 1 / -1; }
.tr-update-panel .field,
.tr-update-section .field { min-inline-size: 0; color: #385e55; font-size: 9px; font-weight: 820; text-align: start; }
.tr-update-panel .field :is(input, select, textarea),
.tr-update-section .field :is(input, select, textarea) { inline-size: 100%; min-inline-size: 0; margin-top: 4px; border: 1px solid #cbded5; border-radius: 8px; padding: 8px 9px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; }
.tr-update-panel .field textarea,
.tr-update-section .field textarea { min-block-size: 80px; resize: vertical; }
.tr-update-panel .field :is(input, select, textarea):focus,
.tr-update-section .field :is(input, select, textarea):focus { border-color: var(--tr-accent); outline: 0; box-shadow: 0 0 0 3px #08746916; }
.tr-update-panel .field :is(input, select, textarea):disabled,
.tr-update-section .field :is(input, select, textarea):disabled { border-style: dashed; background: #f1f5f3; color: #75847f; cursor: not-allowed; }
.tr-update-note,
.tr-update-warning,
.tr-update-lock-note { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 13px 13px; border: 1px solid #c9dfd6; border-radius: 9px; padding: 9px; background: var(--tr-wash); color: #456c61; font-size: 9px; line-height: 1.44; }
.tr-update-note > i,
.tr-update-warning > i,
.tr-update-lock-note > i { display: grid; inline-size: 22px; block-size: 22px; place-items: center; border-radius: 7px; background: var(--tr-mint); color: var(--tr-accent); font-size: 12px; font-style: normal; font-weight: 900; }
.tr-update-warning,
.tr-update-lock-note { border-color: #ebd4a9; background: var(--tr-amber-wash); color: #82642e; }
.tr-update-warning > i,
.tr-update-lock-note > i { background: #fae7c1; color: var(--tr-amber); }
.tr-update-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0 13px 13px; padding-top: 11px; border-top: 1px solid #e4eeea; }
.tr-update-actions > :first-child:not(.btn) { flex: 1 1 auto; color: var(--muted); font-size: 9px; }
.tr-update-actions .btn { min-block-size: 32px; font-size: 10px; }

/* Immutable change evidence is kept compact but scannable. */
.tr-audit-list,
.tr-update-history { display: grid; gap: 0; }
.tr-audit-row,
.tr-update-history-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 13px; border-top: 1px solid #e7f0ec; }
.tr-audit-row:first-child,
.tr-update-history-row:first-child { border-top: 0; }
.tr-audit-icon,
.tr-update-history-icon { display: grid; inline-size: 26px; block-size: 26px; place-items: center; border-radius: 8px; background: var(--tr-blue-wash); color: var(--tr-blue); font-size: 11px; font-style: normal; font-weight: 900; }
.tr-audit-row.is-correction .tr-audit-icon,
.tr-update-history-row.is-correction .tr-update-history-icon { background: var(--tr-amber-wash); color: var(--tr-amber); }
.tr-audit-row.is-reversal .tr-audit-icon,
.tr-update-history-row.is-reversal .tr-update-history-icon { background: var(--tr-red-wash); color: var(--tr-red); }
.tr-audit-row > div,
.tr-update-history-row > div { min-inline-size: 0; }
.tr-audit-row b,
.tr-update-history-row b { display: block; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tr-audit-row small,
.tr-update-history-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tr-audit-row time,
.tr-update-history-row time { color: var(--muted); font-size: 8px; text-align: end; unicode-bidi: isolate; white-space: nowrap; }

.tr-detail-panel :is(button, a, summary, input, select, textarea):focus-visible,
.tr-update-panel :is(button, a, summary, input, select, textarea):focus-visible,
.tr-cost-panel :is(button, a, summary):focus-visible,
.tr-finance-panel :is(button, a, summary):focus-visible { outline: 3px solid #0874692d; outline-offset: 2px; }
html[dir="rtl"] :is(.tr-detail-panel, .tr-update-panel, .tr-cost-panel, .tr-finance-panel, form.modal.tr-treatment-detail-modal, form.modal.tr-treatment-update-modal) { text-align: start; }
html[dir="rtl"] :is(.tr-cost-amount, .tr-cost-total, .tr-cost-row, .tr-finance-row, .tr-posting-row, .tr-finance-posting) :is(b, strong, output) { direction: ltr; }
html[dir="rtl"] :is(.tr-notes, .tr-clinical-notes) { border-radius: 9px 0 0 9px; }

@media (max-width: 880px) {
  .tr-detail-layout,
  .tr-update-layout,
  .tr-record-layout { grid-template-columns: 1fr; }
  .tr-detail-aside,
  .tr-update-aside,
  .tr-finance-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  form.modal.tr-treatment-detail-modal,
  form.modal.tr-treatment-update-modal { inline-size: min(100%, calc(100vw - 16px)); max-block-size: 96vh; border-radius: 13px; }
  form.modal.tr-treatment-detail-modal .modal-head,
  form.modal.tr-treatment-update-modal .modal-head { padding: 16px 16px 13px; }
  form.modal.tr-treatment-detail-modal .modal-body,
  form.modal.tr-treatment-update-modal .modal-body { padding: 13px 15px 16px; }
  form.modal.tr-treatment-detail-modal .modal-footer,
  form.modal.tr-treatment-update-modal .modal-footer { align-items: stretch; flex-wrap: wrap; padding: 12px 15px 14px; }
  form.modal.tr-treatment-detail-modal .modal-footer .btn,
  form.modal.tr-treatment-update-modal .modal-footer .btn { flex: 1 1 auto; }
  .tr-detail-hero,
  .tr-record-hero { align-items: flex-start; flex-direction: column; gap: 11px; padding: 12px; }
  .tr-hero-status,
  .tr-status-stack { max-inline-size: none; justify-content: flex-start; }
  .tr-detail-aside,
  .tr-update-aside,
  .tr-finance-column { grid-template-columns: 1fr; }
  .tr-fact-grid,
  .tr-clinical-grid,
  .tr-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .tr-fact-grid,
  .tr-clinical-grid,
  .tr-detail-grid,
  .tr-update-grid,
  .tr-update-fields { grid-template-columns: 1fr; }
  .tr-update-grid .field.full,
  .tr-update-fields .field.full { grid-column: auto; }
  .tr-store-line,
  .tr-issue-line,
  .tr-posting-row,
  .tr-finance-posting,
  .tr-audit-row,
  .tr-update-history-row { grid-template-columns: 26px minmax(0, 1fr); }
  .tr-store-line :is(strong, output),
  .tr-issue-line :is(strong, output),
  .tr-posting-row :is(strong, output),
  .tr-finance-posting :is(strong, output),
  .tr-audit-row time,
  .tr-update-history-row time { grid-column: 2; justify-self: start; text-align: start; }
  .tr-cost-amount,
  .tr-cost-total { align-items: flex-start; flex-direction: column; gap: 5px; }
  .tr-cost-amount > :last-child,
  .tr-cost-total > :last-child { text-align: start; }
  .tr-finance-actions,
  .tr-posting-actions,
  .tr-cost-actions,
  .tr-update-actions { justify-content: stretch; }
  .tr-finance-actions .btn,
  .tr-posting-actions .btn,
  .tr-cost-actions .btn,
  .tr-update-actions .btn { flex: 1 1 auto; }
}

/* Cost visibility stays compact in the clinical register while making the
   source of each amount unmistakable.  Values remain isolated LTR numbers
   when the surrounding record is shown in Arabic. */
.treatment-cost-summary,
.treatment-cost-chip,
.treatment-detail-fact.treatment-cost-detail,
.treatment-cost-detail-list,
.treatment-cost-finance-panel,
.treatment-finance-panel {
  --treatment-cost-ink: var(--clinical-ink, var(--ink));
  --treatment-cost-accent: var(--clinical-accent, var(--green));
  --treatment-cost-accent-deep: var(--clinical-accent-deep, var(--green-dark));
  --treatment-cost-blue: var(--clinical-blue, var(--blue));
  --treatment-cost-blue-wash: var(--clinical-blue-wash, var(--blue-pale));
  --treatment-cost-amber: var(--clinical-amber, var(--amber));
  --treatment-cost-amber-wash: var(--clinical-amber-wash, var(--amber-pale));
  --treatment-cost-slate: var(--clinical-slate, var(--muted));
}
.treatment-cost-summary {
  display: inline-flex;
  flex: 0 1 auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  vertical-align: middle;
}
.treatment-cost-chip {
  gap: 4px;
  min-inline-size: 0;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.treatment-cost-chip > b {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-cost-chip > bdi {
  flex: 0 0 auto;
  font-weight: 850;
  unicode-bidi: isolate;
}
.treatment-cost-chip.external {
  border-color: #b9ddd1;
  background: #f1faf6;
  color: var(--treatment-cost-accent-deep);
}
.treatment-cost-chip.medicine {
  border-color: #ccdeee;
  background: var(--treatment-cost-blue-wash);
  color: var(--treatment-cost-blue);
}
.treatment-cost-chip.total {
  border-color: #acd9c8;
  background: linear-gradient(105deg, #edf9f4, #dff3e9);
  color: var(--treatment-cost-accent-deep);
  font-weight: 850;
}
.treatment-cost-chip.total.due {
  border-color: #ead3a4;
  background: var(--treatment-cost-amber-wash);
  color: var(--treatment-cost-amber);
}
.treatment-cost-chip.unavailable,
.treatment-cost-summary.unavailable .treatment-cost-chip {
  border-style: dashed;
  border-color: #d5dfdc;
  background: #f7f9f8;
  color: var(--treatment-cost-slate);
}

.treatment-detail-fact.treatment-cost-detail {
  border-inline-start: 3px solid var(--treatment-cost-accent);
  background: #f9fdfb;
}
.treatment-detail-fact.treatment-cost-detail :is(b, strong) {
  color: var(--treatment-cost-accent-deep);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.treatment-detail-fact.treatment-cost-detail.medicine {
  border-color: #c7dced;
  border-inline-start-color: var(--treatment-cost-blue);
  background: var(--treatment-cost-blue-wash);
}
.treatment-detail-fact.treatment-cost-detail.medicine :is(b, strong) { color: var(--treatment-cost-blue); }
.treatment-detail-fact.treatment-cost-detail.total {
  border-color: #b8ddce;
  border-inline-start-color: var(--treatment-cost-accent-deep);
  background: linear-gradient(125deg, #f5fcf8, #e8f7f0);
}
.treatment-detail-fact.treatment-cost-detail.total :is(b, strong) { color: var(--treatment-cost-accent-deep); font-size: 11px; }
.treatment-detail-fact.treatment-cost-detail.unavailable {
  grid-column: 1 / -1;
  border-style: dashed;
  border-inline-start-style: solid;
  border-inline-start-color: var(--treatment-cost-amber);
  background: #fffdf8;
}
.treatment-detail-fact.treatment-cost-detail.unavailable :is(b, strong) { color: var(--treatment-cost-amber); }
.treatment-detail-fact.treatment-cost-detail.unavailable small:last-child {
  overflow: visible;
  margin-top: 4px;
  color: var(--treatment-cost-slate);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
  text-overflow: clip;
  text-transform: none;
  white-space: normal;
}

/* The update modal presents finance evidence as a read-first mini ledger. */
.treatment-cost-finance-panel,
.treatment-finance-panel {
  border-color: #c7dfd5;
  background: linear-gradient(132deg, #fff 0%, #f5fbf8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 13px #153f3806;
}
.treatment-cost-finance-panel > .panel-head,
.treatment-finance-panel > .panel-head { border-bottom: 1px solid #dcebe5; }
.treatment-cost-finance-panel > .panel-head h3,
.treatment-finance-panel > .panel-head h3 { color: var(--treatment-cost-ink); }
.treatment-cost-detail-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 12px 0;
}
.treatment-cost-detail-list > .treatment-detail-fact { background: #fff; }
.treatment-cost-detail-list > .treatment-detail-fact:first-child:not(:only-child) {
  border-color: #bddfd3;
  background: #f3fbf7;
}
.treatment-cost-detail-list > .treatment-detail-fact:nth-child(2):not(:only-child) {
  border-color: #cbdeee;
  background: var(--treatment-cost-blue-wash);
}
.treatment-cost-detail-list > .treatment-detail-fact:nth-child(3):not(:only-child) {
  border-color: #acd9c8;
  background: linear-gradient(125deg, #f1faf5, #e1f3ea);
}
.treatment-cost-detail-list > .treatment-detail-fact:nth-child(3):not(:only-child) b { color: var(--treatment-cost-accent-deep); font-size: 11px; }
.treatment-cost-detail-list :is(b, strong) { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.treatment-cost-finance-panel > .treatment-detail-note,
.treatment-finance-panel > .treatment-detail-note { margin-top: 12px; }
.treatment-cost-finance-panel .form-actions,
.treatment-finance-panel .form-actions { margin-block-end: 0; }

/* Owner-facing profile roll-up: clear enough for Finance without suggesting
   that this read-only summary can amend any posted source record. */
.animal-lifetime-cost-summary {
  position: relative;
  overflow: hidden;
  margin-block-end: 16px;
  border-color: #c7dfd5;
  background: linear-gradient(125deg, #fff 0%, #f4fbf8 100%);
  box-shadow: 0 5px 16px #153f3807;
  isolation: isolate;
  text-align: start;
}
.animal-lifetime-cost-summary::after {
  position: absolute;
  z-index: 0;
  inset-inline-end: -52px;
  inset-block-end: -70px;
  inline-size: 190px;
  block-size: 190px;
  border-radius: 50%;
  background: var(--green-pale);
  content: "";
  opacity: .58;
  pointer-events: none;
}
.animal-lifetime-cost-summary > * { position: relative; z-index: 1; }
.animal-lifetime-cost-summary[data-cost-status="complete"] { border-color: #b8ddce; }
.animal-lifetime-cost-summary[data-cost-status="unavailable"] { border-color: #ead9b8; background: linear-gradient(125deg, #fff 0%, #fffaf1 100%); }
.animal-lifetime-cost-summary[data-cost-status="unavailable"]::after { background: var(--amber-pale); }
.animal-lifetime-cost-summary-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-block-end: 14px;
  border-bottom: 1px solid #dcebe5;
}
.animal-lifetime-cost-summary-head > div { min-inline-size: 0; }
.animal-lifetime-cost-summary-head h2 {
  margin: 4px 0 3px;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -.24px;
}
.animal-lifetime-cost-summary-head p {
  max-inline-size: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.48;
}
.animal-lifetime-cost-summary-head > .status {
  flex: 0 0 auto;
  margin-block-start: 2px;
  text-align: center;
}
.animal-lifetime-cost-total {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-block: 14px 12px;
  border: 1px solid #b9ddcf;
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(105deg, #f3fbf7, #e4f5ed);
  color: var(--green-dark);
}
.animal-lifetime-cost-total > span {
  min-inline-size: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 830;
  line-height: 1.35;
}
.animal-lifetime-cost-total > b {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: clamp(21px, 2.1vw, 28px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.75px;
  line-height: 1;
  text-align: end;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.animal-lifetime-cost-summary[data-cost-status="unavailable"] .animal-lifetime-cost-total {
  border-color: #ecd7aa;
  background: var(--amber-pale);
  color: #8b6428;
}
.animal-lifetime-cost-summary[data-cost-status="unavailable"] .animal-lifetime-cost-total > b { color: var(--amber); }
.animal-lifetime-cost-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d9e8e2;
  border-radius: 11px;
  background: #fff;
}
.animal-lifetime-cost-item {
  --lifetime-cost-tone: var(--green);
  position: relative;
  min-inline-size: 0;
  padding: 11px 12px 10px;
  border-inline-start: 1px solid #e4eeea;
  box-shadow: inset 0 3px 0 var(--lifetime-cost-tone);
  text-align: start;
}
.animal-lifetime-cost-item:first-child { border-inline-start: 0; }
.animal-lifetime-cost-item small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 790;
  letter-spacing: .18px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.animal-lifetime-cost-item b {
  display: block;
  overflow: hidden;
  margin-block-start: 5px;
  color: var(--lifetime-cost-tone);
  font-size: clamp(10px, .88vw, 12px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.15;
  text-align: start;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.animal-lifetime-cost-item.purchase { --lifetime-cost-tone: #a46721; }
.animal-lifetime-cost-item.feed { --lifetime-cost-tone: var(--green); }
.animal-lifetime-cost-item.external-treatment { --lifetime-cost-tone: #087469; }
.animal-lifetime-cost-item.treatment-medicine { --lifetime-cost-tone: var(--blue); }
.animal-lifetime-cost-item.vaccine { --lifetime-cost-tone: #4d8278; }
.animal-lifetime-cost-note {
  margin: 12px 0 0;
  border-inline-start: 3px solid #b9ddcf;
  border-radius: 0 9px 9px 0;
  padding: 9px 10px;
  background: #f6fbf9;
  color: #527168;
  font-size: 10px;
  line-height: 1.48;
  text-align: start;
}
.animal-lifetime-cost-summary[data-cost-status="unavailable"] .animal-lifetime-cost-note {
  border-inline-start-color: #e3bf80;
  background: #fffaf1;
  color: #826535;
}

html[dir="rtl"] :is(.treatment-cost-finance-panel, .treatment-finance-panel, .animal-lifetime-cost-summary) { text-align: start; }
html[dir="rtl"] :is(.treatment-cost-chip, .treatment-cost-detail, .treatment-cost-detail-list, .animal-lifetime-cost-total, .animal-lifetime-cost-item) :is(b, strong, bdi) { direction: ltr; }
html[dir="rtl"] .animal-lifetime-cost-note { border-radius: 9px 0 0 9px; }

@media (max-width: 1080px) {
  .animal-lifetime-cost-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .animal-lifetime-cost-item:nth-child(3n + 1) { border-inline-start: 0; }
  .animal-lifetime-cost-item:nth-child(n + 4) { border-block-start: 1px solid #e4eeea; }
}
@media (max-width: 720px) {
  .treatment-cost-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-lifetime-cost-summary-head { gap: 11px; }
  .animal-lifetime-cost-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animal-lifetime-cost-item { border-inline-start: 1px solid #e4eeea; }
  .animal-lifetime-cost-item:nth-child(2n + 1) { border-inline-start: 0; }
  .animal-lifetime-cost-item:nth-child(n + 3) { border-block-start: 1px solid #e4eeea; }
}
@media (max-width: 460px) {
  .treatment-cost-detail-list { grid-template-columns: 1fr; }
  .animal-lifetime-cost-summary { padding: 14px; border-radius: 13px; }
  .animal-lifetime-cost-summary-head { align-items: flex-start; flex-direction: column; }
  .animal-lifetime-cost-summary-head > .status { margin-block-start: 0; }
  .animal-lifetime-cost-total { align-items: flex-start; flex-direction: column; gap: 6px; padding: 11px 12px; }
  .animal-lifetime-cost-total > b { font-size: 22px; text-align: start; }
  .animal-lifetime-cost-breakdown { grid-template-columns: 1fr; }
  .animal-lifetime-cost-item,
  .animal-lifetime-cost-item:nth-child(2n + 1) { border-inline-start: 0; border-block-start: 1px solid #e4eeea; }
  .animal-lifetime-cost-item:first-child { border-block-start: 0; }
}

/* Owner Daily Action Queue.  This is intentionally self-contained so the
   dashboard and alerts drawer can share the same terse decision language. */
.owner-action-queue {
  position: relative;
  overflow: hidden;
  margin-block-end: 18px;
  border: 1px solid #cfe1db;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 16px #153f3808;
  color: var(--ink);
  text-align: start;
}
.owner-action-queue::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--green), #69a991 58%, #d9ebe4);
  content: "";
}
.owner-action-queue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding-block: 18px 14px;
  padding-inline: 18px;
  border-block-end: 1px solid #e0ece7;
  background: linear-gradient(108deg, #fbfefd, #f3faf7);
}
.owner-action-queue-head > * { min-inline-size: 0; }
.owner-action-queue-head :is(h2, h3) {
  margin-block: 3px 2px;
  margin-inline: 0;
  color: var(--green-dark);
  font-size: 16px;
  letter-spacing: -.18px;
  line-height: 1.25;
}
.owner-action-queue-head :is(p, small) {
  display: block;
  max-inline-size: 670px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.owner-action-summary {
  display: flex;
  max-inline-size: 100%;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.owner-action-summary > * {
  display: inline-flex;
  min-block-size: 28px;
  align-items: center;
  gap: 5px;
  border: 1px solid #c9e3d8;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: #426b60;
  font-size: 9px;
  font-weight: 760;
  line-height: 1.15;
  white-space: nowrap;
}
.owner-action-summary :is(b, strong) {
  color: var(--green-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}
.owner-action-summary > .is-due,
.owner-action-summary > .due,
.owner-action-summary > [data-priority="due"] {
  border-color: #ead4a7;
  background: #fffaf1;
  color: #8a652a;
}
.owner-action-summary > .is-new,
.owner-action-summary > .new,
.owner-action-summary > [data-priority="new"] {
  border-color: #cbddec;
  background: #f3f8fd;
  color: #386895;
}
.owner-action-summary > .is-overdue,
.owner-action-summary > .overdue,
.owner-action-summary > [data-priority="overdue"] {
  border-color: #ebc8c2;
  background: #fff7f6;
  color: #964a42;
}
.finance-action-list,
.alerts-finance-actions {
  display: grid;
  min-inline-size: 0;
  gap: 8px;
}
.owner-action-queue > .finance-action-list { padding-block: 11px 13px; padding-inline: 13px; }
.alerts-finance-actions {
  margin-block: 10px 2px;
  border: 1px solid #dce9e4;
  border-radius: 11px;
  padding: 8px;
  background: #f9fcfa;
}
.alerts-finance-actions > .finance-action-list { padding: 0; }
.finance-action-row {
  --finance-action-tone: #286e63;
  --finance-action-border: #c6e0d5;
  --finance-action-wash: #f5fbf8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(88px, auto) auto;
  gap: 8px 11px;
  align-items: center;
  min-inline-size: 0;
  border: 1px solid var(--finance-action-border);
  border-inline-start: 3px solid var(--finance-action-tone);
  border-radius: 10px;
  padding-block: 9px;
  padding-inline: 9px 10px;
  background: #fff;
  box-shadow: 0 1px 2px #153f3804;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.finance-action-row > * { min-inline-size: 0; }
.finance-action-row :is(h3, h4, b, strong) {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 840;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-action-row :is(p, small) {
  display: block;
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-action-row time {
  color: #587970;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  line-height: 1.3;
  text-align: end;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.finance-action-priority {
  display: inline-flex;
  min-block-size: 24px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--finance-action-border);
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--finance-action-wash);
  color: var(--finance-action-tone);
  font-size: 8px;
  font-weight: 880;
  letter-spacing: .34px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.finance-action-priority::before {
  inline-size: 6px;
  block-size: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.finance-action-row :is(.btn, .link-btn, button[data-action], a[data-action]) {
  min-block-size: 32px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 830;
  line-height: 1.15;
  white-space: nowrap;
}
.finance-action-row .link-btn {
  border: 1px solid #c7e1d6;
  padding-block: 6px;
  padding-inline: 8px;
  background: #f7fcf9;
  color: var(--green-dark);
  text-decoration: none;
}
.finance-action-row .link-btn:hover { border-color: #92c9b7; background: var(--green-pale); text-decoration: none; }
.finance-action-row:is(.is-new, .new, [data-priority="new"]),
.finance-action-row:has(.finance-action-priority:is(.is-new, .new, [data-priority="new"])) {
  --finance-action-tone: #386895;
  --finance-action-border: #cbddec;
  --finance-action-wash: #f3f8fd;
}
.finance-action-row:is(.is-due, .due, [data-priority="due"]),
.finance-action-row:has(.finance-action-priority:is(.is-due, .due, [data-priority="due"])) {
  --finance-action-tone: #94601c;
  --finance-action-border: #ead2a0;
  --finance-action-wash: #fff8eb;
}
.finance-action-row:is(.is-overdue, .overdue, [data-priority="overdue"]),
.finance-action-row:has(.finance-action-priority:is(.is-overdue, .overdue, [data-priority="overdue"])) {
  --finance-action-tone: #a5443b;
  --finance-action-border: #ebc6c0;
  --finance-action-wash: #fff6f4;
}
.finance-action-priority:is(.is-new, .new, [data-priority="new"]) {
  border-color: #cbddec;
  background: #f3f8fd;
  color: #386895;
}
.finance-action-priority:is(.is-due, .due, [data-priority="due"]) {
  border-color: #ead2a0;
  background: #fff8eb;
  color: #94601c;
}
.finance-action-priority:is(.is-overdue, .overdue, [data-priority="overdue"]) {
  border-color: #ebc6c0;
  background: #fff6f4;
  color: #a5443b;
}
.finance-action-row:is(.is-due, .due, [data-priority="due"]) time,
.finance-action-row:is(.is-overdue, .overdue, [data-priority="overdue"]) time { color: var(--finance-action-tone); }
.owner-action-queue :is(button, a, [tabindex]):focus-visible,
.alerts-finance-actions :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid #087469;
  outline-offset: 2px;
}
.finance-action-row:focus-within {
  border-color: #8cc7b5;
  box-shadow: 0 0 0 3px #0a746812;
}
@media (hover: hover) {
  .finance-action-row:hover {
    border-color: #a9d3c5;
    background: var(--finance-action-wash);
    box-shadow: 0 6px 15px #153f380d;
    transform: translateY(-1px);
  }
}
html[dir="rtl"] :is(.owner-action-queue, .alerts-finance-actions) { text-align: start; }
html[dir="rtl"] .finance-action-row time { direction: ltr; }

@media (max-width: 760px) {
  .owner-action-queue-head { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px 13px; }
  .owner-action-summary { justify-content: flex-start; }
  .owner-action-queue > .finance-action-list { padding: 10px; }
  .finance-action-row { grid-template-columns: 1fr; gap: 7px; align-items: start; padding: 10px; }
  .finance-action-priority { justify-self: start; }
  .finance-action-row time { text-align: start; }
  .finance-action-row :is(.btn, .link-btn, button[data-action], a[data-action]) { justify-self: start; }
  .alerts-finance-actions { padding: 7px; }
}
@media (max-width: 440px) {
  .owner-action-summary > * { min-block-size: 27px; padding-inline: 7px; }
  .finance-action-row :is(p, small) { overflow: visible; text-overflow: clip; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .finance-action-row { transition: none; }
  .finance-action-row:hover { transform: none; }
}

/* Controlled medicine-correction workflow.  Original Store evidence remains
   readable, while the requested effective issue and its operational/Finance
   effect are presented as a deliberate, reviewable change. */
.treatment-correction-panel {
  --correction-ink: #15564d;
  --correction-accent: #087469;
  --correction-border: #c9e3d8;
  --correction-soft: #f3faf7;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--correction-border);
  border-radius: 14px;
  background: linear-gradient(122deg, #fff 0%, var(--correction-soft) 100%);
  text-align: start;
}
.treatment-correction-panel::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, #087469, #70b39a 57%, #d8ebe4);
  content: "";
}
.treatment-correction-panel > .panel-head,
.treatment-correction-panel > header {
  padding-block: 17px 12px;
  padding-inline: 17px;
  border-block-end: 1px solid #dcebe5;
}
.treatment-correction-panel h3,
.treatment-correction-panel h4 {
  margin: 0;
  color: var(--correction-ink);
  font-size: 13px;
  line-height: 1.3;
}
.treatment-correction-panel :is(p, small) {
  color: #587a70;
  font-size: 10px;
  line-height: 1.45;
}
.treatment-correction-effective-lines,
.treatment-correction-original-evidence {
  display: grid;
  gap: 7px;
  padding: 12px 15px;
}
.treatment-correction-effective-lines {
  border-block-end: 1px solid #dcebe5;
  background: #fbfefd;
}
.treatment-correction-effective-lines > header,
.treatment-correction-original-evidence > header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}
.treatment-correction-effective-lines > header b,
.treatment-correction-original-evidence > header b {
  color: #1b5c52;
  font-size: 10px;
}
.treatment-correction-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid #d7e8e1;
  border-inline-start: 3px solid #499a82;
  border-radius: 10px;
  padding: 8px 9px;
  background: #fff;
}
.treatment-correction-line.is-original,
.treatment-correction-line.is-superseded {
  border-inline-start-color: #9c7c55;
  border-color: #e7d8c5;
  background: #fffdf9;
}
.treatment-correction-line > div { min-inline-size: 0; }
.treatment-correction-line b,
.treatment-correction-line strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-correction-line small {
  display: block;
  overflow: hidden;
  margin-block-start: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-correction-line > :last-child {
  color: #2c7363;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: end;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.treatment-correction-original-evidence {
  background: #fffdf9;
}
.treatment-correction-original-evidence summary {
  color: #79634b;
  cursor: pointer;
  font-size: 10px;
  font-weight: 780;
}
.treatment-correction-original-evidence summary:focus-visible {
  outline: 3px solid #087469;
  outline-offset: 3px;
  border-radius: 4px;
}
.treatment-correction-history {
  display: grid;
  gap: 9px;
  padding: 13px 15px 15px;
}
.treatment-correction-history.empty {
  display: block;
  padding-block: 14px;
  color: var(--muted);
  text-align: center;
}
.treatment-correction-history-item {
  --correction-tone: #a66a1f;
  --correction-row-border: #ead4ad;
  --correction-row-wash: #fffaf1;
  border: 1px solid var(--correction-row-border);
  border-inline-start: 3px solid var(--correction-tone);
  border-radius: 11px;
  padding: 11px;
  background: var(--correction-row-wash);
}
.treatment-correction-history-item.approved {
  --correction-tone: #23705f;
  --correction-row-border: #c9e2d6;
  --correction-row-wash: #f7fcf9;
}
.treatment-correction-history-item.rejected,
.treatment-correction-history-item.failed {
  --correction-tone: #a64c43;
  --correction-row-border: #ecc8c3;
  --correction-row-wash: #fff8f7;
}
.treatment-correction-history-item > header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.treatment-correction-history-item > header > div { min-inline-size: 0; }
.treatment-correction-history-item h4 { margin-block: 2px 0; color: var(--ink); font-size: 11px; }
.treatment-correction-status,
.treatment-correction-history-item .status {
  flex: 0 0 auto;
  border: 1px solid var(--correction-row-border);
  border-radius: 999px;
  padding: 4px 7px;
  background: #fff;
  color: var(--correction-tone);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.treatment-correction-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  margin-block: 10px;
}
.treatment-correction-arrow {
  display: grid;
  inline-size: 27px;
  place-items: center;
  color: var(--correction-tone);
  font-size: 17px;
  font-weight: 900;
}
.treatment-correction-snapshot {
  min-inline-size: 0;
  border: 1px solid #dbe8e3;
  border-radius: 9px;
  padding: 8px;
  background: #fff;
}
.treatment-correction-snapshot > :is(small, b, span) { display: block; }
.treatment-correction-snapshot > small { color: #6e817c; font-size: 8px; line-height: 1.25; }
.treatment-correction-snapshot > b {
  overflow: hidden;
  margin-block: 2px;
  color: #244940;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-correction-snapshot > span {
  color: #1f6c5b;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
}
.treatment-correction-impact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  border: 1px solid #cde3d9;
  border-radius: 9px;
  padding: 8px 9px;
  background: #f4fbf7;
}
.treatment-correction-impact > small:first-child { grid-column: 1; }
.treatment-correction-impact > bdi { grid-column: 2; grid-row: 1 / span 2; }
.treatment-correction-impact > bdi b {
  color: #166653;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.treatment-correction-impact > small:last-child { grid-column: 1 / -1; color: #5b796f; }
.treatment-correction-impact.unavailable {
  display: block;
  border-color: #e3d8c7;
  background: #fffaf3;
  color: #7d694e;
}
.treatment-correction-impact.unavailable b { color: #725a3d; }
.treatment-correction-finance-note {
  margin: 9px 0 0;
  border-inline-start: 3px solid #428a78;
  padding-block: 3px;
  padding-inline: 9px 0;
  color: #4c7066;
}
.treatment-correction-reason,
.treatment-correction-review-note {
  margin: 9px 0 0;
  color: #5c746e;
  font-size: 10px;
  line-height: 1.45;
}
.treatment-correction-reason b,
.treatment-correction-review-note b { color: #385d54; }
.treatment-correction-audit-meta {
  display: flex;
  gap: 6px 13px;
  flex-wrap: wrap;
  margin-block-start: 9px;
  color: #6d827c;
  font-size: 9px;
}
.treatment-correction-review-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-block-start: 11px;
}
.treatment-correction-review-actions .btn { min-block-size: 30px; padding-block: 6px; font-size: 10px; }
.treatment-correction-review-actions .danger-link { color: #a4473e; }

form.modal.treatment-correction-modal,
form.modal[data-workflow="treatment-medicine-correction"],
form.modal[data-workflow="treatment-medicine-correction-review"] {
  display: flex;
  flex-direction: column;
  inline-size: min(850px, 100%);
  max-block-size: min(92vh, 900px);
  overflow: hidden;
  border: 1px solid #c7e0d6;
  border-radius: 18px;
  background: #fff;
}
.treatment-correction-modal .modal-head,
[data-workflow^="treatment-medicine-correction"] .modal-head {
  flex: 0 0 auto;
  border-block-end-color: #cfe5db;
  background: linear-gradient(113deg, #fff, #f2faf7);
}
.treatment-correction-modal .modal-head h2,
[data-workflow^="treatment-medicine-correction"] .modal-head h2 { color: #15584e; }
.treatment-correction-modal .modal-body,
[data-workflow^="treatment-medicine-correction"] .modal-body {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 21px;
}
.treatment-correction-form,
.treatment-correction-context {
  display: grid;
  gap: 12px;
}
.treatment-correction-context {
  border: 1px solid #d5e7e0;
  border-radius: 12px;
  padding: 13px;
  background: #f8fcfa;
}
.treatment-correction-context > header {
  display: flex;
  gap: 9px;
  align-items: baseline;
  justify-content: space-between;
}
.treatment-correction-context h3 { margin: 0; color: #1a5c50; font-size: 12px; }
.treatment-correction-panel > .panel-head > .treatment-correction-summary {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.treatment-correction-form .form-grid { gap: 12px; }
.treatment-correction-form .field { min-inline-size: 0; }
.treatment-correction-original-preview,
.treatment-correction-replacement-preview {
  border: 1px solid #d9e8e2;
  border-radius: 11px;
  padding: 11px 12px;
  background: linear-gradient(118deg, #fcfffd, #f2faf7);
}
.treatment-correction-original-preview {
  border-color: #e6d9c8;
  background: linear-gradient(118deg, #fffefa, #fff9f1);
}
.treatment-correction-line-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 15px;
}
.treatment-correction-line-detail > div { min-inline-size: 0; }
.treatment-correction-line-detail small {
  display: block;
  color: #6b817b;
  font-size: 9px;
  line-height: 1.35;
}
.treatment-correction-line-detail b {
  display: block;
  overflow: hidden;
  margin-block-start: 2px;
  color: #255449;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treatment-correction-review-context,
.treatment-correction-review-decision {
  border: 1px solid #d3e7de;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(118deg, #f7fcfa, #eff8f4);
}
.treatment-correction-review-context h3 {
  margin: 4px 0 5px;
  color: #15584e;
  font-size: 14px;
}
.treatment-correction-review-context p {
  margin: 0;
  color: #587a70;
  font-size: 11px;
  line-height: 1.5;
}
.treatment-correction-review-decision {
  margin-block-start: 13px;
  border-color: #cfdfd8;
  background: #fff;
}
.treatment-correction-review-decision textarea { min-block-size: 92px; }

/* Request-modal decision preview.  This intentionally does not reuse the
   compact historical WAC-delta component above: it has three operational
   outcomes and needs a full, readable approval summary in either direction. */
.correction-decision-impact {
  --decision-ink: #1a5148;
  --decision-muted: #58766e;
  --decision-border: #cfe3da;
  display: grid;
  gap: 13px;
  margin-block: 2px 3px;
  border: 1px solid var(--decision-border);
  border-radius: 15px;
  padding: 15px;
  background:
    radial-gradient(circle at 100% 0%, #d8eee430 0, transparent 29%),
    linear-gradient(135deg, #fbfefd, #f1f9f5);
  color: var(--decision-ink);
  text-align: start;
}
.correction-decision-impact__header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.correction-decision-impact__heading { min-inline-size: 0; }
.correction-decision-impact__eyebrow {
  display: block;
  margin-block-end: 3px;
  color: #498074;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
}
.correction-decision-impact h4 {
  margin: 0;
  color: #164e44;
  font-size: 15px;
  line-height: 1.25;
}
.correction-decision-impact__state {
  flex: 0 0 auto;
  border: 1px solid #e3cd9d;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff9ed;
  color: #84652e;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.correction-decision-impact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.correction-decision-card {
  --decision-card-accent: #368271;
  --decision-card-border: #cfe4da;
  --decision-card-wash: #fbfefd;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  min-inline-size: 0;
  border: 1px solid var(--decision-card-border);
  border-inline-start: 3px solid var(--decision-card-accent);
  border-radius: 11px;
  padding: 11px;
  background: var(--decision-card-wash);
}
.correction-decision-card--operational {
  --decision-card-accent: #537fa9;
  --decision-card-border: #d6e1ef;
  --decision-card-wash: #f8fbff;
}
.correction-decision-card--finance {
  --decision-card-accent: #9a7440;
  --decision-card-border: #e8ddc9;
  --decision-card-wash: #fffdf8;
}
.correction-decision-card__header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.correction-decision-card__marker {
  display: grid;
  flex: 0 0 auto;
  inline-size: 25px;
  block-size: 25px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--decision-card-accent) 13%, #fff);
  color: var(--decision-card-accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.correction-decision-card__header > div { min-inline-size: 0; }
.correction-decision-card__header small {
  display: block;
  color: #6c817b;
  font-size: 8px;
  font-weight: 780;
  line-height: 1.25;
}
.correction-decision-card h5 {
  margin: 2px 0 0;
  color: #27564c;
  font-size: 11px;
  line-height: 1.28;
}
.correction-decision-card__copy {
  margin: 0;
  color: var(--decision-muted);
  font-size: 9px;
  line-height: 1.5;
}
.correction-decision-card__outcome {
  display: inline-flex;
  align-self: end;
  inline-size: fit-content;
  border: 1px solid color-mix(in srgb, var(--decision-card-accent) 28%, #fff);
  border-radius: 999px;
  padding: 4px 6px;
  background: #fff;
  color: var(--decision-card-accent);
  font-size: 8px;
  font-weight: 820;
  line-height: 1.25;
}
.correction-decision-card__selection {
  margin: 0;
  border-radius: 8px;
  padding: 8px;
  background: #ffffffa8;
  color: #70837e;
  font-size: 8px;
  line-height: 1.45;
}
.correction-decision-card__exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 5px;
  align-items: stretch;
  border-radius: 8px;
  padding: 7px;
  background: #ffffffbf;
}
.correction-decision-card__line {
  min-inline-size: 0;
  overflow: hidden;
}
.correction-decision-card__line :is(small, b, span) { display: block; }
.correction-decision-card__line small { color: #789088; font-size: 7px; }
.correction-decision-card__line b {
  overflow: hidden;
  margin-block: 2px;
  color: #27564c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correction-decision-card__line > span {
  overflow: hidden;
  color: #4b796c;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correction-decision-card__exchange-arrow {
  display: grid;
  place-items: center;
  color: var(--decision-card-accent);
  font-size: 13px;
  font-weight: 900;
}
.correction-decision-timing {
  display: grid;
  grid-template-columns: minmax(145px, .75fr) minmax(0, 2.25fr);
  gap: 12px;
  align-items: center;
  border-block: 1px solid #d8e7e1;
  padding-block: 11px;
}
.correction-decision-timing__heading small,
.correction-decision-timing__heading b { display: block; }
.correction-decision-timing__heading small { color: #6c847d; font-size: 8px; }
.correction-decision-timing__heading b {
  margin-block-start: 3px;
  color: #345f55;
  font-size: 10px;
  line-height: 1.35;
}
.correction-decision-timing__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.correction-decision-timing__step {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  min-inline-size: 0;
}
.correction-decision-timing__step > span {
  display: grid;
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 17px;
  place-items: center;
  border-radius: 50%;
  background: #e2f0e9;
  color: #2f7463;
  font-size: 8px;
  font-weight: 900;
}
.correction-decision-timing__step div { min-inline-size: 0; }
.correction-decision-timing__step b,
.correction-decision-timing__step small { display: block; }
.correction-decision-timing__step b { color: #345f55; font-size: 9px; }
.correction-decision-timing__step small { margin-block-start: 1px; color: #70847e; font-size: 8px; line-height: 1.35; }
.correction-decision-impact__note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  border-inline-start: 3px solid #5b9b89;
  padding-inline-start: 8px;
  color: #57786e;
  font-size: 9px;
  line-height: 1.45;
}
.correction-decision-impact__note b { flex: 0 0 auto; color: #31685b; }
html[dir="rtl"] .correction-decision-card__exchange-arrow { transform: rotate(180deg); }
.treatment-correction-form :is(input, select, textarea):focus-visible,
.treatment-correction-review-modal :is(input, select, textarea):focus-visible,
.treatment-correction-review-actions :is(button, a):focus-visible {
  outline: 3px solid #087469;
  outline-offset: 2px;
}
.treatment-correction-review-modal .modal-footer { flex: 0 0 auto; border-block-start: 1px solid #dbe9e4; padding-block-start: 14px; }
html[dir="rtl"] :is(.treatment-correction-panel, .treatment-correction-modal) { text-align: start; }

@media (max-width: 660px) {
  .treatment-correction-change { grid-template-columns: 1fr; gap: 7px; }
  .treatment-correction-arrow { inline-size: auto; block-size: 20px; transform: rotate(90deg); }
  .treatment-correction-line { grid-template-columns: 1fr; gap: 3px; }
  .treatment-correction-line-detail { grid-template-columns: 1fr; gap: 8px; }
  .correction-decision-impact { padding: 12px; }
  .correction-decision-impact__header { align-items: flex-start; }
  .correction-decision-impact__state { white-space: normal; text-align: center; }
  .correction-decision-impact__grid { grid-template-columns: 1fr; }
  .correction-decision-timing { grid-template-columns: 1fr; gap: 9px; }
  .correction-decision-timing__steps { grid-template-columns: 1fr; gap: 8px; }
  .correction-decision-card__exchange { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .treatment-correction-line > :last-child { text-align: start; }
  .treatment-correction-history,
  .treatment-correction-effective-lines,
  .treatment-correction-original-evidence { padding-inline: 11px; }
  .treatment-correction-history-item { padding: 9px; }
  .treatment-correction-history-item > header { align-items: flex-start; }
  .treatment-correction-modal .modal-body,
  [data-workflow^="treatment-medicine-correction"] .modal-body { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .treatment-correction-panel *,
  .treatment-correction-history-item * { scroll-behavior: auto; transition: none; }
}

/* Product-level withdrawal protocols.  The warm clinical styling keeps the
   authoritative, structured rules visually distinct from retained label text. */
.product-details-withdrawal-protocols {
  border-color: #efd5b4;
  background: linear-gradient(136deg, #fffdf9 0%, #fff7eb 100%);
}
.product-details-withdrawal-protocols .product-details-section-icon {
  background: #fff0d9;
  color: #a55c1c;
}
.product-details-withdrawal-label { border-color: #dce6e2; background: #fcfefd; }
.withdrawal-label-reference {
  border: 1px solid #e4eae7;
  border-inline-start: 3px solid #9aaca5;
  border-radius: 10px;
  padding: 11px 12px;
  background: #f8fbf9;
  color: #55726a;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-line;
}
.withdrawal-label-reference.is-empty { border-style: dashed; color: #738780; font-style: italic; }
.withdrawal-protocol-loading,
.withdrawal-review-loading {
  display: flex;
  min-block-size: 76px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e4c79f;
  border-radius: 11px;
  background: #ffffffad;
  color: #87613b;
  font-size: 10px;
  font-weight: 760;
  text-align: center;
}
.spinner {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid #e4cba9;
  border-block-start-color: #ad6423;
  border-radius: 50%;
  animation: withdrawal-spinner .8s linear infinite;
}
@keyframes withdrawal-spinner { to { transform: rotate(360deg); } }
.withdrawal-protocol-service-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid #eed5af;
  border-radius: 11px;
  padding: 11px;
  background: #fff8ed;
}
.withdrawal-protocol-service-note.error { border-color: #efc5c2; background: #fff7f6; }
.withdrawal-protocol-service-note > span {
  display: grid;
  flex: 0 0 auto;
  inline-size: 21px;
  block-size: 21px;
  place-items: center;
  border-radius: 7px;
  background: #ffe8c7;
  color: #9b5e20;
  font-size: 12px;
  font-weight: 900;
}
.withdrawal-protocol-service-note.error > span { background: #fde4e2; color: #a9413a; }
.withdrawal-protocol-service-note > div { min-inline-size: 0; }
.withdrawal-protocol-service-note :is(b, small) { display: block; }
.withdrawal-protocol-service-note b { color: #805020; font-size: 10px; }
.withdrawal-protocol-service-note.error b { color: #913c36; }
.withdrawal-protocol-service-note small { margin-block-start: 2px; color: #856d55; font-size: 9px; line-height: 1.45; }
.withdrawal-protocol-output-grid,
.withdrawal-protocol-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.withdrawal-output-group {
  --withdrawal-output: #a95d1d;
  --withdrawal-output-ink: #7d4214;
  --withdrawal-output-soft: #fff0df;
  --withdrawal-output-border: #efcdab;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--withdrawal-output-border);
  border-radius: 12px;
  background: #fff;
}
.withdrawal-output-group--milk {
  --withdrawal-output: #246fa8;
  --withdrawal-output-ink: #1e5481;
  --withdrawal-output-soft: #e7f4ff;
  --withdrawal-output-border: #bfdbf2;
}
.withdrawal-output-group > header {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 11px;
  border-bottom: 1px solid var(--withdrawal-output-border);
  background: linear-gradient(115deg, #fff, var(--withdrawal-output-soft));
}
.withdrawal-output-group > header > span {
  display: grid;
  flex: 0 0 auto;
  inline-size: 25px;
  block-size: 25px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--withdrawal-output);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 5px #153f380d;
}
.withdrawal-output-group > header > div { min-inline-size: 0; }
.withdrawal-output-group > header b,
.withdrawal-output-group > header small { display: block; }
.withdrawal-output-group > header b { color: var(--withdrawal-output-ink); font-size: 11px; }
.withdrawal-output-group > header small { margin-top: 1px; color: #71867f; font-size: 8px; line-height: 1.35; }
.withdrawal-protocol-list { display: grid; gap: 8px; padding: 9px; }
.withdrawal-protocol-card {
  --withdrawal-card: #aa5f1e;
  --withdrawal-card-ink: #734012;
  --withdrawal-card-soft: #fff8ef;
  --withdrawal-card-border: #efd2ae;
  min-inline-size: 0;
  border: 1px solid var(--withdrawal-card-border);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(140deg, #fff, var(--withdrawal-card-soft));
  box-shadow: 0 2px 5px #153f3806;
}
.withdrawal-protocol-card--milk { --withdrawal-card: #2878b2; --withdrawal-card-ink: #1b5585; --withdrawal-card-soft: #f4faff; --withdrawal-card-border: #c5dff4; }
.withdrawal-protocol-card--draft { border-style: dashed; }
.withdrawal-protocol-card--rejected,
.withdrawal-protocol-card--superseded { opacity: .76; filter: saturate(.72); }
.withdrawal-protocol-card > header {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.withdrawal-protocol-output-icon {
  display: grid;
  inline-size: 25px;
  block-size: 25px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--withdrawal-card);
  font-size: 12px;
  font-weight: 900;
}
.withdrawal-protocol-card > header > div { min-inline-size: 0; }
.withdrawal-protocol-card > header small,
.withdrawal-protocol-card > header b { display: block; }
.withdrawal-protocol-card > header small { color: #75877f; font-size: 8px; font-weight: 750; }
.withdrawal-protocol-card > header b { overflow: hidden; margin-top: 1px; color: var(--withdrawal-card-ink); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-protocol-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d5e3dd;
  border-radius: 999px;
  padding: 3px 6px;
  background: #f8fbf9;
  color: #5a746c;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}
.withdrawal-protocol-status.approved { border-color: #bfe1cc; background: #effaf3; color: #217046; }
.withdrawal-protocol-status.draft { border-color: #efd2a9; background: #fff8ed; color: #966019; }
.withdrawal-protocol-status.rejected { border-color: #ebc9c5; background: #fff4f3; color: #9a3e37; }
.withdrawal-protocol-status.superseded { border-color: #d9dfdd; background: #f4f6f5; color: #647570; }
.withdrawal-protocol-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 0;
}
.withdrawal-protocol-facts > div,
.withdrawal-protocol-policy,
.withdrawal-protocol-evidence {
  min-inline-size: 0;
  border: 1px solid #e4ece8;
  border-radius: 8px;
  padding: 7px;
  background: #ffffffc9;
}
.withdrawal-protocol-facts dt,
.withdrawal-protocol-policy > span,
.withdrawal-protocol-evidence > span {
  display: block;
  color: #71857d;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.withdrawal-protocol-facts dd,
.withdrawal-protocol-policy b,
.withdrawal-protocol-evidence b {
  display: block;
  overflow: hidden;
  margin: 2px 0 0;
  color: #31584e;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.withdrawal-protocol-policy,
.withdrawal-protocol-evidence { margin-top: 6px; }
.withdrawal-protocol-evidence b { color: #526c64; font-weight: 700; }
.withdrawal-protocol-card footer {
  display: flex;
  gap: 5px 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #71847d;
  font-size: 8px;
  line-height: 1.3;
}
.withdrawal-protocol-card footer > span:last-of-type { color: var(--withdrawal-card-ink); font-weight: 850; }
.withdrawal-protocol-card footer small { flex-basis: 100%; color: #788982; font-size: 8px; }
.withdrawal-protocol-card-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  border-top: 1px solid #e3ebe7;
  padding-top: 7px;
}
.withdrawal-protocol-card-actions .link-btn { font-size: 9px; }
.withdrawal-protocol-approve-link { color: #28724d; }
.withdrawal-protocol-empty {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px dashed var(--withdrawal-output-border);
  border-radius: 9px;
  padding: 10px;
  background: #ffffffb5;
}
.withdrawal-protocol-empty > span {
  display: grid;
  inline-size: 23px;
  block-size: 23px;
  place-items: center;
  border-radius: 7px;
  background: var(--withdrawal-output-soft);
  color: var(--withdrawal-output);
  font-weight: 900;
}
.withdrawal-protocol-empty > div { min-inline-size: 0; }
.withdrawal-protocol-empty b,
.withdrawal-protocol-empty small { display: block; }
.withdrawal-protocol-empty b { color: var(--withdrawal-output-ink); font-size: 9px; }
.withdrawal-protocol-empty small { margin-top: 2px; color: #71867e; font-size: 8px; line-height: 1.45; }
.withdrawal-protocol-empty .link-btn { grid-column: 2; justify-self: start; margin-top: 1px; font-size: 9px; }
.withdrawal-protocol-governance {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  border-top: 1px solid #efd9bb;
  padding-top: 10px;
}
.withdrawal-protocol-governance > span {
  display: grid;
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  place-items: center;
  border-radius: 7px;
  background: #fff0d9;
  color: #a35b1e;
  font-size: 10px;
  font-weight: 900;
}
.withdrawal-protocol-governance p { flex: 1 1 auto; margin: 0; color: #6d7567; font-size: 9px; line-height: 1.45; }
.withdrawal-protocol-governance .btn { flex: 0 0 auto; white-space: nowrap; }

.product-withdrawal-protocol-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-top: 13px;
  border: 1px solid #edd8b8;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(105deg, #fffdf8, #fff6e9);
}
.product-withdrawal-protocol-link.is-pending { grid-template-columns: 28px minmax(0, 1fr); border-style: dashed; }
.product-withdrawal-protocol-link > span {
  display: grid;
  inline-size: 27px;
  block-size: 27px;
  place-items: center;
  border-radius: 8px;
  background: #fff0d9;
  color: #a45c1d;
  font-weight: 900;
}
.product-withdrawal-protocol-link > div { min-inline-size: 0; }
.product-withdrawal-protocol-link b,
.product-withdrawal-protocol-link small { display: block; }
.product-withdrawal-protocol-link b { color: #7d4a1e; font-size: 10px; }
.product-withdrawal-protocol-link small { margin-top: 2px; color: #7d7669; font-size: 8px; line-height: 1.4; }
.product-withdrawal-protocol-link .btn { white-space: nowrap; }

.withdrawal-review-panel {
  margin-bottom: 17px;
  overflow: hidden;
  border: 1px solid #ead2b2;
  border-radius: 15px;
  background: linear-gradient(112deg, #fffdf9 0%, #fff6e9 100%);
  box-shadow: 0 4px 12px #153f3808;
}
.withdrawal-review-panel-head {
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 12px;
  border-bottom: 1px solid #efdbbd;
}
.withdrawal-review-panel-head > div:first-child { min-inline-size: 0; }
.withdrawal-review-panel-head h2 { margin: 3px 0 0; color: #71431a; font-size: 14px; letter-spacing: -.12px; }
.withdrawal-review-panel-head p { margin: 3px 0 0; color: #806b55; font-size: 10px; line-height: 1.4; }
.withdrawal-review-count {
  display: grid;
  flex: 0 0 auto;
  inline-size: 58px;
  block-size: 58px;
  place-items: center;
  border: 1px solid #efcfaa;
  border-radius: 16px;
  background: #fff;
  color: #915719;
  text-align: center;
}
.withdrawal-review-count b { display: block; font-size: 20px; font-weight: 900; line-height: 1; }
.withdrawal-review-count span { display: block; margin-top: 2px; font-size: 8px; font-weight: 750; }
.withdrawal-review-panel > .withdrawal-review-loading,
.withdrawal-review-panel > .withdrawal-review-fallback,
.withdrawal-review-panel > .withdrawal-review-list { margin: 11px 16px; }
.withdrawal-review-fallback { border: 1px dashed #e8cea9; border-radius: 10px; padding: 11px; background: #ffffffa9; }
.withdrawal-review-fallback.error { border-color: #edc4c0; background: #fff8f7; }
.withdrawal-review-fallback.success { border-color: #cbe6d7; background: #f6fcf8; }
.withdrawal-review-fallback b,
.withdrawal-review-fallback small { display: block; }
.withdrawal-review-fallback b { color: #7d562d; font-size: 10px; }
.withdrawal-review-fallback.success b { color: #216948; }
.withdrawal-review-fallback small { margin-top: 3px; color: #7a746b; font-size: 9px; line-height: 1.45; }
.withdrawal-review-list { display: grid; overflow: hidden; border: 1px solid #eadabf; border-radius: 10px; background: #fff; }
.withdrawal-review-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid #f0e7d9;
}
.withdrawal-review-row:last-child { border-bottom: 0; }
.withdrawal-review-row-icon { display: grid; inline-size: 24px; block-size: 24px; place-items: center; border-radius: 7px; background: #fff0db; color: #a55b1d; font-size: 12px; font-weight: 900; }
.withdrawal-review-row > div { display: grid; min-inline-size: 0; grid-template-columns: auto minmax(0, 1fr); gap: 1px 7px; align-items: baseline; }
.withdrawal-review-row b { overflow: hidden; color: #573a1d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-review-row small { color: #8b785f; font-size: 8px; }
.withdrawal-review-row em { grid-column: 1 / -1; overflow: hidden; color: #8c6b45; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-review-row .link-btn { font-size: 9px; }
.withdrawal-review-panel > footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 13px;
  border-top: 1px solid #efddc4;
  background: #ffffff9c;
  color: #806e59;
  font-size: 9px;
  line-height: 1.4;
}
.withdrawal-review-panel > footer > span { max-inline-size: 620px; }
.withdrawal-review-panel > footer .btn { flex: 0 0 auto; white-space: nowrap; }

.withdrawal-protocol-modal,
.withdrawal-protocol-editor,
.withdrawal-protocol-decision-modal {
  display: flex;
  flex-direction: column;
  max-block-size: min(93vh, 900px);
  min-block-size: 0;
  overflow: hidden;
  border-color: #ecd2af;
  background: #fbfaf7;
}
.withdrawal-protocol-modal { inline-size: min(1080px, 100%); }
.withdrawal-protocol-editor { inline-size: min(790px, 100%); }
.withdrawal-protocol-decision-modal { inline-size: min(660px, 100%); }
.withdrawal-protocol-modal-head {
  flex: 0 0 auto;
  padding: 21px 25px 17px;
  border-bottom: 1px solid #ecdabc;
  background: linear-gradient(114deg, #fff 0%, #fff8ee 64%, #fff0dc 100%);
}
.withdrawal-protocol-modal-head h2 { margin-top: 4px; color: #75441a; font-size: 20px; letter-spacing: -.3px; }
.withdrawal-protocol-modal-head p { max-inline-size: 720px; margin-top: 5px; color: #806c55; font-size: 11px; line-height: 1.5; }
.withdrawal-protocol-modal-body,
.withdrawal-protocol-editor-body,
.withdrawal-protocol-decision-modal .modal-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  padding: 18px 25px 23px;
  background: #fbfaf7;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.withdrawal-protocol-product-context,
.withdrawal-protocol-editor-context {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #ead5b6;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(105deg, #fffefa, #fff5e6);
}
.withdrawal-protocol-product-mark,
.withdrawal-protocol-editor-context > span {
  display: grid;
  inline-size: 34px;
  block-size: 34px;
  place-items: center;
  border-radius: 10px;
  background: #fff0d9;
  color: #a75d1d;
  font-size: 16px;
  font-weight: 900;
}
.withdrawal-protocol-product-context > div,
.withdrawal-protocol-editor-context > div { min-inline-size: 0; }
.withdrawal-protocol-product-context :is(small, b, span),
.withdrawal-protocol-editor-context :is(small, b) { display: block; }
.withdrawal-protocol-product-context small,
.withdrawal-protocol-editor-context small { color: #8e714e; font-size: 8px; font-weight: 850; letter-spacing: .45px; }
.withdrawal-protocol-product-context b,
.withdrawal-protocol-editor-context b { overflow: hidden; margin-top: 1px; color: #704319; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-protocol-product-context span { overflow: hidden; margin-top: 1px; color: #7b745f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-protocol-context-badge,
.withdrawal-protocol-editor-context em { border: 1px solid #e8cfac; border-radius: 999px; padding: 4px 7px; background: #fff; color: #8d5a24; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.withdrawal-protocol-label-strip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  border: 1px solid #dce7e2;
  border-radius: 11px;
  padding: 10px;
  background: #f7fbf9;
}
.withdrawal-protocol-label-strip > div { flex: 1 1 auto; min-inline-size: 0; }
.withdrawal-protocol-label-strip span { display: block; color: #608077; font-size: 8px; font-weight: 850; letter-spacing: .45px; text-transform: uppercase; }
.withdrawal-protocol-label-strip p { margin: 3px 0 0; color: #55736a; font-size: 9px; line-height: 1.45; white-space: pre-line; }
.withdrawal-protocol-label-strip i { display: grid; flex: 0 0 auto; inline-size: 22px; block-size: 22px; place-items: center; border-radius: 7px; background: #e7f3ed; color: #357765; font-size: 12px; font-style: normal; font-weight: 900; }
.withdrawal-protocol-manager-loading { min-block-size: 170px; }
.withdrawal-protocol-modal-footer,
.withdrawal-protocol-editor-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 25px 17px;
  border-top: 1px solid #eadfce;
  background: #fff;
}
.withdrawal-protocol-modal-footer > div:last-child,
.withdrawal-protocol-editor-footer > div:last-child { display: flex; gap: 8px; flex: 0 0 auto; }
.withdrawal-protocol-footer-note,
.withdrawal-protocol-editor-footer > div:first-child {
  display: flex;
  max-inline-size: 580px;
  gap: 7px;
  align-items: flex-start;
  color: #70776a;
  font-size: 9px;
  line-height: 1.4;
}
.withdrawal-protocol-footer-note i,
.withdrawal-protocol-editor-footer i { display: grid; flex: 0 0 auto; inline-size: 18px; block-size: 18px; place-items: center; border-radius: 6px; background: #e7f3ed; color: #307363; font-size: 9px; font-style: normal; font-weight: 900; }
.withdrawal-protocol-editor-intro {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 13px 0;
  border-inline-start: 3px solid #d08a42;
  padding: 7px 9px;
  background: #fff9ef;
}
.withdrawal-protocol-editor-intro > span { display: grid; flex: 0 0 auto; inline-size: 18px; block-size: 18px; place-items: center; border-radius: 6px; background: #ffecd2; color: #9a5b1d; font-size: 10px; font-weight: 900; }
.withdrawal-protocol-editor-intro p { margin: 1px 0 0; color: #796850; font-size: 9px; line-height: 1.45; }
.withdrawal-protocol-form-grid { margin-top: 0; }
.withdrawal-protocol-duration-fields {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid #efd9b9;
  border-radius: 10px;
  padding: 11px;
  background: #fff9f0;
}
.withdrawal-protocol-duration-fields[hidden] { display: none; }
.withdrawal-protocol-decision-context { margin-bottom: 13px; }
.withdrawal-protocol-decision-context .withdrawal-protocol-card { max-inline-size: none; }
.withdrawal-protocol-decision-reason { display: grid; gap: 5px; }
.withdrawal-protocol-decision-reason textarea { min-block-size: 96px; resize: vertical; }

html[dir="rtl"] .withdrawal-protocol-card > header,
html[dir="rtl"] .withdrawal-review-row,
html[dir="rtl"] .withdrawal-protocol-product-context,
html[dir="rtl"] .withdrawal-protocol-editor-context { text-align: start; }
html[dir="rtl"] .withdrawal-protocol-card footer > span:last-of-type { margin-inline-start: auto; }

@media (max-width: 760px) {
  .withdrawal-protocol-output-grid,
  .withdrawal-protocol-manager-grid { grid-template-columns: 1fr; }
  .withdrawal-review-panel-head,
  .withdrawal-review-panel > footer,
  .withdrawal-protocol-modal-footer,
  .withdrawal-protocol-editor-footer { align-items: flex-start; flex-direction: column; }
  .withdrawal-review-count { align-self: flex-start; }
  .withdrawal-review-panel > footer .btn { inline-size: 100%; }
  .withdrawal-protocol-modal-footer > div:last-child,
  .withdrawal-protocol-editor-footer > div:last-child { inline-size: 100%; }
  .withdrawal-protocol-modal-footer .btn,
  .withdrawal-protocol-editor-footer .btn { flex: 1 1 0; }
  .withdrawal-protocol-modal-head,
  .withdrawal-protocol-modal-body,
  .withdrawal-protocol-editor-body,
  .withdrawal-protocol-decision-modal .modal-body,
  .withdrawal-protocol-modal-footer,
  .withdrawal-protocol-editor-footer { padding-inline: 16px; }
  .withdrawal-protocol-modal-head { padding-block: 17px 14px; }
  .withdrawal-protocol-modal-head h2 { font-size: 18px; }
  .withdrawal-protocol-product-context { grid-template-columns: 33px minmax(0, 1fr); }
  .withdrawal-protocol-context-badge { grid-column: 2; justify-self: start; }
  .withdrawal-protocol-editor-context { grid-template-columns: 33px minmax(0, 1fr); }
  .withdrawal-protocol-editor-context em { grid-column: 2; justify-self: start; }
  .withdrawal-protocol-duration-fields { grid-template-columns: 1fr; }
  .product-withdrawal-protocol-link { grid-template-columns: 28px minmax(0, 1fr); }
  .product-withdrawal-protocol-link .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 430px) {
  .withdrawal-protocol-facts { grid-template-columns: 1fr; }
  .withdrawal-protocol-card > header { grid-template-columns: 25px minmax(0, 1fr); }
  .withdrawal-protocol-status { grid-column: 2; justify-self: start; }
  .withdrawal-review-row { grid-template-columns: 25px minmax(0, 1fr); }
  .withdrawal-review-row .link-btn { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* Clinical issue-time withdrawal preview.  The field is a calculated safety
   outcome, not a date control, so it intentionally reads as a compact review
   card instead of another editable form input. */
.treatment-withdrawal-preview {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px dashed #d9e4df;
  border-radius: 10px;
  padding: 9px 10px;
  background: #f9fbfa;
  color: #60756d;
  font-size: 10px;
  line-height: 1.42;
}
.treatment-withdrawal-preview > i {
  display: grid;
  flex: 0 0 auto;
  inline-size: 19px;
  block-size: 19px;
  place-items: center;
  border-radius: 6px;
  background: #edf4f1;
  color: #4a7867;
  font-style: normal;
  font-weight: 900;
}
.treatment-withdrawal-preview.pending { border-color: #e4d9c8; background: #fffcf7; color: #8b6c41; }
.treatment-withdrawal-preview.pending > i { background: #fff2d9; color: #af731e; }
.treatment-withdrawal-preview.blocked { align-items: flex-start; border-color: #edc8c3; background: #fff7f5; color: #96463d; }
.treatment-withdrawal-preview.blocked > i { background: #fde5e1; color: #b64a41; }
.treatment-withdrawal-preview.blocked > span { display: grid; gap: 2px; }
.treatment-withdrawal-preview.blocked b { color: #8e4038; font-size: 10px; }
.treatment-withdrawal-preview.blocked small { color: inherit; font-size: 9px; line-height: 1.42; }
.treatment-withdrawal-preview.ready {
  display: block;
  border-style: solid;
  border-color: #bedecf;
  padding: 10px;
  background: linear-gradient(122deg, #f4fbf7, #fbfefd);
  color: #3e6d5c;
}
.treatment-withdrawal-preview.ready > header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.treatment-withdrawal-preview.ready > header > span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #276a50;
  font-size: 10px;
  font-weight: 850;
}
.treatment-withdrawal-preview.ready > header i {
  display: grid;
  inline-size: 17px;
  block-size: 17px;
  place-items: center;
  border-radius: 50%;
  background: #d8f0e4;
  color: #22734e;
  font-style: normal;
}
.treatment-withdrawal-preview.ready > header small { color: #6c897d; font-size: 8px; text-align: end; }
.treatment-withdrawal-holds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.treatment-withdrawal-hold {
  min-inline-size: 0;
  border: 1px solid #d9ebe1;
  border-radius: 8px;
  padding: 7px;
  background: #ffffffd9;
}
.treatment-withdrawal-hold > span,
.treatment-withdrawal-hold > b,
.treatment-withdrawal-hold > small { display: block; }
.treatment-withdrawal-hold > span { color: #71867d; font-size: 7px; font-weight: 800; letter-spacing: .22px; text-transform: uppercase; }
.treatment-withdrawal-hold > b { overflow-wrap: anywhere; margin-top: 2px; color: #28614d; font-size: 10px; line-height: 1.35; }
.treatment-withdrawal-hold > small { margin-top: 2px; color: #789188; font-size: 8px; }
.treatment-withdrawal-hold.neutral { border-color: #dbe3e0; background: #fafcfb; }
.treatment-withdrawal-hold.neutral > b { color: #63766f; }
.treatment-withdrawal-hold.blocked { border-color: #edc8c3; background: #fff8f7; }
.treatment-withdrawal-hold.blocked > b { color: #a24b42; }
.treatment-withdrawal-preview.ready > footer { margin-top: 7px; color: #75897f; font-size: 8px; }
.treatment-withdrawal-summary { display: inline-flex; align-items: center; margin-top: 3px; border-radius: 999px; padding: 2px 5px; font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.15; }
.treatment-withdrawal-summary.ready { background: #e9f7ef; color: #28724e; }
.treatment-withdrawal-summary.attention { background: #fff0ed; color: #a34b41; }
html[dir="rtl"] .treatment-withdrawal-preview.ready > header small { text-align: start; }
@media (max-width: 520px) {
  .treatment-withdrawal-preview.ready > header { align-items: flex-start; flex-direction: column; }
  .treatment-withdrawal-preview.ready > header small { text-align: start; }
  .treatment-withdrawal-holds { grid-template-columns: 1fr; }
}

/* Guided clinician-first treatment workflow.  Clinical entry stays compact,
   then reveals Store-sensitive detail only after the clinician chooses it. */
.treatment-guided-modal { max-inline-size: min(960px, calc(100vw - 28px)); }
.treatment-guided-workflow { display: grid; gap: 14px; color: var(--ink); }
.treatment-guided-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid #cfe4dc; border-radius: 13px; background: linear-gradient(112deg, #f1fbf6, #fff 61%, #f5f9ff); }
.treatment-guided-intro > div { min-inline-size: 0; }
.treatment-guided-kicker { display: block; color: var(--clinical-accent, var(--green)); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.treatment-guided-intro h3 { margin: 4px 0 3px; color: var(--clinical-ink, var(--ink)); font-size: 15px; line-height: 1.22; }
.treatment-guided-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.treatment-guided-intro > .status { flex: 0 0 auto; align-self: center; }

.treatment-guided-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.treatment-guided-progress li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; min-inline-size: 0; min-block-size: 40px; padding: 7px 8px; border: 1px solid #dce7e2; border-radius: 10px; background: #fbfdfc; color: #83948e; transition: background .16s, border-color .16s, color .16s; }
.treatment-guided-progress li > span { display: grid; inline-size: 22px; block-size: 22px; place-items: center; border-radius: 50%; background: #edf2f0; color: #71827a; font-size: 10px; font-weight: 900; }
.treatment-guided-progress li > b { overflow: hidden; font-size: 9px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.treatment-guided-progress li.is-current { border-color: #77bba3; background: #effaf5; color: #205f4c; box-shadow: 0 3px 10px #16684d12; }
.treatment-guided-progress li.is-current > span { background: var(--clinical-accent, var(--green)); color: #fff; }
.treatment-guided-progress li.is-complete { border-color: #b9ddcd; background: #f8fcfa; color: #3f7863; }
.treatment-guided-progress li.is-complete > span { background: #d9efdf; color: #2f8059; }
.treatment-guided-progress li.is-complete > span::after { content: "✓"; }
.treatment-guided-progress li.is-complete > span { font-size: 0; }
.treatment-guided-progress li.is-complete > span::after { font-size: 11px; }

.treatment-guided-step-panel { display: grid; gap: 13px; padding: 17px; border: 1px solid #d5e5de; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px #103e3307; }
.treatment-guided-step-panel[hidden] { display: none !important; }
.treatment-guided-step-panel > .treatment-issue-section-head { margin: 0; }
.treatment-guided-step-panel .treatment-issue-medicine-card { margin-top: 0 !important; border-color: #d7e8e0; box-shadow: none; }
.treatment-guided-recording-note { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-inline-start: 3px solid #72aa96; border-radius: 8px; background: #f5faf8; color: #54746a; font-size: 10px; line-height: 1.4; }
.treatment-guided-recording-note > span { flex: 0 0 auto; color: #31705a; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.treatment-guided-recording-note > b { color: inherit; font-weight: 650; }
.treatment-guided-advanced { border: 1px dashed #cbded6; border-radius: 10px; background: #fbfdfc; }
.treatment-guided-advanced > summary { cursor: pointer; padding: 10px 12px; color: #336c59; font-size: 11px; font-weight: 800; }
.treatment-guided-advanced > div { padding: 0 12px 12px; }

.treatment-guided-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; padding: 0; border: 0; }
.treatment-guided-choice-grid > legend { inline-size: 100%; margin-bottom: 2px; color: var(--clinical-ink, var(--ink)); font-size: 12px; font-weight: 850; }
.treatment-guided-choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; min-block-size: 114px; padding: 14px; border: 1px solid #d7e3df; border-radius: 13px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.treatment-guided-choice-card:hover { border-color: #95c7b4; background: #fbfefd; box-shadow: 0 4px 12px #0a5e4210; transform: translateY(-1px); }
.treatment-guided-choice-card:has(input:checked) { border-color: #3b9675; background: #effaf5; box-shadow: inset 0 0 0 1px #a1d3bf; }
.treatment-guided-choice-card.issue:has(input:checked) { border-color: #4b83af; background: #f1f7fd; box-shadow: inset 0 0 0 1px #b8d8ef; }
.treatment-guided-choice-card input { inline-size: 16px; block-size: 16px; margin: 1px 0 0; accent-color: #20775b; }
.treatment-guided-choice-card.issue input { accent-color: #387cae; }
.treatment-guided-choice-card span { display: grid; gap: 4px; min-inline-size: 0; }
.treatment-guided-choice-card b { color: #255b4b; font-size: 12px; line-height: 1.25; }
.treatment-guided-choice-card.issue b { color: #315f86; }
.treatment-guided-choice-card small { color: var(--muted); font-size: 10px; line-height: 1.38; }
.treatment-guided-choice-card > i { display: grid; inline-size: 29px; block-size: 29px; place-items: center; border-radius: 9px; background: #e9f5ef; color: #377960; font-size: 15px; font-style: normal; }
.treatment-guided-choice-card.issue > i { background: #eaf3fb; color: #467fa8; }
.treatment-guided-decision-note { padding: 9px 11px; border-radius: 8px; background: #f7faf9; color: #60766d; font-size: 10px; line-height: 1.4; }

.treatment-guided-search-field { display: grid; gap: 5px; }
.treatment-guided-search-field > span { color: #516b61; font-size: 10px; font-weight: 800; }
.treatment-guided-search-field > small { color: #7a8d85; font-size: 9px; line-height: 1.35; }
.treatment-guided-product-search { display: flex; align-items: center; gap: 7px; min-inline-size: 0; padding: 4px 5px 4px 10px; border: 1px solid #c8ddd4; border-radius: 9px; background: #fbfefd; }
.treatment-guided-product-search:focus-within { border-color: #469f80; box-shadow: 0 0 0 3px #16805c14; }
.treatment-guided-product-search input { flex: 1 1 auto; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 11px; }
.treatment-guided-product-search .link-btn { flex: 0 0 auto; min-block-size: 26px; padding-inline: 8px; border-radius: 7px; background: #eef5f2; color: #39705e; font-size: 9px; }
.treatment-guided-dose-guidance { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid #c8e2d4; border-radius: 10px; background: #f4fbf7; color: #326c56; }
.treatment-guided-dose-guidance > span { color: #568274; font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.treatment-guided-dose-guidance > b { font-size: 11px; line-height: 1.4; white-space: pre-wrap; }
.treatment-guided-dose-guidance > small { color: #628378; font-size: 9px; line-height: 1.38; }
.treatment-guided-dose-guidance.unavailable { border-color: #e4d6b9; background: #fffcf6; color: #806b42; }
.treatment-guided-dose-guidance.unavailable > span { color: #957f52; }
.treatment-guided-dose-guidance.unavailable > small { color: #8c7a55; }
.treatment-guided-dose-guidance.pending { border-color: #c9dce9; background: #f5f9fd; color: #54758e; }
.treatment-guided-dose-guidance.pending > span { color: #64859c; }
.treatment-guided-dose-panel { margin-top: 11px; border: 1px solid #d8e6e0; border-radius: 10px; background: #fcfefd; }
.treatment-guided-dose-panel > summary { display: flex; align-items: center; min-block-size: 38px; padding: 0 11px; color: #3e7060; cursor: pointer; font-size: 10px; font-weight: 850; list-style: none; }
.treatment-guided-dose-panel > summary::-webkit-details-marker { display: none; }
.treatment-guided-dose-panel > summary::after { margin-inline-start: auto; color: #6a9182; content: "+"; font-size: 16px; font-weight: 500; }
.treatment-guided-dose-panel[open] > summary { border-bottom: 1px solid #e1ece7; }
.treatment-guided-dose-panel[open] > summary::after { content: "−"; }
.treatment-guided-dose-controls { display: grid; gap: 9px; padding: 11px; }
.treatment-guided-dose-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; color: #416d5d; cursor: pointer; }
.treatment-guided-dose-toggle input { inline-size: 15px; block-size: 15px; margin: 1px 0 0; accent-color: #30785e; }
.treatment-guided-dose-toggle input:disabled { cursor: not-allowed; opacity: .45; }
.treatment-guided-dose-toggle span { display: grid; gap: 2px; }
.treatment-guided-dose-toggle b { color: #356654; font-size: 10px; line-height: 1.35; }
.treatment-guided-dose-toggle small,
.treatment-guided-dose-weight small { color: #70877e; font-size: 9px; line-height: 1.38; }
.treatment-guided-dose-weight { max-inline-size: 330px; }
.treatment-guided-dose-weight input { max-inline-size: 160px; }

.treatment-guided-review { display: grid; gap: 11px; }
.treatment-guided-review-section { display: grid; gap: 10px; padding: 12px; border: 1px solid #d7e6df; border-radius: 11px; background: #fcfefd; }
.treatment-guided-review-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #e5eeea; }
.treatment-guided-review-heading > span { color: #628277; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.treatment-guided-review-heading > b { color: #285d4c; font-size: 12px; text-align: end; }
.treatment-guided-review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.treatment-guided-review-fact { display: grid; gap: 3px; min-inline-size: 0; padding: 8px 9px; border-radius: 8px; background: #f5faf8; }
.treatment-guided-review-fact > span { color: #6f857c; font-size: 8px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.treatment-guided-review-fact > b { overflow-wrap: anywhere; color: #315e50; font-size: 11px; line-height: 1.32; }
.treatment-guided-stock-impact { display: flex; flex-wrap: wrap; gap: 7px; }
.treatment-guided-stock-impact > span { display: grid; gap: 2px; min-inline-size: 120px; padding: 8px 9px; border: 1px solid #d7e7df; border-radius: 8px; background: #fff; }
.treatment-guided-stock-impact b { color: #356657; font-size: 10px; }
.treatment-guided-stock-impact small { color: #2e7b58; font-size: 10px; font-weight: 800; }
.treatment-guided-review-lines { display: grid; gap: 9px; }
.treatment-guided-review-line { display: grid; gap: 9px; padding: 11px; border: 1px solid #dbe7e2; border-radius: 10px; background: #fff; }
.treatment-guided-review-line > header { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.treatment-guided-review-line-number { display: grid; inline-size: 25px; block-size: 25px; place-items: center; border-radius: 8px; background: #e7f4ed; color: #2c7859; font-size: 9px; font-weight: 900; }
.treatment-guided-review-line header > div { display: grid; gap: 2px; min-inline-size: 0; }
.treatment-guided-review-line header b { overflow: hidden; color: #315d4e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-guided-review-line header small { overflow: hidden; color: #73867f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.treatment-guided-review-line-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.treatment-guided-review-line .treatment-guided-dose-guidance { margin-top: 1px; }
.treatment-guided-review-line .treatment-withdrawal-preview { margin-top: 1px; }
.treatment-guided-review-empty { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px dashed #c9ded5; border-radius: 9px; background: #f9fcfb; }
.treatment-guided-review-empty > i { display: grid; inline-size: 29px; block-size: 29px; place-items: center; border-radius: 9px; background: #e9f4ef; color: #4b836d; font-style: normal; }
.treatment-guided-review-empty > div { display: grid; gap: 2px; }
.treatment-guided-review-empty b { color: #416d5d; font-size: 11px; }
.treatment-guided-review-empty small { color: #71837c; font-size: 9px; }
.treatment-guided-finance-note { display: grid; gap: 4px; padding: 11px 12px; border-inline-start: 3px solid #769dbd; border-radius: 8px; background: #f5f9fd; color: #58738b; }
.treatment-guided-finance-note b { color: #416b91; font-size: 10px; }
.treatment-guided-finance-note span { font-size: 10px; line-height: 1.42; }

.treatment-guided-stage-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.treatment-guided-stage-nav > div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-inline-size: 0; }
.treatment-guided-stage-nav small { color: #71857d; font-size: 9px; font-weight: 700; text-align: end; }
.treatment-guided-stage-nav .btn { min-inline-size: 150px; }
.treatment-guided-success { border-color: #b9dcc9; background: linear-gradient(140deg, #effaf4, #fff 68%); }
.treatment-guided-success-card { display: grid; justify-items: center; gap: 7px; max-inline-size: 590px; margin: 0 auto; padding: 22px 12px; text-align: center; }
.treatment-guided-success-card > i { display: grid; inline-size: 47px; block-size: 47px; place-items: center; border-radius: 16px; background: #d8f0e2; color: #25704e; font-size: 24px; font-style: normal; font-weight: 900; }
.treatment-guided-success-card > span { color: #438068; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.treatment-guided-success-card h3 { margin: 0; color: #245943; font-size: 17px; }
.treatment-guided-success-card p { max-inline-size: 480px; margin: 0; color: #5f796f; font-size: 11px; line-height: 1.45; }
.treatment-guided-success-card > small { color: #698177; font-size: 9px; line-height: 1.4; }
.treatment-guided-success-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; gap: 8px; margin: 7px 0; text-align: start; }

html[dir="rtl"] .treatment-guided-workflow,
html[dir="rtl"] .treatment-guided-review-fact,
html[dir="rtl"] .treatment-guided-success-facts { text-align: start; }
html[dir="rtl"] .treatment-guided-progress li > b,
html[dir="rtl"] .treatment-guided-review-heading > b,
html[dir="rtl"] .treatment-guided-stage-nav small { text-align: start; }

@media (max-width: 700px) {
  .treatment-guided-intro { align-items: flex-start; flex-direction: column; }
  .treatment-guided-intro > .status { align-self: flex-start; }
  .treatment-guided-progress { grid-template-columns: repeat(5, minmax(54px, 1fr)); overflow-x: auto; padding-bottom: 2px; }
  .treatment-guided-progress li { grid-template-columns: 1fr; justify-items: center; min-block-size: 54px; padding: 6px; text-align: center; }
  .treatment-guided-progress li > b { max-inline-size: 74px; white-space: normal; }
  .treatment-guided-choice-grid { grid-template-columns: 1fr; }
  .treatment-guided-review-facts,
  .treatment-guided-review-line-facts,
  .treatment-guided-success-facts { grid-template-columns: 1fr; }
  .treatment-guided-stage-nav { align-items: stretch; flex-direction: column-reverse; }
  .treatment-guided-stage-nav > div { align-items: stretch; flex-direction: column; }
  .treatment-guided-stage-nav .btn { inline-size: 100%; }
  .treatment-guided-stage-nav small { text-align: center; }
  .treatment-guided-review-line > header { grid-template-columns: 25px minmax(0, 1fr); }
  .treatment-guided-review-line > header > .status { grid-column: 2; justify-self: start; }
}

/* Live Store medicine picker.  These cards intentionally keep eligibility
   context visible, so a clinician can distinguish an unavailable balance from
   an empty search without having to open a native select menu. */
.treatment-medicine-picker {
  --medicine-picker-accent: var(--clinical-accent, var(--green));
  --medicine-picker-ink: #285d4c;
  --medicine-picker-border: #cfe3da;
  --medicine-picker-wash: #f7fcf9;
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  color: var(--ink);
  text-align: start;
}
.treatment-medicine-picker > :is(header, .treatment-medicine-picker-heading) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  min-inline-size: 0;
}
.treatment-medicine-picker-heading > :is(b, strong, h3) {
  min-inline-size: 0;
  margin: 0;
  color: var(--medicine-picker-ink);
  font-size: 11px;
  line-height: 1.35;
}
.treatment-medicine-picker-heading > :is(small, span) {
  flex: 0 0 auto;
  color: #688177;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.3;
  text-align: end;
}
.treatment-medicine-picker-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-inline-size: 0;
  min-block-size: 38px;
  padding: 4px 6px 4px 10px;
  border: 1px solid #bddad0;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 0 #ffffffb8;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.treatment-medicine-picker-search:focus-within {
  border-color: #369776;
  background: #fcfffd;
  box-shadow: 0 0 0 3px #16805c1c;
}
.treatment-medicine-picker-search :is(input[type="search"], input[data-treatment-medicine-search]) {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.treatment-medicine-picker-search input::placeholder { color: #81938d; opacity: 1; }
.treatment-medicine-picker-search :is(button, .link-btn) {
  flex: 0 0 auto;
  min-block-size: 27px;
  border-radius: 7px;
  padding-inline: 9px;
  font-size: 9px;
}
.treatment-medicine-picker-search :is(button, .link-btn):focus-visible {
  outline: 3px solid #0a746833;
  outline-offset: 2px;
}

.treatment-medicine-picker-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  align-content: start;
  max-block-size: 322px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px;
  border-radius: 11px;
  scrollbar-color: #9fc8b7 transparent;
  scrollbar-width: thin;
}
.treatment-medicine-picker-result-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  min-inline-size: 0;
}
.treatment-medicine-picker-group-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-inline-size: 0;
  margin: 1px 1px -1px;
  color: #57766b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.3;
  text-transform: uppercase;
}
.treatment-medicine-picker-group-label::after {
  flex: 1 1 auto;
  min-inline-size: 16px;
  block-size: 1px;
  background: #dce9e3;
  content: "";
}
.treatment-medicine-picker-results:focus-visible {
  outline: 3px solid #0a746833;
  outline-offset: 2px;
}
.treatment-medicine-picker-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px 9px;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 94px;
  margin: 0;
  border: 1px solid var(--medicine-picker-border);
  border-radius: 11px;
  padding: 10px 11px;
  background: linear-gradient(132deg, #fff, var(--medicine-picker-wash));
  color: var(--ink);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  text-align: start;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
button.treatment-medicine-picker-option,
label.treatment-medicine-picker-option,
.treatment-medicine-picker-option[role="option"] { cursor: pointer; }
.treatment-medicine-picker-option:hover:not(:disabled):not([aria-disabled="true"]):not(.is-unavailable):not(.unavailable) {
  border-color: #8abfa9;
  background: #fbfefc;
  box-shadow: 0 4px 12px #0a5e420d;
  transform: translateY(-1px);
}
.treatment-medicine-picker-option:is(.is-selected, .selected, [aria-selected="true"]),
.treatment-medicine-picker-option:has(input:checked) {
  border-color: #3b9675;
  background: linear-gradient(135deg, #effaf5, #f9fffc);
  box-shadow: inset 0 0 0 1px #abd8c5, 0 4px 13px #0a5e4210;
}
.treatment-medicine-picker-option.is-active:not(.is-selected):not(.selected):not([aria-selected="true"]):not(.is-unavailable):not([aria-disabled="true"]):not(:disabled) {
  border-color: #6f9fc1;
  background: #f3f9fd;
  box-shadow: inset 0 0 0 1px #c2dced;
}
.treatment-medicine-picker-option.is-active:not(.is-selected):not(.selected):not([aria-selected="true"]):not(.is-unavailable):not([aria-disabled="true"]):not(:disabled) .treatment-medicine-picker-option-title { color: #2f6285; }
.treatment-medicine-picker-option:is(.is-selected, .selected, [aria-selected="true"])::before,
.treatment-medicine-picker-option:has(input:checked)::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 10px;
  inline-size: 27px;
  block-size: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--medicine-picker-accent);
  content: "";
}
.treatment-medicine-picker-option:focus-visible,
.treatment-medicine-picker-option:has(:focus-visible) {
  z-index: 1;
  outline: 3px solid #0a746833;
  outline-offset: 2px;
}
.treatment-medicine-picker-option :is(input, button, a):focus-visible {
  outline: 2px solid #0a746899;
  outline-offset: 2px;
}
.treatment-medicine-picker-option :is(input[type="radio"], input[type="checkbox"]) {
  inline-size: 16px;
  block-size: 16px;
  margin: 1px 0 0;
  accent-color: var(--medicine-picker-accent);
}
.treatment-medicine-picker-option-main,
.treatment-medicine-picker-option-copy {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.treatment-medicine-picker-option-title {
  overflow-wrap: anywhere;
  color: var(--medicine-picker-ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}
.treatment-medicine-picker-option-code {
  overflow: hidden;
  color: #638076;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.treatment-medicine-picker-option-state,
.treatment-medicine-picker-option-availability,
.treatment-medicine-picker-result-side {
  align-self: start;
  max-inline-size: 112px;
  border-radius: 999px;
  padding: 3px 6px;
  background: #e4f4eb;
  color: #287153;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}
.treatment-medicine-picker-option-meta,
.treatment-medicine-picker-result-meta {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 4px 5px;
  color: #627b71;
  font-size: 9px;
  line-height: 1.35;
}
.treatment-medicine-picker-result-meta {
  display: grid;
  grid-column: 1;
  gap: 3px;
  align-self: start;
  min-inline-size: 0;
}
.treatment-medicine-picker-result-meta > b {
  overflow-wrap: anywhere;
  color: var(--medicine-picker-ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}
.treatment-medicine-picker-result-meta > small {
  overflow-wrap: anywhere;
  color: #638076;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.35;
}
.treatment-medicine-picker-option-meta > :is(span, small),
.treatment-medicine-picker-result-meta > :is(span, small) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.treatment-medicine-picker-option-meta > :is(span, small):not(:last-child)::after,
.treatment-medicine-picker-result-meta > :is(span, small):not(:last-child)::after {
  margin-inline: 5px;
  color: #aac1b7;
  content: "•";
}
.treatment-medicine-picker-result-meta > small::after { content: none; }
.treatment-medicine-picker-result-side {
  display: grid;
  grid-column: 2;
  gap: 3px;
  justify-self: end;
  min-inline-size: 92px;
  max-inline-size: 150px;
  text-align: end;
}
.treatment-medicine-picker-result-side > b { color: inherit; font-size: 10px; line-height: 1.25; }
.treatment-medicine-picker-result-side > small { color: inherit; font-size: 8px; font-weight: 700; line-height: 1.3; }
.treatment-medicine-picker-overflow {
  grid-column: 1 / -1;
  color: #6d867b;
  font-size: 9px;
  line-height: 1.35;
}
.treatment-medicine-picker-option :is(.treatment-medicine-picker-option-quantity, .treatment-medicine-picker-option-expiry) {
  direction: ltr;
  unicode-bidi: isolate;
}

.treatment-medicine-picker-option:is(.is-unavailable, .unavailable, [aria-disabled="true"], :disabled) {
  border-color: #e4d1bb;
  background: #fffcf8;
  color: #806c51;
  cursor: not-allowed;
  opacity: .82;
}
.treatment-medicine-picker-option:is(.is-unavailable, .unavailable, [aria-disabled="true"], :disabled) .treatment-medicine-picker-option-title { color: #795d43; }
.treatment-medicine-picker-option:is(.is-unavailable, .unavailable, [aria-disabled="true"], :disabled) :is(.treatment-medicine-picker-option-state, .treatment-medicine-picker-option-availability, .treatment-medicine-picker-result-side) {
  background: #fff0df;
  color: #9b5b22;
}
.treatment-medicine-picker-option.is-unavailable .treatment-medicine-picker-result-meta { color: #8a653d; }
.treatment-medicine-picker-option-reason {
  grid-column: 1 / -1;
  margin-top: 1px;
  border-inline-start: 2px solid #dc9b5d;
  padding-inline-start: 7px;
  color: #8a653d;
  font-size: 9px;
  line-height: 1.38;
}
.treatment-medicine-picker-status,
.treatment-medicine-picker-results-note {
  color: #6f857b;
  font-size: 9px;
  line-height: 1.4;
}
.treatment-medicine-picker-status:is(.is-warning, .unavailable),
.treatment-medicine-picker-results-note.is-warning { color: #956126; }
.treatment-medicine-picker-status[role="alert"] { color: #a44b42; }

.treatment-medicine-picker-empty {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-block-size: 106px;
  border: 1px dashed #bdd7cc;
  border-radius: 11px;
  padding: 13px;
  background: #fafdfb;
  color: #60786e;
  text-align: start;
}
.treatment-medicine-picker-empty > :is(i, .treatment-medicine-picker-empty-icon) {
  display: grid;
  inline-size: 31px;
  block-size: 31px;
  place-items: center;
  border-radius: 9px;
  background: #e8f4ee;
  color: #41806a;
  font-size: 15px;
  font-style: normal;
}
.treatment-medicine-picker-empty > div { display: grid; gap: 3px; min-inline-size: 0; }
.treatment-medicine-picker-empty :is(b, strong) { color: #426d5d; font-size: 11px; }
.treatment-medicine-picker-empty small { color: #70877d; font-size: 9px; line-height: 1.4; }
.treatment-medicine-picker-empty.is-unavailable,
.treatment-medicine-picker-empty.unavailable {
  border-color: #e5cfb8;
  background: #fffcf8;
}
.treatment-medicine-picker-empty.is-unavailable > :is(i, .treatment-medicine-picker-empty-icon),
.treatment-medicine-picker-empty.unavailable > :is(i, .treatment-medicine-picker-empty-icon) { background: #fff0df; color: #a46126; }

.treatment-medicine-picker-selection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border: 1px solid #b9dac9;
  border-radius: 10px;
  padding: 9px 10px;
  background: linear-gradient(120deg, #effaf5, #fbfffd);
  color: #3d6d5b;
  text-align: start;
}
.treatment-medicine-picker-selection > :is(b, strong) { min-inline-size: 0; overflow-wrap: anywhere; color: #28624d; font-size: 10px; line-height: 1.35; }
.treatment-medicine-picker-selection > :is(small, span) { color: #608176; font-size: 9px; line-height: 1.35; }
.treatment-medicine-picker-selection > :is(button, .link-btn) { grid-row: span 2; align-self: center; min-block-size: 27px; padding-inline: 8px; border-radius: 7px; font-size: 9px; }
.treatment-medicine-picker-selection > :is(button, .link-btn):focus-visible { outline: 3px solid #0a746833; outline-offset: 2px; }
.treatment-medicine-picker-selection-copy,
.treatment-medicine-picker-selection-side {
  display: grid;
  gap: 3px;
  min-inline-size: 0;
}
.treatment-medicine-picker-selection-copy > b {
  overflow-wrap: anywhere;
  color: #28624d;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}
.treatment-medicine-picker-selection-copy > small { color: #5e7c70; font-size: 8px; line-height: 1.35; }
.treatment-medicine-picker-selection-side {
  justify-items: end;
  text-align: end;
}
.treatment-medicine-picker-selection-side > b { color: #28624d; font-size: 10px; line-height: 1.25; }
.treatment-medicine-picker-selection-side > small { color: #5e7c70; font-size: 8px; line-height: 1.3; }
.treatment-medicine-picker-selection-side > .status { justify-self: end; margin-top: 1px; }

html[dir="rtl"] .treatment-medicine-picker,
html[dir="rtl"] .treatment-medicine-picker-option,
html[dir="rtl"] .treatment-medicine-picker-empty { text-align: start; }
html[dir="rtl"] .treatment-medicine-picker-heading > :is(small, span) { text-align: start; }
html[dir="rtl"] .treatment-medicine-picker-option :is(.treatment-medicine-picker-option-quantity, .treatment-medicine-picker-option-expiry) { text-align: start; }

@media (max-width: 620px) {
  .treatment-medicine-picker-results { grid-template-columns: 1fr; max-block-size: 306px; }
  .treatment-medicine-picker-result-group { grid-template-columns: 1fr; }
  .treatment-medicine-picker-option { min-block-size: 88px; }
}
@media (max-width: 420px) {
  .treatment-medicine-picker > :is(header, .treatment-medicine-picker-heading) { align-items: flex-start; flex-direction: column; }
  .treatment-medicine-picker-heading > :is(small, span) { text-align: start; }
  .treatment-medicine-picker-search { padding-inline-start: 8px; }
  .treatment-medicine-picker-option { grid-template-columns: minmax(0, 1fr); }
  .treatment-medicine-picker-option :is(.treatment-medicine-picker-option-state, .treatment-medicine-picker-option-availability) { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .treatment-medicine-picker-search,
  .treatment-medicine-picker-option { transition: none; }
  .treatment-medicine-picker-option:hover { transform: none; }
}