/* =================================================================== */
/* --- 1. CORE & LAYOUT STYLES --- */
/* =================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #1b1b1b;
    color: #f1f1f1;
    font-size: 16px;
    line-height: 1.7;
}
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
a {
    color: #00B6F6;
    text-decoration: none;
    font-weight: 600;
}
a:hover {
    text-decoration: underline;
}

/* =================================================================== */
/* --- 2. HEADER STYLES --- */
/* =================================================================== */
header {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/header_bg_2.png') center/cover no-repeat;
    aspect-ratio: 4 / 1;
    padding: 2rem 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}
header h1 {
    font-size: 2.5rem;
}
header h2 {
    font-size: 1.25rem;
    font-style: italic;
}
.header-logo {
    position: absolute;
    top: 20px;
    left: 25px;
    height: 150px;
    width: auto;
    object-fit: contain;
}

/* =================================================================== */
/* --- 3. NAVIGATION MENU (CLICK-BASED) --- */
/* =================================================================== */
nav {
    background: linear-gradient(135deg, #082C62, #00B6F6);
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}
#sidenav_element {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
#sidenav_element > a,
.dropdown > .dropdown-btn {
    color: white;
    text-decoration: none;
    padding: 1rem 1.25rem;
    display: block;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
#sidenav_element > a:hover,
.dropdown .dropdown-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.dropdown {
    position: relative;
}
.dropdown-container {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #082C62;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    z-index: 1001; /* Ensures dropdown appears above other content */
    border-radius: 0 0 4px 4px;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.dropdown-container.show {
    visibility: visible;
    opacity: 1;
}
.dropdown-container a,
.dropdown-container .dropdown-btn {
    color: #f1f1f1;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s;
    width: 100%;
    border: none;
    background: none;
    font-size: 1rem;
    cursor: pointer;
}
.dropdown-container a:hover,
.dropdown-container .dropdown-btn:hover {
    background-color: #00B6F6;
}
.dropdown-btn i {
    margin-left: 8px;
    transition: transform 0.3s;
}
.dropdown-btn.active > i.fa-caret-down {
    transform: rotate(-180deg);
}
.dropdown-container .dropdown .dropdown-container {
    top: 0;
    left: 100%;
    margin-top: -1px;
    border-radius: 4px;
}
.dropdown-container .dropdown-btn i.fa-caret-right {
    float: right;
    margin-top: 4px;
}

/* =================================================================== */
/* --- 4. GENERAL PAGE & CONTENT STYLES --- */
/* =================================================================== */
.content {
    text-align: justify;
}
.content-block {
    text-align: center;
    margin-bottom: 2rem;
}
.content-block img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    text-align: center;
    border-bottom: 2px solid #00B6F6;
    padding-bottom: 0.75rem;
    margin: 3rem auto 2rem auto;
    max-width: 80%;
}
.content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #00B6F6;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.content p {
    margin-bottom: 1.2rem;
}
.content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.content ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 1rem;
}
.content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background-color: #00B6F6;
    border-radius: 50%;
}
.bio-photo,
.president-photo {
    display: block;
    margin: 0 auto 1.5rem auto;
    width: 182px;
    border-radius: 8px;
}
.image-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}
.content-image-wrapper {
    margin: 0;
    text-align: center;
}
.content-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #444;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-image-wrapper:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
.content-image-wrapper figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #aaa;
    font-style: italic;
}
.signature {
    margin-top: 3rem;
    text-align: right;
    font-size: 1.1rem;
}
.language-switcher {
    margin-bottom: 2rem;
    text-align: right;
}
.language-switcher select {
    background-color: #333;
    color: #f1f1f1;
    padding: 8px 12px;
    border: 1px solid #555;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    cursor: pointer;
}
.fb-plugin-container {
    width: 100%;
    max-width: 500px;
    margin: 2rem auto;
    overflow: hidden;
}

