/* =============================================== +\
|             ROADMAP MULTIPLE PAGE STYLE          |
|    used for index.html in multiple roadmaps      |
\* =============================================== */

/* progress bar above topic index table */
.progress {
    height: 20px;
    background-color: #333; /* Dark background for the progress bar. */
    border-radius: 3px;
}

/* Table header cells. */
th {
    background-color: #1a4d7d !important; /* Dark blue background. */
    font-weight: 500;
    font-size: 1.2rem;
    padding: 4px;
}


/* Styling for header rows within tables, used to group related items. */
th.roadmap-phase {
    background-color: #373737 !important; /* Constant solid black. */
    color: #c14bde !important;            /* Sage-Code Purple. */
    font-size: 1.2rem;
    letter-spacing: 1.5px; /* Wider spacing for a "header" feel. */
    border-top: 1px solid #5d5d5d !important;
    border-bottom: 1px solid #414141 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/*
 * ROW CHECK HIGHLIGHTING
 * Styles for table rows that contain a checkbox, indicating a "completed" state.
 */

/* Removes any background color when a checkbox in a row is checked. */
tr:has(input:checked) {
    background-color: transparent !important;
}



/* Instead of a background, the text color is changed to indicate a checked state. */
tr:has(input:checked) td {
    color: #d0cfd0ec !important; /* Muted text color. */
    opacity: 0.9;                /* Slightly dims the row. */
}


/* Adds a glow effect when hovering over a checked row. */
tr:has(input:checked):hover td {
    color: hotpink !important;  /* Bright hover color for feedback. */
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.4); /* Subtle pink glow. */
}

======

/* --- CUSTOM CHECKBOX --- */

/* Hides the default browser checkbox. */
.topic-check,
.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #111;
    cursor: pointer;
    position: relative;
    top: 0;
    flex-shrink: 0;
    margin-right: 0 !important;
}

/* Styles the checkbox when it is checked. */
.topic-check:checked,
.form-check-input:checked {
    background-color: #2cba77 !important; /* Sage Green */
    border-color: #2cba77 !important;
}

/* Creates the "check" mark using a pseudo-element. */
.topic-check:checked::after {
    content: '✔';
    font-size: 9px;
    color: #000;
    position: absolute;
    top: 0px;
    left: 2px;
}

/* PGP roadmap: paradigm rows and their language sub-items. */
.pgp-paradigm-row > td {
    background-color: rgba(13, 110, 253, .18) !important;
    vertical-align: middle;
}

.pgp-paradigm a {
    font-size: 1.5rem;
    font-weight: 500;
}

.pgp-language {
    padding-left: 1.5rem !important;
}

.pgp-language a::before {
    content: "\2022";
    display: inline-block;
    width: 1.1rem;
    font-size: 1.8em;
    line-height: 0;
    vertical-align: -0.12em;
}