/* Admin Specific Styles */

/* Remove general light background override */
/* body {
    background-color: #f4f7f6; 
} */

/* Set dark background for admin pages */
body.admin-page {
    background-color: var(--admin-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

.admin-container {
    max-width: 1300px; /* Slightly wider */
    margin: 0rem auto 0rem auto; /* Reduced top margin */
    padding: 0 1.5rem; /* Use horizontal padding instead of width */
}

/* --- Login Card Styles --- */
.login-card {
    background-color: var(--admin-card-bg, #343a40);
    color: var(--admin-text-primary, #f8f9fa);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    max-width: 450px;
    margin: 60px auto;
    text-align: center;
    border: 1px solid var(--admin-border-color, #495057);
}

.login-card h2 {
    margin-bottom: 15px;
    color: var(--primary-color-light, #e9ecef);
    font-weight: 600;
}

.login-card p {
    margin-bottom: 30px;
    color: var(--admin-text-secondary, #adb5bd);
    font-size: 0.95em;
}

.login-card .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--admin-text-secondary, #ced4da);
}

.login-card input[type="email"],
.login-card input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--admin-input-border, #6c757d);
    border-radius: 4px;
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.error-message {
    color: #f8d7da;
    background-color: rgba(220, 53, 69, 0.15); /* Danger background tint */
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9em;
    display: block;
}

.error-message:empty {
    display: none;
}

.login-card .btn {
    width: 100%;
    padding: 12px 15px;
    font-size: 1.1rem;
    font-weight: 600;
    /* Use primary button styles (assuming they contrast well) */
}

/* Optional Dark Nav for Admin */
.navbar.dark-nav {
    background-color: var(--admin-card-bg, #343a40);
    padding: 0.8rem 0; /* Consistent padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--admin-border-color, #495057);
}

.navbar.dark-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.navbar.dark-nav .logo {
    color: var(--primary-color-light, #e9ecef);
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
}
.navbar.dark-nav .logo i {
    margin-right: 8px;
    color: var(--primary-color, #007bff); /* Use primary accent */
}

.navbar.dark-nav .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem; /* Spacing between links */
}

.navbar.dark-nav .nav-links a {
    color: var(--admin-text-secondary, #adb5bd);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.navbar.dark-nav .nav-links a:hover,
.navbar.dark-nav .nav-links a.active /* Add active class styling if needed */ {
    color: var(--admin-text-primary, #f8f9fa);
}

/* Dashboard specific styles */
.admin-container header {
    margin-bottom: 40px; /* Increased spacing */
    border-bottom: 1px solid var(--admin-border-color, #495057); /* Darker border */
    padding-bottom: 20px;
}

/* Style the main dashboard heading */
.admin-container header h1 {
    color: var(--admin-text-primary, #f8f9fa);
    margin-bottom: 8px;
    font-weight: 600;
}

/* Style the paragraph below the heading */
.admin-container header p {
    color: var(--admin-text-secondary, #adb5bd);
    font-size: 1rem;
    margin-bottom: 0;
}

.dashboard-content,
.admin-actions-section { 
    background-color: var(--admin-card-bg, #343a40);
    color: var(--admin-text-primary, #f8f9fa);
    padding: 25px 30px; /* Increased padding */
    margin-bottom: 30px; /* Consistent margin */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--admin-border-color, #495057);
}

.dashboard-content h2,
.admin-actions-section h2 {
    margin-top: 0;
    margin-bottom: 25px; /* Increased spacing */
    color: var(--primary-color-light, #e9ecef); /* Light primary */
    border-bottom: 1px solid var(--admin-border-color, #495057);
    padding-bottom: 15px;
    font-size: 1.5rem; /* Slightly larger */
    font-weight: 600;
}

/* Style buttons in the admin actions section */
.admin-actions-section .btn {
    cursor: pointer; /* Make buttons clearly clickable */
}

/* Filter Section Styles */
.filter-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Vertically center items */
    gap: 1rem 1.5rem; /* Row and column gap */
    padding: 1.25rem 1.5rem; /* Padding */
    background-color: var(--admin-card-bg, #343a40);
    border: none; /* Remove extra border if not needed */
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex-grow: 1; /* Allow groups to grow */
    min-width: 150px; /* Minimum width */
}

.filter-group label {
    font-size: 0.85em;
    color: var(--admin-text-secondary, #adb5bd);
    font-weight: 500;
}

.filter-group select,
.filter-group input[type="search"] {
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--admin-input-border, #6c757d);
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 0.9em;
    width: 100%; /* Make inputs fill the group */
    box-sizing: border-box;
    height: auto; /* Let height be determined by padding */
}

/* Style search input to match selects - Rule combined above */
/* .filter-group input[type="search"] { ... } */

/* Optional: Style placeholder text */
.filter-group input[type="search"]::placeholder {
    color: var(--admin-text-secondary, #adb5bd);
    opacity: 1;
}

.filter-group select:focus,
.filter-group input[type="search"]:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

#filter-button {
    flex-shrink: 0; /* Prevent button from shrinking */
    /* Style using .btn classes, e.g., <button id="filter-button" class="btn btn-primary"> */
    /* Ensure this button has class="btn btn-secondary" (or primary) in HTML */
    /* Remove any direct ID styling that might override .btn classes */
    margin-top: auto; /* If labels are above, push button down slightly if needed, but center align should handle */
    margin-bottom: 0; /* Align with bottom of inputs if align-items: center doesn't quite work */
}

/* Table Styles */
.table-responsive {
    overflow-x: auto;
}

#applications-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    color: var(--admin-text-secondary, #dee2e6);
    background-color: var(--admin-card-bg, #343a40); /* Ensure table bg matches */
    font-size: 0.9rem;
}

#applications-table th,
#applications-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border-color, #495057);
    vertical-align: middle;
}

#applications-table thead th {
    background-color: var(--admin-border-color, #495057);
    color: var(--admin-text-primary, #f8f9fa);
    font-weight: 600;
    white-space: nowrap;
}

#applications-table tbody tr:hover {
    background-color: rgba(var(--admin-border-color-rgb), 0.5); /* Use rgba for hover */
}

#applications-table td .btn {
    margin-right: 5px; /* Keep margin for multiple buttons */
}
#applications-table td .btn:last-child {
    margin-right: 0;
}
#applications-table td .btn i {
    pointer-events: none;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff; /* Default light text */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: capitalize;
}

.badge.spark {
    background-color: #17a2b8; /* Info */
}

.badge.platinum {
    background-color: #6f42c1; /* Purple */
}

/* Status Badge Styles */
.status-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #212529; /* Default dark text */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: capitalize;
}

.status-badge.status-pending {
    background-color: #ffc107; /* Warning yellow */
    color: #212529;
}

.status-badge.status-approved {
    background-color: #28a745; /* Success green */
    color: #fff;
}

.status-badge.status-rejected {
    background-color: #dc3545; /* Danger red */
    color: #fff;
}

.status-badge.status-Winner { /* Use exact case from value */
    background-color: #007bff; /* Primary blue */
    /* Or maybe gold: background-color: #ffc107; color: #212529; */
    color: #fff;
}

.text-center {
    text-align: center;
}

/* --- Modal Styles --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1050; /* Common bootstrap z-index */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow-y: auto; /* Changed to overflow-y */
    background-color: rgba(0, 0, 0, 0.75); /* Darker overlay */
    /* Ensure visibility */
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background-color: var(--admin-card-bg, #343a40);
    color: var(--admin-text-primary, #f8f9fa);
    margin: 3rem auto; /* Adjust margin */
    padding: 2rem 2.5rem;
    border: 1px solid var(--admin-border-color, #495057);
    width: 90%;
    max-width: 600px;
    border-radius: 0.5rem;
    position: relative; /* Keep relative for potential inner absolute positioning */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    /* Ensure visibility */
    visibility: visible;
    opacity: 1;
}

/* Larger modal variant */
.modal-content.large {
    max-width: 1000px; /* Adjusted large size */
}

.close-modal-btn {
    color: #adb5bd;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.75rem;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.close-modal-btn:hover {
    color: #fff;
    opacity: 1;
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--primary-color-light, #e9ecef);
    font-size: 1.6rem;
    font-weight: 600;
}

.detail-section {
    margin-bottom: 1.75rem;
}

.detail-section h3 {
    color: var(--admin-text-secondary, #ced4da);
    font-size: 1.1em;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--admin-border-color, #495057);
    padding-bottom: 0.5rem;
    font-weight: 600;
}

.detail-section p {
    margin-bottom: 0.6rem;
    line-height: 1.6;
    color: var(--admin-text-secondary, #dee2e6);
    font-size: 0.95rem;
}

.detail-section strong {
    color: var(--admin-text-primary, #f8f9fa);
    font-weight: 500;
}

.detail-section a {
    color: var(--primary-color-light, #58a6ff);
    text-decoration: none;
}
.detail-section a:hover {
    text-decoration: underline;
}

.detail-text-block {
    display: block;
    background-color: var(--admin-input-bg, #212529);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.95em;
    white-space: pre-wrap;
    border: 1px solid var(--admin-border-color, #495057);
    margin-top: 0.3rem;
}

#modal-audio-player {
    width: 100%;
    margin-top: 10px;
}

/* Modal Form Styles */
.status-update-section .form-group {
    margin-bottom: 15px;
}

.status-update-section label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--admin-text-secondary, #ced4da);
}

.status-update-section select,
.status-update-section textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--admin-input-border, #6c757d);
    border-radius: 4px;
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1rem;
    box-sizing: border-box;
}

.status-update-section textarea {
    resize: vertical;
}

.modal-actions {
    margin-top: 1.5rem;
    border-top: 1px solid var(--admin-border-color, #495057);
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.modal-actions .btn {
}

#modal-error {
    margin-bottom: 15px;
}

/* Modal Navigation */
.modal-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--admin-border-color, #495057);
}

.modal-navigation .btn {
    /* Use .btn-secondary or similar */
}
.modal-navigation .btn:disabled {
    background-color: #343a40;
    border-color: #495057;
    color: #6c757d;
    cursor: not-allowed;
}

/* Two Pane Layout */
.modal-two-pane {
    display: flex;
    flex-wrap: wrap; /* Wrap on smaller screens */
    gap: 2rem; /* Space between panes */
}

.modal-pane-left {
    flex: 1 1 55%; /* Allow growing/shrinking, base 55% */
    min-width: 300px; /* Min width before wrap */
}

.modal-pane-right {
    flex: 1 1 40%; /* Allow growing/shrinking, base 40% */
    min-width: 280px;
    background-color: var(--admin-input-bg, #212529); /* Darker pane bg */
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid var(--admin-border-color, #495057);
    /* Remove max-height, let modal scroll handle it */
    /* overflow-y: auto; */
}

.modal-pane-right .detail-section {
    margin-bottom: 0; /* Remove bottom margin */
}
.modal-pane-right h3 {
    border-bottom: none; /* Remove border */
    margin-bottom: 20px;
}

/* --- Edit Modal Form Styles --- */
#edit-application-form .form-group {
    margin-bottom: 15px;
}

#edit-application-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--admin-text-secondary, #ced4da);
}

#edit-application-form input[type="text"],
#edit-application-form input[type="url"],
#edit-application-form select,
#edit-application-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--admin-input-border, #6c757d);
    border-radius: 4px;
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1rem;
    box-sizing: border-box;
    line-height: normal; /* Ensure consistent height */
}

#edit-application-form textarea {
    resize: vertical;
}

#edit-application-form input:focus,
#edit-application-form select:focus,
#edit-application-form textarea:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); /* Use primary color variable if available */
}

/* --- Admin Registration Form Styles (within Admin Actions section) --- */
#register-admin-form-container h3 {
    color: var(--admin-text-secondary, #ced4da);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--admin-border-color, #495057);
}

#register-admin-form .form-group {
    margin-bottom: 15px;
}

#register-admin-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--admin-text-secondary, #ced4da);
}

#register-admin-form input[type="email"],
#register-admin-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--admin-input-border, #6c757d);
    border-radius: 4px;
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1rem;
    box-sizing: border-box;
}

#register-admin-form input:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

#register-admin-form .form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px;
}

#register-error-message {
    margin-bottom: 15px;
}

/* --- Delete Admin Form Styles --- */
#delete-admin-section h3 {
    color: var(--admin-text-secondary, #ced4da);
    margin-bottom: 10px;
}

#delete-admin-form .form-group {
    margin-bottom: 15px;
}

#delete-admin-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--admin-text-secondary, #ced4da);
}

#delete-admin-form input[type="email"] {
    width: 100%;
    max-width: 400px; /* Limit width of email input */
    padding: 10px 12px;
    border: 1px solid var(--admin-input-border, #6c757d);
    border-radius: 4px;
    background-color: var(--admin-input-bg, #212529);
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1rem;
    box-sizing: border-box;
}

#delete-admin-form input:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

#delete-admin-form .form-actions {
    margin-top: 15px;
}

#delete-error-message {
    margin-bottom: 15px;
    max-width: 400px; /* Match input width */
}

/* Admin Actions Section */
.admin-actions-section hr {
    border-color: var(--admin-border-color, #495057);
    margin: 2rem 0;
}
.admin-actions-section h3 {
    color: var(--admin-text-secondary, #ced4da);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}
#delete-admin-section p {
    font-size: 0.9em;
    color: #adb5bd;
    margin-bottom: 1rem;
}

/* --- Base Button Styles --- */
.btn {
    /* Reset browser defaults */
    -webkit-appearance: none;
    appearance: none;
    /* Layout & Box Model */
    display: inline-block;
    padding: 0.5rem 1rem; /* Base padding */
    border: 1px solid transparent;
    border-radius: 0.3rem;
    /* Typography */
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--admin-text-primary, #f8f9fa); /* Ensure default text color */
    text-align: center;
    text-decoration: none;
    /* Interaction */
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    /* Background & Transition */
    background-color: transparent; /* Explicitly set */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Button Variants - Adjusted for Dark Theme Contrast */
.btn-primary {
    color: #fff;
    /* background-color: var(--primary-color, #007bff); */ /* Old */
    /* border-color: var(--primary-color, #007bff); */   /* Old */
    background-color: #3da9fc; /* Brighter Blue */
    border-color: #3da9fc;
}
.btn-primary:hover {
    color: #fff;
    /* background-color: #0056b3; */ /* Old Darker Blue */
    /* border-color: #004085; */   /* Old Darker Blue */
    background-color: var(--primary-color, #007bff); /* Hover uses original blue */
    border-color: var(--primary-color, #007bff);
}
.btn-primary:focus {
    outline: none; /* Remove default outline */
    /* box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5); */ /* Old */
    box-shadow: 0 0 0 0.2rem rgba(61, 169, 252, 0.5); /* Brighter blue focus */
}

.btn-secondary {
    color: #fff;
    /* background-color: #6c757d; */ /* Old Grey */
    /* border-color: #6c757d; */   /* Old Grey */
    background-color: #868e96; /* Lighter Grey */
    border-color: #868e96;
}
.btn-secondary:hover {
    color: #fff;
    /* background-color: #5a6268; */ /* Old Darker Grey */
    /* border-color: #545b62; */   /* Old Darker Grey */
    background-color: #6c757d; /* Hover uses original grey */
    border-color: #6c757d;
}
.btn-secondary:focus {
    outline: none; /* Remove default outline */
    /* box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); */ /* Old */
    box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Lighter grey focus */
}

.btn-info {
    color: #fff;
    /* background-color: #17a2b8; */ /* Old Teal */
    /* border-color: #17a2b8; */   /* Old Teal */
    background-color: #20c997; /* Brighter Teal/Mint */
    border-color: #20c997;
}
.btn-info:hover {
    color: #fff;
    background-color: #1aa07e; /* Darker Mint */
    border-color: #178f70;
}

.btn-warning {
    color: #212529; /* Explicitly dark text */
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-danger {
    color: #fff;
    /* background-color: #dc3545; */ /* Old Red */
    /* border-color: #dc3545; */   /* Old Red */
    background-color: #e5484d; /* Brighter Red */
    border-color: #e5484d;
}
.btn-danger:hover {
    color: #fff;
    /* background-color: #c82333; */ /* Old Darker Red */
    /* border-color: #bd2130; */   /* Old Darker Red */
    background-color: #dc3545; /* Hover uses original red */
    border-color: #dc3545;
}

/* Add Success style */
.btn-success {
    color: #fff;
    background-color: #28a745; /* Standard Green */
    border-color: #28a745;
}
.btn-success:hover {
    color: #fff;
    background-color: #218838; /* Darker Green */
    border-color: #1e7e34;
}
.btn-success:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); /* Green focus */
}

/* ... rest of button variants ... */ 

/* --- Site Content Settings Section --- */
.site-content-settings-section {
    /* Uses .admin-actions-section styles, can add specifics if needed */
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--admin-border-color, #495057);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    flex-grow: 1;
    margin-right: 2rem;
}

.setting-label label {
    font-weight: 600;
    color: var(--admin-text-primary, #f8f9fa);
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.3rem;
}

.setting-description {
    font-size: 0.85em;
    color: var(--admin-text-secondary, #adb5bd);
    margin: 0;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #495057; /* Darker grey for off state */
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color, #007bff); /* Blue for on state */
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color, #007bff);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.toggle-status-text {
    font-size: 0.9em;
    color: var(--admin-text-secondary, #adb5bd);
    min-width: 120px; /* Give it some space */
}

/* Guest Judge Editor Section */
.guest-judge-details-section {
    background-color: var(--secondary-bg-darker); /* Or a slightly different shade */
    padding: 1.5rem;
    border-radius: var(--border-radius-large);
    margin-top: 2rem;
    border: 1px solid var(--border-color-light);
}

.guest-judge-details-section h3 {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary-accent);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.guest-judge-details-section .setting-description {
    font-size: 0.95rem;
    color: var(--secondary-text-lighter);
    margin-bottom: 1.5rem;
}

.guest-judge-details-section .setting-description code {
    background-color: var(--primary-bg);
    color: var(--secondary-accent);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.guest-judge-form-container {
    background-color: var(--primary-bg-card); /* Slightly lighter than section bg */
    padding: 1.5rem;
    border-radius: var(--border-radius-medium);
    margin-bottom: 1.5rem; /* For when there are multiple, though hr handles it here */
    border: 1px solid var(--border-color-medium);
}

.guest-judge-form-container h4 {
    color: var(--primary-accent);
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

.guest-judge-editor-form .form-group {
    margin-bottom: 1.2rem; /* Slightly more spacing */
}

.guest-judge-editor-form label {
    font-weight: 500;
    color: var(--primary-text-form-label); /* Use specific variable if defined */
    display: block;
    margin-bottom: 0.5rem;
}

.guest-judge-editor-form input[type="text"],
.guest-judge-editor-form input[type="url"], /* if we add url type */
.guest-judge-editor-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #7A828A; /* Updated border color for better visibility */
    border-radius: var(--border-radius-small);
    background-color: #454E56; /* Lighter background for input fields */
    color: var(--admin-text-primary, #f8f9fa); /* Ensuring text remains light */
    font-size: 0.95rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.guest-judge-editor-form input[type="text"]:focus,
.guest-judge-editor-form input[type="url"]:focus,
.guest-judge-editor-form textarea:focus {
    border-color: var(--primary-accent); /* Keeps existing focus style */
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-accent-rgb), 0.2);
    background-color: #4E5861; /* Slightly lighter on focus as well */
}

.guest-judge-editor-form textarea {
    min-height: 80px;
    resize: vertical;
}

.guest-judge-editor-form .form-actions {
    margin-top: 1.5rem;
    text-align: right; /* Align button to the right */
}

.guest-judge-editor-form .success-message {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success-text-darker); /* Adjust if success-text exists and is better */
    border: 1px solid rgba(var(--success-rgb), 0.3);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-small);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Responsive adjustments for guest judge forms if needed */
@media (max-width: 768px) {
    .guest-judge-details-section {
        padding: 1rem;
    }
    .guest-judge-form-container {
        padding: 1rem;
    }
    .guest-judge-editor-form .form-actions {
        text-align: left;
    }
}