/* =================================================================== */
/* --- 5. SECTION & COMPONENT STYLES (Rules, Archives, etc.) --- */
/* =================================================================== */
.section {
    margin-top: 3rem;
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 1.5rem;
}
.section h2 {
    text-align:center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    border-bottom: none;
    max-width: 100%;
}
.section img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
    border-radius: 10px;
}
.section a:hover img {
    transform: scale(1.05);
}
.sponsor-grid, .partner-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}
.rules-section {
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    text-align: justify;
}
.rules-section:nth-of-type(odd) { background-color: #222; }
.rules-section:nth-of-type(even) { background-color: #2a2a2a; }
.rules-section h2 { text-align: left; }
.rules-section ol { padding-left: 1.5rem; }
.notice-box {
    background-color: rgba(0, 182, 246, 0.1);
    border-left: 5px solid #00B6F6;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}
.notice-box h3 { font-size: 1.5rem; color: #fff; margin: 0 0 0.5rem 0; }
.notice-box p { margin: 0; }
.highlight-text { color: yellow; }

.archive-accordion .accordion-item {
    background-color: #222;
    border: 1px solid #333;
    margin-bottom: 10px;
    border-radius: 5px;
}
.archive-accordion .accordion-header {
    background-color: #2a2a2a;
    color: #fff;
    cursor: pointer;
    padding: 18px 25px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}
.archive-accordion .accordion-header:hover,
.archive-accordion .accordion-header.active {
    background-color: #333;
}
.archive-accordion .accordion-header .location { font-size: 1rem; font-weight: 400; color: #ccc; }
.archive-accordion .accordion-header .icon::before { content: '+'; font-size: 1.5rem; color: #00B6F6; }
.archive-accordion .accordion-header.active .icon::before { content: '-'; }
.archive-accordion .accordion-panel {
    padding: 0 25px;
    background-color: #222;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.archive-accordion .accordion-panel.show { padding: 25px; }
.archive-accordion .winners-list { display: grid; grid-template-columns: 1fr 2fr; gap: 10px 20px; }
.archive-accordion .winners-list dt { font-weight: bold; color: #00B6F6; }
.archive-accordion .winners-list dd { margin: 0; }
.archive-accordion .accordion-panel h4 {
    margin-top: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid #444; color: #fff; font-size: 1.1rem;
}
.archive-accordion .accordion-panel h4:first-child { margin-top: 0; }

/* =================================================================== */
/* --- 6. DELEGATE & JURY CARD GRID STYLES --- */
/* =================================================================== */
#delegate_table,
#jury_table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
a.delegate-card-link, a.jury-card-link {
    text-decoration: none;
}
.delegate-card, .jury-card {
    background-color: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}
a.delegate-card-link:hover .delegate-card,
a.jury-card-link:hover .jury-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 182, 246, 0.2);
    border-color: #00B6F6;
}
.delegate-card img, .jury-card img {
    width: 130px; height: 130px; border-radius: 50%;
    object-fit: cover; margin-bottom: 1rem; border: 3px solid #444;
}
.delegate-card .delegate-name, .jury-card .jury-name {
    font-size: 1.2rem; font-weight: 600; color: #00B6F6; margin: 0;
}
.delegate-card .country-info, .jury-card .country-info {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 0.5rem;
}
.delegate-card .country-flag, .jury-card .country-flag {
    width: 24px; height: auto; border-radius: 3px; border: none; margin: 0;
}
.delegate-card .delegate-country, .jury-card .jury-country {
    font-size: 1rem; color: #f1f1f1;
}

/* =================================================================== */
/* --- 7. FOOTER STYLES --- */
/* =================================================================== */
.leadership-footer {
    background-color: #222;
    color: #fff;
    padding: 40px 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}
.leader-card {
    flex: 1 1 280px;
    text-align: center;
}
.leader-card img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
}
.leader-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 10px;
}
.leader-links a {
    color: #ccc;
    font-size: 1.4rem;
    transition: color 0.2s;
    text-decoration: none;
}
.leader-links a:hover {
    color: #00B6F6;
}
.leader-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f1f1;
    margin-top: 10px;
}
.leader-links i {
    margin-right: 8px;
}
.copyright {
    background-color: #111;
    color: #ccc;
    text-align: center;
    padding: 15px 0;
    font-size: 0.9rem;
}

/* =================================================================== */
/* --- 8. MEDIA QUERIES --- */
/* =================================================================== */
/* =================================================================== */
/* --- 5. MEDIA QUERIES (Includes the fix) --- */
/* =================================================================== */
/* =================================================================== */
/* --- 8. MEDIA QUERIES (Includes mobile menu fix) --- */
/* =================================================================== */
@media screen and (max-width: 768px) {
    header {
        padding: 1.5rem 1rem;
        aspect-ratio: auto;
        min-height: 150px;
    }
    header h1 {
        font-size: 1.5rem;
    }
    header h2 {
        font-size: 1rem;
    }
    .header-logo {
        height: 60px;
        top: 15px;
        left: 15px;
    }
    .archive-accordion .winners-list {
        grid-template-columns: 1fr;
    }
    .language-switcher {
        text-align: left;
    }

    /* --- START: MOBILE NAVIGATION FIX --- */

    /* Change the main nav container to allow vertical stacking */
    #sidenav_element {
        flex-direction: column;
        align-items: stretch; /* Make items take full width */
    }

    /* This is the key fix: force all sub-menus to open downwards */
    .dropdown-container .dropdown .dropdown-container {
        left: 0; /* Align to the left edge of the parent button */
        top: 100%; /* Position below the parent button */
        width: 100%; /* Make it full width */
        border-radius: 0;
        box-shadow: inset 0 5px 10px -5px rgba(0,0,0,0.5); /* Optional: add inner shadow for depth */
    }

    /* Indent the text inside nested menus for clarity */
    .dropdown-container .dropdown .dropdown-container a,
    .dropdown-container .dropdown .dropdown-container .dropdown-btn {
        padding-left: 2rem;
    }

    /* Change the right-arrow to a down-arrow on mobile */
    .dropdown-container .dropdown-btn i.fa-caret-right::before {
        content: "\f0d7"; /* Font Awesome unicode for caret-down */
    }
    /* --- END: MOBILE NAVIGATION FIX --- */
}


/* =================================================================== */
/* --- 9. RESULTS TABLE STYLES --- */
/* =================================================================== */

/* Main container for the results */
.results-container {
    width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling on small screens if needed */
}

/* Div behaving like a table */
.divTable {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

/* Div behaving like a table row */
.divTableRow {
    display: table-row;
    border-bottom: 1px solid #444;
}
.divTableRow:last-child {
    border-bottom: none;
}

/* Div behaving like a table cell */
.divTableCell, .divTableCellCat {
    display: table-cell;
    padding: 12px 10px;
    vertical-align: middle;
}
.divTableCellCat {
    font-weight: bold;
    color: #00B6F6;
    width: 25%; /* Give category titles a consistent width */
}

/* Styling for embedded videos */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
}
.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Styling for diploma images */
img.img_h115px_dipl {
    height: 115px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #555;
}

/* =================================================================== */
/* --- 9. RESULTS TABLE STYLES --- */
/* =================================================================== */

/* Main container for the results sections */
.results-container {
    width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling on small screens if needed */
}

/* Div behaving like a table */
.divTable {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

/* Div behaving like a table row */
.divTableRow {
    display: table-row;
    border-bottom: 1px solid #444;
}
.divTableRow:last-child {
    border-bottom: none;
}
.divTableRow:nth-of-type(even) {
    background-color: #2a2a2a;
}

/* Div behaving like a table cell */
.divTableCell, .divTableCellCat {
    display: table-cell;
    padding: 12px 10px;
    vertical-align: middle;
    font-size: 1rem;
}
.divTableCellCat {
    font-weight: bold;
    color: #00B6F6;
    width: 25%; /* Give category titles a consistent width */
}

/* Specific styling for text alignment and thumbnails */
.text_center { text-align: center; }
.wordbreak { word-break: break-word; }
.vertical_middle { vertical-align: middle; }

/* Styling for embedded videos */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 150px; /* Control the size of video thumbnails */
    border-radius: 8px;
    margin: auto;
}
.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Styling for diploma and jury document images */
.img_h115px_dipl, .img_h150px {
    height: 115px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #555;
    display: block;
    margin: auto;
}

/* =================================================================== */
/* --- 9. RESULTS PAGE & JURY CARD STYLES --- */
/* =================================================================== */

/* Main container for the results sections */
.results-container {
    width: 100%;
    overflow-x: auto;
}

/* Div behaving like a table */
.divTable {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}
.divTableRow {
    display: table-row;
    border-bottom: 1px solid #444;
}
.divTableRow:last-child {
    border-bottom: none;
}
.divTableRow:nth-of-type(even) {
    background-color: #2a2a2a;
}
.divTableCell, .divTableCellCat {
    display: table-cell;
    padding: 12px 10px;
    vertical-align: middle;
    font-size: 1rem;
}
.divTableCellCat {
    font-weight: bold;
    color: #00B6F6;
    width: 25%;
}
.text_center { text-align: center; }

/* Styling for embedded videos */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 150px;
    border-radius: 8px;
    margin: auto;
}
.embed-container iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: 0;
}

/* Styling for diploma images */
img.img_h115px_dipl {
    height: 115px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #555;
    display: block;
    margin: auto;
}

/* Jury Card Styles (reused for results page) */
a.jury-card-link { text-decoration: none; }
.jury-card {
    background-color: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}
