/* 平常瀏覽網頁時，確保這個標題絕對隱藏不顯示 */
.print-only-title {
    display: none !important;
}

/* ==========================================
   友善列印專用樣式 (Print Style)
   ========================================== */
@media print {
    /* 控制紙張邊界，讓列印範圍左右加大、並且強烈靠上 */
    @page {
        size: A4 portrait;   
        margin: 0.5cm 1.2cm;  /* 將上方留白縮小至 0.5cm，文字就會強制靠上 */
    }

    /* 1. 隱藏網頁干擾元素 */
    header, footer, nav, .btn, .nav-tabs, .bi-play-circle-fill, .bi-broadcast, 
    #helper-bubble, #helper-window,
    .list-group-item.text-center.py-5,
    .service { 
        display: none !important;
    }

    /* 2. 解除原本網頁的隱藏狀態（確保演出、播送兩個 Pane 都能同時被列印出來） */
    .tab-content, 
    .tab-pane, 
    .d-none:not(.print-only-title),
    #performance-pane, 
    #broadcast-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 3. 移除容器寬度限制與多餘的上下內外距，並徹底拔除潛在的垂直邊框直線 */
    body, 
    .container, 
    .container-fluid, 
    .panel-body,
    .service-main,
    .service-top,
    .panel,
    .panel-default,
    .panel-collapse {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important; /* 確保頂端完全貼合靠上 */
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: #fff !important;
        color: #000 !important;
        font-family: "Times New Roman", "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
        font-size: 11pt !important; /* 微調字級，讓長條文在 A4 上排版更緊湊 */
        border: none !important;    /* 🛠️ 強制移除任何可能的面板邊框線 */
        box-shadow: none !important;
    }

    /* 強制讓內文的所有 <hr /> 在紙張上印出清晰的水平細線 */
    hr {
        display: block !important;
        border: none !important;
        border-top: 1px solid #000 !important; /* 純黑 1px 法律公文線 */
        opacity: 0.3 !important;                 /* 適度淡化避免視覺太重 */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* 🛠️ 徹底拔除卡片與清單容器的任何左、右或四周邊框線 */
    .card, .card-body, .card-header, .card-footer {
        border: none !important;
        border-left: none !important;  /* 🛠️ 針對左側邊框線強制解鎖 */
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 🛠️ 徹底拔除 Bootstrap List Group 的所有外框線 */
    .list-group, .list-group-item {
        border: none !important;
        border-left: none !important;  /* 🛠️ 強制蒸發左側的淡灰色垂直線 */
        background: transparent !important;
        padding: 0 !important; /* 消除 list-group 的上下內距 */
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. 強制保留您極力調校好的 Flexbox 對齊結構 */
    .d-flex {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important; 
    }
    .flex-shrink-0 {
        flex-shrink: 0 !important;
    }

    /* 5. 確保標題與公告緣由的顏色在黑白列印時清晰可見 */
    .text-dark, .text-muted, h3, h5, strong {
        color: #000 !important; 
    }
    .text-primary {
        color: #000 !important;
        font-weight: bold;
    }
    
    /* 讓公告緣由區塊在紙張上呈現淡淡的灰色外框 */
    .bg-light {
        background: #fafafa !important;
        border: 1px solid #ccc !important;
    }

    /* 6. 防斷行優化 */
    h3, h5, .mb-4 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    li, .d-flex {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 7. 控制自訂列印標題靠上與縮減邊距 */
    .print-only-title {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0 !important;    /* 頂端不留空 */
        margin-bottom: 10px !important; /* 縮減大標題跟卡拉OK條文之間的間距 */
    }
    
    /* 縮減列印專用黑線的上下間距，消除空白層 */
    .print-only-title hr {
        display: block !important;
        border-top: 1.5px solid #000 !important;
        opacity: 1 !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }

 /* ========================================================
       8. 🛠️ 最終修正：點對點精準強制換頁（解除舊版 panel 限制）
       ======================================================== */
    
    /* 破除 Bootstrap 舊版面板阻擋分頁的魔咒，強制轉換為可切斷的區塊 */
    .panel,
    .panel-default,
    .panel-collapse,
    .panel-body {
        page-break-inside: auto !important;
        break-inside: auto !important;
        float: none !important;  /* 移除可能阻擋換頁的浮動屬性 */
        position: relative !important;
    }

    /* 核心：精準截斷，將個別授權整組無條件推到下一頁 A4 紙的最頂端 */
    .print-break-here {
        page-break-before: always !important; /* 舊版瀏覽器支援 */
        break-before: page !important;        /* 現代瀏覽器標準 */
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0.5cm !important;        /* 換頁後頂端保留舒適的公文留白 */
    }

    /* 🛠️ 同步調整優化：消除個別授權標題區塊（panel-heading）的背景色與框線 */
    .print-break-here .panel-heading {
        background: transparent !important;
        border: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 15px !important;
    }

    /* 讓個別授權的主標題文字加粗並呈現純黑 */
    .print-break-here .panel-title {
        color: #000 !important;
        font-weight: bold !important;
        font-size: 14pt !important; /* 符合大項目的精緻字級 */
    }

    /* 確保「定義」下方的內文不會因為換頁而縮排跑位，維持完美的對齊水平線 */
    .print-break-here .panel-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}