/* 遊艇公司登入後前台頁面的元件與版面；共用元件放 components.css，前台共用版面放 site.css */

/* 版面：淺灰底、白卡片與左側選單由 components.css 的 ao-panel-layout／ao-side-menu 給，三個角色外觀相同 */

/* 左側選單：頂端的動作按鈕、可展開的列（連結＋展開鈕）、選中狀態 */
.ao-side-menu__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.ao-side-menu__row { display: flex; align-items: center; }
.ao-side-menu__row > .ao-side-menu__toggle,
.ao-side-menu__row > .ao-side-menu__link { flex: 1 1 auto; min-width: 0; padding-right: var(--space-2); }
.ao-side-menu__expand { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background-color: transparent; color: var(--color-neutral-300); font-size: var(--font-size-base); cursor: pointer; }
.ao-side-menu__expand:hover { color: var(--color-ink); }
.ao-side-menu__expand-icon { transition: transform 0.3s; }
.ao-side-menu__row[class~='clk'] .ao-side-menu__expand-icon { transform: rotate(90deg); }
/* 有展開鈕的第一層列：整列圓角，滑過淺灰底；裡面的連結不另畫框 */
.ao-side-menu__list > .ao-side-menu__item > .ao-side-menu__row { border-radius: var(--radius-md); }
.ao-side-menu__item > .ao-side-menu__row:hover { background-color: var(--color-surface-alt); }
/* 第二層的列同時帶 menu-sec-item（舊樣式的灰底圓角方塊），在此蓋回選單列的外觀 */
.ao-side-menu__sub .ao-side-menu__row { width: auto; margin: 0; padding: 0; border-radius: 0; background-color: transparent; color: inherit; }
.ao-side-menu__sub .ao-side-menu__row[class~='clk'] { background-color: transparent; }

/* 分頁籤：選中項用遊艇公司橘 */

/* 文字強調：未處理提示等小圖示用遊艇公司橘 */
.ao-text-yacht { color: var(--color-ink); }