a.jury-card-link:hover .jury-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 182, 246, 0.2);
    border-color: #00B6F6;
}
.jury-card img {
    width: 130px; height: 130px; border-radius: 50%;
    object-fit: cover; margin-bottom: 1rem; border: 3px solid #444;
}
.jury-card .jury-name {
    font-size: 1.2rem; font-weight: 600; color: #00B6F6; margin: 0;
}
.jury-card .country-info {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 0.5rem;
}
.jury-card .country-flag {
    width: 24px; height: auto; border-radius: 3px; border: none; margin: 0;
}
.jury-card .jury-country { font-size: 1rem; color: #f1f1f1; }

/* =================================================================== */
/* --- 9. RESULTS TABLE STYLES --- */
/* =================================================================== */

/* Main container for the results sections */
.results-container {
    width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling on small screens if needed */
}

/* Div behaving like a table */
.divTable {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}
.divTableRow {
    display: table-row;
    border-bottom: 1px solid #444;
}
.divTableRow:last-child {
    border-bottom: none;
}
.divTableRow:nth-of-type(even) {
    background-color: #2a2a2a;
}
.divTableCell, .divTableCellCat {
    display: table-cell;
    padding: 12px 10px;
    vertical-align: middle;
    font-size: 1rem;
}
.divTableCellCat {
    font-weight: bold;
    color: #00B6F6;
    width: 25%; /* Give category titles a consistent width */
}
.text_center { text-align: center; }
.wordbreak { word-break: break-word; }
.vertical_middle { vertical-align: middle; }

/* Styling for embedded videos */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 150px; /* Control the size of video thumbnails */
    border-radius: 8px;
    margin: auto;
}
.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Styling for diploma and jury document images */
img.img_h115px_dipl, .img_h150px {
    height: 115px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #555;
    display: block;
    margin: auto;
}


/* =================================================================== */
/* --- 9. MODERN RESULTS GRID STYLES --- */
/* =================================================================== */

.results-grid {
    width: 100%;
    margin-top: 2rem;
}

.results-header {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 100px 180px 100px;
    background-color: #082C62;
    color: white;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

.header-item {
    padding: 15px;
    text-align: left;
}

.result-row {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 100px 180px 100px;
    align-items: center;
    border-bottom: 1px solid #333;
    background-color: #2a2a2a;
}

.result-row:nth-of-type(odd) {
    background-color: #222;
}

.result-item {
    padding: 15px;
    text-align: left;
}

.diploma-icon {
    width: 40px;
    height: auto;
    transition: transform 0.2s;
}
.diploma-icon:hover {
    transform: scale(1.1);
}

/* --- Styles for Preliminary Rounds (Video Grid) --- */
.results-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.video-card {
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}
.video-caption {
    padding: 1rem;
    font-weight: 600;
    text-align: center;
}

/* --- Responsive Styles for the Results Table --- */
@media screen and (max-width: 900px) {
    .results-header {
        display: none; /* Hide header on mobile */
    }
    .results-grid, .result-row {
        grid-template-columns: 1fr; /* Stack everything vertically */
    }
    .result-row {
        margin-bottom: 1rem;
        border-radius: 8px;
        border: 1px solid #444;
    }
    .result-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        border-bottom: 1px solid #333;
    }
    .result-item:last-child {
        border-bottom: none;
    }
    .result-item::before {
        content: attr(data-label); /* Use data-label for headers */
        font-weight: bold;
        color: #00B6F6;
        margin-right: 1rem;
    }
    .result-item[data-label="Video"] {
        flex-direction: column;
        align-items: center;
    }
    .embed-container {
        max-width: 100%;
        width: 100%;
    }
}


/* =================================================================== */
/* --- 9. MODERN RESPONSIVE RESULTS TABLE --- */
/* =================================================================== */
.results-table {
    margin-top: 2rem;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
}

.result-row {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr 1fr; /* Rank/Name, Mark, Videos, Diploma */
    align-items: center;
    background-color: #2a2a2a;
    border-bottom: 1px solid #444;
}
.result-row:last-child {
    border-bottom: none;
}
.result-row:nth-of-type(odd) {
    background-color: #222;
}

.result-cell {
    padding: 1rem;
}

.result-cell.main-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.main-info .rank {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00B6F6;
    min-width: 30px;
    text-align: center;
}
.main-info .candidate-details {
    display: flex;
    flex-direction: column;
}
.candidate-details .name {
    font-weight: 600;
    font-size: 1.1rem;
}
.candidate-details .country {
    font-size: 0.9rem;
    color: #ccc;
}

