/* --- Base --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

body {
    margin-bottom: 60px; /* space for fixed footer */
}

.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;
}

/* --- Journal Entry Buttons --- */
.custom-button {
    color: #034CBA;
    border-color: #034CBA;
}

    .custom-button:hover {
        color: #EEE;
        border-color: #080530;
    }

/* === SESSION SELECTION CARDS (top row) === */
.summary-cards-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin-left: 0;
    margin-right: 0;
}

    .summary-cards-row > .col,
    .summary-cards-row > .col-auto,
    .summary-cards-row > [class^="col-"] {
        padding: 0 !important;
        display: flex;
    }

    .summary-cards-row .card {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .summary-cards-row .card-body {
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 64px;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .summary-cards-row h6 {
        margin: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .summary-cards-row .card-body > a {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .summary-cards-row i {
        margin-left: auto;
        flex: 0 0 auto;
    }

    .summary-cards-row .card-body form {
        flex: 1 1 auto;
        min-width: 0;
    }

        .summary-cards-row .card-body form > * {
            min-width: 0;
        }

    .summary-cards-row .card-body label {
        white-space: nowrap;
        margin-bottom: 0;
    }

    .summary-cards-row .card-body .form-select {
        max-width: 12rem;
        width: 100%;
    }

    .summary-cards-row a.text-nowrap {
        white-space: nowrap;
    }

@media (max-width: 575.98px) {
    .summary-cards-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .summary-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === SESSION CARD STYLING === */
.card-session {
    border: 1px solid #080530;
}

.session-card-header {
    background: #080530;
    color: #fff;
    text-align: center;
    padding: .6rem .75rem;
    position: relative;
}

    .session-card-header h6 {
        margin: 0;
        color: inherit;
        font-weight: 600;
    }

.session-card-icon {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #fff;
}

.card-session .card-body {
    flex: 1 1 auto;
}

.card-cta-footer {
    background: #f8f9fa;
    border-top: 1px solid rgba(0,0,0,.075);
    padding: .5rem .75rem;
}

.card-cta-link {
    display: block;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #034CBA !important;
}

    .card-cta-link:hover {
        text-decoration: underline;
    }

.year-select-form {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.year-select {
    width: 100%;
    max-width: 14rem;
    min-width: 0;
}

/* === JOURNAL ENTRY ITEMS (inside session collapse) === */
.journal-entry-card {
    background-color: #EEEEEE;
    color: #000;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* "Pages N-N" watermark bar */
.session-card .summary-card {
    position: relative;
    background: #EEE;
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 3rem;
}

    .session-card .summary-card::after {
        content: "Pages " attr(data-pages);
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        pointer-events: none;
        font-variant-numeric: tabular-nums;
    }

    .session-card .summary-card > * {
        position: relative;
        z-index: 1;
    }

.session-card .w-100 {
    padding-top: .5rem !important;
}

/* === SCROLL TO TOP (Bootstrap Icons version) === */
/*#scrollToTopBtn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: #080530;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

    #scrollToTopBtn.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #scrollToTopBtn .bi {
        font-size: 1.25rem;
        line-height: 1;
    }*/

.page-layout{
    display: block;
}

.modal.fade {
    background-color: transparent;
    display: none;
    padding: 0;
}

    .modal.fade.show {
        display: block;
    }

.modal-backdrop.show {
    opacity: 0.5;
    z-index: 1040;
}

.modal.fade .modal-dialog {
    z-index: 1055;
    position: relative;
}

.modal.fade .modal-content {
    position: relative;
    z-index: 1056;
}

.modal.fade .btn-close {
    z-index: 1060;
    position: relative;
}

.modal.fade,
.modal.fade.show {
    background-color: transparent !important;
    padding: 0 !important;
    justify-content: initial !important;
    align-items: initial !important;
    z-index: 1055 !important;
}

/* Let Bootstrap's backdrop handle the overlay */
.modal-backdrop {
    z-index: 1050 !important;
}

/* Ensure modal content is clickable */
.modal-dialog {
    pointer-events: auto;
    position: relative;
    z-index: 1056;
}

.modal-content {
    pointer-events: auto;
}

.session-card-header .chevron-arrow {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    display: inline-block;
}

.session-card-header[aria-expanded="false"] .chevron-arrow {
    transform: rotate(45deg);
}