/* ========== 摺疊式公告系統樣式 (Toast UI 整合版) ========== */


/* 1. 容器與基礎設定 */

.announcement-accordion {
    max-width: 1000px;
    margin: 0 auto 32px auto;
    position: relative;
    padding-top: 10px;
}

.announcement-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
    touch-action: pan-y;
}

.announcement-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* 2. 標題區樣式 */

.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.announcement-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.announcement-item-title {
    margin: 0 !important;
    font-weight: bold;
}

.collapse-icon {
    font-size: 1em;
    color: #999;
    transition: transform 0.15s ease;
    min-width: 20px;
}

.announcement-item.expanded .collapse-icon {
    transform: rotate(90deg);
}


/* 3. 公告內容與圖片控制 (核心修正) */

.announcement-body {
    max-height: 0;
    overflow: hidden;
    transition: none !important;
    /* 點擊即開，不卡頓 */
}

.announcement-item.expanded .announcement-body {
    max-height: 5000px;
}

.announcement-content-display {
    padding: 20px;
    font-size: 1.05em;
    line-height: 1.7;
}


/* 解決圖片炸開：強制限制寬度 */

.announcement-content-display p {
    /* 讓段落恢復正常文字排列 */
    display: block !important;
    line-height: 1.7;
    margin-bottom: 10px !important;
}


/* 針對並排的圖片進行優化 */

.announcement-content-display img {
    /* 改回 inline-block，這樣圖片會像文字一樣排隊 */
    display: inline-block !important;
    /* 設定圖片寬度，例如並排兩張 */
    width: calc(50% - 10px) !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: top;
    margin: 5px !important;
    border-radius: 8px;
    object-fit: cover;
}


/* 如果只有一張圖片，讓它恢復原本寬度 */

.announcement-content-display img:only-child {
    width: auto !important;
    max-width: 100% !important;
}


/* 手機版自動切換回單張顯示，避免太擠 */

@media (max-width: 600px) {
    .announcement-content-display img {
        width: 100% !important;
    }
}

.announcement-content-display hr {
    border: 0 !important;
    border-top: 2px solid #ced4da !important;
    margin: 20px 0 !important;
    opacity: 1 !important;
    display: block !important;
}


/* 修正清單間距：只讓第一層有 Padding */

.announcement-content-display>ul,
.announcement-content-display>ol {
    padding-left: 2rem !important;
    margin: 10px 0;
}

.announcement-content-display ul ul,
.announcement-content-display ol ol {
    padding-left: 1.5rem;
    margin: 5px 0;
}

.announcement-item-title,
.announcement-content-display p,
.announcement-content-display h1,
.announcement-content-display h2,
.announcement-content-display h3 {
    margin-bottom: 0 !important;
}

.announcement-content-display p+p {
    margin-top: 10px !important;
}


/* 4. 管理員按鈕與功能 */

#addAnnouncementBtnContainer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

#addAnnouncementBtn {
    background: #fff;
    color: #4bbb53;
    border: 1px solid #4bbb53;
    padding: 6px 16px;
    font-size: 0.9rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

#addAnnouncementBtn:hover {
    background: #4bbb53;
    color: white;
}

.announcement-admin-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-edit-announcement {
    color: #4bbb53;
    border: 1px solid #4bbb53;
    background: transparent;
}

.btn-delete-announcement {
    color: #dc3545;
    border: 1px solid #dc3545;
    background: transparent;
}

.announcement-admin-btns button {
    padding: 4px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}


/* 5. 編輯器優化 (解決空白問題) */

.modal {
    z-index: 1060 !important;
}

.modal-body {
    overflow: visible !important;
}

#modalEditor {
    border: 1px solid #ced4da;
    border-radius: 4px;
    height: auto !important;
    min-height: 100px;
    /* 極限：超過 600px 就會停止撐大，並在內部出現捲軸 */
    max-height: 600px;
    overflow-y: auto;
    /* 確保超過極限時可以滾動 */
}

.toastui-editor-defaultUI-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid #eee !important;
}


/* 確保編輯器內部的內容區域不會預設過高 */

.toastui-editor-contents {
    padding: 10px !important;
    min-height: 50px !important;
    /* 確保有一行的高度可以點擊 */
}

.toastui-editor-contents img {
    max-width: 150px !important;
    /* 編輯時縮小，方便看文字 */
    max-height: 150px !important;
    height: auto !important;
    display: inline-block !important;
    margin: 5px !important;
    border: 1px solid #eee;
}


/* 讓編輯器的背景看起來更清爽 */

.toastui-editor-defaultUI {
    border: none !important;
    height: auto !important;
}

.toastui-editor-ww-container,
.toastui-editor-contents {
    height: auto !important;
    min-height: 150px;
}


/* 1. 強制讓編輯器內的橫線 (hr) 顯現 */

.toastui-editor-contents hr {
    border: 0 !important;
    border-top: 2px solid #ced4da !important;
    /* 增加粗細到 2px 並加深顏色 */
    margin: 15px 0 !important;
    opacity: 1 !important;
    display: block !important;
    height: 0 !important;
}


/* 拖曳把手樣式 */

.drag-handle {
    cursor: grab;
    color: #ccc;
    font-size: 1.2rem;
}

.announcement-item.ghost {
    opacity: 0.5;
    background: #e8f5e9;
    border: 1px dashed #4bbb53;
}


/* 6. 手機版響應式 */

@media (max-width: 600px) {
    .announcement-header {
        padding: 12px 15px;
    }
    .announcement-content-display {
        padding: 15px;
    }
    .announcement-admin-btns button {
        padding: 4px 8px;
    }
}