/*##############################################
Force change highlight color when hover on table
################################################*/
:root {
    table tr:hover td {
        background-color: light-dark(#b6d0ff, #042c54) !important;
        cursor: pointer !important;
    }
}

/*##################################
For removing underlined headers
But not when cursor hover
####################################*/
.toc-backref {
    text-decoration: none !important;
}

.toc-backref:hover {
    text-decoration: underline !important;
}

a.reference.internal {
    text-decoration: none !important;
}

a.reference.internal:hover {
    text-decoration: underline !important;
}

a.reference.external {
    text-decoration: none !important;
}

a.reference.external:hover {
    text-decoration: underline !important;
}

/*#################
For External Links
###################*/

a.reference.external::after {
    content: var(--pst-icon-external-link);
    font: var(--fa-font-solid);
    font-size: .75em;
    margin-left: .3em;
}

/*#########
TEXT COLORS
# syntax: :color:`Colored text here`
#########*/

.black {
    color: black;
}

.white {
    color: white;
}

.green {
    color: #009f2b;
    font-weight: bold;
}

.orange {
    color: #dfab00;
    font-weight: bold;
}

.red {
    color: #c93600;
    font-weight: bold;
}

/*#########
TEXT STYLES
# syntax: :style:`Styled text here`
#########*/

.underlined {
    text-decoration: underline;
}

.bolditalic {
    font-weight: bold;
    font-style: italic;
}

.underlinedbold {
    text-decoration: underline;
    font-weight: bold;
}

.underlinedbolditalic {
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
}

.underlineditalic {
    text-decoration: underline;
    font-style: italic;
}

/*##########
TABLE COLORS
##########*/

.cell-green {
    background-color: #003b10;
}

.cell-orange {
    background-color: #9d7b09;
}

.cell-red {
    background-color: #7b2506;
}

/*##########
LINK STYLING
##########*/

a.reference.internal {
    color: light-dark(#0270bf, #00A3E0) !important;
}

a.reference.external {
    color: light-dark(#0270bf, #00A3E0) !important;
}

/*###################################
DATA COVERAGE TABLE CURSOR HIGHLIGHT
####################################*/

section#data-coverage-by-country-table table.sphinx-datatable thead tr:hover th,
section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td {
    background-color: light-dark(#c9daf8, #4f565e) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td {
    cursor: default !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:hover th:nth-child(n+4):nth-child(-n+8),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td:nth-child(n+4):nth-child(-n+8) {
    background-color: light-dark(#f89799, #804647) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:hover th:nth-child(n+9):nth-child(-n+15),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td:nth-child(n+9):nth-child(-n+15) {
    background-color: light-dark(#82e2b2, #2b694a) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:hover th:nth-child(16),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td:nth-child(16) {
    background-color: light-dark(#a0bef1, #25447a) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:hover th:nth-child(17),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr:hover td:nth-child(17) {
    background-color: light-dark(#f7c259, #8f6f2f) !important;
}

/*########################
DATA COVERAGE TABLE COLORS
########################*/

section#data-coverage-by-country-table table.sphinx-datatable {
    font-size: 0.7em;
    margin-right: auto;
    margin-left: 0px;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:nth-child(2) th {
    border-bottom: 2px solid black;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr th:nth-child(n+4):nth-child(-n+8),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr td:nth-child(n+4):nth-child(-n+8) {
    background-color: light-dark(#f9babb, #610b0c);
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr th:nth-child(n+9):nth-child(-n+15),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr td:nth-child(n+9):nth-child(-n+15) {
    background-color: light-dark(#bfe3d1, #004925);
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr th:nth-child(16),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr td:nth-child(16) {
    background-color: light-dark(#c9daf8, #00276a);
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr th:nth-child(17),
section#data-coverage-by-country-table table.sphinx-datatable tbody tr td:nth-child(17) {
    background-color: light-dark(#f4d9a4, #754f02);
}

/*######################################
DATA COVERAGE TABLE COLUMN HEAD BUTTON
########################################*/

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(1),
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(4),
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(9) {
    cursor: pointer;
    user-select: none;
    color: light-dark(#005a9c, #7baacd);
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(1):hover,
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(4):hover,
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(9):hover {
    text-decoration: underline;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(1):hover {
    background-color: light-dark(#aac9ff, #3f4143) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(4):hover {
    background-color: light-dark(#fa6265, #69292a) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(9):hover {
    background-color: light-dark(#64d09a, #185436) !important;
}

section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(1):active,
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(4):active,
section#data-coverage-by-country-table table.sphinx-datatable thead tr:first-child th:nth-child(9):active {
    background-color: #dcdcdc;
}

/*#############################
DATA COVERAGE TABLE STICKY HEAD
#############################*/

/*TESTS FOR STICKY HEADER AND BOTTOM BORDER*/
/*section#data-coverage-by-country-table table.sphinx-datatable thead tr {
    border-bottom: none !important; /* Prevent unwanted borders that don't stay with sticky */
/*}

/* Draw a 1px sticky line on the bottom of the cells in the first row */
/*section#data-coverage-by-country-table table.sphinx-datatable thead tr.row-odd th {
    box-shadow: inset 0 -1px 0 0 #000000 !important; 
}

/* Draw a 2px sticky line on the bottom of the cells in the second row */
/*section#data-coverage-by-country-table table.sphinx-datatable thead tr.row-even th {
    box-shadow: inset 0 -2px 0 0 #000000 !important; 
}
*/

section#data-coverage-by-country-table .pst-scrollable-table-container {
    max-height: 80vh;
    /* Adjust as needed */
    overflow: auto;
}

section#data-coverage-by-country-table table.sphinx-datatable thead {
    top: -50px;
    vertical-align: middle;
}

section#data-coverage-by-country-table .pst-scrollable-table-container {
    padding-top: 0 !important;
    /* Fixes table cells showing below the sticky header. */
}

section#data-coverage-by-country-table .pst-scrollable-table-container {
    padding-top: 50px;
    /* Match the height of the filter */
}

section#data-coverage-by-country-table .dataTables_filter,
section#data-coverage-by-country-table .dataTables_length {
    position: sticky;
    top: 0;
    /*background: white; /* Prevents transparency */
    /*z-index: 10; /* Ensures it stays above the table */
    padding: 10px 0 20px 0;
    /* Optional: Add spacing */
    /*margin-top: -180px; /* Pull it back up */
}

/* ###################################
For removing the author in the footer
######################################*/

.footer-item .component-author {
    display: none;
}

/* ###################################
For removing release schedule code
######################################*/

#release-schedule #id2.literal-block-wrapper.docutils.container {
    display: none;
}

/* ###################################
For maximize page width
######################################*/
.bd-page-width {
    max-width: 100%;
}



/* ####
For the kapa chatbot widget
### */

#kapa-widget-container {
    z-index: 10000 !important;
    position: absolute !important;
}

.mantine-Modal-root {
    z-index: 10000;
    position: absolute;
}


/*#################################
    DARK MODE CUSTOM STYLES
#################################*/

.dark-mode-theme,
body[data-theme='dark'],
html[data-theme='dark'] {
    /* ----- Sidebar ----- */

    /* Sidebar Background */
    .bd-sidebar {
        background-color: #121212;
    }

    /* Sidebar Dropdown Link Color */
    .bd-sidebar .nav-item .nav-link {
        color: #00A3E0;
    }

    /* Sidebar Dropdown Link Caret Down Color */
    .bd-sidebar .nav-item .nav-link .fa-solid {
        color: #575757;
    }

    /* Sidebar > Search */

    /* Search Bar Background Color */
    .bd-sidebar .search-button {
        background-color: #282828;
        border: none;
    }

    /* ----- Body ----- */

    /* Header Text Color */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: #FFFFFF !important;
    }

    /* Paragraph Text Color */
    p,
    li,
    dd {
        color: #C0C5C9;
    }

    /* Icon / SVG Color */
    .bd-main .fa-solid {
        color: #8B8B8B;
    }

    /* ----- Table ----- */

    /* Table Header Text Color */
    .bd-main table thead th {
        color: #C0C5C9;
    }

    /* Table Header Border Bottom Color */
    .bd-main table thead th {
        border-bottom: 2px solid #00A3E0;
    }

    /* Table Links Color */
    .bd-main table a {
        color: #00A3E0;
    }

    /* Table Text Color */
    .bd-main table td {
        color: #C0C5C9;
    }
}

/*#################################
    ACCESSIBILITY CUSTOM STYLES
#################################*/

/* For screen reader only text, to provide additional context for assistive technologies without displaying it visually */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* For adding outline for tab navigation for certain elements */
.tabnav-focus-fix-1:focus {
    outline: 3px solid rgb(148, 48, 179);
    outline-offset: 2px;
}

p > a[target="_blank"] {
    color: #0056b3 !important; 
    text-decoration: underline; /* Underlines help distinguish links regardless of color */
}

p > a[target="_blank"]:hover {
    color: #003d7a !important;
}

/* For color contrast issues */

/* --- 1. LIGHT MODE (Default) --- */
a, 
a[target="_blank"], /* Added this */
.internal.reference, 
.external.reference, 
.reference.internal, 
.reference.external, 
.nav-link, 
.open-modal-link, 
a[href^="#"], 
.std-ref {
    color: #0056b3 !important;
    text-decoration: underline;
}

/* ... keep your other Light Mode styles ... */

/* --- 2. DARK MODE (System Settings) --- */
/* @media (prefers-color-scheme: dark) {
    a, 
    a[target="_blank"],
    .internal.reference, 
    .external.reference, 
    .reference.internal, 
    .reference.external, 
    .nav-link, 
    .open-modal-link, 
    a[href^="#"], 
    .std-ref {
        color: #8ab4f8 !important;
    }
} */

/* --- 3. DARK MODE (Manual Theme Toggle) --- */
[data-theme="dark"] a, 
[data-theme="dark"] a[target="_blank"], /* Added this */
[data-theme="dark"] .internal.reference, 
[data-theme="dark"] .external.reference, 
[data-theme="dark"] .reference.internal, 
[data-theme="dark"] .reference.external, 
[data-theme="dark"] .nav-link, 
[data-theme="dark"] .open-modal-link, 
[data-theme="dark"] a[href^="#"], 
[data-theme="dark"] .std-ref {
    color: #8ab4f8 !important;
}

/* ########################
For sidebar nav focus state
########################### */
/* .bd-sidebar .toctree-toggle:focus-visible, 
.bd-sidebar summary:focus-visible {
    outline: 2px solid #0056b3 !important; 
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.2);
} */

/* Fallback for older browsers that don't support :focus-visible */
/* .bd-sidebar .toctree-toggle:focus, 
.bd-sidebar summary:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
} */

/* ####################
For the chatbot iframe
######################*/
/* 

#chatbot-dimmer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0); 
    z-index: 9997; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.4s ease-out, background-color 0.4s ease-out;
}

#chatbot-dimmer-overlay.active {
    opacity: 1; 
    background-color: rgba(0, 0, 0, 0.5); 
    pointer-events: auto; 
} */


/* --- Styles for the Chatbot Iframe Modal --- */
/* #chatbot-iframe-modal {
    position: fixed;
    border: none;
    z-index: 9998; 

    top: 50%;
    left: 50%;
    width: 40%;
    height: 65%;
    max-width: 900px;
    transform: translate(-50%, -50%); 

    opacity: 0; 
    pointer-events: none; 
    background-color: transparent; 

    overflow: hidden;

    transition: opacity 0.4s ease-out;
}

#chatbot-iframe-modal.active {
    opacity: 1; 
    pointer-events: auto; 
}
 */


/* --- Styles for the Chatbot Toggle Button --- */
/* #chatbot-toggle-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    z-index: 9999; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#chatbot-toggle-button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

#chatbot-toggle-button:active {
    background-color: #004085;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} */

/* --- Prevent body scrolling when iframe is open --- */
/* body.chatbot-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
} */