body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px; /* Added padding to body for overall spacing */
    display: flex;
    flex-direction: column; /* Stack h1, tabs, and content vertically */
    align-items: center; /* Center content horizontally */
    min-height: 100vh;
}

/* Container for the entire tabbed interface + h1 */
.app-container {
    width: 100%;
    max-width: 1200px; /* Max width for the whole app content */
    margin: 0 auto;
}


form {
    /* max-width: 500px; */ /* This will be handled by tab content panel or specific form styling */
    margin: 0 0 20px 0; /* Remove side margins, keep bottom */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

input[type="text"],
input[type="date"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%; /* Make button full width */
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Add some spacing for form divs */
form div {
    margin-bottom: 15px;
}

/* Remove bottom margin for the last div to avoid double spacing with form padding */
form div:last-child {
    margin-bottom: 0;
}

/* Styling for form messages and general error/success messages */
#formMessage {
    margin-bottom: 15px; /* Space between message and button if button is below */
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.message-success {
    color: #155724; /* Dark green text */
    background-color: #d4edda; /* Light green background */
    border: 1px solid #c3e6cb; /* Green border */
}

.message-error {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Red border */
}

/* Ensure that if #formMessage has no content, it doesn't take up space due to padding */
#formMessage:empty {
    padding: 0;
    border: none;
}

/* Styling for error messages within the exams list */
#examsList .message-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
}

/* === Table Styling === */
#examsDisplayTable {
    width: 90%; /* Using 90% width, centered */
    margin: 20px auto; /* 20px top/bottom margin, auto left/right for centering */
    border-collapse: collapse;
    background-color: #fff; /* White background for the table itself */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Similar shadow to the form */
}

#examsDisplayTable th,
#examsDisplayTable td {
    border: 1px solid #ddd;
    padding: 10px; /* Increased padding slightly for better readability */
    text-align: left;
}

#examsDisplayTable th {
    background-color: #e9e9e9; /* Light grey background for headers */
    font-weight: bold;
    color: #333; /* Darker text for headers */
}

/* Styling for the filter input row specifically if needed, though general th covers it */
#examsDisplayTable thead tr:nth-child(2) th {
    background-color: #f5f5f5; /* Slightly different background for filter row */
}

#examsDisplayTable thead input[type="text"] {
    width: 100%; /* Full width of the cell */
    padding: 8px;
    margin: 0; /* No extra margin needed if cell padding is sufficient */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px; /* Consistent with other inputs */
    font-size: 14px; /* Slightly smaller font for filter inputs */
}

#examsDisplayTable tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Light grey for even rows */
}

#examsDisplayTable tbody tr:hover {
    background-color: #eef8ff; /* Light blue hover effect */
}

/* Specific styling for the 'No exams recorded yet' and error messages in table */
#examsDisplayTable td.message-error,
#examsDisplayTable td[colspan="5"] { /* Updated colspan for 'No exams' message */
    text-align: center;
    font-style: italic;
    color: #555;
}

#examsDisplayTable td.message-error {
    color: #721c24; /* Ensure error message text color is distinct */
    background-color: #f8d7da; /* Error background color for the cell */
}

/* === Sort Indicator Styling === */
.sortable-header .sort-indicator {
    margin-left: 5px;
    display: inline-block; /* Useful for consistent spacing and potential future styling */
    width: 0.8em;        /* Ensures some space is reserved for the arrow */
    text-align: left;    /* Ensures arrow is not centered if width is larger */
    color: #333;        /* Default color for the arrows */
}

/* When the TH has class 'sorted-asc', style its .sort-indicator span */
.sortable-header.sorted-asc .sort-indicator::after {
    content: ' ▲'; /* Unicode for up arrow */
}

/* When the TH has class 'sorted-desc', style its .sort-indicator span */
.sortable-header.sorted-desc .sort-indicator::after {
    content: ' ▼'; /* Unicode for down arrow */
}

/* === Data Maintenance Section Styling === */
#dataMaintenanceSection {
    /* margin-top: 40px; */ /* Removed for grid layout */
    /* padding-top: 20px; */ /* Removed for grid layout */
    /* border-top: 2px solid #ccc; */ /* Removed for grid layout */
    /* max-width: 800px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    padding-left: 0; /* Will be handled by section style if needed */
    padding-right: 0;/* Will be handled by section style if needed */
}

