html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f3f5f8;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.bd-callout {
    padding: 1rem;
    margin-top: 0rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.bd-callout-info {
    border-left-color: #004098;
}

.bd-callout-finish {
    border-left-color: #bf944e;
}

.nav-link:hover,
.nav-link:active {
    /*background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
    border-radius: 18px;*/
    border-bottom: solid 2px #004587;
    color: #004587 !important;
    font-weight: 700;
}

.news-more-link {
    color: #004491;
}
    .news-more-link:hover {
        color: #002d62;
    }

/* 設定箭頭的預設狀態與漸變時間 (相當於 Tailwind 的 transition) */
.news-more-link .arrow-icon {
    transition: transform 0.2s ease-in-out;
}

/* 當滑鼠懸浮在外層時，內層箭頭向右位移 4px (相當於 Tailwind 的 group-hover:translate-x-1) */
.news-more-link:hover .arrow-icon {
    transform: translateX(4px);
}

/* 最新消息卡片滑過效果 */
.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.125) !important;
    }

.news-border div:nth-child(1) .card {
    --bs-border-opacity: 1;
    border-color: #f1962d !important;
}

.news-border div:nth-child(1) .card-body div.text-more span {
    color: #f1962d !important;
}

.news-border div:nth-child(2) .card {
    --bs-border-opacity: 1;
    border-color: #004388 !important;
}
.news-border div:nth-child(2) .card-body div.text-more span {
    color: #004388 !important;
}

.news-border div:nth-child(3) .card {
    --bs-border-opacity: 1;
    border-color: #00a095 !important;
}
.news-border div:nth-child(3) .card-body div.text-more span {
    color: #00a095 !important;
}

/*Form*/
.oaa-form-group {
    margin-top: 0.7rem;
}

    .oaa-form-group label {
        font-weight: bold;
        display: block;
        color: #374151;
        margin-bottom: 0.5rem;
    }

    .oaa-form-group input:not([type="radio"]):not([type="checkbox"]), .pre-form-group select {
        border-bottom: 2px solid #c0c4c9;
    }

        .oaa-form-group input:not([type="radio"]):not([type="checkbox"]).input-validation-error, .pre-form-group select.input-validation-error {
            border-bottom: 2px solid red;
        }

    .oaa-form-group span[id$="-error"] {
        color: #ed4761;
    }

.text-caption {
    color: #d02372;
}

.text-note {
    color: #004098;
    font-size: 0.8rem;
}

