/* Project suggestions and management, independent of the invoice record layout. */
.quick-item-field { position: relative; }
.quick-item-field > label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #344f3c; line-height: 21px; }
.quick-item-field > label b { color: #a14b29; font-weight: 500; margin-left: 3px; }
.quick-item-search { display: flex; align-items: stretch; min-width: 0; }
.quick-item-search #quick-item { border-radius: 6px 0 0 6px; border-right: 0; }
.quick-item-search #quick-item-toggle { flex: none; width: 44px; min-width: 44px; min-height: 46px; border: 1px solid #7d9683; border-left: 0; border-radius: 0 6px 6px 0; background: #fff; color: #3d6845; }
.quick-item-search #quick-item-toggle:disabled { background: #eef2ea; }
.quick-item-search #quick-item-toggle .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.quick-item-search:focus-within { border-radius: 6px; box-shadow: 0 0 0 3px #397e5620; }
.quick-item-search #quick-item:focus-visible { box-shadow: none; }
.quick-item-search:focus-within #quick-item-toggle { border-color: #397e56; }
.quick-item-results { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 16; max-height: min(320px, 40dvh); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid #a7bda9; border-radius: 7px; box-shadow: 0 10px 25px #24442020; background: #fff; }
.quick-item-results[hidden] { display: none; }
.quick-item-results [role="option"], .quick-item-results .item-name-retry { display: block; width: 100%; min-height: 46px; padding: 11px; border: 0; border-radius: 5px; text-align: left; background: #fff; color: #2b5133; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; cursor: pointer; }
.quick-item-results [role="option"]:hover, .quick-item-results [role="option"][aria-selected="true"] { background: #e2eddd; }
.quick-item-results > p { padding: 10px; color: #526e55; font-size: 13px; line-height: 1.7; }
.quick-item-results .item-name-retry { color: #164c40; text-decoration: underline; }

#items-page .item-name-create { display: flex; align-items: flex-end; gap: 12px; padding: 18px; margin: 0; border: 0; border-bottom: 1px solid #d5dfd3; background: #fff; }
#item-name-form .field { flex: 1; min-width: 0; margin: 0; }
#item-name-form input { min-height: 46px; font-size: 16px; }
#item-name-submit { flex: none; min-height: 46px; }
#items-page .item-name-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #d5dfd3; }
#items-page .item-name-toolbar .search-field { flex: 1; min-width: 180px; max-width: 540px; min-height: 44px; }
#items-page .item-name-toolbar input { font-size: 16px; }
#item-names-list { padding: 0 18px; }
.item-name-row { display: flex; align-items: center; gap: 16px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid #dfe7dc; }
.item-name-row:last-child { border-bottom: 0; }
.item-name-label { flex: 1; min-width: 0; color: #254d32; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; line-height: 1.65; }
.item-name-delete { flex: none; min-width: 66px; min-height: 44px; padding: 9px 14px; border: 1px solid #d2b0a6; border-radius: 6px; background: #fff; color: #943f30; font-size: 14px; cursor: pointer; }
.item-name-delete:hover:not(:disabled) { background: #fff3ee; border-color: #b57767; }
.item-name-delete:disabled { opacity: .55; cursor: default; }
.item-name-delete:focus-visible, .quick-item-results button:focus-visible { outline: 3px solid #397e56; outline-offset: 2px; }
#item-names-empty { padding: 32px 18px; text-align: center; color: #536d59; line-height: 1.8; }
#item-names-error { margin: 14px 18px; }
#item-names-retry { margin: 0 18px 14px; min-height: 44px; }
#item-names-feedback { min-height: 23px; margin: 12px 18px; color: #2f6d3a; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
#item-names-feedback:empty { display: none; }
#item-names-feedback.is-error { color: #a13d2c; }
@media (max-width: 640px) {
  .quick-item-field > label { font-size: 16px; line-height: 24px; }
  .quick-item-results [role="option"] { font-size: 16px; min-height: 48px; }
  #items-page .item-name-create { flex-wrap: wrap; padding: 15px; gap: 10px; }
  #item-name-form .field { flex-basis: 100%; }
  #item-name-submit { width: 100%; }
  #items-page .item-name-toolbar { padding: 14px; }
  #item-names-list { padding: 0 14px; }
  .item-name-row { gap: 10px; }
}