/* Form styling for the main exam entry tab */
#examEntryTab form {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Common styling for forms within the Data Maintenance Tab grid */
#examTypeForm,
#scoreTypeForm,
#practiceExamForm,
#examSectionForm {
    max-width: 500px; /* Standardized max-width for forms */
    margin-left: auto;   /* Center forms */
    margin-right: auto;  /* Center forms */
    /* The background, padding, and shadow are now handled by .maintenance-grid-container > section */
    background-color: transparent; /* Make form background transparent */
    box-shadow: none;             /* Remove individual form shadow */
    padding: 0;                   /* Remove individual form padding */
    border: none;                 /* Border handled by parent section card */
}

/* Headings within all maintenance sections */
#dataMaintenanceSection h2, #scoreTypesManagementSection h2, #practiceExamsManagementSection h2, #examSectionsManagementSection h2,
#dataMaintenanceSection h3, #scoreTypesManagementSection h3, #practiceExamsManagementSection h3, #examSectionsManagementSection h3 {
    text-align: center;
    color: #333;
    margin-bottom: 15px;
}

/* #examTypeForm specific styling from previous step - mostly okay */
/* #examTypeForm label, #examTypeForm input[type="text"], #examTypeForm button styles are fine */
/* #examTypeFormMessage, #examTypeFormMessage:empty styles are fine */


/* === Exam Types Maintenance Table Styling - mostly okay from previous step === */
#examTypesMaintenanceTable {
    width: auto; /* Changed from 100% to auto */
    border-collapse: collapse;
    margin-top: 15px;
    margin-left: auto; /* Changed from 0 to auto for centering */
    margin-right: auto; /* Changed from 0 to auto for centering */
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #ccc; /* Explicit overall table border */
}

#examTypesMaintenanceTable th,
#examTypesMaintenanceTable td {
    border: 1px solid #ddd; /* Ensure individual cell borders are present */
    padding: 10px;
    text-align: left; /* Ensure headers and cells are left-aligned by default */
}

#examTypesMaintenanceTable th {
    background-color: #e9e9e9; /* Header background */
    font-weight: bold;
    color: #333;
}

#examTypesMaintenanceTable th:last-child,
#examTypesMaintenanceTable td:last-child {
    text-align: center; /* Center "Actions" column content */
    width: 150px; /* Fixed width for "Actions" column */
}

#examTypesMaintenanceTable tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternating row color */
}

#examTypesMaintenanceTable tbody tr:hover {
    background-color: #eef8ff; /* Row hover effect */
}

/* Styles for th, td, action buttons, etc. are mostly fine from previous steps */
/* Re-confirming button styles from previous step are sufficient */
#examTypesMaintenanceTable .edit-exam-type-btn,
#examTypesMaintenanceTable .delete-exam-type-btn {
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
}

#examTypesMaintenanceTable .edit-exam-type-btn {
    background-color: #ffc107;
    color: #333;
}
#examTypesMaintenanceTable .edit-exam-type-btn:hover {
    background-color: #e0a800;
}

#examTypesMaintenanceTable .delete-exam-type-btn {
    background-color: #dc3545;
    color: white;
}
#examTypesMaintenanceTable .delete-exam-type-btn:hover {
    background-color: #c82333;
}

#examTypesMaintenanceTable td[colspan="2"] { /* 'No exam types' message */
    text-align: center;
    font-style: italic;
    color: #555;
}


/* === Tab Navigation Styling === */
.tab-navigation {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 0 -2px 0; /* Negative margin to help active tab border overlap */
    border-bottom: 2px solid #ccc;
    justify-content: flex-start; /* Align tabs to the start */
    position: relative; /* For z-index of active tab */
    z-index: 1; /* Ensure navigation is above tab content border */
}

.tab-navigation li a {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    display: block;
    border: 1px solid transparent; /* Transparent border for inactive tabs */
    border-bottom: none; /* No bottom border for inactive tabs */
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    background-color: #f0f0f0;
    position: relative; /* For z-index */
}

.tab-navigation li a:hover {
    background-color: #e0e0e0;
}

.tab-navigation li a.active-tab {
    background-color: #fff;
    border-color: #ccc #ccc #fff #ccc; /* Top, Right, Bottom (transparent), Left */
    font-weight: bold;
    color: #007bff;
    z-index: 2; /* Make active tab appear above the content border */
}