/* 列表上方的篩選列：日期區間、關鍵字 */
.ao-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.ao-filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.ao-filter-bar__label { color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ao-filter-bar__date { width: 140px; }

/* 表格內的操作連結：圖示＋文字，多個時換行排列 */
.ao-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.ao-action { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; border: 0; background-color: transparent; color: var(--color-neutral-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); white-space: nowrap; cursor: pointer; }
.ao-action:hover { color: var(--color-ink); text-decoration: none; }

/* 規格清單：表格內的「名稱：值」多行 */
.ao-spec-list { margin: 0; padding: 0; list-style: none; white-space: nowrap; }

/* 專案列表：每個專案一組，標題列放專案名稱 */
.ao-project-table__group + .ao-project-table__group .ao-project-table__title { border-top: 2px solid var(--color-neutral-200); }
.ao-project-table .ao-project-table__title { background-color: var(--color-surface-muted); color: var(--color-neutral-900); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.ao-project-table__link { color: var(--color-ink-strong); text-decoration: underline; }
.ao-project-table__link:hover { color: var(--color-ink); }
.ao-project-table .ao-actions { display: grid; grid-template-columns: repeat(2, max-content); }

@media screen and (max-width: 768px) {
  .ao-filter-bar__group { flex-wrap: nowrap; width: 100%; }
  .ao-filter-bar__date { flex: 1 1 0; width: auto; min-width: 0; }
}

/* 專案表單（新增、編輯、複製專案）：白卡片內分區的欄位格線、專案人員表格、選人員彈窗 */
.ao-project-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.ao-project-form__head .ao-project-form__title { margin: 0; }
.ao-project-form__note { margin: 0; color: var(--color-neutral-500); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-project-form__hint { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-project-form__value { display: flex; align-items: center; min-height: 40px; margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-base); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.ao-field-group > .ao-project-form__unit { flex: 0 0 120px; }
.ao-project-form .ao-form-grid { margin-bottom: var(--space-4); }
.ao-project-form .ao-form__actions { margin-top: var(--space-4); }

/* 驗證錯誤：驗證程式把錯誤訊息插在欄位（類別欄是欄位外框）後面、通過時移除，欄位本身沒有狀態 class，以相鄰的錯誤訊息判斷 */
.ao-project-form .ao-field__control + [id$='-error'] { margin: var(--space-1) 0 0; color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-project-form .ao-field__control:has(+ [id$='-error']),
.ao-project-form__category:has(+ [id$='-error']) .ao-field__control { border-color: var(--color-error); }

/* 專案人員表格：窄螢幕維持欄寬、改為水平捲動 */
.ao-project-personnel { min-width: 560px; }
.ao-project-personnel .ao-project-personnel__status { margin: 0; vertical-align: middle; }
.ao-project-personnel__perms { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); }
.ao-project-personnel__perms .ao-check { align-items: center; }
.ao-project-personnel__perms .ao-check__input { margin: 0; }

/* 選人員彈窗：每列是一個 label，勾選框在最右欄 */
.ao-staff-picker { margin: 0; color: var(--color-neutral-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-staff-picker__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) 40px; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-neutral-100); font-weight: var(--font-weight-regular); cursor: pointer; }
.ao-staff-picker__row:hover { background-color: var(--color-surface-muted); }
.ao-staff-picker__row--head { border-bottom: 2px solid var(--color-neutral-200); background-color: var(--color-surface-muted); color: var(--color-neutral-900); font-weight: var(--font-weight-bold); cursor: default; }
.ao-staff-picker__cell { overflow-wrap: anywhere; }
.ao-staff-picker .ao-staff-picker__check { justify-self: center; margin: 0; }

@media screen and (max-width: 768px) {
  .ao-project-form .ao-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ao-staff-picker__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; padding-right: var(--space-2); padding-left: var(--space-2); }
  .ao-staff-picker__cell--identity { grid-column: 1 / 3; color: var(--color-neutral-500); }
  .ao-staff-picker__row--head .ao-staff-picker__cell--identity { display: none; }
  .ao-staff-picker .ao-staff-picker__check { grid-row: 1 / 3; grid-column: 3; }
}

/* 物件資料夾頁（專案物件管理）：篩選、品牌、資料夾表格、備註與說明面板、彈窗 */

/* 物件資料夾：篩選列（地區、檔案格式、品牌下拉）與搜尋鈕；建立詢價單燈箱的品牌勾選用遊艇公司橘 */
.ao-folder-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.ao-folder-filter .ao-list-filter { flex: 1 1 auto; padding: 0; }
.ao-folder-dealers :checked + .ao-brand-option__label { border-color: var(--color-ink); }
.ao-folder-dealers .ao-brand-option__check { color: var(--color-ink); }

/* 下載與操作按鈕列、總價總重量 */
.ao-folder-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ao-folder-summary { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; padding: 0; color: var(--color-neutral-900); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); list-style: none; }

/* 分類分頁籤是連結（is-active）；資料夾分頁籤由 Bookmark() 切換 clk */
.ao-tabs--yacht .ao-tabs__link.is-active,
.ao-tabs--yacht .ao-tabs__link[class~='clk'] { border-bottom-color: var(--color-ink); color: var(--color-ink); font-weight: var(--font-weight-bold); }

/* 每個主分類一張卡片：標題列＋資料夾分頁籤＋物件表格 */
.ao-folder-group__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.ao-folder-group__title { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-folder-table__name { min-width: 200px; }
.ao-folder-table .ao-table__cell--center { white-space: nowrap; }
.ao-folder-table__link { color: var(--color-link); text-decoration: underline; }
.ao-folder-table .ao-check__input,
.ao-folder-perm .ao-check__input { margin: 0; accent-color: var(--color-ink); }
.ao-folder-qty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ao-folder-qty .ao-qty-input { width: 80px; text-align: center; }

/* 備註、說明：表格內的按鈕開啟，置中浮在畫面上，避免被表格的水平捲動裁切 */
.ao-folder-dialog { position: fixed; top: 50%; left: 50%; display: none; box-sizing: border-box; width: 400px; max-width: calc(100% - 32px); padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-neutral-700); font-size: var(--font-size-base); line-height: var(--line-height-body); text-align: left; transform: translate(-50%, -50%); z-index: var(--z-popover); }
.ao-folder-dialog[class~='clk'] { display: block; }
.ao-folder-dialog__title { margin: 0 0 var(--space-3); padding-right: var(--space-5); color: var(--color-neutral-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-folder-dialog .ao-folder-dialog__close { position: absolute; top: var(--space-2); right: var(--space-2); }
.ao-folder-dialog .ao-folder-dialog__textarea { height: auto; min-height: 120px; margin-bottom: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: var(--line-height-body); resize: vertical; }
.ao-folder-dialog__text { margin: 0; overflow-wrap: anywhere; }

/* 編輯資料夾、異動資料夾彈窗：名稱列（輸入框＋新增＋刪除）、權限清單 */
.ao-folder-edit__label { margin: 0 0 var(--space-2); color: var(--color-neutral-900); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.ao-folder-edit__list { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.ao-folder-edit__list > li + li { margin-top: var(--space-2); }
.ao-folder-edit__list [id$='-error'] { margin-top: var(--space-1); color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-folder-edit__list .ao-field__control.has-error { border-color: var(--color-error); }
.ao-folder-edit__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ao-folder-edit__row > .ao-field__control { flex: 1 1 0; min-width: 0; }
.ao-folder-edit__row > [id$='-error'] { flex: 0 0 100%; order: 1; margin-top: 0; }
.ao-folder-edit__row:not(:last-child) > .ao-folder-edit__add { display: none; }
.ao-folder-perm { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.ao-folder-perm__item { display: flex; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-100); }
.ao-folder-perm__name { flex: 1 1 auto; min-width: 0; color: var(--color-neutral-900); overflow-wrap: anywhere; }
.ao-folder-perm__role { color: var(--color-neutral-500); font-size: var(--font-size-sm); }
.ao-folder-perm__control { display: flex; flex: none; align-items: center; }
.ao-folder-modal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* 建立詢價單：依品牌勾選 */
.ao-folder-dealers { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); }
.ao-folder-dealers .ao-brand-option { margin: 0; cursor: pointer; }

/* 物件資料夾：參考設備清單匯入的設備列（不可勾選、不計價）與「未連動／已連動」標籤 */
.ao-equip-row > .ao-table__cell:first-child { border-left: 4px solid var(--color-equipment-row); }
.ao-equip-row__spec { white-space: pre-line; }
.ao-equip-row__tag { display: block; margin-top: var(--space-1); }
.ao-status--unlinked { background-color: var(--color-neutral-500); color: var(--color-white); }
.ao-status--linked { background-color: var(--color-equipment-linked); color: var(--color-white); }

/* 匯入設備參考清單檔燈箱：說明、拖曳上傳區配色、辨識進度條 */
.ao-equip-import__note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-ink); background-color: var(--color-surface-muted); color: var(--color-neutral-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-panel-layout--yacht .ao-dropzone:hover,
.ao-panel-layout--yacht .ao-dropzone:focus-within,
.ao-panel-layout--yacht .ao-dropzone.is-dragover { border-color: var(--color-ink); }
.ao-equip-import__progress { margin-top: var(--space-3); }
.ao-equip-import__progress-text { margin: 0 0 var(--space-1); color: var(--color-neutral-700); font-size: var(--font-size-sm); }
.ao-equip-import__bar { display: block; width: 100%; height: 10px; accent-color: var(--color-ink); }

/* 設備資料編輯燈箱 */
.ao-equip-edit__grid { margin-bottom: 0; }
.ao-equip-edit__link { display: flex; align-items: center; min-height: 40px; margin: 0; }
.ao-equip-edit__spec { height: auto; min-height: 80px; padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: var(--line-height-body); resize: vertical; }
.ao-equip-edit__error { min-height: 1.5em; margin: 0; color: var(--color-error); font-size: var(--font-size-sm); }

/* 遊艇公司物件列表與物件詳細：沿用船東商品列表的元件，勾選、切換與數量控制換成遊艇公司橘 */

/* 品牌篩選：勾選外框與勾選圖示用遊艇公司橘 */
.ao-brand-filter--yacht :checked + .ao-brand-option__label { border-color: var(--color-ink); }
.ao-brand-filter--yacht .ao-brand-option__check { color: var(--color-ink); }

/* 結果卡片：篩選卡包在搜尋表單內，與結果卡片不是相鄰元素，間距另外給 */
.ao-panel-layout__main .ao-object-results { margin-top: var(--space-4); }

/* 列表工具列：供應商城市、檔案格式下拉；格狀／條列切換的選中項 */
.ao-list-toolbar .ao-list-toolbar__select { width: 180px; max-width: 100%; }
.ao-view-toggle--yacht .ao-view-toggle__link.is-active { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); }

/* ajax 片段的物件卡：暫存區的移除鈕靠右上 */
.ao-product-card__box .ao-object-card__remove { align-self: flex-end; color: var(--color-neutral-500); }

/* 加入專案資料夾燈箱：專案、分類、資料夾三個下拉 */
.ao-object-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

/* 物件詳細：數量增減與加入鈕 */
.ao-qty-stepper { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ao-qty-stepper__group { display: flex; }
.ao-qty-stepper__group .ao-qty-stepper__input { width: 80px; border-radius: 0; text-align: center; }
.ao-qty-stepper__group .ao-qty-stepper__btn { border-color: var(--color-neutral-100); color: var(--color-neutral-700); }
.ao-qty-stepper__group .ao-qty-stepper__btn:hover { background-color: var(--color-neutral-100); }
.ao-qty-stepper__group .ao-qty-stepper__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ao-qty-stepper__group .ao-qty-stepper__btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

@media screen and (max-width: 768px) {
  .ao-object-picker { grid-template-columns: minmax(0, 1fr); }
  .ao-list-toolbar .ao-list-toolbar__select { width: 100%; }
}

/* 詢價單頁：標題列、摘要區、明細表格、數量欄、送出按鈕列 */

/* 標題列：左邊標題，右邊下載、顯示已刪除項目等按鈕；沒有標題時按鈕靠右 */
.ao-rfq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.ao-rfq-head .ao-card__title { margin: 0; overflow-wrap: anywhere; }
.ao-rfq-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* 摘要區：短欄位三欄並排，說明與備註佔整列 */
.ao-rfq-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); }
.ao-rfq-summary__item { min-width: 0; }
.ao-rfq-summary__item--wide { grid-column: 1 / -1; }
.ao-rfq-summary__label { margin: 0 0 var(--space-1); color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ao-rfq-summary__value { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-base); overflow-wrap: anywhere; }
.ao-rfq-summary__logs { margin: var(--space-2) 0 0; padding: 0; color: var(--color-neutral-600); font-size: var(--font-size-sm); line-height: var(--line-height-body); list-style: none; }
.ao-rfq-summary .ao-rfq-summary__more { margin-top: var(--space-1); }

/* 指派供應商：洲別、國家、城市、供應商四個下拉 */
.ao-rfq-supplier-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }

/* 列表頁的下拉篩選：標籤與下拉同一列，標籤不換行 */
.ao-rfq-status-filter { flex-wrap: nowrap; }
.ao-rfq-status-filter .ao-filter-bar__label { flex: none; }
.ao-rfq-status-filter__select { width: 180px; }

/* 明細與列表表格：窄螢幕由 .ao-table-wrap 水平捲動 */
.ao-rfq-table { min-width: 960px; }
.ao-rfq-list-table { min-width: 860px; }
.ao-rfq-record-table { min-width: 640px; }
.ao-rfq-table .ao-table__head { white-space: normal; word-break: keep-all; }
.ao-rfq-table .ao-rfq-table__name { min-width: 140px; }
.ao-rfq-table .ao-rfq-table__record { min-width: 160px; }
.ao-rfq-table .is-deleted .ao-table__cell { background-color: var(--color-surface-muted); color: var(--color-neutral-500); }
.ao-rfq-list-table__link { color: var(--color-ink-strong); text-decoration: underline; }
.ao-rfq-list-table__link:hover { color: var(--color-ink); }

/* 數量欄：輸入框加確定鈕 */
.ao-rfq-qty { display: flex; flex-direction: column; gap: var(--space-1); width: 80px; margin: 0 auto; }
.ao-rfq-qty .ao-rfq-qty__input { padding: 0 var(--space-1); text-align: center; }
/* 設備編輯視窗的選填標示 */
.ao-equip-edit__optional { margin-left: var(--space-1); color: var(--color-ink-muted); font-weight: var(--font-weight-regular); }
/* 採購自行報價的單價欄 */
.ao-rfq-price { display: block; width: 120px; margin: 0 auto; }
.ao-rfq-price .ao-rfq-price__input { padding: 0 var(--space-2); text-align: right; }
/* 非系統品牌詢價單預先帶入的供應商，按「更換供應商」才展開下拉 */
.ao-rfq-preset-supplier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ao-rfq-preset-supplier[hidden] { display: none; }
.ao-rfq-preset-supplier__name { font-weight: var(--font-weight-medium); }
.ao-rfq-preset-supplier__field { flex: 1 1 280px; max-width: 420px; }
.ao-rfq-preset-supplier__hint { flex-basis: 100%; color: var(--color-ink-muted); font-size: var(--font-size-sm); }

/* 送出按鈕列 */
.ao-rfq-submit { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }

@media screen and (max-width: 768px) {
  .ao-rfq-summary,
  .ao-rfq-supplier-picker { grid-template-columns: minmax(0, 1fr); }
  .ao-rfq-head__actions { margin-left: 0; }
  .ao-rfq-status-filter { width: 100%; }
  .ao-rfq-status-filter__select { flex: 1 1 auto; width: auto; min-width: 0; }
  .ao-rfq-submit .ao-btn { flex: 1 1 100%; }
}

/* 遊艇公司帳號頁：公司資料、通知、供應商介紹、數據分析 */

/* 沒有左側選單的頁面（通知、供應商介紹）：底色與左側選單頁的深色底一致 */
.ao-section--yacht { background: var(--color-surface-alt); color: var(--color-ink); }

/* 公司資料表單：雙欄格線限制寬度後置中 */
.ao-account-form { max-width: 944px; margin-right: auto; margin-left: auto; }
.ao-account-form .ao-form-grid { margin-bottom: var(--space-3); }

/* 數據分析：每張圖表一段，標題列放標題與篩選；圖表的字色與格線由腳本給淺灰，畫布外框維持深底 */
.ao-chart + .ao-chart { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-neutral-100); }
.ao-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.ao-chart__title { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-chart__filter { width: 160px; }
.ao-chart__canvas { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-white); }

@media screen and (max-width: 768px) {
  .ao-chart__filter { width: 100%; }
}

/* 人員管理：列表標題列、狀態勾選、新增與編輯表單 */
.ao-personnel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.ao-personnel-head__title { margin: 0; }
/* 帳號是 email，窄螢幕不在字中斷行，改由表格外框水平捲動 */
.ao-personnel-account { overflow-wrap: normal; white-space: nowrap; }
.ao-personnel-status { margin: 0; accent-color: var(--color-ink); }

/* jQuery Validate 把 has-error 加在欄位本身；Bootstrap form-control 的 focus 光暈不用 */
.ao-personnel-form .ao-field__control.has-error { border-color: var(--color-error); }
.ao-personnel-form--yacht .ao-field__control:focus { border-color: var(--color-ink); box-shadow: none; }
.ao-personnel-form--yacht .ao-check__input { accent-color: var(--color-ink); }
.ao-personnel-form__auth { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.ao-personnel-form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* 物件比價：船用物件與商品詳細的「加入比價」、物件比價頁（查詢列、勾選列、卡片勾選）、比價結果（比較表、加入專案） */
.ao-yacht-compare__add { border-color: var(--color-ink); background-color: var(--color-white); color: var(--color-ink); }
.ao-yacht-compare__add:hover { background-color: var(--color-ink); color: var(--color-white); }
.ao-yacht-compare__add.is-active { background-color: var(--color-ink); color: var(--color-white); }
.ao-product-card__actions + .ao-yacht-compare__card-add { margin-top: 0; }
.ao-yacht-compare__card-add .ao-yacht-compare__add { height: 40px; }
.ao-yacht-compare__row-add { margin-top: var(--space-2); padding-right: var(--space-2); padding-left: var(--space-2); font-size: var(--font-size-sm); }
.ao-panel-layout--yacht .ao-product-summary__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.ao-yacht-compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.ao-yacht-compare__head .ao-yacht-compare__title { margin: 0; }
.ao-yacht-compare__query { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); }
.ao-yacht-compare__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 180px; margin: 0; }
.ao-yacht-compare__field--grow { flex: 1 1 220px; }
.ao-yacht-compare__field-label { color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.ao-yacht-compare__query-actions { display: flex; gap: var(--space-2); }
.ao-yacht-compare__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); color: var(--color-neutral-700); font-size: var(--font-size-sm); }
.ao-yacht-compare__total { padding-right: var(--space-4); border-right: 1px solid var(--color-neutral-200); }
.ao-yacht-compare__num { color: var(--color-neutral-900); font-size: var(--font-size-base); }
.ao-yacht-compare__num--accent { color: var(--color-ink); }
.ao-yacht-compare__all { align-items: center; }
.ao-yacht-compare__all .ao-check__input { margin: 0; accent-color: var(--color-ink); }
.ao-yacht-compare__all .ao-check__label { font-size: var(--font-size-sm); }
.ao-yacht-compare__go { margin-left: auto; }

