.flex{
  display:flex;
  width: 95vw;;
  height: 95vh;
}

.flex div{
  margin:auto;
}

/* planContent specific styles moved from inline to shared CSS */
.plan-content table th.no-wrap,
.plan-content table td.no-wrap {
    white-space: nowrap;
    vertical-align: middle;
    width: auto;
}

/* 產業證照地圖樣式 */
.certificate-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.certificate-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    flex: 1 1 calc(50% - 20px);
    min-width: 300px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.certificate-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.certificate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5cb85c;
}

.certificate-header strong {
    font-size: 1.1em;
    color: #333;
    flex: 1;
}

.certificate-level {
    background-color: #5cb85c;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-left: 10px;
}

.certificate-body p {
    margin: 8px 0;
    line-height: 1.6;
    color: #666;
}

.certificate-body p i {
    color: #5cb85c;
    margin-right: 5px;
}

.certificate-body .text-muted {
    color: #999;
    font-size: 0.95em;
}

.certificate-body .text-danger {
    color: #d9534f;
    font-weight: bold;
}

/* Ensure small red helper/error text has sufficient contrast on light backgrounds */
small.text-danger, .text-danger small {
    color: #b30000 !important; /* darker red for higher contrast against white */
    font-weight: 600 !important; /* slightly stronger weight helps readability */
}

/* 高對比的錯誤 / 提示文字，確保 WCAG 對比度 */
.text-danger-contrast {
    color: #990000 !important;
    font-weight: 600 !important;
}