/* === Tab Content Panel Styling === */
.tab-content-container {
    width: 100%;
    /* max-width: 1200px; already set in .app-container if used */
    /* margin: 0 auto; already set in .app-container if used */
}

.tab-panel {
    padding: 20px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-top: none; /* To merge with the navigation's bottom border */
    /* display: none; by default for non-active panels - HTML already has this for one panel */
    width: 100%; /* Ensure tab panel tries to use full width of its container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.tab-panel.active { /* Ensure this class is used by JS to show panel */
    display: block;
}

/* Ensure tables within tabs don't overflow their containers */
#examEntryTab, #dataMaintenanceTab {
    overflow-x: auto; /* Add horizontal scroll if content is too wide */
}

/* === Action Buttons in Exams Table === */
/* #examsDisplayTable td:last-child has display:flex removed */

/* General style for all action buttons */
#examsDisplayTable .view-details-btn,
#examsDisplayTable .edit-exam-btn,
#examsDisplayTable .delete-exam-btn {
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100px;
    box-sizing: border-box;
    text-align: center;
}

#examsDisplayTable .view-details-btn {
    display: inline-block;      /* Allow side-by-side layout */
    vertical-align: middle;     /* Align vertically with the middle of the stack */
    background-color: #6c757d;
    color: white;
}
#examsDisplayTable .view-details-btn:hover {
    background-color: #5a6268;
}

.edit-delete-stack {
    display: inline-block;      /* Allow side-by-side layout */
    vertical-align: middle;     /* Align vertically with the middle of view-details */
    margin-left: 10px;          /* Space from view-details button */
    /* No internal flex/gap here, buttons inside will be block */
}

#examsDisplayTable .edit-exam-btn {
    display: block;             /* Stack within its parent (.edit-delete-stack) */
    background-color: #ffc107;
    color: #212529;
    margin-bottom: 5px;         /* Space between Edit and Delete */
}
#examsDisplayTable .edit-exam-btn:hover {
    background-color: #e0a800;
}

#examsDisplayTable .delete-exam-btn {
    display: block;             /* Stack within its parent (.edit-delete-stack) */
    background-color: #dc3545;
    color: white;
}
#examsDisplayTable .delete-exam-btn:hover {
    background-color: #c82333;
}


/* === General Maintenance Section Styling (applies to all sections within Data Maintenance Tab) === */
.data-maintenance-section { /* Common class for each management section if needed */
    margin-top: 30px;
    padding-top: 20px;
}
.data-maintenance-section:first-child { /* No top border/padding for the very first one */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* #practiceExamsManagementSection specific styles are minimal as it inherits from .data-maintenance-section */

#practiceExamsManagementSection h2,
#practiceExamsManagementSection h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Filter Dropdown Area for Practice Exams */
#practiceExamsManagementSection > div:first-of-type {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

#filterPracticeExamsByExamType,
#selectExamTypeForPracticeExam,
#selectExamTypeForSections { /* Shared style for these new select dropdowns */
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    min-width: 200px;
    margin-left: 5px; /* Add some space from label */
}

/* Practice Exam Form Styling */
#practiceExamForm {
    /* background-color, padding, box-shadow, max-width, margins are now handled by the common rule above or section style */
    margin-bottom: 30px; /* Keep bottom margin for spacing within the section if needed */
}

#practiceExamForm label { /* Already covered by general label style */ }

#practiceExamForm input[type="text"],
#practiceExamForm select { /* Covers #practiceExamNameInput and #selectExamTypeForPracticeExam */
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#practiceExamForm select {
    width: 100%;
}

#practiceExamForm button { /* General button styling for this form */ }
#practiceExamForm button[type="submit"] { /* Already styled */ }
#practiceExamForm #cancelEditPracticeExamButton { /* Already styled */ }
#practiceExamFormMessage { /* Already styled, uses .message-success/error */ }
#practiceExamFormMessage:empty { /* Already styled */ }


/* Practice Exams Maintenance Table Styling */
#practiceExamsMaintenanceTable {
    width: auto;
    min-width: 500px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
}

#practiceExamsMaintenanceTable th,
#practiceExamsMaintenanceTable td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

#practiceExamsMaintenanceTable th {
    background-color: #e9e9e9;
    font-weight: bold;
}

#practiceExamsMaintenanceTable th:last-child,
#practiceExamsMaintenanceTable td:last-child {
    text-align: center;
    width: 150px;
}

