/*
 * 全站表單與表格樣式(按鈕、手機表格、Select2、Air Datepicker、圖片上傳)。所有頁面載入,包含電商前台;
 * 顏色一律跟隨 Bootstrap 主色變數:平台與後台由 qihe.css 設為企核深海青,電商前台維持品牌商店的 Bootstrap 主色。
 */

/* ── 按鈕 ──
 * 按鈕文字不換行:同一列的輸入框把按鈕擠窄時,文字斷成兩行會讓整列變高、旁邊的按鈕跟著被拉長。
 * 滿版按鈕(w-100)與加上 text-wrap 的按鈕仍可換行;一列放不下的按鈕群組請在外層加 flex-wrap。 */
.btn { white-space: nowrap; }
.btn.w-100 { white-space: normal; }
/* 標題列 / 篩選列(d-flex 沒有指定 align-items)裡的按鈕不隨另一側換行的內容被拉高:靠上對齊、維持原高度 */
.d-flex:not([class*="align-items"]) > .btn,
.d-flex:not([class*="align-items"]) > .btn-group,
.d-flex:not([class*="align-items"]) > .d-flex:not([class*="align-items"]) > .btn { align-self: flex-start; }
/* 同一列(d-flex)空間不足時,由滿版的輸入框與下拉選單先縮窄,不要把按鈕擠出卡片(有指定寬度的維持原寬) */
.d-flex > .form-control:not([style*="width"]), .d-flex > .select2-container[style*="100%"] { min-width: 0; }

/* ── 資料表格(手機)──
 * 小於 md 的寬度下,.table-responsive 內的儲存格不換行:品號、品名、金額等欄位在窄螢幕會被擠成一字一行,
 * 每列被撐得很高;改為在卡片內水平捲動(頁面本身不會出現水平捲動)。
 * 備註、說明、地址等需要換行的長文字欄位在 <td> 加 text-wrap 即可例外,並給一個最小寬度,
 * 避免因為其他欄位不換行而被壓成一字一行;整個表格都要換行(如官網的方案比較表)則在 <table> 加 text-wrap。 */
@media (max-width: 767.98px) {
    .table-responsive > .table:not(.text-wrap) > :not(caption) > * > * { white-space: nowrap; }
    .table-responsive > .table > :not(caption) > * > .text-wrap { min-width: 14rem; }
}
/* 表格裡只給讀屏軟體看的文字(visually-hidden 是絕對定位,定位基準在表格外)不可隨不換行的表格往右飄:
 * 它會落在表格捲動範圍之外,撐出整頁的水平捲動 */
.table-responsive .visually-hidden:not(caption) { left: 0 !important; }

/* ── Select2(bootstrap-5 主題)── */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .16);
}
.select2-container--bootstrap-5 .select2-dropdown { border-color: rgba(var(--bs-primary-rgb), .55); z-index: 1060; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--bs-body-color); background-color: rgba(var(--bs-primary-rgb), .08);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff; background-color: var(--bs-primary);
}
.select2-container--bootstrap-5.is-invalid .select2-selection { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); }
/* 表格內的小型選單不要撐開欄寬 */
td .select2-container--bootstrap-5 { min-width: 8rem; }

/* ── Air Datepicker ── */
.air-datepicker {
    --adp-z-index: 1060;
    --adp-font-family: inherit;
    --adp-accent-color: var(--bs-primary);
    --adp-color-current-date: var(--bs-primary);
    --adp-day-name-color: var(--bs-secondary-color, #6c757d);
    --adp-cell-background-color-selected: var(--bs-primary);
    --adp-cell-background-color-selected-hover: var(--bs-primary);
    --adp-background-color-selected-other-month: rgba(var(--bs-primary-rgb), .55);
    --adp-background-color-selected-other-month-focused: rgba(var(--bs-primary-rgb), .7);
    --adp-btn-color: var(--bs-primary);
    --adp-border-radius: .5rem;
    --adp-width: 268px;
}
.air-datepicker-overlay { --adp-overlay-z-index: 1059; }
.air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- { color: #fff; }
.air-datepicker-button.qh-adp-done { font-weight: 600; }

/* 日期欄位右側的圖示(Bootstrap Icons calendar3 / clock) */
input.qh-date {
    padding-right: 2.1rem;
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3e%3cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3e%3c/svg%3e");
}
input.qh-date-time {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z'/%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0'/%3e%3c/svg%3e");
}
.form-control-sm.qh-date { padding-right: 1.9rem; background-position: right .5rem center; }
/* 欄位太窄時(qihe-ui.js 依寬度判斷)隱藏圖示,讓日期與時間完整顯示 */
input.qh-date.qh-date-compact { background-image: none; padding-right: .5rem; }

/* ── 圖片上傳元件 ── */
.qh-upload-drop {
    border: 1.5px dashed var(--bs-border-color);
    border-radius: .6rem;
    padding: .9rem;
    background: var(--bs-body-bg);
    transition: border-color .15s, background-color .15s;
}
.qh-upload-drop.is-over { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); }
.qh-upload-drop.is-invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.qh-upload-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.qh-upload-tile {
    position: relative;
    width: 112px;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bs-border-color);
}
.qh-upload-tile .qh-thumb { display: block; width: 100%; aspect-ratio: var(--qh-ratio, 1); object-fit: cover; background: #f1f3f5; }
.qh-upload-tile .qh-file { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; gap: .25rem; padding: .5rem; text-align: center; font-size: .75rem; color: var(--bs-secondary-color); word-break: break-all; }
.qh-upload-tile .qh-file .bi { font-size: 1.8rem; }
.qh-upload-tile .qh-actions { display: flex; border-top: 1px solid var(--bs-border-color); }
.qh-upload-tile .qh-actions button { flex: 1; border: 0; background: #fff; padding: .3rem 0; font-size: .78rem; color: var(--bs-body-color); }
.qh-upload-tile .qh-actions button + button { border-left: 1px solid var(--bs-border-color); }
.qh-upload-tile .qh-actions button:hover { background: rgba(var(--bs-primary-rgb), .07); }
.qh-upload-tile .qh-actions button.text-danger:hover { background: rgba(220, 53, 69, .08); }
.qh-upload-tile .qh-badge { position: absolute; top: .3rem; left: .3rem; font-size: .68rem; }
.qh-upload-tile.is-removed .qh-thumb, .qh-upload-tile.is-removed .qh-file { opacity: .35; filter: grayscale(1); }
.qh-upload-add {
    width: 112px; aspect-ratio: 1; border: 1.5px dashed var(--bs-border-color); border-radius: .5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    background: transparent; color: var(--bs-secondary-color); font-size: .8rem;
}
.qh-upload-add:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.qh-upload-add .bi { font-size: 1.4rem; }
.qh-crop-stage { height: min(62vh, 560px); background: #1d2327; } /* 固定高度,Cropper 才能把整張圖放進畫面並以最大範圍裁切 */
.qh-crop-stage img { display: block; max-width: 100%; }