/* Helper note style for small explanatory text: slightly larger than 0.5rem and readable */
.helper-note {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

/* 響應式設計 */
@media (max-width: 991px) {
    .certificate-item {
        flex: 1 1 100%;
        min-width: 250px;
    }
    
    .certificate-header strong {
        font-size: 1em;
    }
    
    .certificate-body p {
        font-size: 0.9rem;
    }
}

@media (max-width: 575px) {
    .certificate-item {
        padding: 10px;
    }
    
    .certificate-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .certificate-level {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .certificate-body p {
        margin: 5px 0;
        font-size: 0.85rem;
    }
}

/* 產業證照地圖表格美化 */
.plan-content .certificate-table {
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 30px;
}

.plan-content .certificate-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.plan-content .certificate-table thead th {
    color: #fff;
    font-weight: 600;
    padding: 16px 12px;
    text-align: left;
    border: none;
    font-size: 0.875rem;
    letter-spacing: 0.3px;
}

.plan-content .certificate-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.plan-content .certificate-table tbody tr:hover {
    background-color: #f8f9ff;
    transform: scale(1.005);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.plan-content .certificate-table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    color: #444;
    font-size: 0.875rem;
    line-height: 1.6;
}
.plan-content .certificate-table tbody td strong {
    color: #072a6b; /* 深藍色，與白底有高對比 */
    font-size: 0.9375rem;
    font-weight: 700;
}

.plan-content .certificate-table tbody td[rowspan] {
    background-color: #ffffff; /* 改為純白以確保文字對比 */
    border-right: 1px solid #e8eaf6;
}

.plan-content .certificate-table .text-muted {
    color: #aaa;
    font-style: italic;
    font-size: 0.8125rem;
}

/* 等級標籤樣式 */
.plan-content .certificate-table .level-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.plan-content .certificate-table .level-badge.level-a {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.plan-content .certificate-table .level-badge.level-b {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

.plan-content .certificate-table .level-badge.level-c {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
}

.plan-content .certificate-table .level-badge.level-none {
    background: linear-gradient(135deg, #a8a8a8 0%, #6c757d 100%);
    color: #fff;
}

.plan-content .certificate-table .level-badge.level-custom {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

/* 課程資訊樣式 */
.plan-content .certificate-table .course-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-content .certificate-table .course-info i {
    color: #667eea;
    font-size: 1rem;
}

.plan-content .certificate-table .department-tag,
.plan-content .certificate-table .type-tag {
    display: inline-block;
    padding: 3px 10px;
    background-color: #dbe9ff; /* 更深的淺藍底，提高底色對比 */
    color: #021a4a; /* 非常深的藍色文字，確保與底色/白底高對比 */
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* 考照場域標籤 */
.plan-content .certificate-table .exam-location {
    display: inline-block;
    padding: 4px 10px;
    background-color: #fff3db; /* 溫暖但更可讀的底色 */
    color: #5a2f00; /* 深橘褐，與底色/白底擁有更好對比 */
    border-radius: 6px;
    font-size: 0.8125rem;
    border-left: 3px solid #b45309;
    font-weight: 700;
}

/* 響應式設計 */
@media (max-width: 1199px) {
    .plan-content .certificate-table {
        font-size: 0.8125rem;
    }
    
    .plan-content .certificate-table thead th,
    .plan-content .certificate-table tbody td {
        padding: 10px 8px;
    }
}

@media (max-width: 991px) {
    .plan-content .certificate-table {
        font-size: 0.75rem;
    }
    
    .plan-content .certificate-table thead th,
    .plan-content .certificate-table tbody td {
        padding: 8px 6px;
    }
    
    .plan-content .certificate-table .level-badge {
    font-size: 0.6875rem;
        padding: 3px 8px;
    }
}

@media (max-width: 767.98px) {
    /* 學程內容頁表格強化 */
    .plan-content table.table {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    
    .plan-content table.table th,
    .plan-content table.table td {
        white-space: nowrap;
        padding: 8px 6px !important;
        font-size: 0.8rem;
    }
    
    .plan-content .table-responsive-custom {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .plan-content .certificate-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.75rem;
    }
    
    .plan-content .certificate-table thead th {
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 6px 4px;
    }
    
    .plan-content .certificate-table tbody td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .plan-content .certificate-table .level-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    
    .plan-content .certificate-table .department-tag,
    .plan-content .certificate-table .type-tag,
    .plan-content .certificate-table .exam-location {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
}

@media (max-width: 575.98px) {
    .certificate-item {
        padding: 12px;
        min-width: 100%;
    }
    
    .certificate-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .certificate-header strong {
        font-size: 0.95rem;
    }
    
    .certificate-level {
        margin-left: 0;
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    
    .certificate-body p {
        margin: 6px 0;
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .plan-content .certificate-table {
        font-size: 0.7rem;
    }
    
    .plan-content .certificate-table thead th,
    .plan-content .certificate-table tbody td {
        padding: 5px 3px;
        font-size: 0.7rem;
    }
    
    .plan-content .certificate-table .level-badge {
        font-size: 0.65rem;
        padding: 2px 5px;
    }
    
    .plan-content .certificate-table .department-tag,
    .plan-content .certificate-table .type-tag,
    .plan-content .certificate-table .exam-location {
        font-size: 0.65rem;
        padding: 2px 5px;
    }
}

/* Card styles for contact and statistics */
.card {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(34,41,47,0.06);
    overflow: hidden;
}
.card-body {
    padding: 12px 16px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.contact-content h6 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: #333;
}
.contact-content p {
    margin: 0;
    color: #555;
    line-height: 1.4;
}
.contact-actions a {
    color: #007bff;
    text-decoration: none;
}
.contact-actions a:hover {
    text-decoration: underline;
}

/* Statistics card */
.stats-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px auto 8px; /* reduce bottom gap to tighten layout */
    max-width: 1140px; /* align with typical container width */
    padding: 8px 6px;
    box-sizing: border-box;
}
.stats-card {
    flex: 1 1 calc(25% - 16px);
    min-width: 180px;
    padding: 12px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(34,41,47,0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stats-card .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
}
.stats-card .label {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 991.98px) {
    .stats-card { flex: 1 1 calc(50% - 16px); }
}

@media (max-width: 575.98px) {
    .stats-card { flex: 1 1 100%; }
    .contact-card { flex-direction: row; }
}

@media (max-width: 479.98px) {
    .stats-card { flex: 1 1 100%; }
    .contact-card { flex-direction: row; }
}

/* Compact footer contact grid */
.footer-contact-grid {
    max-width: 1140px;
    margin: 8px auto 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    align-items: start;
}
.footer .contact-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    background: transparent; /* keep footer dark, use subtle border */
    border: 1px solid rgba(255,255,255,0.06);
}
.footer .contact-item .contact-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
}
.footer .contact-item .contact-icon img {
    width: 20px;
    height: 20px;
}

/* Icon color variants */
.footer .contact-item.contact-address .contact-icon { background: #FFB74D; }
.footer .contact-item.contact-phone .contact-icon   { background: #4FC3F7; }
.footer .contact-item.contact-fax .contact-icon     { background: #A5D6A7; }
.footer .contact-item.contact-email .contact-icon   { background: #9575CD; }

/* Make the icon image white regardless of original image color */
.footer .contact-item .contact-icon img {
    filter: invert(1) brightness(2) saturate(0);
}

/* Slight hover emphasis */
.footer .contact-item:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); transition: all .18s ease; }
.footer .contact-text h6 {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}
.footer .contact-text p {
    margin: 2px 0 0 0;
    color: #dcdfe3; /* lighter text */
    font-size: 0.9rem;
}
.footer .contact-text a { color: #8ec7ff; text-decoration: none; }
.footer .contact-text a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .footer-contact-grid { grid-template-columns: 1fr; }
}

/* reduce h5 left padding inside footer to align with grid */
.footer h5 { padding-left: 0; margin-bottom: 14px; }
/* make footer top padding smaller to reduce vertical gap */
section.footer {
    padding-top: 12px;
}

/* Improve contrast for footer headings and contact text to meet WCAG */
.footer {
    /* keep background dark if present, ensure text defaults to high-contrast white */
    color: #ffffff !important;
}

/* Explicitly target the elements reported by the scanner */
.footer h1.footer-title,
.footer h2.contact-heading,
.footer .contact-text h6 {
    color: #ffffff !important; /* full white for maximum contrast */
    font-weight: 700; /* ensure stronger weight for readability */
}

.footer .contact-text p,
.footer .contact-item .contact-text p {
    color: #e9f2fb !important; /* near-white for paragraph text (better contrast) */
    line-height: 1.5;
}

.footer .contact-text a {
    color: #9fd2ff !important; /* brighter link color on dark background */
    text-decoration: underline;
}

/* Ensure very long inline contact strings wrap and remain readable */
.footer .contact-text, .footer .contact-text p {
    word-break: break-word;
    white-space: normal;
}

/* Buttons: moved from editPlan.html inline styles for reuse */
.form-actions .btn{
    padding: .5rem .9rem;
    border-radius: .375rem;
    font-weight:600;
}

@media (max-width:575.98px){
    .form-actions .btn{ display:block; width:100%; margin:0 0 .5rem 0 !important; box-sizing:border-box; text-align:center; }
    .form-actions .btn + .btn{ margin-left:0 !important; }
    /* override bootstrap spacing helpers on small screens */
    .form-actions .ml-0{ margin-left:0 !important; }
    .form-actions .ml-1{ margin-left:0 !important; }
    .form-actions .ml-2{ margin-left:0 !important; }
    .form-actions .ml-3{ margin-left:0 !important; }
}

.form-actions .btn:focus-visible{
    outline:3px solid rgba(13,110,253,0.25);
    outline-offset:2px;
}

.btn-info{ background-color:var(--primary); border-color:var(--primary); color:#fff; }
.btn-info:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(13,110,253,0.12); }

.btn-outline-danger{ border-color:var(--danger); color:var(--danger); }
.btn-outline-danger:hover{ background:var(--danger); color:#fff; }

.btn-secondary{ background:var(--secondary); border-color:var(--secondary); color:#fff; }

.form-control img{ max-width:100%; height:auto; }

/* Design tokens */
:root{
    --primary: #0d6efd;
    --primary-strong: #0b5ed7;
    --danger: #dc3545;
    --secondary: #6c757d;
    --btn-compact-width: 96px;
    --btn-min-height: 36px;
}

/* Make form buttons inside form-group responsive: full-width on small screens */
@media (max-width:575.98px){
    /* buttons inside any form-group column become block and full width */
    .container-fluid .form-group .col-sm-9 .btn,
    .container .form-group .col-sm-9 .btn,
    .form-group .col-md-9 .btn {
        display:block;
        width:100%;
        margin:0 0 .5rem 0 !important;
        box-sizing:border-box;
        text-align:center;
        white-space:normal; /* allow wrapping */
    }

    /* If there are multiple buttons in same column, remove left margin helpers */
    .container-fluid .form-group .col-sm-9 .btn + .btn,
    .form-group .col-sm-9 .btn + .btn { margin-left:0 !important; }

    /* Make input-group buttons also stack nicely */
    .input-group .btn { width:100%; }
}

/* Table action cell: center align buttons in action columns */
.fixed-header-table .table-action-cell {
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.fixed-header-table .table-action-cell .btn,
.fixed-header-table .table-action-cell a.btn {
    display: inline-block !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width:575.98px){
    .fixed-header-table .table-action-cell .btn,
    .fixed-header-table .table-action-cell a.btn {
        width: 70px;
        max-width: 70px;
        padding: .3rem .4rem;
        font-size: 0.8rem;
    }
}

/* view-level action buttons (pages with a top action bar) */
.view-actions .btn{ margin-right:.5rem; }
/* Improve contrast for action buttons in view headers (e.g. managementCarousels) */
.view-actions .btn,
.view-actions .btn.btn-info,
.rwd-btn-bar .btn-info,
.rwd-btn-bar-right .btn-info {
    background-color: var(--primary-strong) !important; /* slightly darker primary */
    border-color: var(--primary-strong) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.view-actions .btn:hover,
.view-actions .btn:focus,
.rwd-btn-bar .btn-info:hover,
.rwd-btn-bar .btn-info:focus {
    background-color: #064ea8 !important; /* darker hover */
    border-color: #064ea8 !important;
    color: #ffffff !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}
@media (max-width:575.98px){
    .view-actions .btn{ display:block; width:100%; margin:0 0 .5rem 0 !important; }
}

/* Management table tweaks for better mobile layout */
@media (max-width:767.98px){
    .fixed-header-table td, .fixed-header-table th{ padding:8px 10px; font-size:0.9rem; }
    .fixed-header-table td:nth-child(1), .fixed-header-table th:nth-child(1){ width:40%; }
    .fixed-header-table td:nth-child(2), .fixed-header-table th:nth-child(2){ width:20%; }
    .fixed-header-table td:nth-child(3), .fixed-header-table th:nth-child(3){ width:20%; }
    .fixed-header-table td:nth-child(4), .fixed-header-table th:nth-child(4){ width:10%; }
    .fixed-header-table td:nth-child(5), .fixed-header-table th:nth-child(5){ width:10%; text-align:center; }
    /* small action buttons inside table */
    .fixed-header-table td .btn{ padding:.25rem .45rem; font-size:0.82rem; min-height:34px; align-items:center; justify-content:center; }
}

@media (max-width:575.98px){
    /* tighter spacing and ensure delete button remains compact */
    .fixed-header-table td, .fixed-header-table th{ padding:6px 8px; font-size:0.88rem; }
    .fixed-header-table td .btn{ width:auto; display:inline-flex; }
}

/* Carousels list: responsive card layout */
.carousels-list{ display:flex; flex-direction:column; gap:12px; }
.carousel-item{ display:flex; gap:12px; align-items:center; padding:10px; background:#fff; border:1px solid #eef0f3; border-radius:6px; }
.carousel-item .carousel-image{ flex:0 0 240px; max-width:240px; }
.carousel-item .carousel-image img{ width:100%; height:auto; display:block; border-radius:4px; }
.carousel-item .carousel-meta{ flex:1; display:flex; flex-direction:column; justify-content:center; }

@media (max-width:767.98px){
    .carousel-item{ flex-direction:row; }
    .carousel-item .carousel-image{ flex:0 0 180px; max-width:180px; }
}

@media (max-width:575.98px){
    .carousel-item{ flex-direction:column; align-items:stretch; }
    .carousel-item .carousel-image{ flex:0 0 auto; max-width:100%; }
    .carousel-item .carousel-meta{ align-items:center; text-align:center; }
    .carousel-item .carousel-meta .btn{ width:120px; align-self:center; }
    .carousels-controls .form-control{ display:block; width:100%; margin-bottom:.5rem; }
    .view-actions .btn{ display:block; width:100%; margin:0 0 .5rem 0 !important; }
}

/* Reusable compact button for table/action contexts */
.btn-compact{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.35rem .6rem;
    font-size:0.9rem;
    line-height:1;
    min-width:88px;
    height:var(--btn-min-height);
    box-sizing:border-box;
}

@media (max-width:575.98px){
    /* keep compact buttons a fixed small size on very small screens where appropriate */
    .btn-compact{ width:var(--btn-compact-width); min-width:var(--btn-compact-width); }
}

/* Admin List Table Responsive Optimization */
.fixed-header-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fixed-header-table {
    width: 100%;
    margin-bottom: 0;
}

/* Desktop: ensure action columns are centered and proper width */
.fixed-header-table thead th:nth-child(4),
.fixed-header-table thead th:nth-child(5) {
    text-align: center !important;
    vertical-align: middle !important;
    width: 100px;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.fixed-header-table tbody td:nth-child(4),
.fixed-header-table tbody td:nth-child(5) {
    text-align: center !important;
    vertical-align: middle !important;
    width: 100px;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Ensure links inside management tables have sufficient contrast and visible focus */
.fixed-header-table a,
.fixed-header-table td a {
    color: #083e8a !important; /* darker blue for strong contrast on white */
    font-weight: 600 !important;
    text-decoration: none !important;
}
.fixed-header-table a:hover,
.fixed-header-table a:focus {
    color: #0b5ed7 !important; /* brighter primary on hover/focus */
    text-decoration: underline !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}

/* If links appear inside small action cells, keep them readable */
.fixed-header-table .table-action-cell a {
    color: #083e8a !important;
    font-weight: 600 !important;
}

/* Export buttons in tables: increase background darkness for sufficient contrast with white text */
.export-btn, .btn-compact.export-btn {
    background-color: #083e8a !important; /* darker blue - meets contrast for small white text */
    border-color: #083e8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.export-btn:hover, .export-btn:focus, .btn-compact.export-btn:hover, .btn-compact.export-btn:focus {
    background-color: #062b66 !important;
    border-color: #062b66 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}

/* Manager action UCAN / success buttons: ensure high contrast for white text */
.manager-action-group .rwd-btn-bar .btn-success,
.rwd-btn-bar .btn-success,
.rwd-btn-bar-right .btn-success {
    background-color: #0b6b3b !important; /* darker green */
    border-color: #0b6b3b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.manager-action-group .rwd-btn-bar .btn-success:hover,
.manager-action-group .rwd-btn-bar .btn-success:focus,
.rwd-btn-bar .btn-success:hover,
.rwd-btn-bar .btn-success:focus,
.rwd-btn-bar-right .btn-success:hover,
.rwd-btn-bar-right .btn-success:focus {
    background-color: #064828 !important; /* darker on hover/focus */
    border-color: #064828 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}

/* Ensure icon/text inside these links inherit the visible color */
.manager-action-group .rwd-btn-bar .btn-success *,
.rwd-btn-bar .btn-success *,
.rwd-btn-bar-right .btn-success * {
    color: inherit !important;
}

/* Stronger specificity for export buttons inside management tables to avoid unexpected overrides */
.fixed-header-table a.export-btn,
.fixed-header-table .export-btn {
    background-color: #083e8a !important;
    border-color: #083e8a !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    font-weight: 700 !important;
}

.fixed-header-table a.export-btn > * {
    color: inherit !important;
}

/* Ensure outline-primary buttons inside management tables have sufficient contrast
   (targeting "權限" buttons like in `view/adminList.html`). */
.fixed-header-table .btn-outline-primary,
.fixed-header-table a.btn-outline-primary {
    color: #083e8a !important; /* darker blue for readable text on white */
    border-color: #083e8a !important;
    font-weight: 700 !important;
}
.fixed-header-table .btn-outline-primary:hover,
.fixed-header-table a.btn-outline-primary:hover,
.fixed-header-table .btn-outline-primary:focus,
.fixed-header-table a.btn-outline-primary:focus {
    background-color: #083e8a !important; /* solid dark blue on hover/focus */
    color: #ffffff !important;
    border-color: #083e8a !important;
    text-decoration: none !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}
.fixed-header-table .btn-outline-primary * { color: inherit !important; }

/* Ensure UCAN / "已完成" buttons (bootstrap .btn-primary) inside management tables
   have sufficient contrast and visible focus. This targets table rows like
   `view/printPlanMapList.html` where buttons use `.btn.btn-primary`. */
.fixed-header-table .btn.btn-primary,
.fixed-header-table .table-action-cell .btn.btn-primary {
    background-color: #083e8a !important; /* darker blue for high contrast */
    border-color: #083e8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.fixed-header-table .btn.btn-primary:hover,
.fixed-header-table .btn.btn-primary:focus,
.fixed-header-table .table-action-cell .btn.btn-primary:hover,
.fixed-header-table .table-action-cell .btn.btn-primary:focus {
    background-color: #062b66 !important;
    border-color: #062b66 !important;
    color: #ffffff !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
    text-decoration: none !important;
}
.fixed-header-table .btn.btn-primary * { color: inherit !important; }

@media (max-width: 991.98px) {
    /* Tablet adjustments */
    .fixed-header-table {
        min-width: 600px;
    }
}

@media (max-width: 767.98px) {
    /* Mobile landscape adjustments */
    .fixed-header-table thead th,
    .fixed-header-table tbody td {
        padding: 10px 6px;
        font-size: 0.9rem;
    }
    
    .fixed-header-table thead th:nth-child(4),
    .fixed-header-table thead th:nth-child(5),
    .fixed-header-table tbody td:nth-child(4),
    .fixed-header-table tbody td:nth-child(5) {
        width: 90px;
        min-width: 90px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .fixed-header-table .table-action-cell .btn,
    .fixed-header-table .table-action-cell a.btn {
        font-size: 0.85rem;
        padding: 0.3rem 0.5rem;
        min-width: 65px;
        display: inline-block !important;
    }
}

@media (max-width: 575.98px) {
    /* Mobile portrait optimizations */
    .fixed-header-table thead th,
    .fixed-header-table tbody td {
        padding: 8px 4px;
        font-size: 0.85rem;
    }
    
    .fixed-header-table {
        min-width: 500px;
    }
    
    .fixed-header-table thead th:nth-child(4),
    .fixed-header-table thead th:nth-child(5),
    .fixed-header-table tbody td:nth-child(4),
    .fixed-header-table tbody td:nth-child(5) {
        width: 75px;
        min-width: 75px;
        padding: 6px 4px !important;
    }
    
    .fixed-header-table .table-action-cell .btn,
    .fixed-header-table .table-action-cell a.btn {
        display: inline-block !important;
        width: 65px;
    }
}

@media (max-width: 479.98px) {
    /* Extra small mobile devices */
    .fixed-header-table thead th,
    .fixed-header-table tbody td {
        padding: 6px 3px;
        font-size: 0.8rem;
    }
    
    .fixed-header-table {
        min-width: 450px;
    }
    
    .fixed-header-table thead th:nth-child(4),
    .fixed-header-table thead th:nth-child(5),
    .fixed-header-table tbody td:nth-child(4),
    .fixed-header-table tbody td:nth-child(5) {
        padding: 6px 4px !important;
    }
    
    .fixed-header-table .table-action-cell .btn,
    .fixed-header-table .table-action-cell a.btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.35rem;
        min-width: 60px;
        width: 60px;
        display: inline-block !important;
    }
}

/* Skip link for keyboard users: hidden by default, visible when focused */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* When an element needs to be revealed on focus (e.g. skip link), use this */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip-link:focus{
    position:fixed;
    left:1rem;
    top:1rem;
    width:auto;
    height:auto;
    padding:0.5rem 0.75rem;
    background:#000;
    color:#fff;
    z-index:1000;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

/* Ensure buttons and important text have sufficient contrast when possible */
.btn-info, .btn-secondary, .btn-outline-danger { color: #fff; }

/* Ensure primary buttons (including disabled state) maintain sufficient contrast
   for text readability. Some frameworks reduce opacity when disabled; override
   that to keep background dark and text white so contrast remains high. */
.btn-primary,
.btn.btn-primary,
.btn.btn-primary:enabled,
.btn.btn-primary:not([disabled]) {
    background-color: #083e8a !important;
    border-color: #083e8a !important;
    color: #ffffff !important;
}

.btn-primary[disabled],
.btn-primary:disabled,
.btn[disabled].btn-primary,
.btn:disabled.btn-primary {
    /* keep visual weight even when disabled to meet contrast requirements */
    background-color: #083e8a !important;
    border-color: #083e8a !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Improve color contrast for key UI elements to satisfy Lighthouse */
body { color: #222 !important; }

/* Navbar: force high-contrast white text on dark background */
.navbar-dark .nav-link, .navbar-dark .navbar-brand-custom .website-title, .navbar-dark .navbar-brand-custom img {
    color: #ffffff !important;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active,
.dropdown-toggle-custom {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Card titles and page captions: ensure dark foreground on light background */
.card-child, .card-custom .card-child, .page-caption {
    color: #111 !important;
}

/* Pagination / page-array buttons: solid high-contrast style */
.page-array button {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 4px !important;
}
.page-array button:hover, .page-array button:focus {
    background-color: var(--primary-strong) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Generic important buttons used on pages (join, navigation) */
.video-page-btn, .join-plan-btn, .btn-custom, .btn-info {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Improve contrast for outline-danger buttons: make border/text darker and
   show a solid red background on hover/focus so the label remains readable. */
.btn-outline-danger{ border-color: #b30000 !important; color: #b30000 !important; font-weight:600 !important; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: #b30000 !important; color:#ffffff !important; border-color:#b30000 !important; box-shadow: 0 4px 10px rgba(179,0,0,0.12) !important; }

/* Delete button specific styling to ensure high contrast and clear focus */
.delete-btn,
button.delete-btn,
a.delete-btn {
    border-color: #b30000 !important;
    color: #b30000 !important;
    background: transparent !important;
    font-weight: 700 !important;
    padding: .25rem .5rem !important;
}
.delete-btn:hover,
.delete-btn:focus,
button.delete-btn:hover,
button.delete-btn:focus,
a.delete-btn:hover,
a.delete-btn:focus {
    background-color: #b30000 !important;
    border-color: #b30000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(179,0,0,0.18) !important;
    outline: 3px solid rgba(179,0,0,0.12) !important;
    outline-offset: 2px !important;
}
.delete-btn * { color: inherit !important; }

/* Ensure links inside page headings are readable */
.page-caption a { color: #0d6efd; }

/* Improve contrast specifically for plan-content and download lists */
.plan-content { color: #111 !important; }
.plan-content a, .downloadList a {
    color: #0b5ed7 !important; /* darker blue for better contrast */
    font-weight: 600 !important;
    text-decoration: none !important;
}
.plan-content .join-plan-btn,
.join-plan-btn {
    background-color: #083e8a !important; /* darker blue to ensure contrast */
    border-color: #083e8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.plan-content .join-plan-btn:hover,
.join-plan-btn:hover,
.plan-content .join-plan-btn:focus,
.join-plan-btn:focus {
    background-color: #062b66 !important;
    border-color: #062b66 !important;
    color: #ffffff !important;
    outline: 3px solid rgba(11,94,215,0.18) !important;
    outline-offset: 2px !important;
}
.plan-content a:hover, .downloadList a:hover,
.plan-content a:focus, .downloadList a:focus {
    color: #083e8a !important; /* stronger on hover/focus */
    text-decoration: underline !important;
}
.downloadList div { background: transparent; color: #111; }

/* Ensure links have visible focus outline for keyboard users */
.plan-content a:focus, .downloadList a:focus, .navbar .nav-link:focus {
    outline: 3px solid rgba(11,94,215,0.18);
    outline-offset: 2px;
}

/* Ensure cover/banner images scale down on small screens and never force page overflow */
.cover img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------
   Mobile overflow fixes
   Prevent horizontal scrollbars on small devices by
   overriding elements that introduce a min-width wider
   than the viewport and constraining container widths.
   ----------------------------- */
@media (max-width: 767.98px) {
    /* Disallow page-level horizontal overflow while keeping native scrolling for wide tables when needed */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Ensure flexible containers don't use viewport-based widths that can overflow */
    .flex { width: 100%; }

    /* Remove forced min-width on tables for small screens so they can wrap or scroll inside their container */
    .plan-content table.table { min-width: 0 !important; width: 100% !important; }

    /* Fixed-header and other wide tables should allow internal horizontal scrolling rather than forcing page overflow */
    .fixed-header-table, .plan-content .certificate-table { min-width: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Prevent certificate/carousel items from forcing overflow */
    .certificate-item, .carousel-item .carousel-image { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }

    /* Make sure form inputs and custom-width elements do not overflow their column */
    .custom-width { max-width: 100% !important; box-sizing: border-box; }

    /* Add small horizontal padding to main content so long elements don't touch screen edges */
    .plan-content, .plan-block { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }

    /* If any element still forces overflow, keep it scrolling inside its container */
    .table-responsive-custom, .fixed-header-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Small-screen adjustments for form layout used on baseInfo and similar pages */
@media (max-width: 767.98px) {
    /* Make inputs that rely on .custom-width stretch full container width */
    .custom-width { width: 100% !important; box-sizing: border-box; }

    /* Stack labels above inputs for clearer reading on small screens */
    .base-info-title { display: block; margin-bottom: 6px; }
    .base-info-content { display: block; margin-bottom: 10px; }

    /* Add spacing between stacked form columns */
    .plan-block .plan-content-inner > [class*="col-xs-12"] { margin-bottom: 12px; }
}

/* Accent block used for list items that were previously inline-styled with cadetblue */
.accent-block {
    background-color: #083e8a !important; /* darker blue for high contrast */
    color: #ffffff !important;
    margin-bottom: 20px;
    font-size: 1rem; /* ~16px */
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
}
.accent-block:focus,
.accent-block a:focus {
    outline: 3px solid rgba(11,94,215,0.18);
    outline-offset: 2px;
}

/* Make accent-block a clear tappable target and ensure inner link inherits styles */
.accent-block { display: block; cursor: pointer; }
.accent-block a { color: inherit !important; text-decoration: none !important; display: inline-block; width: 100%; }

/* Responsive tweaks to improve readability and touch targets on small screens */
@media (max-width: 767.98px) {
    .border-bottom-cadetblue { padding: 8px 0 !important; }
    .border-bottom-cadetblue .form-inline, .border-bottom-cadetblue .flex-nowrap-custom {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .plan-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    .plan-label.mini-width {
        width: 80px !important;
        min-width: 80px !important;
        padding-right: 8px !important;
        text-align: left !important;
    }
    /* Make the whole item easier to tap by ensuring the container has padding */
    a > .border-bottom-cadetblue, .accent-block {
        padding: 10px !important;
    }
    /* Ensure accent blocks remain readable and not too large on small screens */
    .accent-block { font-size: 0.95rem !important; }
    /* Stack action bars vertically on small screens */
    .rwd-btn-bar { flex-direction: column !important; gap: 10px !important; }
}

/* Sticky action bar for forms on small screens: keep the submit button visible while scrolling
   Improve visual treatment: centered, rounded card-like bar with subtle shadow so it looks intentional. */
@media (max-width: 767.98px) {
    /* Reserve space so the fixed bar does not cover form content */
    .table-responsive-custom { position: relative; padding-bottom: 72px; }

    /* Fixed action bar pinned to the absolute bottom of the viewport */
    .sticky-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 10px 12px;
        box-sizing: border-box;
        background: #ffffff;
        border-top: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 -6px 14px rgba(0,0,0,0.06);
        z-index: 9999;
    }

    /* Button inside fixed bar: centered and limited in width so it isn't full-bleed */
    .sticky-bar .btn {
        margin: 0;
        width: calc(100% - 24px);
        max-width: 540px;
        border-radius: 6px;
        padding: 0.55rem 0.9rem !important;
        font-size: 0.95rem !important;
    }
}

/* Additional responsive: stack inline form groups and make controls full-width for small screens */
@media (max-width: 767.98px) {
    .form-inline { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
    .form-inline > * { width: 100% !important; box-sizing: border-box; }
    .form-inline .rwd-btn-bar .form-control,
    .form-inline input.form-control,
    .form-inline textarea.form-control,
    .form-inline select.form-control {
        width: 100% !important;
        min-width: 0 !important;
    }
    .rwd-btn-bar .btn { width: 100% !important; }
    /* increase tappable area for small buttons */
    .btn { padding: 0.6rem 0.9rem !important; font-size: 1rem !important; }
    /* Ensure table scroll areas are not too tall on small screens */
    .fixed-header-table-scroll { max-height: 60vh !important; overflow-y: auto !important; }
}

/* Button-specific responsive tweaks applied on small screens */
@media (max-width: 767.98px) {
    /* Make primary/info buttons fill container when stacked */
    .btn-info, .btn-primary, .btn { display: block !important; width: 100% !important; margin: 0 0 0.6rem 0 !important; box-sizing: border-box !important; }

    /* When buttons appear in an inline action bar, ensure they stack and have equal spacing */
    .rwd-show .btn, .mar-b .rwd-show .btn { display: block !important; width: 100% !important; }

    /* Right-column small action area: make internal buttons full width */
    .col-md-3 .btn, .col-lg-2 .btn { width: 100% !important; margin-bottom: 0.6rem !important; }

    /* Reduce overly large fixed paddings on tiny screens while keeping tap targets large */
    .btn { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
}

/* Specific helper for any button marked responsive in markup */
@media (max-width: 767.98px) {
    .btn-responsive {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.6rem 0 !important;
        box-sizing: border-box !important;
    }
}

/* Ensure tables inside pages using .responsive-form stay within the page and don't force horizontal overflow */
/* Targets: view/setJoinPlan.html (wrapper adds .responsive-form on .table-responsive-custom) */
.responsive-form .table-responsive-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.responsive-form .table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; }
.responsive-form .table th, .responsive-form .table td { white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
.responsive-form .table td input.form-control, .responsive-form .table td textarea.form-control { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.responsive-form .table td { padding: 8px 10px !important; }

/* On larger screens allow standard table behaviour but still avoid forced min-width from other rules */
@media (min-width: 768px) {
    .responsive-form .table { min-width: 0 !important; }
}

/* Desktop: add breathing room above action bar so button isn't too close to table */
@media (min-width: 768px) {
    .rwd-btn-bar { margin-top: 20px !important; display: flex; justify-content: flex-start; }
    /* keep desktop button compact (not full-width) */
    .rwd-btn-bar .btn { width: auto !important; max-width: 220px; padding: 0.45rem 0.8rem !important; }
}

/* === 鍵盤導向 focus 改進 (keyboard focus visibility) ===
   - 只在使用鍵盤(Tab)時顯示明顯的外框，滑鼠點擊時則不顯示。
   - 顏色使用高對比色並保留 offset 以避免遮擋內容。 */

body.using-keyboard a:focus,
body.using-keyboard button:focus,
body.using-keyboard input:focus,
body.using-keyboard textarea:focus,
body.using-keyboard select:focus,
body.using-keyboard [tabindex]:focus {
    outline: 3px solid #FFD54F; /* 黃色外框，醒目 */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255,213,79,0.14);
}

/* Use :focus-visible where supported as a progressive enhancement */
:focus-visible {
    outline: 3px solid rgba(11,94,215,0.32);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(11,94,215,0.12);
}

/* Ensure commonly interactive navbar links and dropdown items have good focus contrast */
body.using-keyboard .navbar .nav-link:focus,
body.using-keyboard .dropdown-item:focus,
body.using-keyboard .navbar-toggler:focus {
    outline: 3px solid #FFB74D;
    outline-offset: 2px;
}

/* Keep skip-link behavior intact (already present) but ensure keyboard visibility class doesn't override it */
.skip-link:focus { z-index: 10000; }