html {
    font-size: 14px;
}

main {
    padding-bottom: 80px;
}

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

.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 #282d31;
}

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

body {
    margin: 0;
    padding-bottom: 80px;
}

.h1 {
    font-size: x-small;
}

.btn-primary {
    color: #fff;
    background-color: #758c8D;
    border-color: #758c8D;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #5c636a;
        border-color: #5c636a;
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
        box-shadow: 0 0 0 0.25rem #6c757d;
    }

    /* ACTIVE STATE — this is the missing piece */
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
    }

        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem #2c3e50;
        }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
    }

.form-check-input:focus {
    border-color: rgba(255, 255, 255, 0.15);
    outline: 0;
    box-shadow: 0 0 0 0.25rem #758c8D;
}

.form-check-input:checked {
    background-color: #758c8D;
    border-color: #758c8D;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #495057;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .nav-link:hover, .nav-link:focus {
        color: #2c3e50;
    }

    .nav-link.disabled {
        color: #6c757d;
        pointer-events: none;
        cursor: default;
    }

.page-item.active .page-link {
    color: #fff !important;
    background-color: #2c3e50 !important;
    border-color: #000 !important;
}

.page-link {
    color: #000 !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
}

    .page-link:hover {
        color: #2c3e50 !important;
        background-color: #000 !important;
        border-color: #000 !important;
    }

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
}

    .btn-close:hover {
        color: #000;
        text-decoration: none;
        opacity: 0.75;
    }

    .btn-close:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem #6c757d;
        opacity: 1;
    }

    .btn-close:disabled, .btn-close.disabled {
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        opacity: 0.25;
    }

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.btn-danger {
    color: #fff;
    background-color: #8c1000;
    border-color: #8c1000;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

    .btn-check:focus + .btn-danger, .btn-danger:focus {
        color: #fff;
        background-color: #bb2d3b;
        border-color: #b02a37;
        box-shadow: 0 0 0 0.25rem #6c757d;
    }

    .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #b02a37;
        border-color: #a52834;
    }

        .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem #6c757d;
        }

    .btn-danger:disabled, .btn-danger.disabled {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

.btn-light {
    color: #000;
    background-color: #BDC3C7;
    border-color: #BDC3C7;
}

    .btn-light:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-check:focus + .btn-light, .btn-light:focus {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
        box-shadow: 0 0 0 0.25rem #BDC3C7;
    }

    .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
    }

        .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
        }

    .btn-light:disabled, .btn-light.disabled {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
    }

a {
    color: #dc3545;
    text-decoration: underline;
}

    a:hover {
        color: #8c1000;
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }

table.dataTable thead th {
    border-bottom: 2px solid currentColor !important;
}

table.dataTable {
    border-bottom: 2px solid #000 !important;
}

    table.dataTable tbody tr {
        border-bottom: 1px solid #dee2e6 !important; /* lighter grey */
    }

    /* Make first column flexible and all others auto-sized */
    table.dataTable tbody td:first-child,
    table.dataTable thead th:first-child {
        width: 100%;
    }

    table.dataTable tbody td:not(:first-child),
    table.dataTable thead th:not(:first-child) {
        white-space: nowrap;
        width: 1%;
    }
    /* Keep pointer cursor on entire row, even over text */
    table.dataTable tbody tr,
    table.dataTable tbody tr td {
        cursor: pointer !important;
    }

/* Base button */
.btn-brpa {
    background-color: #758C8D;
    border-color: #758C8D;
    color: #fff;
}

    /* Hover */
    .btn-brpa:hover {
        background-color: #64797A;
        border-color: #64797A;
        color: #fff;
    }

    /* Active / Click */
    .btn-brpa:active,
    .btn-brpa:focus,
    .btn-brpa:active:focus {
        background-color: #556769;
        border-color: #556769;
        color: #fff;
        box-shadow: none;
    }

    /* Disabled */
    .btn-brpa:disabled,
    .btn-brpa.disabled {
        background-color: #AEB8B9;
        border-color: #AEB8B9;
        color: #eee;
    }

