html {
    font-size: 14px;
}

:root {
    --theme-color: #FFFFFF;
    --theme-text: black;
    --table-color: #0b1f4d;
    --table-text: white;
}

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

    .offcanvas-md {
        position: sticky;
        transform: none !important;
        visibility: visible !important;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .offcanvas:not(.show) {
        visibility: hidden;
        pointer-events: none;
    }

    .offcanvas.show {
        visibility: visible;
        pointer-events: auto;
    }
}

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

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* Hide everything except main content when printing */
/* Print only the article */
@media print {
    /* Hide sidebar and print buttons */

    .no-print {
        display: none !important;
    }

    /* Make main content full width */
    main.content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        min-width: 992px !important; /* Force a 'Desktop' viewport width */
    }

    .print-side-by-side .col-md-9 {
        width: 75% !important;
        float: left;
    }

    .print-side-by-side .col-md-3 {
        width: 25% !important;
        float: left;
    }

    /* Prevent the main container from collapsing */
    .print-side-by-side {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
    }

        /* Force the row to behave like a flex container or clear floats */
        .print-side-by-side .row {
            display: flex !important;
            flex-wrap: nowrap !important;
        }
    /* Show only article content */
    /*.com-content-article.item-page {
        display: block !important;
    }*/

    /* Show children normally, without forcing block */
    /*.com-content-article.item-page > * {
            display: revert !important;*/ /* restore default display */
    /*}*/
}

.button-style {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between icon and text */
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background: #081735;
    color: white;
}

    .button-style:hover {
        background-color: #2185d0; /* slightly darker blue */
        transform: scale(1.05);
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

/* Rules and Regulation Header Flex */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .header-flex h2 {
        margin: 0;
    }

table.table {
    width: 100%;
    margin-bottom: 1rem;
}

    table.table th,
    table.table td {
        padding: 8px;
        border: 1px solid #ddd;
        vertical-align: top;
    }

    table.table th {
        background: var(--table-color);
        color: var(--table-text);
        text-align: center
    }

    table.table tbody tr:nth-child(odd) td {
        background-color: #f7f9fa;
    }

    table.table tbody tr:nth-child(even) td {
        background-color: #ffffff;
    }

    table.table tr.highlightImportantColumn td {
        background: red !important;
        color: white;
    }

ol.list-decimal {
    list-style-type: decimal;
    padding-left: 1.5rem;
}

ul {
    padding-left: 1.5rem;
}

section {
    margin-bottom: 1.5rem;
}

.strong-warning {
    font-weight: bold;
    color: red;
}

.sidebar-card {
    margin-bottom: 10px; /* space between cards */
    border: 1px solid #ddd;
    border-radius: 4px;
}

    .sidebar-card h3 {
        background: #081735;
        color: #fff; /* white text */
        padding: 10px 15px;
        margin: 0; /* remove default h3 margin */
        font-size: 1.1rem;
        font-weight: bold;
        border-radius: 4px 4px 0 0;
    }

    .sidebar-card .card-body {
        /* padding: 0px; */
        /* padding-bottom: 1rem; */
        background: var(--table-color);
        color: var(--table-text);
        list-style-type: none;
        text-align: center;
        border-radius: 0 0 4px 4px; /* match header rounding */
    }

    .sidebar-card .two-colorBackground {
        /* padding: 0px; */
        background: var(--table-color);
        color: var(--table-text);
        list-style-type: none;
        text-align: center;
        border-radius: 0 0 4px 4px; /* match header rounding */
    }

    .sidebar-card .light-background {
        padding-top: 1rem;
        background: white;
        color: black;
        list-style-type: none;
        text-align: center;
        border-radius: 0 0 4px 4px; /* match header rounding */
    }

    .sidebar-card .card-body a {
        color: inherit;
        text-decoration: none;
        display: inline-block;
    }

.vep-note {
    font-size: 13px;
    color: white;
    margin-top: 6px;
}

.pdf-preview {
    width: 100%;
    height: 220px; /* fixed height for sidebar */
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
}

.vep-btn-download {
    display: block;
    margin: 10px auto;
    padding: 10px 16px;
    background-color: #005bbb;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    width: fit-content;
}

    .vep-btn-download:hover {
        background-color: #003f82;
        color: #fff;
    }

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .schedule-table td,
    .schedule-table th {
        padding: 8px;
        border-right: 1px solid #ccc;
        /* Allows long words to break and wrap to the next line */
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word; /* Specifically for "Replenishment" */
        /*Hyphenate the word where it breaks */
        hyphens: auto;
    }

    .schedule-table tr {
        border-bottom: 1px solid #ccc;
    }

    .schedule-table tbody tr:nth-child(odd) {
        background-color: #f7f9fa; /* Color 1 */
    }

    .schedule-table tbody tr:nth-child(even) {
        background-color: #ffffff; /* Color 2 */
    }

    .table-header,
    .schedule-table thead th {
        background-color: var(--table-color);
        color: var(--table-text);
        text-align: center;
        font-weight: bold;
    }

.warning-note {
    margin-top: 10px;
    background: #fff0f0;
    padding: 10px;
    border-left: 4px solid #cc0000;
    color: #cc0000;
    font-weight: bold;
}

/*Style for table column*/
.line-divider {
    border: none;
    border-top: 1px solid black;
    margin: 5px 0;
    width: 100%;
}