/* SolarSystemMap.css */
html, body {
    height: 100%; margin: 0; font-family: sans-serif;
    background-image: url('../images/Background.jpg') ; 
    background-color: #181a1b; 
    color: #c8c8c8; 
    overflow: hidden; 
}

body { display: flex; flex-direction: column; height: 100vh; }

#appHeader {
    background-color: #101010; 
    border-bottom: 1px solid #000;
    color: #00A8FF; 
    padding: 5px 15px; 
    width: 100%; 
    flex-shrink: 0; 
    box-sizing: border-box; 
    display: flex;
    justify-content: space-between; /* Title on left, controls on right */
    align-items: center; 
    min-height: 45px; /* Ensure header has a minimum height */
}
/* ------- Header Styles ------- */
#currentSystemTitleHeader { flex-grow: 1; /* Allows it to take space */ }

#systemDetailsHeader { 
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: #a0a0a0;
    margin: 0 auto; /* Try to center it between title and right controls */
    flex-shrink: 0;
}

#systemDetailsHeader span > span { color: #00A8FF; font-weight: bold; }

#systemSelectionControlsHeader { flex-shrink: 0; }


/*--- Header Elements ---*/

#appHeader h1#currentSystemTitleHeader {
    margin: 0; 
    font-size: 18px; 
    font-weight: normal; 
    letter-spacing: 1px;
    white-space: nowrap; 
    overflow: hidden;    
    text-overflow: ellipsis; 
    /* flex-grow: 1; /* Let systemDetailsHeader and headerControlsWrapper define their size first */
    margin-right: 20px; /* Space before system details */
}


#headerControlsWrapper { /* NEW: Wrapper for right-side header controls */
    display: flex;
    align-items: center;
    gap: 15px; /* Space between system selection and save button */
    flex-shrink: 0;
}


#systemSelectionControlsHeader { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    /* flex-shrink: 0; /* Already handled by parent wrapper */
}

#systemSelectionControlsHeader input[type="text"]#systemIdInput {
    padding: 6px 8px; font-size: 12px; background-color: #2a2d30; 
    color: #c8c8c8; border: 1px solid #101010; border-radius: 3px;
    width: 180px; box-sizing: border-box;
}

#systemSelectionControlsHeader button#loadSystemButton {
    /* ... same as before ... */
    padding: 6px 12px; font-size: 12px; cursor: pointer;
    background-color: #005f88; color: #fff; border: 1px solid #003c56; 
    border-radius: 3px; box-sizing: border-box; text-align: center; white-space: nowrap;
}


#systemSelectionControlsHeader button#loadSystemButton:hover { background-color: #0077a9; }

#appHeader #saveStateToUrlButton {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background-color: #3a3d40; /* Slightly different from load, or same as other panel buttons */
    color: #00A8FF; /* EVE Blue text */
    border: 1px solid #101010;
    border-radius: 3px;
    white-space: nowrap;
}
#appHeader #saveStateToUrlButton:hover {
    background-color: #e50f16;
    color: #FFFF66;
}


/* --- Main App Grid Container New Buttons --- */
#appHeader #loadSystemButton {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background-color: #3a3d40; /* Slightly different from load, or same as other panel buttons */
    color: #00A8FF; /* EVE Blue text */
    border: 1px solid #101010;
    border-radius: 3px;
    white-space: nowrap;
}
#appHeader #loadSystemButton:hover {
    background-color: #4a4d50;
}

/*--- END ---*/

/* --- Help Button --*/
#appHeader #loadInstructions {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background-color: #3a3d40; /* Slightly different from load, or same as other panel buttons */
    color: #00A8FF; /* EVE Blue text */
    border: 1px solid #101010;
    border-radius: 3px;
    white-space: nowrap;
}
#appHeader #loadInstructions:hover {
    background-color: #4a4d50;
}

