:root {
    --cbm-ink: #1f2a24;
    --cbm-muted: #626e67;
    --cbm-line: #e5e9e6;
    --cbm-tint: #f4f6f4;
    --cbm-green: #2f5233;
    --cbm-green-dark: #24412a;
    --cbm-green-soft: #e9efe9;
    --bs-primary: var(--cbm-green);
    --bs-primary-rgb: 47, 82, 51;
    --bs-link-color: var(--cbm-green);
    --bs-body-color: var(--cbm-ink);
    --bs-border-color: var(--cbm-line);
}

html { scroll-padding-top: 80px; }
body {
    background: #fff;
    color: var(--cbm-ink);
    font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto,
        "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
p { font-weight: 400; }
a { color: var(--cbm-green); }
a:hover { color: var(--cbm-green-dark); }
.text-muted { color: var(--cbm-muted) !important; } /* Override Bootstrap's low-contrast utility. */
.text-primary { color: var(--cbm-green) !important; } /* Match the site accent. */
.bg-primary, .navbar.bg-primary { background-color: var(--cbm-green) !important; } /* Bootstrap utility. */
.bg-light { background-color: var(--cbm-tint) !important; } /* Bootstrap utility. */
.border-primary { border-color: var(--cbm-green) !important; } /* Bootstrap utility. */

.navbar.fixed-top { min-height: 64px; background: var(--cbm-green); }
.navbar .navbar-brand, .navbar .nav-link { color: #fff; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link:focus-visible,
.navbar .nav-link.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.navbar .dropdown-menu { border: 1px solid var(--cbm-line); }
.navbar .dropdown-item { color: var(--cbm-ink); padding-block: 10px; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: var(--cbm-green-soft); color: var(--cbm-green-dark); }
.navbar .dropdown-toggle { background: none; border: 0; }
.navbar-toggler { border-color: #fff; color: #fff; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px #fff; }
.navbar-toggler:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 575.98px) {
    .navbar-brand span { display: none; }
    .cbm-quicktool-label { display: none; }
    .navbar .d-lg-none > .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

.btn { font-weight: 500; }
.btn-primary, .btn-love, .btn-warmth, .btn-grace {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cbm-green);
    --bs-btn-border-color: var(--cbm-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cbm-green-dark);
    --bs-btn-hover-border-color: var(--cbm-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cbm-green-dark);
    --bs-btn-active-border-color: var(--cbm-green-dark);
    color: #fff;
    background-color: var(--cbm-green);
    border-color: var(--cbm-green);
}
.btn-primary:hover, .btn-love:hover, .btn-warmth:hover, .btn-grace:hover {
    color: #fff; background-color: var(--cbm-green-dark); border-color: var(--cbm-green-dark);
}
.btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: var(--cbm-green);
    --bs-btn-border-color: var(--cbm-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cbm-green);
    --bs-btn-hover-border-color: var(--cbm-green);
}
.content-area .btn-info, .content-area .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cbm-green);
    --bs-btn-border-color: var(--cbm-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cbm-green-dark);
    --bs-btn-hover-border-color: var(--cbm-green-dark);
}
.content-area .btn-outline-info, .content-area .btn-outline-warning {
    --bs-btn-color: var(--cbm-green);
    --bs-btn-border-color: var(--cbm-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cbm-green);
    --bs-btn-hover-border-color: var(--cbm-green);
}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
    outline: 3px solid var(--cbm-green-dark);
    outline-offset: 2px;
}
.form-control:focus, .form-select:focus { border-color: var(--cbm-green); box-shadow: 0 0 0 3px var(--cbm-green-soft); }

main.container-fluid { max-width: 1280px; min-height: 60vh; }
.content-area { min-height: 45vh; }
.card { border: 1px solid var(--cbm-line); box-shadow: none; }
.card-header { border-bottom: 1px solid var(--cbm-line); }
.table { --bs-table-border-color: var(--cbm-line); }
.table-dark { --bs-table-bg: var(--cbm-green); }
.table-hover tbody tr:hover td { background: var(--cbm-green-soft); }
.table th { border-top: 0; font-weight: 600; font-size: .9rem; }
.badge.bg-primary { background-color: var(--cbm-green) !important; } /* Bootstrap utility. */
.chinese-text { line-height: 1.7; }