#practiceExamsMaintenanceTable tbody tr:nth-child(even) { background-color: #f9f9f9; }
#practiceExamsMaintenanceTable tbody tr:hover { background-color: #eef8ff; }

#practiceExamsMaintenanceTable .edit-practice-exam-btn,
#practiceExamsMaintenanceTable .delete-practice-exam-btn { /* Buttons already styled like exam type buttons */ }
#practiceExamsMaintenanceTable td[colspan="3"] { /* 'No practice exams' message - already styled */ }


/* === Exam Sections Management Section Styling === */
/* #examSectionsManagementSection specific styles are minimal as it inherits from .data-maintenance-section */

#examSectionsManagementSection h2,
#examSectionsManagementSection h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Select Exam Type Dropdown Area for Sections */
#examSectionsManagementSection > div:first-of-type { /* Targets the div containing the filter */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
/* #selectExamTypeForSections already styled with other selects */

/* Exam Section Form Styling */
#examSectionForm {
    /* background-color, padding, box-shadow, max-width, margins are now handled by the common rule above or section style */
    margin-bottom: 30px; /* Keep bottom margin for spacing within the section if needed */
}

#examSectionForm label { /* Already covered */ }

#examSectionForm input[type="text"], /* #sectionNameInput */
#examSectionForm input[type="number"], /* #sectionDisplayOrderInput */
#examSectionForm select { /* If any selects were here */
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#examSectionForm input[type="number"] { /* Specific width for number input if needed */
    width: 100px; /* Example: smaller width for display order */
}


#examSectionForm button { /* General button styling for this form */ }
#examSectionForm button[type="submit"] { /* Already styled */ }
#examSectionForm #cancelEditSectionButton { /* Already styled */ }
#examSectionFormMessage { /* Already styled */ }
#examSectionFormMessage:empty { /* Already styled */ }

/* Exam Sections Maintenance Table Styling */
#examSectionsMaintenanceTable {
    width: auto;
    min-width: 500px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
}

#examSectionsMaintenanceTable th,
#examSectionsMaintenanceTable td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

#examSectionsMaintenanceTable th {
    background-color: #e9e9e9;
    font-weight: bold;
}

#examSectionsMaintenanceTable th:last-child,
#examSectionsMaintenanceTable td:last-child {
    text-align: center;
    width: 150px;
}

#examSectionsMaintenanceTable tbody tr:nth-child(even) { background-color: #f9f9f9; }
#examSectionsMaintenanceTable tbody tr:hover { background-color: #eef8ff; }

#examSectionsMaintenanceTable .edit-exam-section-btn,
#examSectionsMaintenanceTable .delete-exam-section-btn { /* Similar to other table action buttons */
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
}
#examSectionsMaintenanceTable .edit-exam-section-btn { background-color: #ffc107; color: #333; }
#examSectionsMaintenanceTable .edit-exam-section-btn:hover { background-color: #e0a800; }
#examSectionsMaintenanceTable .delete-exam-section-btn { background-color: #dc3545; color: white; }
#examSectionsMaintenanceTable .delete-exam-section-btn:hover { background-color: #c82333; }
#examSectionsMaintenanceTable .delete-exam-section-btn[disabled] {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}


#examSectionsMaintenanceTable td[colspan="3"] { /* 'No sections' message */
    text-align: center;
    font-style: italic;
    color: #555;
}

/* === Exam Details Row & Table Styling === */
.view-details-btn {
    padding: 5px 10px;
    font-size: 12px; /* Smaller than main submit buttons */
    background-color: #6c757d; /* A neutral/secondary color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.view-details-btn:hover {
    background-color: #5a6268;
}

.view-details-btn.details-shown { /* Style when details are visible */
    background-color: #545b62; /* Slightly different shade */
}

.exam-detail-row td { /* The cell that spans all columns */
    padding: 0 !important; /* Remove padding from the main cell if it interferes */
    background-color: #fdfdfd; /* Slightly different background for the detail area */
    border-top: 2px solid #007bff; /* A border to distinguish from the main row */
}

.exam-detail-content {
    padding: 15px; /* Padding inside the content div */
    /* background-color: #f9f9f9; /* Light background for the content area */
}

.detailed-scores-table {
    width: auto; /* Changed from 100% */
    border-collapse: collapse;
    margin-top: 10px;
    margin-left: auto;  /* Added for centering */
    margin-right: auto; /* Added for centering */
    font-size: 1em; /* Changed from 0.9em */
}