/* --- Help Button End --- */
#appGridContainer {
    display: grid;
    grid-template-columns: minmax(600px, 2.5fr) minmax(220px, 1fr) minmax(350px, 1.5fr); 
    
    grid-template-rows: auto auto 1fr minmax(150px, 25vh); /* Top Input | Buttons | Flexible Middle | Bottom Row */
    grid-template-areas:
        "map        scanInput   rightPanel"
        "map        buttons     rightPanel"
        "map        plotTable   rightPanel"  
        "probeTable kill_panel  sysInfoArea";

    gap: 8px; padding: 8px; flex-grow: 1; 
    width: 100%; max-width: 1800px; margin: 0 auto; 
    box-sizing: border-box; overflow: auto; 
    height: calc(100vh - 45px); /* Full height minus header */
}

.grid-item {
    background-color: #202224; border: 1px solid #101010;
    padding: 8px; box-sizing: border-box;
    overflow: hidden; display: flex; flex-direction: column; 
    color: #b0b0b0; 
}
.grid-item h2 {
    margin-top: 0; margin-bottom: 8px; font-size: 14px; text-align: center;
    background-color: #2d2f32; padding: 5px 0; color: #00A8FF; 
    flex-shrink: 0; border-bottom: 1px solid #101010;
}
.grid-item > p { font-size: 12px; margin: auto; text-align: center; color: #666; }

/* Grid Area Assignments to HTML IDs */
#mapWindow { grid-area: map; padding: 0; position:relative; display: flex; } 
#scanInputArea { grid-area: scanInput; } 
#buttonPanelArea { grid-area: buttons; background-color: transparent; border: none; padding: 0; } 
#dScanRefSelectionArea { /* This element will now live inside another grid item */ }

#plottedLocationsArea { grid-area: plotTable; } 

#rightSidePanel { 
    grid-area: rightPanel; 
    display: flex;
    justify-content: space-between; 
    gap: 8px;
} 
#probeScanResultsArea { grid-area: probeTable; } 
/*#lootEstimationArea { grid-area: lootArea; } */
#killActivityPanel { grid-area: kill_panel; } 
#systemInfoArea { grid-area: sysInfoArea; } 


#svgContainer { 
    width: 100%; 
    height: 100%; 
    background-color: #02020A; 
    flex-grow:1; position:relative;
    /* ----
    transform-origin: center;  //rotate
    transform: rotate(180deg); // -- rotate
    */
}

#solarSystemSVG { width: 100%; height: 100%; display: block; }

#scanInputArea textarea#scanDataInput { 
    width: 100%; height: 100%; min-height: 80px; box-sizing: border-box; 
    font-family: monospace; font-size: 11px; background-color: #101010; 
    color: #c8c8c8; border: 1px solid #444; padding: 5px; resize: vertical; 
}

#buttonPanelArea #buttonPanel { display: flex; flex-direction: column; gap: 6px; width:100%;}
#buttonPanelArea #buttonPanel button { width: 100%; padding: 8px 5px; font-size: 12px; background-color: #2a2d30; color: #00A8FF; border: 1px solid #101010; cursor: pointer; text-align: center; box-sizing: border-box;}
#buttonPanelArea #buttonPanel button:hover { background-color: #3a3d40; }
#trilaterateSelectedButton:disabled { background-color: #222; color: #555; cursor: not-allowed; }

/* D-Scan Ref Selection List (inside its grid item) */
#dScanRefSelectionArea {
    
    /* If you want to keep the "D-Scan Refs" header */
}
#dScanRefSelectionArea #selectableCelestialsContainer { 
    width: 100%; height: 100%; margin-top: 0; 
    display: none; /* JS controls visibility to 'flex' */
    flex-direction: column; padding: 0; border:none; 
}
#dScanRefSelectionArea #selectableCelestialsContainer h4 { 
    margin-bottom: 5px; font-size: 13px; color: #00A8FF; 
    padding: 3px; background-color: #2d2f32; /* Match other H2s */
    text-align: center; flex-shrink: 0; font-weight: normal;
}
#dScanRefSelectionArea #selectableCelestialsList { 
    flex-grow: 1; 
    overflow-y: auto; 
    border: 1px solid #333; 
    padding: 3px; 
    background-color: #101010; 
    min-height: 80px; /* Crucial for visibility when flex-grow is active */
}