.cbm-mobile-nav { --bs-offcanvas-width: min(88vw, 340px); color: var(--cbm-ink); }
.cbm-mobile-nav-link {
    display: flex; align-items: center; min-height: 44px; padding: 8px 16px;
    color: var(--cbm-green); text-decoration: none;
}
.cbm-mobile-nav-link:hover, .cbm-mobile-nav-link:focus-visible {
    background: var(--cbm-green-soft); color: var(--cbm-green-dark);
}

footer.bg-dark { background: var(--cbm-green) !important; } /* Bootstrap utility. */
footer a, footer a:hover { color: #fff; }
@media (max-width: 767.98px) {
    .cbm-message-table thead,
    .cbm-message-table td:nth-child(1),
    .cbm-message-table td:nth-child(3),
    .cbm-message-table td:nth-child(4),
    .cbm-message-table .btn-group .btn:not(.cbm-play) { display: none; }
    .cbm-message-table tbody { display: block; }
    .cbm-message-table tr {
        display: grid; grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center; gap: 12px; padding: 12px;
        border-bottom: 1px solid var(--cbm-line);
    }
    .cbm-message-table td { display: block; border: 0; padding: 0; min-width: 0; }
    .cbm-message-table td:nth-child(2) { grid-column: 1; }
    .cbm-message-table td:nth-child(5) { grid-column: 2; }
    .cbm-message-table .cbm-msg-title {
        display: flex; align-items: center; min-height: 44px; line-height: 1.35;
    }
    .cbm-message-table .cbm-msg-mobile-meta { display: block; line-height: 1.4; }
    .cbm-message-table .btn-group { display: block; }
    .cbm-message-table .btn-group .cbm-play {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; padding: 0; font-size: 1.25rem; border-radius: 6px;
    }
    .content-area .display-6 { font-size: 1.5rem; }
    .cbm-footer-links { display: flex; flex-direction: column; align-items: stretch; }
    .cbm-footer-links a, footer a[href^="mailto:"] {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; margin-right: 0;
    }
    #tableContainer { overflow-x: visible; }
    #booksTable thead, #tapesTable thead { display: none; }
    #booksTable tbody, #tapesTable tbody { display: block; }
    #booksTable tr, #tapesTable tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid var(--cbm-line);
    }
    #booksTable td, #tapesTable td { display: block; border: 0; padding: 0; min-width: 0; }
    #booksTable td:nth-child(1), #booksTable td:nth-child(2),
    #booksTable td:nth-child(5), #booksTable td:nth-child(7), #booksTable td:nth-child(8),
    #tapesTable td:nth-child(1), #tapesTable td:nth-child(2), #tapesTable td:nth-child(6) { display: none; }
    #booksTable td:nth-child(3), #tapesTable td:nth-child(3) { grid-column: 1 / -1; font-weight: 600; }
    #booksTable td:nth-child(4), #tapesTable td:nth-child(4),
    #booksTable td:nth-child(6), #tapesTable td:nth-child(5), #tapesTable td:nth-child(7) {
        color: var(--cbm-muted); font-size: .875rem;
    }
    #booksTable .book-info-link { display: flex; align-items: center; min-height: 44px; }
}

/* Shared message player */
/* Message rows open the details modal on click — make that discoverable. */
tr.cbm-msg-row { cursor: pointer; }
tr.cbm-msg-row:hover td { background-color: rgba(47, 82, 51, 0.08); }
tr.cbm-msg-row td:first-child { position: relative; }

/* Player bar follows the site's Psalm-23 palette (css/bootstrap-custom.css):
   deep forest green like the page headers, with the golden "warmth" accent. */
#cbmPlayerBar {
    background-color: #2F5233;
    border-top: 1px solid #e5e9e6;
    color-scheme: dark; /* native audio controls render dark and blend in */
}
#cbmPlayerBar audio {
    border-radius: .5rem;
    background: rgba(0, 0, 0, .25);
}
#cbmPlayerBar .btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
#cbmPlayerResume { min-height: 44px; }
#cbmPlayerBar .btn-outline-warning {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #2f5233;
}
#cbmPlayerBar .text-warning {
    color: var(--cbm-warmth, #FFD93D) !important;
}
#cbmPlayerInfo .badge {
    background: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
}
/* Details panel sits on a subtle dark backdrop so summary text is always
   legible on the green bar; force the summary body to a near-white colour
   (the gold section labels below re-assert their own colour). */