/* 卡片左上角的勾選框：放在卡片最後，疊在商品圖與品牌之上；勾選時卡片外框換遊艇公司橘 */
.ao-yacht-compare__check { position: absolute; top: var(--space-1); left: var(--space-1); display: inline-flex; margin: 0; cursor: pointer; }
.ao-yacht-compare__check-input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-ink); cursor: pointer; }
.ao-product-card.is-selected .ao-yacht-compare__card { border-color: var(--color-ink); }

/* 比價結果：第一欄為比較項目，其餘每欄一個商品；勾選加入專案的欄加 is-picked */
.ao-yacht-compare__note { margin: 0 0 var(--space-3); color: var(--color-neutral-500); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-yacht-compare__table-wrap { border: 1px solid var(--color-neutral-100); }
.ao-yacht-compare__table { width: 100%; min-width: 640px; border-collapse: collapse; color: var(--color-neutral-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-yacht-compare__label,
.ao-yacht-compare__product,
.ao-yacht-compare__cell { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-100); vertical-align: middle; }
.ao-yacht-compare__label { min-width: 120px; background-color: var(--color-surface-muted); color: var(--color-neutral-900); font-weight: var(--font-weight-bold); text-align: left; }
.ao-yacht-compare__product { position: relative; min-width: 170px; padding-top: var(--space-5); border-top: 3px solid transparent; background-color: var(--color-white); text-align: center; vertical-align: top; }
.ao-yacht-compare__cell { text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.ao-yacht-compare__cell--price { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ao-yacht-compare__spec-prefix { color: var(--color-neutral-500); font-weight: var(--font-weight-regular); }
.ao-yacht-compare__table .is-picked { background-color: var(--color-surface-muted); }
.ao-yacht-compare__product.is-picked { border-top-color: var(--color-ink); }
.ao-yacht-compare__ai { position: absolute; top: var(--space-1); right: var(--space-1); }
.ao-yacht-compare__pic { position: relative; display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin: 0 auto var(--space-2); }
.ao-yacht-compare__img { max-width: 100%; max-height: 100%; }
.ao-yacht-compare__pic .ao-pic-placeholder { font-size: var(--font-size-2xl); }
.ao-yacht-compare__name { display: block; color: var(--color-neutral-900); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.ao-yacht-compare__name:hover { color: var(--color-ink); text-decoration: none; }
.ao-yacht-compare__model { display: block; margin-top: var(--space-1); color: var(--color-neutral-500); font-weight: var(--font-weight-regular); overflow-wrap: anywhere; }
.ao-yacht-compare__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.ao-yacht-compare__foot-select { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.ao-yacht-compare__modal-count { margin: 0 0 var(--space-3); color: var(--color-neutral-700); }
.ao-yacht-compare__modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

@media screen and (max-width: 768px) {
  .ao-yacht-compare__field { width: 100%; min-width: 0; }
  .ao-yacht-compare__query-actions .ao-btn { flex: 1 1 0; }
  .ao-yacht-compare__total { width: 100%; padding-right: 0; border-right: 0; }
  .ao-yacht-compare__go { width: 100%; margin-left: 0; }
  .ao-yacht-compare__foot .ao-btn { width: 100%; }
}

/* 物件管理頁：機器人加入後的連結帶 ?added=<物件資料夾對應編號>，該列加上 ao-object-row is-added */
.ao-object-row.is-added > td {
  background-color: var(--color-row-added);
}
/* 專案分享燈箱 */
.ao-project-share__list { display: grid; grid-template-columns: 6em 1fr; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.ao-project-share__list dt { color: var(--color-text-muted); font-weight: normal; }
.ao-project-share__list dd { margin: 0; color: var(--color-neutral-900); font-weight: var(--font-weight-bold); }
.ao-project-share__list .ao-status.is-on { background-color: var(--color-equipment-linked); color: var(--color-white); }
.ao-project-share__list .ao-status.is-off { background-color: var(--color-neutral-200); color: var(--color-neutral-700); }
.ao-project-share__list .ao-status.is-none { border: 1px solid var(--color-border-light); background-color: var(--color-surface-muted); color: var(--color-text-muted); }
.ao-project-share__empty { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); color: var(--color-text-muted); }
.ao-project-share__row { display: flex; align-items: stretch; gap: var(--space-2); }
.ao-project-share__row .ao-field { flex: 1; min-width: 0; }
.ao-project-share__row .ao-btn { min-width: 9em; white-space: nowrap; }
.ao-project-share__code { font-weight: var(--font-weight-bold); }
.ao-project-share__hint { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ao-project-share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.ao-project-share__spacer { flex: 1; }
.ao-project-share__danger { border-color: var(--color-danger); color: var(--color-danger); }
.ao-project-share__danger:hover { background-color: var(--color-danger); color: var(--color-white); }
/* 邀請船東多選（select2）：觸發框比照 .ao-field__control 的高度、框線、圓角、字級與聚焦樣式，下拉內部維持 select2 原樣；
   選擇器帶 select2-container--default，與 select2 預設樣式同權重、靠 v2 較晚載入蓋過 */
.ao-project-share__invite [class~='select2-container'] { width: 100%; }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-selection--multiple'] { display: flex; align-items: center; box-sizing: border-box; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background-color: var(--color-white); cursor: text; }
.ao-project-share__invite [class~='select2-container--focus'] [class~='select2-selection--multiple'] { border-color: var(--color-sea-700); box-shadow: var(--shadow-focus); }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-selection__rendered'] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1) 0; }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-search--inline'] { flex: 1; min-width: 8em; }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-search__field'] { width: 100%; height: 28px; margin: 0; color: var(--color-ink); font-family: inherit; font-size: var(--font-size-base); line-height: var(--line-height-heading); }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-search__field']::placeholder { color: var(--color-neutral-300); opacity: 1; }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-selection__choice'] { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0 var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-ink); font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-selection__choice__remove'] { position: static; padding: 0; border: 0; background-color: transparent; color: var(--color-neutral-500); }
.ao-project-share__invite [class~='select2-container--default'] [class~='select2-selection__choice__display'] { padding: 0; }

/* 詢價資料檢核：AI 來源物件的資料狀態、補登按鈕、缺漏欄位 */
.ao-inquiry-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.ao-inquiry-state [hidden] { display: none; }
.ao-status.ao-inquiry-state__pending { border: 1px solid var(--color-warning-border); background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.ao-status.ao-inquiry-state__ok { border: 1px solid var(--color-success-border); background-color: var(--color-success-bg); color: var(--color-equipment-linked); }
.ao-btn.ao-inquiry-state__btn { min-height: 0; padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.ao-inquiry-state__miss { flex-basis: 100%; color: var(--color-warning-text); font-size: var(--font-size-sm); }
.ao-inquiry-banner { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-success-border); border-radius: var(--radius-sm); background-color: var(--color-success-bg); color: var(--color-success-text); }
.ao-inquiry-banner.is-pending { border-color: var(--color-warning-border); background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.ao-inquiry-check { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.ao-inquiry-check__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); }
.ao-inquiry-check__name { color: var(--color-neutral-900); font-weight: var(--font-weight-bold); }
.ao-inquiry-check .ao-inquiry-state__miss { flex-basis: auto; }
.ao-inquiry-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
.ao-inquiry-form__hint { margin: var(--space-1) 0 0; color: var(--color-warning-text); font-size: var(--font-size-sm); }
.ao-inquiry-form__error { min-height: 1.5em; margin: 0; color: var(--color-danger); }
.ao-inquiry-form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.ao-inquiry-check-box:empty { display: none; }

/* 專案列表：專案卡片（業主介面視覺案例的專案卡），兩欄排列；上方摘要數字、下方船舶資訊，主要動作是物件管理與詢價單 */
.ao-project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
/* 頁面底色就是 surface-alt，卡片改白底加陰影才看得出分隔 */
.ao-project-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); box-shadow: var(--shadow-card); color: var(--color-ink); }
.ao-project-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-3); }
.ao-project-card__meta { grid-column: 1; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-project-card__title { grid-column: 1; margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.ao-project-card__link { color: inherit; }
.ao-project-card__link:hover { color: var(--color-ink); text-decoration: none; }
.ao-project-card__progress { grid-column: 2; grid-row: 1 / span 2; }
.ao-project-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
/* 標籤折行時數字仍對齊底部，三欄數字同一條基線 */
.ao-project-card__stat { display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--space-3); }
.ao-project-card__stat + .ao-project-card__stat { border-left: 1px solid var(--color-line); }
.ao-project-card__stat dt { color: var(--color-ink-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.ao-project-card__stat dd { margin: 0; white-space: nowrap; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-project-card__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-project-card__info div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); min-width: 0; }
.ao-project-card__info dt { flex: none; color: var(--color-ink-muted); font-weight: var(--font-weight-regular); }
.ao-project-card__info dd { margin: 0; overflow-wrap: anywhere; }
.ao-project-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.ao-project-card__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--radius-pill); background-color: var(--color-danger); color: var(--color-white); font-size: var(--font-size-sm); }
.ao-project-card__more { padding-top: var(--space-2); border-top: 1px dashed var(--color-line); }
.ao-project-cards__pager { margin-top: var(--space-4); }
/* 沒有可用的次要操作時（無編輯、複製、刪除權限）不留空白分隔列 */
.ao-project-card__more:not(:has(.ao-action)) { display: none; }

/* 選單頂端的動作鈕是次要動作：白底細框，所在頁淺灰底（三個角色相同） */
.ao-side-menu .ao-side-menu__actions .ao-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-2); border-color: var(--color-line-strong); background-color: var(--color-white); color: var(--color-ink); font-size: var(--font-size-sm); white-space: nowrap; }
.ao-side-menu__actions .ao-btn:hover { border-color: var(--color-ink); }
.ao-side-menu__actions .ao-btn.is-active { border-color: var(--color-gray-100); background-color: var(--color-gray-100); color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ao-panel-layout--yacht .ao-product-grid .ao-product-card__model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-panel-layout--yacht .ao-yacht-compare__card-add .ao-btn { white-space: nowrap; font-size: var(--font-size-sm); }
.ao-panel-layout--yacht .ao-brand-filter--yacht { height: 140px; overflow: hidden; }
.ao-panel-layout--yacht .ao-brand-filter--yacht[class~="clk"] { height: auto; max-height: 270px; overflow-y: auto; }
.ao-panel-layout--yacht .ao-brand-filter--yacht .ao-brand-filter__grid { grid-auto-rows: 124px; }
.ao-panel-layout--yacht .ao-brand-filter--yacht .ao-brand-option__label { height: 100%; overflow: hidden; }
.ao-panel-layout--yacht .ao-list-toolbar__tools { min-width: 0; }
.ao-panel-layout--yacht .ao-list-toolbar__select { min-width: 230px; }
.ao-panel-layout--yacht .ao-list-filter__select { width: 230px; }

.ao-panel-layout--yacht .ao-form__actions { margin-bottom: var(--space-4); }
.ao-panel-layout--yacht .ao-project-form__hint { color: var(--color-ink-muted); }
.ao-panel-layout--yacht .ao-action .ao-icon { font-size: var(--font-size-base); }
.ao-panel-layout--yacht .ao-staff-picker__row { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) 24px; }
.ao-panel-layout--yacht .ao-field-group > .ao-field--code { flex-basis: 110px; }
@media screen and (max-width: 768px) {
  .ao-panel-layout--yacht .ao-filter-bar .ao-search-field { flex-basis: 100%; }
  .ao-panel-layout--yacht .ao-staff-picker__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; }
}


