body {
  font-family: "Open Sans", sans-serif;
}

.auth-login-page .auth-login-column {
  max-width: 480px;
}

.auth-login-page .auth-login-card {
  width: 100%;
}

.auth-login-page .auth-login-alert {
  position: static;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1rem;
  transform: none;
  left: auto;
  top: auto;
  text-align: left;
}

/* Keep normal in-page alerts inside the document flow; fixed alerts opt in separately. */
#main .alert:not(.position-fixed) {
  width: auto;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  transform: none;
  top: auto;
  left: auto;
}

/* Form section headings align with the reference layout: simple title plus divider. */
.inner-page .tab-pane .my-3 > h3.fs-6.fw-bolder {
  margin: 0;
  color: #111;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.5;
}

.inner-page .tab-pane .my-3 > h3.fs-6.fw-bolder + hr {
  margin: 0.75rem 0 0;
  border-top: 1px solid #c8c8c8;
  opacity: 1;
}

.inner-page .tab-pane > h5.card-title,
.inner-page .tab-pane .card-title.mt-3 {
  display: block;
  margin: 1.5rem 0 1rem !important;
  /* 樣板 all.css 的 .card-title 帶 padding: 20px 0 15px 0，未歸零會讓標題比
     .my-3 標題區塊高 20px（57px vs 37px）。此處歸零上方 padding 以求一致。 */
  padding-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #c8c8c8;
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 常用備註選擇彈窗：內容預設收合成 3 行，點擊展開。
   🔴 只做視覺收合，完整文字仍在 DOM，故彈窗搜尋（比對 innerText）不受影響。 */
.order-note-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.order-note-content.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* 分頁面板內的第一個標題，上方留白對齊 .my-3 標題區塊的 1rem
   （基準：廠商產品資料分頁的「基本資料」）。原本的 1.5rem 過寬。
   面板中段的區塊標題（如「港口與交貨條件」）維持 1.5rem 以分隔區塊。 */
.inner-page .tab-pane > h5.card-title:first-child {
  margin-top: 1rem !important;
}

/* Normalize legacy edit forms to the newer GATX field rhythm. */
#main .inner-page .col-lg-3.mb-3 > .d-flex.flex-sm-row,
#main .inner-page .col-lg-4.mb-3 > .d-flex.flex-sm-row,
#main .inner-page .col-lg-5.mb-3 > .d-flex.flex-sm-row,
#main .inner-page .col-lg-6.mb-3 > .d-flex.flex-sm-row {
  flex-direction: column !important;
}

#main .inner-page .col-lg-3.mb-3 > .d-flex > label.col-form-label[class*="col-"],
#main .inner-page .col-lg-4.mb-3 > .d-flex > label.col-form-label[class*="col-"],
#main .inner-page .col-lg-5.mb-3 > .d-flex > label.col-form-label[class*="col-"],
#main .inner-page .col-lg-6.mb-3 > .d-flex > label.col-form-label[class*="col-"],
#main .inner-page .col-lg-3.mb-3 > .d-flex > .col-form-label[class*="col-"],
#main .inner-page .col-lg-4.mb-3 > .d-flex > .col-form-label[class*="col-"],
#main .inner-page .col-lg-5.mb-3 > .d-flex > .col-form-label[class*="col-"],
#main .inner-page .col-lg-6.mb-3 > .d-flex > .col-form-label[class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0.35rem;
  line-height: 1.5;
}

#main .inner-page .col-lg-3.mb-3 > .d-flex > label.col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-4.mb-3 > .d-flex > label.col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-5.mb-3 > .d-flex > label.col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-6.mb-3 > .d-flex > label.col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-3.mb-3 > .d-flex > .col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-4.mb-3 > .d-flex > .col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-5.mb-3 > .d-flex > .col-form-label[class*="col-"] + [class*="col-"],
#main .inner-page .col-lg-6.mb-3 > .d-flex > .col-form-label[class*="col-"] + [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

#main .inner-page .col-lg-3.mb-3 > .d-flex > label.col-form-label[class*="col-"] + .d-flex[class*="col-"],
#main .inner-page .col-lg-4.mb-3 > .d-flex > label.col-form-label[class*="col-"] + .d-flex[class*="col-"],
#main .inner-page .col-lg-5.mb-3 > .d-flex > label.col-form-label[class*="col-"] + .d-flex[class*="col-"],
#main .inner-page .col-lg-6.mb-3 > .d-flex > label.col-form-label[class*="col-"] + .d-flex[class*="col-"] {
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  #main .inner-page .row.col-sm-11 > .col-lg-5.mb-3 {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}