.title-area {
    background-image: linear-gradient(-20deg, #c22422 0%, #ffdada 100%);
    display: inline-block;
    line-height: 0.12em;
    padding-bottom: 0.5em;
    padding-left: .25rem;
    padding-right: 3.5rem;
    font-weight: bold;
    font-size: larger;
}

a.login-link {
    color: #27618d;
    text-decoration: none;
}

    a.login-link:hover {
        color: #7aa7c7;
    }

/*Button*/
.btn.reg-button {
    font: inherit;
    padding: 0.5em;
    width: 100%;
    font-weight: 500;
    background-color: #004098;
    border-radius: 6px;
    color: #FFF;
    border: 0;
}

    .btn.reg-button:hover {
        background-color: #78acd3;
        color: #1a5683;
        font-weight: 700;
    }

.btn.login-button {
    font: inherit;
    font-weight:800 !important;
}
    .btn.login-button:hover {
        background-color: #004587;
        border-color: #004587;
    }

/*STEP 橫式*/
.bs-stepper .step-trigger.no-button {
    pointer-events: none;
}

.bs-stepper .step-none .step-trigger .bs-stepper-circle {
    color: #fff;
    background-color: #bfbfbf7f;
}

.bs-stepper .step-none .step-trigger .bs-stepper-label {
    color: #bfbfbf7f;
}

.bs-stepper .step-active .step-trigger .bs-stepper-circle {
    color: #fff;
    background-color: #19988d;
}

.bs-stepper .step-active .step-trigger .bs-stepper-label {
    color: #19988d;
}

.bs-stepper .step-finish .step-trigger .bs-stepper-circle {
    color: #fff;
    background-color: #bf944e;
}

.bs-stepper .step-finish .step-trigger .bs-stepper-label {
    color: #bf944e;
}

/*STEP*/
.step {
    position: relative;
    min-height: 1em;
    color: gray;
}

.title {
    line-height: 1.5em;
    font-weight: bold;
    font-size: 2em;
}

.caption {
    font-size: 1em;
    font-weight: bold;
}

.step .caption .bd-callout {
    color: gray;
}

.step + .step {
    margin-top: 3em
}

.step > div:first-child {
    position: static;
    height: 0;
}

.step > div:not(:first-child) {
    margin-left: 3em;
    padding-left: 1em;
}
/* Circle */
.circle {
    background: gray;
    position: relative;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
}
    /* Vertical Line */
    .circle:after {
        content: ' ';
        position: absolute;
        display: block;
        top: 1px;
        right: 50%;
        bottom: 1px;
        left: 50%;
        height: 100%;
        width: 1px;
        transform: scale(1, 2);
        transform-origin: 50% -100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: -1;
    }

.circle-h1:after {
    height: 280%;
    transform-origin: 50% 0%;
}

.step:last-child .circle:after {
    display: none
}

.step.step-active {
    color: #004098
}

    .step.step-active .circle {
        background-color: #004098;
    }

.step.step-finish {
    color: #bf944e;
}

    .step.step-finish .circle {
        background-color: #bf944e;
    }


/* ------------------------------------ */
/* EditProfile表單設計區 */
/* ------------------------------------ */
/* 獨立懸浮卡片設計 */
.vibrant-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(12, 34, 64, 0.05);
    overflow: hidden; /* 確保頂部彩色條符合圓角 */
    margin-bottom: 2.5rem;
    transition: transform 0.2s ease;
}

    .vibrant-card:hover {
        transform: translateY(-2px);
    }

/* 頂部全寬彩色橫條 (Top Accent Bar) */
.accent-bar {
    height: 6px;
    width: 100%;
}

.bar-blue {
    background-color:#004e8b;
}
/* 朝陽藍 */
.bar-yellow {
    background-color: #f1962d;
}
/* 活力黃 */
.bar-green {
    background-color: #00988e;
}
/* 翠綠色 */
.bar-gold {
    background-color: #c2a178;
}

.text-gold {
    color: #bf944e;
}
/* 朝陽金 */

/* 區塊標題字體 */
.vibrant-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #3C3C3C;
}

/* 微光提示框 (鎖定欄位提示) */
.info-light-box {
    background-color: #f0f5fa;
    border-left: 4px solid #004491;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #004491;
}

/* 輸入框微互動外觀 */
.form-label {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.form-check-input {
    border-color: #a5a4a4;
}

.form-control, .form-select {
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}

    .form-control:focus, .form-select:focus {
        border-color: #004491;
        box-shadow: 0 0 0 0.25rem rgba(0, 68, 145, 0.15);
    }
/* 唯讀鎖定狀態外觀 */
.form-control-readonly {
    background-color: #f8f9fa !important;
    color: #6c757d;
    border-style: dashed;
}

/* 活潑的高亮勾選框 */
.form-check-input:checked {
    background-color: #e69500;
    border-color: #e69500;
}

.form-check-input-blue:checked {
    background-color: #004491;
    border-color: #004491;
}

.form-check-input-green:checked {
    background-color: #00988e;
    border-color: #00988e;
}

.pro-from-group label {
    font-weight: bold;
    color: #374151;
    font-size: 1rem;
}

/* 底部儲存按鈕 */
.btn-theme-save {
    background-color: #004491;
    color: #fff;
    font-weight: 500;
    padding: 0.6rem 2.5rem;
    border-radius: 10px;
    transition: all 0.2s;
}

    .btn-theme-save:hover {
        background-color: #002d62;
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 68, 145, 0.2);
    }

/*提案單頁面*/

/* 標題左側小藍條 */
.proposal-title-bar {
    width: 5px;
    height: 26px;
    background-color: #004491;
    border-radius: 10px;
}

/* 提案單主卡片 */
.proposal-container-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(12, 34, 64, 0.05);
    overflow: hidden;
}