#cbmPlayerInfoBody {
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(0, 0, 0, .22);
    border-radius: .5rem;
    padding: .6rem .8rem;
    color: #f3f3f3 !important;
}
#cbmPlayerInfoBody p,
#cbmPlayerInfoBody li,
#cbmPlayerInfoBody strong,
#cbmPlayerBar .cbm-summary,
#cbmPlayerBar .cbm-summary * {
    color: #f3f3f3 !important;
}
#cbmPlayerInfoBody .text-warning {
    color: var(--cbm-warmth, #FFD93D) !important;
}
/* chevron flips when the details section is open */
#cbmPlayerDetailsBtn[aria-expanded="true"] .cbm-details-chevron {
    transform: rotate(180deg);
}
.cbm-details-chevron {
    display: inline-block;
    transition: transform .2s ease;
}
#cbmPlayerBar .cbm-summary p:last-child {
    margin-bottom: 0;
}

/* Tape Ministry archive */
#tapeMinistryPage .table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.02);
}

#tapeMinistryPage .card-header h5 {
    font-size: 1.1rem;
}

/* Button group styling for better alignment */
#tapeMinistryPage .btn-group .btn {
    border-radius: 0.375rem;
}

#tapeMinistryPage .btn-group .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

#tapeMinistryPage .btn-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Header styling for better text visibility */
.tape-ministry-header {
    border: 1px solid #e5e9e6;
}

.tape-ministry-header h1,
.tape-ministry-header .h3 {
    color: #2f5233;
    font-weight: 700;
}

.tape-ministry-header p {
    color: #626e67;
    font-size: 1rem;
    line-height: 1.5;
}

.tape-ministry-header i {
    color: #2f5233;
}

/* Mobile card styling */
.tape-card-mobile {
    border: 1px solid #dee2e6;
}

.tape-card-mobile .btn {
    min-height: 44px;
    font-size: 0.875rem;
}

.tape-card-mobile .btn-group {
    display: flex;
    width: 100%;
}

#tapeMinistryPage .tape-card-mobile .btn-group .btn {
    flex: 1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    /* Ensure mobile cards have proper spacing */
    .tape-card-mobile {
        margin-bottom: 8px;
    }

    .tape-card-mobile .card-body {
        padding: 12px;
    }

    .tape-card-mobile .btn-sm {
        font-size: 0.8rem;
        padding: 6px 12px;
        min-height: 44px;
    }

    .tape-card-mobile .card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    /* Make buttons more touch-friendly */
    #tapeMinistryPage .d-grid.gap-1 {
        gap: 6px !important;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .tape-card-mobile .row {
        --bs-gutter-x: 0.5rem;
    }

    .tape-card-mobile .col-8 {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .tape-card-mobile .col-4 {
        flex: 0 0 35%;
        max-width: 35%;
    }

    .tape-card-mobile .btn-sm {
        font-size: 0.75rem;
        padding: 5px 8px;
        min-height: 44px;
    }

    .tape-card-mobile .btn-sm i {
        font-size: 0.8rem;
    }
}

/* Message category and search results */
/* Custom styles for message tables */
#cbmMessageCategory .table-hover tbody tr:hover {
    background-color: rgba(43, 79, 114, 0.05);
}

#cbmMessageCategory .table th {
    border-top: none;
    font-weight: 600;
    font-size: 0.9rem;
}

#cbmMessageCategory .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    #cbmMessageCategory .table-responsive {
        font-size: 0.875rem;
    }

    #cbmMessageCategory .btn-group-sm .btn {
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
    }

    #cbmMessageCategory .display-6 {
        font-size: 1.5rem;
    }

    #cbmMessageCategory .row.text-center .col-md-3 {
        margin-bottom: 1rem;
    }
}
#cbmSearchResults mark {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
}

#cbmSearchResults .table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    #cbmSearchResults .table thead {
        display: none;
    }

    #cbmSearchResults .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }

    #cbmSearchResults .table tbody td {
        display: block;
        text-align: right;
        border: none;
        padding: 0.5rem;
    }

    #cbmSearchResults .table tbody td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

/* Private announcements login */
#cbmAnnouncementsLogin .card { margin-top: 50px; border-radius: 10px; }
#cbmAnnouncementsLogin .card-header { border-radius: 10px 10px 0 0 !important; }
#cbmAnnouncementsLogin .input-group-text { background-color: #f8f9fa; border-right: none; }
#cbmAnnouncementsLogin .form-control { border-left: none; }
#cbmAnnouncementsLogin .form-control:focus { border-color: #2b4f72; }
#cbmAnnouncementsLogin .chinese-text { line-height: 1.8; }