/**
 * Bootstrap 5 兼容性樣式
 * 修復移除 input-group-append/prepend 和 custom-file 後的排版問題
 */

/* ========================================
   1. 搜尋列樣式修復
   ======================================== */

/* 原本: .search-bar .input-group-append */
/* 現在: 按鈕直接在 .search-bar .input-group 下 */
.search-bar .btn-search {
    position: relative;
    width: 50px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 分隔線 - 原本在 .input-group-append::before */
.search-bar .btn-search::before {
    content: "";
    width: 1px;
    height: 30px;
    background: #333;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.search-bar .btn-search span {
    display: none;
}

/* ========================================
   2. 日期選擇器樣式修復
   ======================================== */

/* 原本: .input-type02.select-date .input-group-append .btn */
/* 現在: 按鈕直接在 .input-type02.select-date 下 */
.input-type02.select-date .btn {
    font-size: 1.5rem;
    padding: 5px 10px 6px;
    border: 1px solid #333;
    color: #333;
}

.input-type02.select-date .btn span {
    display: none;
}

/* ========================================
   3. 檔案上傳樣式修復 - 完全模擬 Bootstrap 4 custom-file 外觀
   ======================================== */

/* 自定義檔案顯示元素 - 模擬 custom-file-label */
.input-type02.upload_file .custom-file-display {
    overflow: hidden;
    width: calc(100% - 85px);
    height: auto;
    padding: 10px 15px;
    border: 1px solid #333;
    border-right: none;
    border-radius: 0;
    background: transparent;
    color: #333;
    font-size: 1.125rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 0 0 calc(100% - 85px);
    user-select: none;
    transition: border-color 0.15s ease-in-out;
}

/* 未選擇檔案時的文字顏色 */
.input-type02.upload_file .custom-file-display:empty::before {
    content: "未選擇任何檔案";
    color: #6c757d;
}

/* 懸停效果 */
.input-type02.upload_file .custom-file-display:hover {
    border-color: #555;
}

/* Focus 效果 - 無障礙支援 */
.input-type02.upload_file .custom-file-display:focus,
.input-type02.upload_file .custom-file-display.focused {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-color: #007bff;
}

/* 拖放時的視覺效果 */
.input-type02.upload_file .custom-file-display.dragover {
    border-color: #007bff;
    background-color: rgba(0, 123, 255, 0.05);
}

/* 驗證錯誤樣式 */
.input-type02.upload_file .custom-file-display.is-invalid {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

.input-type02.upload_file.has-error .custom-file-display {
    border-color: #dc3545;
}

.input-type02.upload_file .error-message {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

/* 隱藏原生 input (由 JS 處理) */
.input-type02.upload_file input[type="file"].form-control {
    /* JS 會將其設為 visually hidden */
}

/* input-group-text 樣式 (瀏覽按鈕) - 完全維持原有樣式 */
.input-type02.upload_file .input-group-text {
    border: none;
    border-left: 1px solid #333;
    background: transparent;
    border-radius: 0;
    color: #333;
    padding: 12px 12px 11px;
    flex: 0 0 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease-in-out;
}

/* 瀏覽按鈕懸停效果 */
.input-type02.upload_file .input-group-text:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 瀏覽按鈕 Focus 效果 - 無障礙支援 */
.input-type02.upload_file .input-group-text:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.1);
}

.input-type02.upload_file .input-group-text i {
    padding-right: 5px;
}

/* 確保 upload_file 容器正確排列 */
.input-type02.upload_file {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* label-text 保持原有樣式 */
.input-type02.upload_file .label-text {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* ========================================
   4. Input Group 一般修復
   ======================================== */

/* Bootstrap 5 移除了 .input-group-append，確保直接子元素樣式正確 */
.input-group > .btn {
    position: relative;
    flex: 0 0 auto;
}

.input-group > .input-group-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* ========================================
   5. 確保 Bootstrap 5 相容性
   ======================================== */

/* Bootstrap 5 的 input-group 不再需要 -append/-prepend */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 檔案上傳特殊處理：確保與 input-group-text 無縫連接 */
.input-type02.upload_file {
    display: flex;
    align-items: stretch;
}

.input-type02.upload_file .label-text {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.input-type02.upload_file .form-control {
    flex: 1 1 auto;
}

.input-type02.upload_file .input-group-text {
    flex: 0 0 auto;
}