#dScanRefSelectionArea #selectableCelestialsList div.celestial-item { font-size: 11px; padding: 3px; color: #aaa; background-color: #181818; margin-bottom:1px; cursor:pointer;}
#dScanRefSelectionArea #selectableCelestialsList div.celestial-item:hover { background-color: #282828; }
#dScanRefSelectionArea #selectableCelestialsList div.celestial-item.selected { background-color: #004D00; color: #99FF99; font-weight: bold; }
/* Custom D-Scan Marker --- */
.dscan-area-handle line {
    stroke: orange; /* Or use the selected 'color' from JS */
    stroke-width: 1.5;
}



/* Custom Marker Controls (now inside #lootEstimationArea) */
#lootEstimationArea { padding: 8px; justify-content: flex-start; } /* Override default center */
#lootEstimationArea #customMarkerControlsContainer { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#lootEstimationArea #prepareCustomMarkerButton { width: 100%; padding: 8px 5px; font-size: 12px; background-color: #2a2d30; color: #00A8FF; border: 1px solid #101010; cursor: pointer; text-align: center; box-sizing: border-box; margin-bottom: 8px; }
#lootEstimationArea #prepareCustomMarkerButton:hover{background-color: #3a3d40;}
#lootEstimationArea #customMarkerControls { display: none; flex-direction: column; gap: 8px; padding: 10px; background-color: #282828; border: 1px solid #101010; border-radius: 4px; width: 100%; box-sizing: border-box; }
#lootEstimationArea #customMarkerControls h4 { margin: 0 0 8px 0; font-size: 13px; color: #00A8FF; text-align: center; padding-bottom: 5px; border-bottom: 1px solid #444;}
#lootEstimationArea #customMarkerControls div { display: flex; align-items: center; gap: 5px; }
#lootEstimationArea #customMarkerControls label { font-size: 11px; width: 50px; flex-shrink: 0; color: #bbb;}
#lootEstimationArea #customMarkerControls select { flex-grow: 1; padding: 4px; background-color: #1a1a1a; color: #c8c8c8; border: 1px solid #444; border-radius: 2px; font-size: 11px; }
#lootEstimationArea #customMarkerControls button#cancelCustomMarkerButton { margin-top: 8px; padding: 6px; font-size: 11px; background-color: #4a4d50; color: #ccc; border: 1px solid #101010; width: 100%; }
#lootEstimationArea #customMarkerControls button#cancelCustomMarkerButton:hover { background-color: #5a5d60; }


#topRightButtonPanel { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top:auto; } /* Pushes to bottom */
#topRightButtonPanel button { width: 100%; padding: 6px 10px; font-size: 11px; background-color: #2a2d30; color: #00A8FF; border: 1px solid #101010; cursor: pointer; }
#topRightButtonPanel button:hover { background-color: #3a3d40; }

/* Table containers */
#plottedMarkersTableContainer, 
#probeScanListContainer {
    width: 100%; flex-grow: 1; overflow-y: auto; border: 1px solid #101010;
    background-color: #101010; box-sizing: border-box;
    min-height: 100px; 
    overflow-y: auto;
}
/* ... (rest of your table, infoBox, marker, and zone styles) ... */
/* Table general styles */
#plottedMarkersTable, #probeScanTable { width: 100%; border-collapse: collapse; font-size: 10px; color: #00BFFF; }
#plottedMarkersTable th, #plottedMarkersTable td,
#probeScanTable th, #probeScanTable td { border: 1px solid #1a1a1a; padding: 3px 4px; text-align: left; }
#plottedMarkersTable th, #probeScanTable th { background-color: #282828; position: sticky; top: 0; z-index: 1; color: #888;}
#plottedMarkersTable input[type="text"].notes-input { width: 98%; box-sizing: border-box; background-color: #0c0c0c; color: #00BFFF; border: 1px solid #2a2a2a; padding: 2px; font-size: 9px; }
#plottedMarkersTable button.delete-marker-button, 
#probeScanTable button.link-marker-button { font-size: 9px; padding: 1px 4px; background-color: #302020; color: #FF8080; border:1px solid #401010; cursor:pointer; }
#plottedMarkersTable button.delete-marker-button:hover,
#probeScanTable button.link-marker-button:hover { background-color: #403030; }