.cookie-banner {
    position: fixed;
    bottom: -200px; /* hidden initially */
    left: 0;
    width: 100%;
    background: #2c3e50; /* Dark Blue */
    color: #ECF0F1; /* Off White */
    padding: 20px 0;
    font-size: 1.1rem;
    border-top: 3px solid #34495e; /* Medium Blue accent */
    z-index: 9999;
    display: block;
    transition: bottom 0.6s ease;
}

    .cookie-banner.show {
        bottom: 0; /* slide up */
    }

    .cookie-banner .btn {
        background-color: #758c8D;
        border-color: #758c8D;
        color: white;
    }

        .cookie-banner .btn:hover {
            background-color: #64797A;
            border-color: #64797A;
        }

    .cookie-banner .btn-outline-light {
        border-color: #ECF0F1;
        color: #ECF0F1;
    }

        .cookie-banner .btn-outline-light:hover {
            background-color: rgba(255,255,255,0.2);
            color: white;
        }

/* BRPA progress bar styling */
.progress {
    background-color: #E5E8E8;
    border-radius: 6px;
    height: 18px;
}

.progress-bar {
    background-color: #758C8D;
    transition: width 0.4s ease-in-out, opacity 0.6s ease-in-out;
    border-radius: 6px;
}

    /* Completed state */
    .progress-bar.completed {
        opacity: 0.4; /* fade out */
        background-color: #4A5A5B; /* darker BRPA tone */
    }

.vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #34495E; /* BRPA dark slate tone */
    padding: 10px 0;
    opacity: 0.8;
}

.brpa-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d; /* Bootstrap secondary grey */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brpa-value {
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50; /* BRPA dark slate */
}

.brpa-row {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.brpa-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c3e50;
    border-bottom: 2px solid #758c8D;
    padding-bottom: 4px;
    margin-bottom: 12px;
}

.money-cell {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .money-cell .currency {
        font-weight: 600; /* optional */
    }

    .money-cell .amount {
        text-align: right;
        flex-grow: 1;
    }

/* Fix selector: use #taskTable */
#taskTable.dataTable thead th {
    border-bottom: 2px solid currentColor !important;
}

#taskTable.dataTable {
    border-bottom: 2px solid #000 !important;
}

    #taskTable.dataTable tbody tr {
        border-bottom: 1px solid #dee2e6 !important;
    }

    /* Make second column flexible, not the first */
    #taskTable.dataTable tbody td:first-child,
    #taskTable.dataTable thead th:first-child {
        width: 1%;
        white-space: nowrap;
    }

    #taskTable.dataTable tbody td:nth-child(2),
    #taskTable.dataTable thead th:nth-child(2) {
        width: auto;
    }

    /* Keep pointer cursor */
    #taskTable.dataTable tbody tr,
    #taskTable.dataTable tbody tr td {
        cursor: pointer !important;
    }

#auditTable {
    width: 100%;
    table-layout: fixed;
}

    #auditTable th,
    #auditTable td {
        white-space: normal !important;
        word-break: break-word;
    }

        /* Date/Time */
        #auditTable th:nth-child(1),
        #auditTable td:nth-child(1) {
            width: 12%;
        }

        /* Table Name */
        #auditTable th:nth-child(2),
        #auditTable td:nth-child(2) {
            width: 10%;
        }

        /* Record ID */
        #auditTable th:nth-child(3),
        #auditTable td:nth-child(3) {
            width: 6%;
        }

        /* Field */
        #auditTable th:nth-child(4),
        #auditTable td:nth-child(4) {
            width: 10%;
        }

        /* Old Value */
        #auditTable th:nth-child(5),
        #auditTable td:nth-child(5) {
            width: 25%;
        }

        /* New Value */
        #auditTable th:nth-child(6),
        #auditTable td:nth-child(6) {
            width: 25%;
        }

        /* Changed By */
        #auditTable th:nth-child(7),
        #auditTable td:nth-child(7) {
            width: 6%;
        }

        /* Comment */
        #auditTable th:nth-child(8),
        #auditTable td:nth-child(8) {
            width: 6%;
        }

