/* General styling for the page */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px; /* Provides overall spacing around content */
    background-color: #1B2947; /* Dark blue from home page - KEPT */
    color: #FFFFFF; /* CHANGED: Pure white for better readability on deep blue */
}
.main-title {
    color: goldenrod; /* Or any other color you prefer */
    font-size: 2.5em; /* Make it large */
    text-align: center; /* Center the text */
    margin-top: 1em;
    margin-bottom: 1.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: add a subtle shadow */
}
.main-title a {
    /* Inherit font color from the parent h1 element */
    color: inherit;
    text-decoration: none;
    text-decoration: none;
    cursor: pointer;
}

/* Ensure no change on hover or active state for underline/color */
.main-title a:hover,
.main-title a:active,
.main-title a:visited {
    color: inherit;
    text-decoration: none;
}

h1, h2, h4 {
    color: goldenrod; /* Goldenrod from home page - KEPT */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

a {
    color: #036; /* Dark blue from existing links in your HTML - KEPT */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #ffcc00; /* Yellow/gold for hover - KEPT */
}

/* Form styling */
.search-form {
    margin-bottom: 2em;
}

.search-fieldset {
    border: 1px solid #6c738e; /* Darker blue/gray border - KEPT */
    padding: 1em; /* RESTORED: Original padding */
    background-color: #868db0; /* Medium blue/gray from home page container - KEPT */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    color: #333; /* Darker text for readability on lighter background - KEPT */
}

.search-fieldset legend {
    font-weight: bold;
    color: goldenrod; /* Goldenrod for legend - KEPT */
}

.search-section-title {
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #333; /* Darker text - KEPT */
}

.form-group {
    margin-bottom: 0.8em;
}

.form-group label {
    margin-right: 0.5em;
    /* RESTORED: Removed font-weight: bold; */
}

.identifier-input,
.coords-input,
.radius-input {
    margin-left: 0.5em;
    padding: 0.3em; /* RESTORED: Original padding */
    border: 1px solid #aaa; /* KEPT: Consistent input border color */
    border-radius: 4px; /* KEPT: Added for aesthetics */
    background-color: #f9f9f9; /* KEPT: Light background for inputs */
    color: #333; /* KEPT: Input text color */
}

.identifier-input {
    width: 200px;
}

.coords-input {
    width: 100px;
}

.coords-label {
    margin-left: 1em;
}

.priority-note {
    font-size: 0.9em;
    color: #333; /* KEPT: Darker gray for notes */
    margin-bottom: 0.8em;
}

.spacer {
    height: 1em;
}

.cone-search-title {
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #333; /* KEPT: Darker text */
}

.optional-note {
    color: #333; /* KEPT: Darker gray for notes */
}

.radius-input {
    width: 60px;
}

.radius-unit-select {
    margin-left: 0.5em;
    padding: 0.3em; /* RESTORED: Original padding */
    border: 1px solid #aaa; /* KEPT: Consistent input border color */
    border-radius: 4px; /* KEPT: Added for aesthetics */
    background-color: #f9f9f9; /* KEPT: Light background for inputs */
    color: #333; /* KEPT: Input text color */
}

.search-button-container {
    margin-top: 1em; /* RESTORED: Original margin-top */
    text-align: center;
}

.search-button-container button {
    padding: 0.5em 1.5em; /* RESTORED: Original padding */
    background-color: #ffcc00; /* Yellow/gold from home page - KEPT */
    color: black; /* Black text on button - KEPT */
    border: 2px solid #e6b800; /* Darker yellow/gold border - KEPT */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    cursor: pointer;
    font-size: 1em; /* RESTORED: Original font size */
    font-weight: bold; /* KEPT: Button text bold */
    transition: background-color 0.3s ease; /* KEPT: Smooth hover effect */
}

.search-button-container button:hover {
    background-color: #e6b800; /* Darker yellow/gold on hover - KEPT */
}

/* Warning message */
.alert.alert-warning {
    margin: 1em 0; /* RESTORED: Original margin */
    padding: 0.5em; /* RESTORED: Original padding */
    background-color: #fff3cd; /* KEPT: Standard warning color */
    border-left: 4px solid #ffc107; /* KEPT: Standard warning color */
    color: #856404; /* KEPT: Standard warning color */
    font-weight: bold;
    border-radius: 4px; /* KEPT: Added for aesthetics */
}

/* Tables */
.spatial-matches-container {
    margin-bottom: 1em;
    background-color: #fff; /* White background for tables for readability - KEPT */
    padding: 1em; /* KEPT: Background padding for table container */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* KEPT: Subtle shadow */
    color: #333; /* Darker text - KEPT */
}

.data-table {
    border-collapse: collapse;
    width: auto; /* RESTORED: Original width */
    font-size: 0.95em;
}

.data-table thead tr {
    background-color: #e0e4f0; /* Lighter blue/gray for table headers - KEPT */
}

.data-table th,
.data-table td {
    padding: 4px 8px; /* RESTORED: Original padding */
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.data-table tbody tr:hover {
    background-color: #f5f5f5; /* Light hover effect for table rows - KEPT */
}

.table-link,
.source-link,
.bibcode-link,
.alias-link,
.orbit-bibcode-link {
    text-decoration: none;
    color: #036; /* Dark blue for links - KEPT */
}

.table-link:hover,
.source-link:hover,
.bibcode-link:hover,
.alias-link:hover,
.orbit-bibcode-link:hover {
    text-decoration: underline;
    color: #ffcc00; /* Yellow/gold for hover - KEPT */
}

/* Alias Grids */
.aliases-grid,
.syntactic-matches-grid,
.sesame-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(4, max-content); /* RESTORED: Original 4-column layout */
    column-gap: 2em;
    row-gap: 0.4em; /* RESTORED: Original row gap */
    padding: 0.5em; /* RESTORED: Original padding for grid content */
    background-color: #fff; /* White background - KEPT */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* KEPT: Subtle shadow */
    color: #333; /* Darker text - KEPT */
    margin-bottom: 1.5em; /* KEPT: For consistent spacing between blocks */
}

.unknown-suggestion {
    color: #888;
}

/* System Details Section - Now stacks Astrometry and Photometry vertically */
.system-details-grid {
    /* REMOVED: display: grid; */
    /* REMOVED: grid-template-columns: max-content max-content; */
    /* REMOVED: column-gap: 2em; */
    /* REMOVED: row-gap: 0.4em; */
    padding: 0.5em; /* Keep padding for the overall container */
    background-color: #868db0; /* Keep background color - KEPT */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* KEPT: Subtle shadow */
    margin-bottom: 1.5em; /* KEPT: For consistent spacing between blocks */
    color: #333; /* Darker text - KEPT */
}
.system-details-grid h4 {
    color: #333333; /* Dark gray */
}

.astrometry-grid { /* This grid was originally nested inside system-details-grid with its own inline style */
    display: grid; /* This was the original inline style */
    grid-template-columns: max-content minmax(12em, 1fr) max-content minmax(8em, 2fr); /* RESTORED: Original inline column definition */
    row-gap: 0.5em; /* RESTORED: Original inline row gap */
    column-gap: 1.5em; /* RESTORED: Original inline column gap */
    margin-bottom: 2em;
    /* RESTORED: Removed align-items: center; */
    /* RESTORED: Removed font-weight: bold; from child divs */
}

.colspan-3 {
    grid-column: span 3;
}

/* Photometric & Spectral Properties - This grid itself remains unchanged */
.photometric-spectral-container {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 4em;
    row-gap: 0.4em;
    padding: 0.5em;
    background-color: #868db0; /* Keep background color - KEPT */
    border-radius: 8px; /* KEPT: Added for aesthetics */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* KEPT: Subtle shadow */
    color: #333; /* Darker text - KEPT */
    /* No margin-bottom here, it's handled by the parent .system-details-grid's margin-bottom */
}

.component-properties-grid {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 0.4em;
}

/* Available Orbits List */
.orbits-list {
    padding-left: 1em;
    list-style-type: none;
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #333;
    margin-bottom: 1.5em;
}

.orbits-list li {
    margin-bottom: 0.6em;
}

/* Back to Home link */
p a {
    color: #036;
    font-weight: bold;
}
p a:hover {
    color: #ffcc00;
}

.warning-box {
    background-color: #ffcccc; /* Light reddish background */
    border: 1px solid #ff0000; /* Red border */
    color: red; /* text color for readability */
    padding: 1em; /* Padding inside the box */
    margin: 1em auto; /* Margin outside the box */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text */
    font-weight: bold; /* Bold text */
    max-width: 80%; /* Ensure the box doesn't span the full width of the container */
}