#plottedMarkersTable td:nth-child(3), #plottedMarkersTable td:nth-child(4) { text-align: right; white-space: nowrap;}
#probeScanTable td:nth-child(5), #probeScanTable td:nth-child(6) { text-align: right; white-space: nowrap;}
#probeScanTable tr.res-green td { color: #33FF33; }
#probeScanTable tr.res-yellow td { color: #FFFF66; }
#probeScanTable tr.res-red td { color: #FF6666; }

#infoBox { 
    position: absolute; bottom: 10px; right: 10px; 
    background-color: rgba(30, 30, 35, 0.95); color: #c8c8c8; padding: 10px; 
    border-radius: 3px; max-width: 200px; pointer-events: none; opacity: 0; 
    transition: opacity 0.2s ease-in-out; font-size: 11px; white-space: normal; 
    border: 1px solid #00A8FF; z-index: 1000; /* Ensure it's on top of SVG content */
    transform: none; 
}
#infoBox.visible { opacity: 1; }

/* SVG Element Styles */
.celestial-body-svg { 
    cursor: pointer; 
    transition: r 0.05s ease-in-out; 
}

.scanner-marker-cross line { 
    stroke: #FFCC00; 
    stroke-width: 2; 
} 
.scanner-marker-label { 
    fill: #FFCC00; 
    font-size: 9px; 
    text-anchor: start; 
    dominant-baseline: middle; 
    cursor: pointer; 
}

.signature-zone-circle { fill: rgba(0, 168, 255, 0.01); stroke: rgba(0, 168, 255, 0.05); pointer-events: none; } /* stroke-width set by JS */
.custom-marker-shape { /* Add if you need common styling for all custom shapes */ }

.custom-marker-label { 
    fill: #DDDDDD; /* Light grey for custom marker labels */
    font-size: 9px; 
    text-anchor: start; /* If you want it next to the shape */
    /* or text-anchor: middle; dominant-baseline: hanging; if you want it above */
    dominant-baseline: middle; 
    cursor: pointer; 
    /* pointer-events: auto; /* Ensure it can be clicked */
}

/* CSS for D-Scan Range Circles */
#dscanRangeCirclesGroup circle {
    fill: rgba(26, 235, 71, 0);  /* Very, very transparent blue fill */
    stroke: rgba(31, 148, 16, 0.5); /* Very light blue stroke, also very transparent */
    stroke-width: 0.75;              /* ViewBox units - very thin line */
    stroke-dasharray: 2, 4;          /* Example: small dashes, larger gaps */
    pointer-events: none;            /* They should not interfere with mouse interactions */
    transition: stroke 0.3s ease, stroke-width 0.3s ease, fill 0.3s ease; /* Smooth transition for highlighting */
}

/* Style for when a reference point AND its circle are "selected" by user for trilateration */
/* This class is added/removed by JavaScript in displaySelectableCelestials' item click listener */
#dscanRangeCirclesGroup circle.reference-selected {
    stroke: #1eff0011; /* Gold */
    stroke-width: .75; /* Slightly thicker for emphasis */
    stroke-opacity: 0.7; /* More opaque stroke */
    fill: rgba(255, 217, 0, 0.075); /* Faint gold fill for selected ones */
    stroke-dasharray: none; /* Solid line for selected ones */
}

/* Optional: Style for the selected reference point */

/* --- Modal Styles --- */
.modal-overlay {
    position: fixed; 
    top: 0;
    left: 0; /* Keep full screen overlay for background dimming */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex; 
    /* Change these to position content within the overlay */
    justify-content: flex-end;  /* Push content to the right */
    align-items: flex-start;    /* Push content to the top */
    z-index: 1000; 
    padding-top: 460px; /* Space from top of viewport (below your header) */
    padding-right: 500px; /* Space from right of viewport */
    box-sizing: border-box; /* Include padding in dimensions */
    pointer-events: auto; /* Overlay itself needs to be clickable to potentially close modal */
}