.result-cell.final-mark {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.result-cell.round-videos {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.round-videos .embed-container {
    max-width: 120px;
}

.result-cell.diploma {
    text-align: center;
}
.diploma-icon {
    width: 40px;
    height: auto;
    transition: transform 0.2s;
}
.diploma-icon:hover {
    transform: scale(1.1);
}
.mobile-label {
    display: none; /* Hidden on desktop */
    font-weight: bold;
    color: #00B6F6;
}

/* --- Responsive Styles for the Results Table --- */
@media screen and (max-width: 900px) {
    .result-row {
        grid-template-columns: 1fr; /* Stack all cells vertically */
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid #444;
        border-radius: 8px;
    }
    .result-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #333;
    }
    .result-row .result-cell:last-child {
        border-bottom: none;
    }
    .result-cell.main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .mobile-label {
        display: inline; /* Show labels on mobile */
    }
}


/* =================================================================== */
/* --- 9. RESULTS ACCORDION & VIDEO GRID STYLES --- */
/* =================================================================== */

.results-accordion .accordion-item {
    background-color: #2a2a2a;
    border: 1px solid #444;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.results-accordion .accordion-header {
    background-color: #2a2a2a;
    color: #f1f1f1;
    cursor: pointer;
    padding: 1rem 1.5rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    display: grid;
    grid-template-columns: 50px 1fr 1fr 80px 30px;
    align-items: center;
    transition: background-color 0.3s ease;
}
.results-accordion .accordion-header:hover {
    background-color: #333;
}
.results-accordion .accordion-header.active {
    background-color: #082C62;
}
.results-accordion .accordion-header .rank { font-weight: bold; font-size: 1.2rem; }
.results-accordion .accordion-header .name { font-weight: 600; }
.results-accordion .accordion-header .country { color: #ccc; }
.results-accordion .accordion-header .mark { font-weight: bold; text-align: right; }
.results-accordion .accordion-header .icon::before {
    content: '+';
    font-size: 1.5rem;
    color: #00B6F6;
    float: right;
}
.results-accordion .accordion-header.active .icon::before {
    content: '-';
}
.results-accordion .accordion-panel {
    padding: 0 1.5rem;
    background-color: #222;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.results-accordion .panel-content {
    padding: 1.5rem 0;
}
.results-accordion .panel-content h4 {
    color: #00B6F6;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #444;
}
.results-accordion .panel-content h4:first-child {
    margin-top: 0;
}
.results-accordion .round-detail {
    display: flex; /* Use flexbox for more stability */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.results-accordion .round-detail .round-info {
    flex-grow: 1; /* Allow text to take available space */
}

.results-accordion .round-detail .embed-container {
    flex-shrink: 0; /* Prevent video from shrinking */
    width: 200px;   /* Set a consistent width */
    max-width: 100%;
}
.diploma-icon {
    width: 50px; height: auto; transition: transform 0.2s;
}
.diploma-icon:hover { transform: scale(1.1); }

.results-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.video-card { background-color: #2a2a2a; border-radius: 8px; overflow: hidden; }
.video-caption { padding: 1rem; font-weight: 600; text-align: center; }

@media screen and (max-width: 768px) {
    .results-accordion .accordion-header {
        grid-template-columns: 40px 1fr 60px 30px;
        gap: 10px;
    }
    .results-accordion .accordion-header .country { display: none; }
    .results-accordion .round-detail {
        grid-template-columns: 1fr;
    }
}



/* =================================================================== */
/* --- 9. FINAL POLISHED RESULTS ACCORDION STYLES --- */
/* =================================================================== */

.results-accordion .accordion-item {
    background-color: #2a2a2a;
    border: 1px solid #444;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.results-accordion .accordion-header {
    background-color: #2a2a2a;
    color: #f1f1f1;
    cursor: pointer;
    padding: 1rem 1.5rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    display: grid;
    grid-template-columns: 50px 1fr 1fr 80px 30px;
    align-items: center;
    transition: background-color 0.3s ease;
}
.results-accordion .accordion-header:hover,
.results-accordion .accordion-header.active {
    background-color: #082C62;
}
.results-accordion .accordion-header .rank { font-weight: bold; font-size: 1.2rem; }
.results-accordion .accordion-header .name { font-weight: 600; }
.results-accordion .accordion-header .country { color: #ccc; }
.results-accordion .accordion-header .mark { font-weight: bold; text-align: right; }
.results-accordion .accordion-header .icon::before {
    content: '+';
    font-size: 1.5rem;
    color: #00B6F6;
    float: right;
}
.results-accordion .accordion-header.active .icon::before {
    content: '-';
}
.results-accordion .accordion-panel {
    padding: 0 1.5rem;
    background-color: #222;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.results-accordion .panel-content {
    padding: 1.5rem 0;
    border-top: 1px solid #444;
}
.results-accordion .panel-content h4 {
    color: #00B6F6;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #444;
}
.results-accordion .panel-content h4:first-child {
    margin-top: 0;
}
.results-accordion .round-details-list {
    display: grid;
    grid-template-columns: max-content auto; /* Two columns */
    gap: 0.5rem 1.5rem; /* Row and column gap */
    align-items: center;
}
.results-accordion .round-details-list dt {
    font-weight: bold;
    text-align: right;
    color: #ccc;
}
.results-accordion .round-details-list dd {
    margin: 0;
}
.results-accordion .round-details-list dd a i {
    margin-left: 0.5rem;
    font-size: 0.8em;
}
.diploma-icon {
    width: 50px; height: auto; transition: transform 0.2s;
}
.diploma-icon:hover { transform: scale(1.1); }


/* --- Responsive Styles for Accordion --- */
@media screen and (max-width: 768px) {
    .results-accordion .accordion-header {
        grid-template-columns: 40px 1fr 60px 30px;
        gap: 10px;
    }
    .results-accordion .accordion-header .country { display: none; }
    .results-accordion .round-details-list {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .results-accordion .round-details-list dt {
        text-align: left;
    }
    .results-accordion .round-details-list dd {
        padding-left: 1rem; /* Indent the value below its label */
        margin-bottom: 0.5rem;
    }
}

/* =================================================================== */
/* --- 10. LAYOUT FIXES & ADJUSTMENTS --- */
/* =================================================================== */

/* Fix for extra space above results and jury page titles */
.results-container > h3[id$="_title"] {
    margin-top: 0;
}


/* =================================================================== */
/* --- 11. MODERN FORM STYLES --- */
/* =================================================================== */

.entry-form-container {
    background-color: #2a2a2a;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #444;
}

.form-section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #444;
}
.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.form-section h2 {
    text-align: left;
    border-bottom: none;
    margin: 0 0 1.5rem 0;
    max-width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}
.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #f1f1f1;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #1b1b1b;
    border: 1px solid #555;
    border-radius: 5px;
    color: #f1f1f1;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00B6F6;
    box-shadow: 0 0 0 2px rgba(0, 182, 246, 0.3);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-info-box {
    background-color: rgba(0, 182, 246, 0.1);
    border-left: 5px solid #00B6F6;
    padding: 1.5rem;
    margin: 0 0 2rem 0;
    border-radius: 5px;
}

.form-submit-button {
    background-color: #00B6F6;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
.form-submit-button:hover {
    background-color: #089cd4;
    transform: translateY(-2px);
}
.form-submit-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Find this entire block and replace it */

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="password"], /* THIS IS THE FIX */
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #1b1b1b;
    border: 1px solid #555;
    border-radius: 5px;
    color: #f1f1f1;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.center-text {
    text-align: center;
}
.highlight-yellow {
    color: yellow;
}
.highlight-red {
    color: #ff6b6b;
}

.previous-candidate-section {
    background-color: #222;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}
.previous-candidate-section .form-group {
    max-width: 500px;
    margin: 1rem auto;
}
.previous-candidate-section .form-submit-button {
    margin: 1rem auto 0 auto;
    width: auto;
    display: inline-block;
}

.submission-section {
    text-align: center;
    padding: 1.5rem;
    background-color: #222;
    border-radius: 8px;
    margin-top: 1.5rem;
}
.submission-section h3 {
    margin-top: 0;
}
.paypal-info {
    font-size: 1.2rem;
    margin: 1rem 0;
}
.paypal-info span {
    font-style: italic;
    color: #00B6F6;
    font-weight: bold;
}


/* Add this at the end of your CSS file, perhaps in the MODERN FORM STYLES section */

.input-with-flag {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between dropdown and flag */
}

.input-with-flag select {
    flex-grow: 1; /* Makes the select box take up available space */
}

.flag-display {
    width: 40px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #333; /* BG for when image is loading */
    transition: opacity 0.3s ease;
}


/* =================================================================== */
/* --- 12. MODERN UPLOAD COMPONENT STYLES --- */
/* =================================================================== */

.upload-area {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 2rem;
    align-items: center;
    background-color: #222;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #444;
}

.upload-drop-zone {
    border: 2px dashed #555;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: #aaa;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    position: relative; /* For the hidden file input */
}

.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
    border-color: #00B6F6;
    background-color: rgba(0, 182, 246, 0.05);
}

.upload-instructions .fa-solid {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #00B6F6;
}

.upload-instructions .small-text {
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

.upload-instructions .small-text-hint {
    font-size: 0.8rem;
    color: #777;
    margin-top: 1rem;
}

.upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.image-preview-container {
    width: 180px;
    height: 240px;
    border: 1px solid #555;
    border-radius: 8px;
    background-color: #1b1b1b;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #777;
}

.image-preview-placeholder .fa-solid {
    font-size: 2.5rem;
}

.image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents image distortion */
    display: none; /* Hidden by default */
}

.clear-picture-btn {
    background-color: #ff4d4d;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.clear-picture-btn:hover {
    background-color: #e60000;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .upload-area {
        grid-template-columns: 1fr; /* Stack elements vertically on small screens */
    }
}


/* Add this to your main stylesheet, e.g., in the form styles section */

.category-info-box {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border-top: 2px solid #00B6F6;
}

.category-info-box h4,
.category-info-box p {
    margin: 0.5rem 0;
}

.fee-display {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f1f1f1;
}


/* Add this to your main stylesheet, e.g., after the .category-info-box style */

.info-box-open {
    background-color: rgba(29, 161, 29, 0.2); /* Light green */
    border-top: 2px solid #1da11d;
}

.info-box-closed {
    background-color: rgba(224, 36, 36, 0.2); /* Light red */
    border-top: 2px solid #e02424;
}

.info-box-pending {
    background-color: rgba(245, 158, 11, 0.2); /* Light orange/amber */
    border-top: 2px solid #f59e0b;
}

/* =================================================================== */
/* --- 13. PROGRAM GRID STYLES (for Rounds) --- */
/* =================================================================== */

.program-grid {
    display: grid;
    /* Columns: Number, Title, Composer, Time */
    grid-template-columns: 40px 2fr 2fr 1fr;
    gap: 1rem 1.5rem; /* Row and column gap */
    align-items: center;
    margin-top: 1rem;
}

.program-grid-header {
    font-weight: 600;
    color: #00B6F6;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #555;
    font-size: 0.9rem;
}

.program-grid .piece-number {
    text-align: center;
    font-weight: 600;
    color: #aaa;
}

/* Remove default margin from form-groups inside the grid */
.program-grid .form-group {
    margin-bottom: 0;
}

/* Hide mobile labels on desktop */
.mobile-label {
    display: none;
}

/* --- Responsive Styles for the Program Grid --- */
@media screen and (max-width: 768px) {
    /* Hide the desktop headers on mobile */
    .program-grid-header {
        display: none;
    }

    /* Switch to a single-column layout */
    .program-grid {
        grid-template-columns: 1fr;
        gap: 0; /* Remove grid gap, we'll use margin for spacing */
    }

    .program-grid .piece-number {
        display: none; /* The mobile label makes this redundant */
    }

    .program-grid .form-group {
        margin-bottom: 1rem;
    }

    /* Add a separator after each complete piece entry (after every 3rd form-group) */
    .program-grid .form-group:nth-of-type(3n) {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #444;
    }

    .program-grid .form-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Show the mobile labels */
    .mobile-label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: #00B6F6;
        font-size: 0.9rem;
    }
}


/* =================================================================== */
/* --- 15. RESPONSIVE STYLES FOR FORMS & MOBILE (ENHANCED) --- */
/* =================================================================== */

@media screen and (max-width: 768px) {

    /* --- General Layout & Typography --- */
    main {
        padding: 1rem; /* Reduce page padding on mobile */
    }

    .entry-form-container {
        padding: 1rem; /* Reduce main form padding */
    }

    .form-section h2 {
        font-size: 1.5rem; /* Make section titles a bit smaller */
    }

    /* --- Main Form Grid (The Core Fix) --- */
    .form-grid {
        /* This is the key change: force all form fields into a single column */
        grid-template-columns: 1fr;
        gap: 1.5rem 0; /* Increase vertical gap, remove horizontal gap */
    }

    .form-group.full-width {
        grid-column: auto; /* This class is no longer needed on mobile */
    }

    /* --- Specific Fixes for Problem Areas --- */
    .submission-section,
    .previous-candidate-section {
        padding: 1rem;
        /* Remove text-align:center from the container, we will apply it directly */
        text-align: left;
    }

    /* Ensure elements that SHOULD be centered still are */
    .submission-section .form-group.center-text {
        text-align: center;
    }

    .category-info-box {
        padding: 1rem;
    }

    /* --- Flag Display --- */
    .input-with-flag {
        flex-wrap: nowrap;
    }

    .flag-display {
        width: 35px;
    }

}


/* =================================================================== */
/* --- 16. FORM INSTRUCTIONS & TEXTAREA --- */
/* =================================================================== */

.form-instructions {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Ensure textarea has a good default height */
.form-group textarea {
    min-height: 200px;
    resize: vertical;
}

/* =================================================================== */
/* --- 17. RESULTS LANDING PAGE STYLES --- */
/* =================================================================== */

.results-container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns on desktop */
    gap: 2rem;
}

.results-category-card {
    background-color: #2a2a2a;
    padding: 2rem;
    border-radius: 8px;
    border-top: 3px solid #00B6F6;
    transition: transform 0.3s, box-shadow 0.3s;
}

.results-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.results-category-card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: none;
    text-align: center;
}

.results-category-card hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 182, 246, 0), rgba(0, 182, 246, 0.75), rgba(0, 182, 246, 0));
    margin-bottom: 1.5rem;
}