#main .section > form .card-body > .row.mb-3 > .col-lg-5.mb-3 > .d-flex.flex-sm-row {
  flex-direction: column !important;
}

#main .section > form .card-body > .row.mb-3 > .col-lg-5.mb-3 > .d-flex > label.col-form-label[class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0.35rem;
}

#main .section > form .card-body > .row.mb-3 > .col-lg-5.mb-3 > .d-flex > label.col-form-label[class*="col-"] + [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  #main .section > form .card-body > .row.mb-3 > .col-lg-5.mb-3 {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}

.table-scroll-hint {
  color: #6c757d;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.order-lines-table-shell {
  overflow-x: auto;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #d8dee9;
}

.order-lines-table {
  min-width: 1320px;
}

.order-lines-table th,
.order-lines-table td {
  white-space: nowrap;
}

.order-lines-table > :not(caption) > * > *,
.quotation-lines-table > :not(caption) > * > *,
.purchasing-lines-table > :not(caption) > * > * {
  vertical-align: top !important;
}

.order-lines-table td input.form-control {
  min-width: 112px;
}

.order-lines-table td:nth-child(4) input.form-control,
.order-lines-table td:nth-child(5) input.form-control,
.order-lines-table td:nth-child(6) input.form-control {
  min-width: 144px;
}

.order-lines-table td[colspan] {
    white-space: normal;
}

.purchasing-lines-table {
  min-width: 1320px;
}

.purchasing-lines-table th,
.purchasing-lines-table td {
  white-space: nowrap;
}

.purchasing-lines-table td input.form-control {
  min-width: 112px;
}

.purchasing-lines-table td:nth-child(5) input.form-control {
  min-width: 180px;
}

.quantity-difference-hint {
  width: max-content;
  max-width: 220px;
  white-space: normal;
  color: #946200;
  background: #fff8e1;
  border: 1px solid #ffe3a3;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
}

.detail-description-list {
    max-height: 8.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.detail-description-row .btn {
    white-space: nowrap;
}

.required-label::after,
.required-heading::after {
  content: "*";
  color: #dc3545;
  font-weight: 700;
  margin-left: 0.25rem;
}

#main .input-validation-error,
#main .input-validation-error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

#main .form-control:disabled,
#main .form-select:disabled {
  background-color: #e2e8f0;
  border-color: #cbd5e1;
  color: #344054;
  opacity: 1;
}

#main .form-control[readonly] {
  background-color: #fff;
  border-color: #d0d7de;
  color: #012970;
  opacity: 1;
}

#main .form-control[readonly].bg-light,
#main .form-control[readonly].text-muted {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1;
  color: #344054 !important;
}

#main .datepicker-input[readonly] {
  cursor: pointer;
}

#main textarea.form-control[rows='7'] {
  min-height: 180px;
}

.btn-icon-action {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-edit {
  white-space: nowrap;
}

.form-stack .d-flex.flex-column.flex-sm-row {
  display: block !important;
}

.form-stack .col-form-label {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0.25rem;
}

.form-stack .col-sm-9,
.form-stack .col-sm-9.d-flex {
  width: 100%;
  max-width: 100%;
}

.form-stack .col-sm-9.d-flex {
  display: flex !important;
}

.allocation-candidate-menu {
  position: absolute;
  z-index: 1080;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid #b6c2d6;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 0.75rem 1.75rem rgba(15, 35, 65, 0.16);
}

.allocation-candidate-option {
  display: flex;
  width: 100%;
  gap: 0.75rem;
  align-items: flex-start;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  background: #fff;
  padding: 0.55rem 0.75rem;
  color: #08285f;
  text-align: left;
}

.allocation-candidate-option:hover,
.allocation-candidate-option:focus {
  background: #eef5ff;
}

.allocation-candidate-no {
  min-width: 5rem;
  font-weight: 700;
}

.allocation-candidate-label {
  color: #49566b;
  font-size: 0.875rem;
}

.allocation-candidate-empty {
  padding: 0.65rem 0.75rem;
  color: #6c757d;
}

.form-check-input:indeterminate {
  background-color: #fff !important;
  border-color: #adb5bd !important;
  background-image: none !important;
}

.receivable-data-card {
  position: relative;
}

.source-order-inline-suggestions {
  background-color: #fff;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  left: 0;
  margin-top: 2px !important;
  max-height: 260px;
  min-width: 220px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1080;
}

/* 唯讀欄統一樣式（灰底比 bg-light 淺，集中一處可調色） */
.form-control.form-readonly,
.form-control.form-readonly:focus {
  background-color: #f1f3f5;
  color: #6c757d;
  border-color: #d7dbe0;
  box-shadow: none;
}