.ao-panel-layout--yacht .ao-filter-bar { flex-wrap: nowrap; gap: var(--space-2); }
.ao-panel-layout--yacht .ao-filter-bar__group { flex-wrap: nowrap; min-width: 0; }
.ao-panel-layout--yacht .ao-filter-bar .ao-search-field { flex: 1 1 220px; min-width: 180px; }
.ao-panel-layout--yacht .ao-rfq-status-filter__select { width: 150px; min-width: 0; }
.ao-panel-layout--yacht .ao-rfq-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(160px, 1.2fr); align-items: center; }
.ao-panel-layout--yacht .ao-rfq-filter .ao-filter-bar__date { flex: 1 1 0; width: auto; min-width: 0; }
.ao-panel-layout--yacht .ao-rfq-filter .ao-rfq-status-filter__select { flex: 1 1 0; width: auto; min-width: 0; }
.ao-panel-layout--yacht .ao-rfq-filter .ao-search-field { width: 100%; min-width: 0; }
.ao-panel-layout--yacht .ao-brand-option__name { overflow: visible; flex-wrap: wrap; text-align: center; }
.ao-panel-layout--yacht .ao-brand-option__title { white-space: normal; overflow-wrap: anywhere; }
.ao-panel-layout--yacht .ao-yacht-compare__field-label { color: var(--color-ink); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.ao-panel-layout--yacht .ao-personnel-action { box-sizing: border-box; width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: var(--font-size-base); }
.ao-panel-layout--yacht .ao-personnel-action .ao-icon { font-size: var(--font-size-base); }
.ao-panel-layout--yacht .ao-project-card__stat dt { min-height: 2.6em; }
.ao-panel-layout--yacht .ao-project-card__info dt { white-space: nowrap; }
.ao-panel-layout--yacht .ao-personnel-form__hint { margin: var(--space-2) 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-panel-layout--yacht .ao-btn--icon.ao-btn--outline { box-sizing: border-box; width: 32px; height: 32px; min-height: 32px; padding: 0; }
@media screen and (max-width: 1100px) {
  .ao-panel-layout--yacht .ao-filter-bar { flex-wrap: wrap; }
  .ao-panel-layout--yacht .ao-filter-bar .ao-search-field { flex-basis: 100%; }
  .ao-panel-layout--yacht .ao-rfq-filter { display: flex; }
}