.results-category-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-category-card li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #f1f1f1;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    margin-bottom: 0.5rem;
}

.results-category-card li a:hover {
    background-color: #00B6F6;
    color: white;
    transform: translateX(5px);
}

/* --- Responsive styles for the results page --- */
@media screen and (max-width: 900px) {
    .results-container-grid {
        grid-template-columns: 1fr; /* Stack to one column on smaller screens */
    }
}

/* =================================================================== */
/* --- 19. DISTINCT HOME BUTTON STYLE (REFINED) --- */
/* =================================================================== */

.home-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem; /* Reduced padding for a sleeker look */
    margin: 0.5rem 1.5rem 0.5rem 0; /* Added margin to the right for spacing */
    background-color: #082C62;
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 20px;
    border: 1px solid #00B6F6;
    transition: background-color 0.3s, transform 0.2s;
}

.home-button:hover {
    background-color: #00B6F6;
    color: white;
    text-decoration: none;
    transform: scale(1.05);
}

.home-button .fa-house {
    font-size: 1rem; /* Slightly reduced icon size */
}


/* =================================================================== */
/* --- 20. LIVE SHOW CARD STYLES --- */
/* =================================================================== */

.live-grid-container {
    display: grid;
    /* Creates a responsive grid that shows 1, 2, or 3 columns depending on screen width */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.live-card {
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.live-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 182, 246, 0.2);
}

/* Responsive video wrapper */
.live-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    background-color: #1b1b1b;
}

.live-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.live-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the link to be pushed to the bottom */
}

.live-card-categories {
    margin: 0;
    color: #f1f1f1;
    line-height: 1.6;
    flex-grow: 1; /* Pushes the link down */
}

.live-card-link {
    display: inline-block;
    background-color: #c4302b;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1.5rem;
    text-align: center;
    transition: background-color 0.3s;
}

.live-card-link:hover {
    background-color: #e0443f;
    text-decoration: none;
}

.live-card-link .fa-youtube {
    margin-left: 0.5rem;
}


/* =================================================================== */
/* --- 21. DASHBOARD STYLES --- */
/* =================================================================== */

.dashboard-section {
    margin-bottom: 3rem;
}

.dashboard-section h2 {
    border-bottom: 2px solid #444;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.6rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: #2a2a2a;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: #f1f1f1;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #444;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    min-height: 150px;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    border-color: #00B6F6;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    color: #00B6F6;
}

.dashboard-card i.fa-solid {
    font-size: 2.5rem;
    color: #00B6F6;
    transition: color 0.3s;
}