.modal-content {
    background-color: #282d33; 
    padding: 15px; /* Slightly smaller padding */
    border-radius: 5px;
    border: 1px solid #101010;
    width: 300px; /* Adjust width as needed for side panel */
    max-width: 30%; /* Max relative width */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px); /* Max height considering padding */
    /* pointer-events: auto; /* Content inside needs pointer events */
}

.modal-content h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #00A8FF; /* EVE Blue */
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

#modalSelectableCelestialsList {
    max-height: 300px; /* Max height for the list itself */
    overflow-y: auto;
    border: 1px solid #101010;
    background-color: #1a1a1a;
    padding: 5px;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow list to take space if modal content is flex column */
}

/* Modal Styles */

#modalSelectableCelestialsList div.celestial-item {
    padding: 5px 8px;
    margin-bottom: 3px;
    background-color: #33373a;
    color: #c8c8c8;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
}
#modalSelectableCelestialsList div.celestial-item:hover {
    background-color: #44484c;
}
#modalSelectableCelestialsList div.celestial-item.selected {
    background-color: #005900; /* Dark green */
    color: #99FF99;
    font-weight: bold;
}

.modal-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}

.modal-actions button {
    padding: 8px 15px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
}
#modalTrilaterateButton {
    background-color: #005f88; /* EVE Blue Action */
    color: white;
    border: 1px solid #003c56;
}
#modalTrilaterateButton:hover { background-color: #0077a9; }
#modalTrilaterateButton:disabled { background-color: #2a2d30; color: #666; cursor: not-allowed; }
#modalCancelButton {
    background-color: #4a4d50;
    color: #ccc;
    border: 1px solid #101010;
}
#modalCancelButton:hover { background-color: #5a5d60; }


/* --- D-Scan Threat Analysis --- */


#dScanThreatAnalysisArea { 
    grid-area: rightSidePanel; /* MAKE SURE this matches a name in appGridContainer's grid-template-areas */
    display: flex;    
    flex-direction: column; /* Main stacking is vertical */
    gap: 10px; /* Space between main sections within this panel */
    /* overflow: hidden; /* Already from .grid-item */
}

#rightSidePanel .scan-meta-controls-threat { /* Wrapper for Analyse button, Origin, Range, Time */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
    flex-shrink: 0; /* Don't shrink this control bar */
}
#rightSidePanel .scan-meta-controls button#analyseThreatButton {
    padding: 6px 10px; 
    font-size: 12px; 
    background-color: #005f88; /* EVE Blue action */
    color: #fff; 
    border: 1px solid #003c56; 
    cursor: pointer; 
    border-radius: 3px;
}

#rightSidePanel .scan-meta-controls button#analyseThreatButton:hover {background-color: #0077a9;}

#rightSidePanel .scan-details span {
    font-size: 10px;
    color: #aaa;
}
#rightSidePanel .scan-details input[type="text"],
#rightSidePanel .scan-details input[type="number"] {
    width: 80px; /* Adjust as needed */
    font-size: 10px;
    padding: 2px 4px;
    background-color: #101010;
    color: #c8c8c8;
    border: 1px solid #444;
}

/* #rightSidePanel .scan-details button#setDscanOriginButton {
    font-size: 10px; padding: 2px 5px;
} */

/* --- Modified the button Styles to match the new theme --- */
#rightSidePanel .scan-details button#setDscanOriginButton {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background-color: #3a3d40; /* Slightly different from load, or same as other panel buttons */
    color: #00A8FF; /* EVE Blue text */
    border: 1px solid #101010;
    border-radius: 3px;
    white-space: nowrap;
}
#rightSidePanel .scan-details button#setDscanOriginButton:hover {
    background-color: #4a4d50;
}



/* --- END ---*/