.navbar-dev {
    background-color: #27D3F5 !important; /* Light Blue*/
}

.navbar-uat {
    background-color: #F54927 !important; /* Red */
}

.navbar-prod {
    background-color: #758c8D !important; /* BRPA Normal */
}

.navbar-default {
    background-color: #000000 !important; /* Plain black */
}

/* Active tab: dark background + white text */
.nav-tabs .nav-link.active {
    background-color: #343a40 !important; /* Bootstrap dark */
    color: #fff !important;
    border-color: #343a40 #343a40 #fff !important;
}

/* Inactive tabs: keep Bootstrap default but ensure contrast */
.nav-tabs .nav-link {
    color: #495057;
}

    /* Optional: hover effect for inactive tabs */
    .nav-tabs .nav-link:not(.active):hover {
        background-color: #e9ecef;
        color: #000;
    }
/* ------------------------------------------
   MEETINGS QUESTIONS TABLE (ISOLATED)
   ------------------------------------------ */

/* Column 0: drag handle */
.meeting-questions-table th:nth-child(1),
.meeting-questions-table td:nth-child(1) {
    width: 40px !important;
    white-space: nowrap;
    text-align: center;
}

/* Column 1: Question (SortNumber + Text) */
.meeting-questions-table th:nth-child(2),
.meeting-questions-table td:nth-child(2) {
    width: auto !important;
    white-space: normal;
    text-align: left;
}

/* Column 2: Toggle */
.meeting-questions-table th:nth-child(3),
.meeting-questions-table td:nth-child(3) {
    width: 140px !important;
    white-space: nowrap;
    text-align: center;
}

/* Prevent row click on toggle + drag */
.meeting-questions-table .drag-handle,
.meeting-questions-table .is-open-toggle {
    cursor: default !important;
}
/* Drag handle cursor behaviour */
.meeting-questions-table .drag-handle {
    cursor: grab !important;
}

    .meeting-questions-table .drag-handle:active {
        cursor: grabbing !important;
    }

    .meeting-questions-table .drag-handle:hover i {
        opacity: 0.7;
    }

.dt-icon {
    display: inline-block;
    width: 20px;
    margin-right: 6px;
    pointer-events: none; /* prevents icon from swallowing clicks */
}

.dt-text {
    display: inline-block;
}

/* Container for each question's chip group */
.answer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Default chip appearance */
.chip {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f8f8f8;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: all 0.15s ease-in-out;
}

    /* Hover state */
    .chip:hover {
        background-color: #eaeaea;
        border-color: #999;
    }

    /* Selected chip */
    .chip.selected {
        background-color: #34495e; /* Microsoft blue */
        border-color: #005a9e;
        color: white;
        font-weight: 600;
    }

/* Mobile-friendly tap target */
@media (max-width: 600px) {
    .chip {
        padding: 10px 16px;
        font-size: 15px;
    }
}

#voteButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #6c757d !important; /* grey */
    border-color: #6c757d !important;
    color: white !important;
}

.arrow {
    width: 120px;
    height: auto;
}

.wizard {
    display: flex;
    justify-content: space-evenly; /* spreads chevrons equally */
    align-items: center;
    width: 75%; /* fills the page */
    margin: 0 auto;
    padding: 20px 0; /* optional */
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-wrapper {
    position: relative;
    display: inline-block;
}

.step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: white;
    pointer-events: none; /* number won't block clicks */
}

.placeholder-chip-container-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.placeholder-chip {
    padding: 8px 12px;
    background-color: #eef2f7;
    border: 1px solid #ccd3dd;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
}

    .placeholder-chip:active {
        cursor: grabbing;
    }

.placeholder-code {
    font-size: 12px;
    color: #555;
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .image-grid img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        border: 2px solid transparent;
    }

        .image-grid img:hover {
            border-color: #007bff;
        }