/* 發貨審核表線上填寫 */

/*
    這裡原本有一條 #content { overflow: visible !important }，
    是為了讓靠近頁面上緣的 tooltip 不被 Canvas 的 #content 裁掉而加的。
    現在 tooltip 全部改成 data-position="bottom center"（往下彈），
    且 .content-wrap 有 80px 下內距、最下方的 tooltip 離 #content 底緣還很遠，
    已不需要這條覆寫；留著反而讓本頁的裁切行為跟全站不一致。
    另外真正造成「捲到最上面時右半邊被切掉」的是 header 浮動元素外溢，
    已在 real-estate.css 根治（見該檔 #primary-menu / #content 的註解）。
*/

/*
    Semantic UI 的 tooltip 預設 white-space:nowrap、max-width:none，
    本表單有幾條說明文字很長（「收件人統一編號或身分證號…」展開後寬 613px），
    又是 bottom center 置中在靠左的欄位上，左半截會跑到視窗外被裁掉。
    改成可換行並限制寬度。
*/
[data-tooltip]::after {
    white-space: normal;
    /* ::after 是絕對定位，包含區塊是那個 14px 寬的 icon，
       只寫 max-width 會讓可用寬度變成 icon 寬度、縮成一行一個字，
       所以要先用 max-content 撐開再用 max-width 收斂。 */
    width: max-content;
    max-width: 260px;
    text-align: left;
}

.dec-title {
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

/* 箱 / 品項區塊 */
.dec-box {
    margin-bottom: 24px !important;
    border-left: 4px solid #2185d0 !important;
}

.dec-item {
    background: #fafafa !important;
    border-left: 3px solid #b5cc18 !important;
    margin-bottom: 16px !important;
}

.dec-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.dec-box-head .ui.header {
    margin: 0;
}

/* 必填星號
   Semantic UI 原生的 .required.field > label:after 會排在 label 所有子元素之後，
   有提示 icon 的欄位會變成「名稱 [icon] *」，中間還夾著 icon 的 margin 與
   HTML 換行產生的空白，看起來像是空了一大段。
   改以 flex + order 固定順序為「名稱 → 星號 → 提示 icon」；
   flex container 會忽略純空白文字節點，順帶消除換行造成的空隙。 */
.ui.form .field > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ui.form .field.required > label::after {
    content: '*';
    color: #db2828;
    margin: 0 0 0 2px;
    order: 1;
}

.ui.form .field > label > i.icon {
    order: 2;
    margin: 0 0 0 6px;
    opacity: .6;
    cursor: help;
}

.dec-optional {
    color: #999;
    font-weight: normal;
    font-size: .9em;
    margin-left: 5px;
}

.dec-readonly {
    background: #f0f0f0 !important;
    color: #555 !important;
}

.dec-err {
    color: #db2828;
    font-size: .88em;
    margin-top: 4px;
}

/* 身分證件區塊 */
.dec-legal {
    font-size: .9em !important;
    line-height: 1.7;
    color: #666 !important;
    background: #f8f9fa !important;
    box-shadow: none !important;
    border-left: 3px solid #767676 !important;
}

.dec-uploaded {
    color: #21ba45;
    font-size: .88em;
    margin-top: 4px;
}

.dec-id-preview {
    margin-top: 8px;
}

/* 「長期」勾選框，緊接在有效期至的日期欄位下方 */
.dec-inline-check {
    margin-top: 6px;
}

.dec-inline-check label {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-weight: normal !important;
    font-size: .92em;
    color: #666;
    cursor: pointer;
}

.dec-inline-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.dec-id-preview img {
    max-width: 220px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
}

.dec-uploading {
    color: #2185d0;
    font-size: .9em;
    margin-top: 6px;
}

/* 產品圖片縮圖 */
.dec-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.dec-thumb {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.dec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dec-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

.dec-thumb-del:hover {
    background: #db2828;
}

/* 合計列 */
.dec-totals {
    background: #fffaf3 !important;
    border: 1px solid #f0d5a8 !important;
}

.dec-totals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
}

.dec-totals-grid span {
    display: block;
    color: #888;
    font-size: .88em;
    margin-bottom: 4px;
}

.dec-totals-grid strong {
    font-size: 1.15em;
}

/* 確認頁 */
.dec-confirm-table td:first-child {
    width: 180px;
    background: #f9fafb;
    font-weight: bold;
}

.dec-confirm-item {
    padding: 12px 0;
    border-bottom: 1px dashed #ddd;
}

.dec-confirm-item:last-child {
    border-bottom: none;
}

.dec-confirm-item-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.dec-confirm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 16px;
    font-size: .93em;
}

.dec-confirm-grid span {
    color: #888;
    margin-right: 6px;
}

/* 動作列 */
.dec-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 40px;
}

/* 完成頁 */
.dec-serial {
    font-size: 1.6em;
    font-weight: bold;
    color: #2185d0;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .dec-totals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dec-confirm-table td:first-child {
        width: 110px;
    }

    .dec-actions {
        flex-direction: column-reverse;
    }

    .dec-actions .ui.button {
        width: 100%;
        text-align: center;
    }
}