#rightSidePanel .recon-ships-input {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    flex-shrink: 0;
}
#rightSidePanel .recon-ships-input label {
    font-size: 10px;
    color: #aaa;
    margin-bottom: 2px;
}
#rightSidePanel .recon-ships-input textarea {
    width: calc(100% - 10px); /* Full width minus padding */
    font-size: 10px;
    background-color: #101010;
    color: #c8c8c8;
    border: 1px solid #444;
    resize: vertical;
    min-height: 30px;
    box-sizing: border-box;
}

#rightSidePanel h4 {
    font-size: 12px;
    color: #00A8FF;
    margin-top: 10px;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

/* Main Ship Summary Area */
#rightSidePanel #shipSummaryContainer {
    /* This is a .table-container-threat, so it already has flex-grow:1, overflow:auto */
    /* We want this to be the primary, taller table */
    flex-grow: 2; /* Give it more flexible space compared to secondary tables if parent is flex */
    min-height: 150px; /* Ensure it has decent height */
    /* The h4 is already styled by .grid-item h2 (if you change it) or needs its own */
}
#rightSidePanel #shipSummaryContainer h4 { /* If it has an h4 directly */
    font-size: 13px; color: #00A8FF; margin-bottom: 5px; flex-shrink: 0; 
    background-color: #282828; padding: 3px; text-align: center;
}

/* Container for the two smaller side-by-side tables */
#secondaryThreatTablesWrapper  {
    display: flex;
    flex-direction: row; /* Arrange Class Summary and Unlisted side-by-side */
    gap: 8px;
    flex-grow: 1; /* Takes up some flexible space */
    min-height: 120px; /* Ensure it has height */
    flex-shrink: 0; /* Can also be useful */
}
/* Individual areas for the smaller tables */
#classSummaryWrapper,
#unlistedEntriesSideArea {
    flex-basis: 50%; /* Each takes half of the container's width */
    display: flex; /* To make h4 and table stack and table scroll */
    flex-direction: column;
    overflow: hidden; /* Parent controls overflow */
    /* These inherit .table-container-threat styles if they have the class,
       which provides background, border, and makes the inner table scrollable */
}
#classSummarySideArea h4,
#unlistedEntriesSideArea h4 { /* If they have direct h4 children */
    font-size: 12px; color: #00A8FF; margin-bottom: 5px; flex-shrink: 0;
    background-color: #282828; padding: 3px; text-align: center;
}

.table-container-threat {
    flex-grow: 1; /* Allow tables to share space */
    overflow-y: auto;
    border: 1px solid #101010;
    background-color: #0c0c0c; /* Slightly different from main panel bg */
    margin-bottom: 8px; /* Space between tables */
    min-height: 60px; /* Ensure table area is visible */
}
/* Apply common table styles using IDs or a shared class */
#shipSummaryTable, #classSummaryTable, #unlistedEntriesTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    color: #0de74e; /* Default text color for these tables */
}
#shipSummaryTable th, #classSummaryTable th, #unlistedEntriesTable th,
#shipSummaryTable td, #classSummaryTable td, #unlistedEntriesTable td {
    border: 1px solid #2a2a2a;
    padding: 2px 4px;
    text-align: left;
    white-space: nowrap;
}

#shipSummaryTable td a {
    color: #66aaff; /* A lighter, more readable blue - EVE often uses these cyans/light blues */
    text-decoration: none; /* Optional: Remove underline if you prefer */
}

#shipSummaryTable td a:hover {
    color: #88ccff; /* Slightly brighter blue on hover */
    text-decoration: underline; /* Optional: Add underline on hover for clarity */
}

#shipSummaryTable td a:visited { /* Optional: Style for visited links if needed */
    color: #7799dd; /* Slightly different shade for visited, can be same as normal */
}
#shipSummaryTable th:nth-child(n+2):nth-child(-n+7), /* Columns 2-7 for ship summary */
#shipSummaryTable td:nth-child(n+2):nth-child(-n+7),
#unlistedEntriesTable th:nth-child(2), /* Item Name */
#unlistedEntriesTable td:nth-child(2) {
    white-space: normal; /* Allow specific columns to wrap */
}