.exam-detail-content .detailed-scores-table th,
.exam-detail-content .detailed-scores-table td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px !important; /* Changed to 8px 12px !important */
    text-align: left;
    vertical-align: top;
}

.detailed-scores-table th {
    background-color: #f0f0f0; /* Light header for the detail table */
    font-weight: bold;
}

/* Optional: Alternating row color for detailed table if desired */
/*
.detailed-scores-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}
*/

/* === Alternating Section Colors for Detailed Scores Table === */
.detailed-scores-table tr.section-group-even td {
    background-color: #ffffff; /* Or keep default if it's already white */
}

.detailed-scores-table tr.section-group-odd td {
    background-color: #f9f9f9; /* A light grey, similar to main table's even rows */
}

/* Ensure section name cell with rowspan also gets the background */
/* This is mostly for clarity as td styling above should cover it, */
/* but can be useful if TR background was used directly elsewhere. */
.detailed-scores-table tr.section-group-even td[rowspan] {
    /* background-color: #ffffff; */ /* Covered by the general td rule above */
}

.detailed-scores-table tr.section-group-odd td[rowspan] {
    /* background-color: #f9f9f9; */ /* Covered by the general td rule above */
}

/* Optional: Maintain hover effect if any (current CSS for detailed-scores-table doesn't have one) */
/*
.detailed-scores-table tbody tr:hover td {
    background-color: #eef8ff;
}
*/

/* Styling for the container of score type checkboxes within the Exam Section form */
#allowedScoreTypesForSectionContainer {
    margin-top: 15px;   /* Spacing above the checklist within the form */
    padding-top: 0;     /* No top padding needed as the border is removed */
    border-top: none;   /* Remove the top border that was previously used for separation */
    margin-bottom: 15px;/* Spacing below the checklist before form messages/buttons */
    /* display: none; is typically controlled by JavaScript and inline styles */
}

/* === Maintenance Tab Grid Layout === */
.maintenance-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; /* Space between grid items */
    width: 100%; /* Make grid container use full width of its parent (tab-panel) */
}

/* HR elements within the grid container were causing layout issues by becoming grid items. Hide them. */
.maintenance-grid-container > hr {
    display: none;
}

/* Styling for each section within the grid */
.maintenance-grid-container > section {
    background-color: #ffffff; /* White background for each section box */
    padding: 20px;             /* Padding within each section box */
    border-radius: 8px;        /* Rounded corners for the section box */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Shadow for the section box */
    margin-top: 0; /* Reset individual margins, gap handles spacing */
    margin-bottom: 0;
    border-top: none; /* Reset individual borders */
    border: 1px solid #ddd; /* Add border to section cards */
}

/* Overrides for forms specifically within the grid sections, if not covered by the common #formID rules */
/* This rule ensures that if a general 'form' tag style adds padding/shadow, it's undone here */
.maintenance-grid-container > section > form {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0; /* Remove bottom margin if section padding is enough */
}


/* === Score Entry Field Styling (Exam Entry Form) === */
.score-input-item {
    margin-bottom: 15px; /* Space between different score type entries */
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9; /* Light background to group items */
}

.score-input-item label { /* Label for the score type name, e.g., "Raw Score:" */
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

.score-value-input, /* Common class for score value and base value inputs */
input[type="number"].score-value-input { /* Ensure number inputs also get this styling */
    width: calc(100% - 20px); /* Adjust width as needed, considering padding */
    padding: 8px 10px;
    /* margin-bottom: 8px; /* Original space below each input field */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em; /* Match other form inputs */
}

/* Specific margin adjustments for layout */
.score-input-item input.score-value-input[data-is-base-input="false"] {
    margin-bottom: 2px; /* Reduce space below the main score input */
}

.score-outof-label {
    display: block; /* Ensures it takes its own line */
    margin: 4px 0;  /* Adjusted margin: more space than inputs, less than original */
    color: #555;    /* Match standard label color */
    font-size: 0.9em; /* Slightly smaller if desired, or keep same as labels */
    text-align: center; /* Center the "Out of" text if inputs are full width */
}

.score-input-item input.score-base-input {
    margin-top: 2px; /* Reduce space above the base score input */
    margin-bottom: 8px; /* Retain some space below the base input group */
}


/* Override for number input specifically for display order in section management */
#examSectionForm input#sectionDisplayOrderInput.score-value-input {
    width: 100px; /* Keep specific small width for display order */
}