/* 大會藍高對比表格標頭 */
.table-vibrant-header {
    background-color: #004491 !important;
    color: #ffffff !important;
    font-weight: 600;
}

    .table-vibrant-header th {
        padding: 1rem 0.75rem !important;
    }

/* 新增提案單按鈕優化 */
.btn-add-proposal {
    background-color: #004491;
    color: #ffffff;
    font-weight: 500;
    padding: 0.55rem 1.5rem;
    border-radius: 50px; /* 膠囊圓角 */
    transition: all 0.2s ease-in-out;
    border: none;
}

    .btn-add-proposal:hover {
        background-color: #002d62;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 68, 145, 0.25);
        transform: translateY(-1px);
    }

/* 狀態標籤微調 */
.badge-status {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

/* 附件微光按鈕 */
.attachment-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s;
}

    .attachment-btn:hover {
        background-color: #e9ecef;
        color: #495057;
        border-color: #ced4da;
    }

.rotate-45 {
    transform: rotate(45deg);
    display: inline-block; /* 确保旋转属性生效 */
}

.bold-icon {
    /* Adds a 1px border using the current text color */
    -webkit-text-stroke: 1px currentColor;
}

/* 🌟 全新自訂：側邊浮動快選列樣式 */
.sidebar-quick-nav {
    position: sticky;
    top: 40px; /* 捲動時距離視窗頂部的距離 */
    z-index: 100;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(12, 34, 64, 0.06);
    padding: 1rem;
    border: 1px solid #e9ecef;
}

    /* 側邊選單按鈕優化 */
    .sidebar-quick-nav .nav-link {
        color: #495057;
        font-weight: 500;
        padding: 0.8rem 1.2rem;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
    }

        .sidebar-quick-nav .nav-link:last-child {
            margin-bottom: 0;
        }

        .sidebar-quick-nav .nav-link i {
            width: 24px;
            font-size: 1.1rem;
        }

        .sidebar-quick-nav .nav-link:hover {
            color: #004491;
            background-color: rgba(0, 68, 145, 0.04);
            border-bottom: 0;
        }

        /* 滾動監聽啟動時的亮起樣式 (融合大會科技藍) */
        .sidebar-quick-nav .nav-link.active {
            color: #ffffff !important;
            background-color: #004491 !important;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(0, 68, 145, 0.25);
        }

/* 大會視覺活潑卡片 */
.info-section-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(12, 34, 64, 0.04);
    overflow: hidden;
    margin-bottom: 3rem;
    scroll-margin-top: 150px; /* 滾動到定位時保留上方間距 */
}

/* 頂部全寬彩色橫條 (呼應首頁風格) */
.accent-bar {
    height: 6px;
    width: 100%;
}

.bar-blue {
    background-color: #004491;
}
/* 科技藍 */
.bar-orange {
    background-color: #e69500;
}
/* 活力橘 */
.bar-green {
    background-color: #008774;
}
/* 翠綠色 */

/* 標題與內文質感 */
.section-main-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
}

.info-label {
    font-weight: 700;
    color: #004491;
    font-size: 0.95rem;
}

/* 車次與房型精緻表格表格 */
.custom-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
}

/* 提醒文字框 */
.notice-box {
    background-color: #fffdf0;
    border-left: 4px solid #e69500;
    border-radius: 6px;
}

.notice-box-blue {
    background-color: #f2f6fa;
    border-left: 4px solid #004491;
    border-radius: 6px;
}

.table-custom th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
}

/* 時間戳章區塊 */
.time-stamp-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #efefef;
}

/* 內文區域排版 */
.news-content-text {
    color: #333333;
    font-size: 1.05rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* 附件下載質感按鈕 */
.download-badge-btn {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

    .download-badge-btn:hover {
        background-color: #f8f9fa;
        border-color: #dc3545; /* 滑過時框線帶點 PDF 紅色暗示 */
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

.file-icon-pdf {
    color: #dc3545; /* PDF 經典紅 */
    font-size: 1.6rem;
}

.file-name-text {
    color: #004491;
    font-weight: 500;
}

.download-badge-btn:hover .file-name-text {
    color: #002d62;
    text-decoration: underline;
}