#shipSummaryTable th, #classSummaryTable th, #unlistedEntriesTable th {
    background-color: #282828;
    position: sticky;
    top: 0;
    z-index: 1; /* Ensure headers are above scrolling content */
    color: #888;
}
#reconShipCountsContainer {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 8px;
    background-color: #1a1a1a; /* Slightly different background */
    border: 1px solid #333;
    border-radius: 3px;
    flex-shrink: 0; /* Prevent this container from shrinking */
}

#reconShipCountsContainer h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 11px; /* Smaller header for this section */
    color: #00A8FF;
    font-weight: normal;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

.recon-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    gap: 5px;
}

.recon-input-group label {
    font-size: 11px;
    color: #bbb;
    width: 60px; /* Adjust for alignment */
    flex-shrink: 0;
}

.recon-input-group input[type="number"] {
    width: 70px; /* Small input for counts */
    padding: 3px 5px;
    font-size: 11px;
    background-color: #101010;
    color: #c8c8c8;
    border: 1px solid #444;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: left;
}


/* Sensor Background Colors for Ship Summary Table */
#shipSummaryTable td.sensor-radar { background-color: #FAFAD2; /* LightGoldenrodYellow - better contrast than Pale Yellow on light text */ color: #333; }
#shipSummaryTable td.sensor-gravimetric { background-color: #B0E0E6; /* PowderBlue */ color: #333; }
#shipSummaryTable td.sensor-magnetometric { background-color: #98FB98; /* PaleGreen */ color: #333; }
#shipSummaryTable td.sensor-ladar { background-color: #FFC0CB; /* Pink - was LightPink */ color: #333; }
#shipSummaryTable td.sensor-multisensor { background-color: #D8BFD8; /* Thistle - for SoCT/CONCORD */ color: #333; }
#shipSummaryTable td.sensor-unknown { background-color: inherit; /* Uses default cell background */ } 
                                     /* color will inherit from table default */

/* Ensure default table cell text color provides contrast if background isn't set */
#shipSummaryTable td {
    /* color: #00BFFF; /* Your default table text color */
}

/* --- Manual Ranges of Celestials ---- */
#manualRangeCelestialsList .celestial-range-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    margin-bottom: 2px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 12px;
}
#manualRangeCelestialsList .celestial-range-entry:last-child {
    border-bottom: none;
}
#manualRangeCelestialsList .celestial-range-entry label {
    color: #c8c8c8;
    flex-basis: 60%; /* Give more space to name */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#manualRangeCelestialsList .celestial-range-entry input[type="text"] {
    width: 70px; /* For range */
    padding: 3px;
    font-size: 11px;
    background-color: #101010;
    color: #c8c8c8;
    border: 1px solid #444;
    border-radius: 2px;
    text-align: right;
}
#manualRangeCelestialsList .celestial-range-entry select { /* For unit selection */
    width: 55px;
    padding: 3px;
    font-size: 11px;
    background-color: #101010;
    color: #c8c8c8;
    border: 1px solid #444;
    border-radius: 2px;
    margin-left: 5px;
}

.dscan-range-visualization-circle {
    fill: rgba(255, 165, 0, 0.05); /* Faint orange fill */
    stroke: rgba(200, 200, 200, 0.5);  /* Faint orange stroke */
    stroke-width: 0.5; /* ViewBox units */
    stroke-dasharray: 4, 4;
}
.dscan-area-handle line { /* If the handle is a cross */
    /* stroke is set by selected color in JS */
    /* stroke-width is set by selected color in JS */
}

.kill-cluster-count-label {
    font-size: 8px; /* Small */
    fill: #FFD700; /* Gold or bright color */
    text-anchor: start;
    dominant-baseline: middle;
    font-weight: bold;
}
/* Style for the crossed swords icon if needed (fill, stroke) */
#killMarkersGroup use { 
    fill: red; /* Example fill for the icon itself */
}

#killActivityPanel #killActivityListContent {
    flex-grow: 1;
    overflow-y: auto;
    /* Add padding, etc. as desired */
}