.dashboard-card:hover i.fa-solid {
    color: #fff;
}



/* =================================================================== */
/* --- 24. DIPLOMA IMAGE STYLING --- */
/* =================================================================== */

/* This targets the container for the diploma link */
.diploma-link-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #444; /* Adds a nice separator line */
}

/* This styles the link itself */
.diploma-link-wrapper a {
    display: inline-block; /* Allows for transforms and shadows */
    border: 2px solid #555;
    border-radius: 8px;
    overflow: hidden; /* Ensures the image stays within the rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* This styles the image inside the link */
.diploma-icon {
    display: block;
    height: 120px; /* Makes the image much larger and more prominent */
    width: auto;
    object-fit: cover;
}

/* Adds a hover effect to the entire diploma link */
.diploma-link-wrapper a:hover {
    transform: scale(1.03);
    border-color: #00B6F6;
    box-shadow: 0 8px 25px rgba(0, 182, 246, 0.2);
}


/* =================================================================== */
/* --- 23. FINAL RESULTS & JURY STYLES --- */
/* =================================================================== */

.results-accordion .accordion-item {
    background-color: #2a2a2a;
    border: 1px solid #444;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.results-accordion .accordion-header {
    background-color: #2a2a2a;
    color: #f1f1f1;
    cursor: pointer;
    padding: 1rem 1.5rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    display: grid;
    grid-template-columns: 40px 1fr 80px 30px;
    align-items: center;
    gap: 1.5rem;
    transition: background-color 0.3s ease;
}

.results-accordion .accordion-header:hover,
.results-accordion .accordion-header.active {
    background-color: #082C62;
}

.results-accordion .accordion-header .rank {
    font-weight: bold;
    font-size: 1.2rem;
    color: #00B6F6;
    text-align: center;
}
.results-accordion .accordion-header .candidate-info { display: flex; flex-direction: column; }
.results-accordion .accordion-header .name { font-weight: 600; }
.results-accordion .accordion-header .country { color: #ccc; font-size: 0.9rem; }
.results-accordion .accordion-header .mark { font-weight: bold; text-align: right; font-size: 1.1rem; }
.results-accordion .accordion-header .icon { text-align: right; }
.results-accordion .accordion-header .icon::before {
    content: '+'; font-size: 1.5rem; color: #00B6F6;
}
.results-accordion .accordion-header.active .icon::before { content: '-'; }

.results-accordion .accordion-panel {
    padding: 0 1.5rem;
    background-color: #222;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.results-accordion .panel-content {
    padding: 1.5rem 0;
    border-top: 1px solid #444;
}

.results-accordion .panel-content h4 {
    color: #00B6F6; margin: 1.5rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #444;
}
.results-accordion .panel-content h4:first-child { margin-top: 0; }

.results-accordion .round-details-list {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0.75rem 1.5rem;
    align-items: center;
}
.results-accordion .round-details-list dt { font-weight: bold; text-align: right; color: #ccc; }
.results-accordion .round-details-list dd { margin: 0; }
.results-accordion .round-details-list dd a i { margin-left: 0.5rem; font-size: 0.8em; }

.jury-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #444;
}

.results-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.video-card {
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.live-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-color: #1b1b1b;
}

.live-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-caption {
    padding: 1rem;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .results-accordion .accordion-header {
        grid-template-columns: 30px 1fr 70px;
        gap: 1rem;
    }
    .results-accordion .accordion-header .icon { display: none; }
    .results-accordion .round-details-list {
        grid-template-columns: 1fr;
    }
    .results-accordion .round-details-list dt { text-align: left; }
    .results-accordion .round-details-list dd { padding-left: 1rem; margin-bottom: 0.5rem; }
}


/* =================================================================== */
/* --- 25. JURY DOCUMENT STYLING --- */
/* =================================================================== */

/* Targets any div whose ID ends with _jurymark */
[id$="_jurymark"] {
    text-align: center;
    margin: 2rem 0;
}

[id$="_jurymark"] a {
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444;
    transition: transform 0.3s, box-shadow 0.3s;
}

[id$="_jurymark"] a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

[id$="_jurymark"] img {
    display: block;
    max-width: 450px; /* Makes the image larger on desktops */
    width: 100%;      /* Ensures it shrinks on mobile */
    height: auto;
}



/* Styling for the video caption in preliminary results */
.video-caption {
    padding: 1rem;
    text-align: center;
}

.video-caption-name {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: #f1f1f1;
}

.video-caption-country {
    display: block;
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 0.25rem;
}


/* =================================================================== */
/* --- 25. JURY DOCUMENT STYLING --- */
/* =================================================================== */

.jury-document-link {
    text-align: center;
    margin: 2rem 0;
}

.jury-document-link a {
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444;
    transition: transform 0.3s, box-shadow 0.3s;
}

.jury-document-link a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.jury-document-link img {
    display: block;
    max-width: 450px; /* Makes the image larger on desktops */
    width: 100%;      /* Ensures it shrinks on mobile */
    height: auto;
}


/* =================================================================== */
/* --- 26. SCHEDULE IMAGE STYLING --- */
/* =================================================================== */

.schedule-image-container {
    margin-top: 2.5rem;
    text-align: center; /* This centers the image within the container */
}

.schedule-image-container img {
    max-width: 800px; /* Sets a maximum size for large screens */
    width: 100%;      /* Makes the image fully responsive on smaller screens */
    height: auto;
    border-radius: 8px;
    border: 1px solid #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


/* =================================================================== */
/* --- 27. DYNAMIC CATEGORY LINK STYLING --- */
/* =================================================================== */

.results-category-card li a.category-link-item {
    display: block; /* Make the whole area clickable */
    padding: 1rem 1.25rem;
}

.category-link-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: #f1f1f1;
    transition: color 0.2s;
}

.category-link-description {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    margin-top: 0.25rem;
    font-weight: 400; /* Regular font weight */
    transition: color 0.2s;
}

/* Hover effect for the entire link */
.results-category-card li a.category-link-item:hover .category-link-title,
.results-category-card li a.category-link-item:hover .category-link-description {
    color: white;
}



/* =================================================================== */
/* --- 21. DASHBOARD STYLES (Tabs & Cards) --- */
/* =================================================================== */

/* Tab Bar Styling */
.dashboard-tabs {
    overflow: hidden;
    border-bottom: 1px solid #444;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.dashboard-tabs .tab-link {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 1rem;
    font-weight: 600;
    color: #aaa;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-tabs .tab-link:hover {
    color: #f1f1f1;
    border-bottom-color: #555;
}

.dashboard-tabs .tab-link.active {
    color: #00B6F6;
    border-bottom-color: #00B6F6;
}

/* Tab Content Panel */
.tab-content {
    display: none;
    padding-top: 1rem;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Action Card Grid Styling */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: #2a2a2a;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: #f1f1f1;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #444;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    min-height: 150px;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    border-color: #00B6F6;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    color: #00B6F6;
}

.dashboard-card i.fa-solid {
    font-size: 2.5rem;
    color: #00B6F6;
    transition: color 0.3s;
}

.dashboard-card:hover i.fa-solid {
    color: #fff;
}


/* =================================================================== */
/* --- 28. DIPLOMA UPLOAD GRID (CONSOLIDATED & CORRECTED) --- */
/* =================================================================== */

.diploma-grid {
    display: grid;
    /* CORRECT 6-COLUMN LAYOUT: Select, Picture, Candidate, Nationality, Current, Upload */
    grid-template-columns: 50px 80px 2fr 1.5fr 1fr 1fr;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
}

.diploma-grid-header, .diploma-cell {
    padding: 1rem;
    display: flex;
    align-items: center; /* Vertically center content in cells */
}

.diploma-grid-header {
    background-color: #082C62;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.diploma-grid-row {
    display: contents; /* Allows row elements to be direct children of the grid */
}

.diploma-grid-row .diploma-cell {
    background-color: #2a2a2a;
    border-top: 1px solid #444;
}

.diploma-grid-row:nth-of-type(odd) .diploma-cell {
    background-color: #222;
}

.diploma-cell .mobile-label { display: none; }
.diploma-cell .candidate-info .name { font-weight: 600; }
.diploma-cell .candidate-info .candidate-code { font-size: 0.85rem; color: #aaa; }
.diploma-cell-select { justify-content: center; }
.diploma-cell-current { justify-content: center; }
.no-diploma-text { color: #888; font-style: italic; }
.diploma-thumbnail { height: 80px; width: auto; border-radius: 4px; }

.candidate-photo {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.diploma-grid-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    background-color: #222;
    color: #aaa;
}

/* Modern File Upload Button */
.file-upload-button {
    display: inline-block;
    padding: 0.6rem 1rem;
    background-color: #444;
    color: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s;
}
.file-upload-button:hover { background-color: #555; }
.input-file[type="file"] { display: none; }

/* Upload Preview Widget */
.upload-widget {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.diploma-preview-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diploma-preview-img {
    height: 80px; width: auto; border-radius: 4px;
}
.remove-preview-btn {
    position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
    border-radius: 50%; background-color: #ff4d4d; color: white;
    border: 2px solid #222; font-size: 14px; font-weight: bold;
    line-height: 1; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: transform 0.2s;
}
.remove-preview-btn:hover { transform: scale(1.1); }

@media screen and (max-width: 1024px) {
    .diploma-grid { display: block; border: none; background: none; }
    .diploma-grid-header { display: none; }
    .diploma-grid-row {
        display: block; padding: 1.5rem; border-radius: 8px;
        border: 1px solid #444; background-color: #2a2a2a; margin-bottom: 1.5rem;
    }
    .diploma-grid-row .diploma-cell {
        display: flex; flex-direction: column; align-items: flex-start;
        background-color: transparent; border: none; padding: 0; margin-bottom: 1.25rem;
    }
    .diploma-grid-row .diploma-cell:last-child { margin-bottom: 0; }
    .diploma-cell .mobile-label {
        display: block; font-weight: 600; color: #00B6F6;
        margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase;
    }
    .diploma-cell-select { flex-direction: row; align-items: center; gap: 1rem; }
    .diploma-cell-select::before { content: 'Select to Update'; font-weight: 600; color: #f1f1f1; }
    .diploma-cell-current, .diploma-cell-picture { align-items: flex-start; }
}


/* =================================================================== */
/* --- 22. LOGIN FORM STYLES --- */
/* =================================================================== */

.form-error-message {
    display: block;
    color: #ff6b6b; /* A bright red for errors */
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.form-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #aaa;
}


/* =================================================================== */
/* --- 28. DIPLOMA & JURY UPLOAD GRIDS (from other pages) --- */
/* (This block contains all styles needed for the dynamic tables) */
/* =================================================================== */

.diploma-grid, .category-doc-grid {
    display: grid;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
}

.diploma-grid-header, .category-doc-header,
.diploma-cell, .category-doc-cell {
    padding: 1rem;
    display: flex;
    align-items: center;
}

.diploma-grid-header, .category-doc-header {
    background-color: #082C62;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.diploma-grid-row, .category-doc-row {
    display: contents;
}

.diploma-grid-row .diploma-cell,
.category-doc-row .category-doc-cell {
    background-color: #2a2a2a;
    border-top: 1px solid #444;
}

.diploma-grid-row:nth-of-type(odd) .diploma-cell,
.category-doc-row:nth-of-type(odd) .category-doc-cell {
    background-color: #222;
}

.diploma-cell .mobile-label, .category-doc-cell .mobile-label { display: none; }
.diploma-cell .candidate-info .name, .category-doc-cell .category-info .name { font-weight: 600; }
.diploma-cell .candidate-info .candidate-code, .category-doc-cell .category-info .round { font-size: 0.85rem; color: #aaa; }
.diploma-cell-select, .category-doc-cell-select { justify-content: center; }
.diploma-cell-current, .category-doc-cell-current { justify-content: center; }
.no-diploma-text { color: #888; font-style: italic; }
.diploma-thumbnail { height: 80px; width: auto; border-radius: 4px; }
.candidate-photo { width: 60px; height: 80px; object-fit: cover; border-radius: 4px; }

.diploma-grid-empty, .category-doc-grid-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    background-color: #222;
    color: #aaa;
}

/* Modern File Upload Button */
.file-upload-button {
    display: inline-block;
    padding: 0.6rem 1rem;
    background-color: #444;
    color: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s;
}
.file-upload-button:hover { background-color: #555; }
.input-file[type="file"] { display: none; }

/* Upload Preview Widget */
.upload-widget {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.diploma-preview-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diploma-preview-img {
    height: 80px; width: auto; border-radius: 4px;
}
.remove-preview-btn {
    position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
    border-radius: 50%; background-color: #ff4d4d; color: white;
    border: 2px solid #222; font-size: 14px; font-weight: bold;
    line-height: 1; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: transform 0.2s;
}
.remove-preview-btn:hover { transform: scale(1.1); }

/* --- Responsive Styles for Grids --- */
@media screen and (max-width: 1024px) {
    .diploma-grid, .category-doc-grid { display: block; border: none; background: none; }
    .diploma-grid-header, .category-doc-header { display: none; }
    .diploma-grid-row, .category-doc-row {
        display: block; padding: 1.5rem; border-radius: 8px;
        border: 1px solid #444; background-color: #2a2a2a; margin-bottom: 1.5rem;
    }
    .diploma-grid-row .diploma-cell,
    .category-doc-row .category-doc-cell {
        display: flex; flex-direction: column; align-items: flex-start;
        background-color: transparent; border: none; padding: 0; margin-bottom: 1.25rem;
    }
    .diploma-grid-row .diploma-cell:last-child,
    .category-doc-row .category-doc-cell:last-child { margin-bottom: 0; }

    .diploma-cell .mobile-label, .category-doc-cell .mobile-label {
        display: block; font-weight: 600; color: #00B6F6;
        margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase;
    }
    .diploma-cell-select, .category-doc-cell-select {
        flex-direction: row; align-items: center; gap: 1rem;
    }
    .diploma-cell-select::before, .category-doc-cell-select::before {
        content: 'Select to Update'; font-weight: 600; color: #f1f1f1;
    }
    .diploma-cell-current, .diploma-cell-picture, .category-doc-cell-current { align-items: flex-start; }
}


/* =================================================================== */
/* --- 28. DIPLOMA & JURY UPLOAD GRIDS --- */
/* =================================================================== */

.diploma-grid, .category-doc-grid {
    display: grid;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
}

/* Specific to diploma grid */
.diploma-grid {
    grid-template-columns: 50px 80px 2fr 1.5fr 1fr 1fr;
}

/* Specific to category document grid */
.category-doc-grid {
    grid-template-columns: 50px 2fr 1fr 1fr 1fr 1fr;
}

.diploma-grid-header, .category-doc-header,
.diploma-cell, .category-doc-cell {
    padding: 1rem;
    display: flex;
    align-items: center; /* Vertically center content in cells */
}

.diploma-grid-header, .category-doc-header {
    background-color: #082C62;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.diploma-grid-row, .category-doc-row {
    display: contents; /* Allows row elements to be direct children of the grid */
}

.diploma-grid-row .diploma-cell,
.category-doc-row .category-doc-cell {
    background-color: #2a2a2a;
    border-top: 1px solid #444;
}

.diploma-grid-row:nth-of-type(odd) .diploma-cell,
.category-doc-row:nth-of-type(odd) .category-doc-cell {
    background-color: #222;
}

.diploma-cell .mobile-label, .category-doc-cell .mobile-label { display: none; }
.diploma-cell .candidate-info .name, .category-doc-cell .category-info .name { font-weight: 600; }
.diploma-cell .candidate-info .candidate-code, .category-doc-cell .category-info .round { font-size: 0.85rem; color: #aaa; }
.diploma-cell-select, .category-doc-cell-select { justify-content: center; }
.diploma-cell-current, .category-doc-cell-current { justify-content: center; }
.no-diploma-text { color: #888; font-style: italic; }
.diploma-thumbnail { height: 80px; width: auto; border-radius: 4px; }
.candidate-photo { width: 60px; height: 80px; object-fit: cover; border-radius: 4px; }

.diploma-grid-empty, .category-doc-grid-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    background-color: #222;
    color: #aaa;
}

/* Modern File Upload Button */
.file-upload-button {
    display: inline-block;
    padding: 0.6rem 1rem;
    background-color: #444;
    color: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s;
}
.file-upload-button:hover { background-color: #555; }
.input-file[type="file"] { display: none; }

/* Upload Preview Widget */
.upload-widget {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.diploma-preview-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diploma-preview-img {
    height: 80px; width: auto; border-radius: 4px;
}
.remove-preview-btn {
    position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
    border-radius: 50%; background-color: #ff4d4d; color: white;
    border: 2px solid #222; font-size: 14px; font-weight: bold;
    line-height: 1; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: transform 0.2s;
}
.remove-preview-btn:hover { transform: scale(1.1); }

/* --- Responsive Styles for Grids --- */
@media screen and (max-width: 1024px) {
    .diploma-grid, .category-doc-grid { display: block; border: none; background: none; }
    .diploma-grid-header, .category-doc-header { display: none; }
    .diploma-grid-row, .category-doc-row {
        display: block; padding: 1.5rem; border-radius: 8px;
        border: 1px solid #444; background-color: #2a2a2a; margin-bottom: 1.5rem;
    }
    .diploma-grid-row .diploma-cell,
    .category-doc-row .category-doc-cell {
        display: flex; flex-direction: column; align-items: flex-start;
        background-color: transparent; border: none; padding: 0; margin-bottom: 1.25rem;
    }
    .diploma-grid-row .diploma-cell:last-child,
    .category-doc-row .category-doc-cell:last-child { margin-bottom: 0; }

    .diploma-cell .mobile-label, .category-doc-cell .mobile-label {
        display: block; font-weight: 600; color: #00B6F6;
        margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase;
    }
    .diploma-cell-select, .category-doc-cell-select {
        flex-direction: row; align-items: center; gap: 1rem;
    }
    .diploma-cell-select::before, .category-doc-cell-select::before {
        content: 'Select to Update'; font-weight: 600; color: #f1f1f1;
    }
    .diploma-cell-current, .diploma-cell-picture, .category-doc-cell-current { align-items: flex-start; }
}





/* =================================================================== */
/* --- 29. CATEGORY DOCUMENT UPLOAD GRID --- */
/* =================================================================== */

.category-doc-grid {
    display: grid;
    /* Columns: Select, Category, Current List, Upload List, Current Marks, Upload Marks */
    grid-template-columns: 50px 2fr 1fr 1fr 1fr 1fr;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
}

.category-doc-header, .category-doc-cell {
    padding: 1rem;
    display: flex;
    align-items: center;
}

.category-doc-header {
    background-color: #082C62;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.category-doc-row {
    display: contents;
}

.category-doc-row .category-doc-cell {
    background-color: #2a2a2a;
    border-top: 1px solid #444;
}

.category-doc-row:nth-of-type(odd) .category-doc-cell {
    background-color: #222;
}

.category-doc-cell .mobile-label { display: none; }
.category-doc-cell .category-info .name { font-weight: 600; }
.category-doc-cell .category-info .round { font-size: 0.85rem; color: #aaa; }
.category-doc-cell-select { justify-content: center; }
.category-doc-cell-current { justify-content: center; }
.category-doc-cell-upload { justify-content: center; }

.category-doc-grid-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    background-color: #222;
    color: #aaa;
}

/* --- Responsive Styles for Category Doc Grid --- */
@media screen and (max-width: 1024px) {
    .category-doc-grid {
        display: block;
        border: none;
        background: none;
        margin-top: 1.5rem;
    }
    .category-doc-header { display: none; }

    .category-doc-row {
        display: block;
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid #444;
        background-color: #2a2a2a;
        margin-bottom: 1.5rem;
    }
    .category-doc-row .category-doc-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1.25rem;
    }
    .category-doc-row .category-doc-cell:last-child { margin-bottom: 0; }

    .category-doc-cell .mobile-label {
        display: block;
        font-weight: 600;
        color: #00B6F6;
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        text-transform: uppercase;
    }
    .category-doc-cell-select {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
    .category-doc-cell-select::before {
        content: 'Select to Update';
        font-weight: 600;
        color: #f1f1f1;
    }
    .category-doc-cell-current, .category-doc-cell-upload {
        align-items: flex-start;
        width: 100%;
    }
    .upload-widget { width: 100%; }
    .file-upload-button { width: 100%; box-sizing: border-box; }
}



/* =================================================================== */
/* --- 30. CANDIDATE REGISTRATION PREVIEW --- */
/* =================================================================== */

.candidate-preview-image {
    max-width: 400px; /* Set a max width for the image */
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #444;
    margin: 1rem 0;
}