#killMarkersGroup use.kill-marker-icon { 
    fill: #FF4444; /* Default red for kill icons */
     stroke: #8B0000; /* Dark red border */
     stroke-width: 0.5; 
 }
 #killMarkersGroup g:hover use.kill-marker-icon { /* Optional hover effect for icon */
     fill: #FF6666;
 }
 .kill-cluster-count-label { 
     font-size: 8px; /* Smaller for count */
     fill: #FFFFFF; 
     stroke: #000000;
    stroke-width: 0.3px;
    text-anchor: start; 
     dominant-baseline: baseline;/* Position top-left of its x,y */
     pointer-events: none; 
}

/* In SolarSystemMap.css */
.kill-marker-cross-icon line {
    stroke: #FF4444; /* Bright Red */
    stroke-width: 1.5; /* ViewBox units */
    stroke-linecap: round; /* Optional: makes line ends rounded */
}

#killMarkersGroup g:hover .kill-marker-cross-icon line { /* Optional hover effect for the cross */
    stroke: #FF8888; /* Lighter red */
}

.kill-cluster-count-label { 
    font-size: 8px; 
    fill: #FFD700;  /* Bright Yellow */
    stroke: black;
    stroke-width: 0.25px; /* Thin black outline for text visibility */
    text-anchor: start; 
    dominant-baseline: middle;
    font-weight: bold;
    pointer-events: none; 
}

#killActivityPanel { /* This is a .grid-item, so it gets base styles */
    /* It's already display:flex; flex-direction:column from .grid-item */
}
#killActivityPanel h2 { /* Already styled by .grid-item h2 */ }

#killActivityPanel #killActivityListContent { /* Was .scrollable-content-area */
    flex-grow: 1; /* Takes up available vertical space */
    overflow-y: auto; /* Enables scrolling */
    background-color: #101010; /* Dark background for the list area */
    padding: 5px;
    font-size: 11px;
    line-height: 1.4;
    min-height: 100px; /* Ensure it has some space */
}
#killActivityPanel #killActivityListContent ul {
    list-style-type: none;
    padding-left: 5px;
    margin: 0;
}
#killActivityPanel #killActivityListContent li {
    margin-bottom: 8px; /* Space between kill entries */
    padding-bottom: 5px;
    border-bottom: 1px dotted #333;
}
#killActivityPanel #killActivityListContent li:last-child {
    border-bottom: none;
}
#killActivityPanel #killActivityListContent strong { /* For time or victim name */
    color: #00A8FF; /* EVE Blue */
}
#killActivityPanel #killActivityListContent em { /* For "By:" */
    color: #888;
}
#killActivityPanel #killActivityListContent a { /* ZKB Link */
    color: #87CEFA;
    text-decoration: none;
}
#killActivityPanel #killActivityListContent a:hover {
    text-decoration: underline;
}

#killActivityPanel button#refreshKillDataButton {
    margin-top: auto; /* Pushes to the bottom of the flex container */
    flex-shrink: 0; /* Prevent button from shrinking */
    padding: 6px 10px;
    font-size: 12px;
    /* Use your standard button styling */
    background-color: #2a2d30; 
    color: #00A8FF; 
    border: 1px solid #101010; 
    cursor: pointer;
    align-self: center; /* Center button if panel is wider */
    margin-bottom: 3px; /* Small space from bottom */
    width: calc(100% - 10px); /* Slightly less than full width */
    box-sizing: border-box;
}
#killActivityPanel button#refreshKillDataButton:hover { background-color: #3a3d40; }

/* --- Added css for dropdown menu -----*/
/* Container for the autocomplete */
.autocomplete-container {
  position: relative;
  width: 300px;
}

/* Input field */
#solarsysname {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Dropdown list */
.autocomplete-list {
  position: absolute;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none;
}

/* List items */
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background-color: #f1f1f1;
}

/* Highlight matching text */
.highlight {
  font-weight: bold;
  color: #2c7be5;
}

/* Invalid input styling */
.invalid-input {
  border-color: #dc3545;
  background-color: #fff8f8;
}