/* --- GENERAL BODY & TYPOGRAPHY --- */
body {
    background-color: #f0f2f5; /* A softer, light gray background - more visually appealing than f8f9fa */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern, readable font stack */
    color: #333; /* Slightly softer black for main text */
}

/* --- NAVBAR STYLING --- */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Subtle shadow for depth */
    background-color: #007bff !important; /* Ensure primary blue or choose a new color */
}

.navbar-brand { /* Your existing style */
    font-weight: bold;
    font-size: 1.5rem;
}

/* --- HEADINGS --- */
h1, h2, h3 { /* Your existing style */
    color: #0056b3; /* Darker blue for headings */
}
/* Additionally apply to h5 used in cards for consistency */
h5 {
    color: #0056b3; /* A slightly darker blue for headings */
    font-weight: 600;
}

/* --- CUSTOM STYLES FROM YOUR ORIGINAL INLINE CSS (ADAPTED) --- */
.button-container { /* This will be within a card now */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

#canvas-container {
    position: relative;
    max-width: 800px;
    margin: 15px auto; /* Center horizontally; auto for left/right, 15px for top/bottom */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 8px; /* Rounded corners for the container */
    overflow: hidden; /* Ensures image/canvas respects border-radius */
    
    }
#uploadedImage,
#detectionCanvas {
    max-width: 100%;
    height: auto;
    /* Controlled by JS; .hidden-initial class hides them initially */
    display: block; /* Ensures they don't have extra spacing */
    /* Make sure the canvas is absolutely positioned over the image */
    position: absolute; /* Crucial for overlapping */
    top: 0;
    left: 0;
    width: 100%; /* Makes them fill the width of the container */
    height: 100%; /* Makes them fill the height of the container */
    object-fit: contain; /* Scales the content to fit within the element's box while maintaining its aspect ratio. The entire object will be shown, but letterboxed if its aspect ratio does not match the box's. */
    z-index: 1; /* For image, z-index: 2 for canvas */
}
#uploadedImage {
    z-index: 1; /* Places the image below the canvas */
}
#detectionCanvas {
    z-index: 2; /* Places the canvas above the image for drawing */
    pointer-events: none; /* Allows clicks to pass through the canvas to elements below it */
}

/* --- SPINNER STYLING --- */
#loading-spinner {
    display: none; /* Controlled by JS */
    margin-top: 10px;
    text-align: center; /* Center the spinner within its container */
}


/* --- DETECTION LIST CONTAINER --- */
#detection-list-container {
    max-width: 100%; /* Make it responsive within its card */
    max-height: 250px; /* Slightly increased max-height for more content */
    overflow-y: auto;
    border: 1px solid #dee2e6; /* Softer border */
    padding: 15px;
    background: #fefefe; /* Lighter background */
    margin-top: 15px; /* Space above */
    border-radius: 5px; /* Consistent rounded corners */
}

#detection-list li {
    list-style-type: disc; /* Default bullets for actual list items */
    margin-left: 20px; /* Indent bullets */
    margin-bottom: 5px; /* Space between list items */
}

#detection-list li:first-child { /* Target the 'Current Detections:' header */
    list-style-type: none; /* Remove bullet from the header */
    margin-left: 0; /* Align header */
    margin-bottom: 10px; /* Space below header */
}

#detection-list li strong { /* Styling for 'Current Detections:' text */
    font-size: 1.1em;
    display: block; /* Ensure it takes its own line */
    color: #007bff; /* Primary color for emphasis */
}


/* --- REPORT PRESENTATION --- */
.report-card { /* Generic name, used for cards containing report-like info */
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
    border-radius: 8px; /* Consistent border-radius */
    border: none;
}
.report-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 15px;
    background-color: #e9ecef;
    border-radius: .25rem;
    border: 1px solid #ced4da;
    max-height: 500px;
    overflow-y: auto;
}

/* --- NEW BOOTSTRAP-FRIENDLY CUSTOM STYLES (from previous detailed response) --- */
.card {
    border: none; /* Remove default card border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 12px rgba(0,0,0,.08); /* More pronounced shadow for cards */
}

/* For patient info section if you reuse it */
#info-section {
    padding: 15px;
    border: 1px solid #d1ecf1; /* Light blue border */
    background-color: #dbeeff; /* Very light blue background */
    color: #0c5460; /* Darker blue text */
    border-radius: .25rem;
    margin-top: 15px;
}

/* Specific styling for the generated report content */
#report-container {
    background-color: #fdfdfd; /* Lighter background for the LLM report */
    border-color: #cce5ff !important; /* Light blue border */
    color: #004085; /* Dark blue text for report content/placeholder */
    border-radius: .25rem;
    padding: 15px; /* Add padding consistent with .report-content pre */
}

/* Hide initial elements via CSS, JS will show */
.hidden-initial {
    display: none;
}

/* Example: Hover effects for buttons */
.btn-success:hover {
    box-shadow: 0 2px 6px rgba(40,167,69,.3);
}

/* Make canvas/image fit nicely (ensure JS toggles display property) */
#uploadedImage, #detectionCanvas {
    display: block; /* Ensure they render as blocks, JS will set/remove 'display: none' */
    margin: 0 auto; /* Center the image/canvas */
    max-height: 500px; /* Limit max height */
    object-fit: contain; /* Ensure image fits without cropping */
}
#detection-list-container{ 
    text-align: left;
}

/* if you want the list to be vertical comment out the next 3 */
#detection-list {
    display: flex; /* Makes the list a flex container */
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: flex-start; /* Aligns items to the start (left) of the container */
    align-items: flex-start; /* Aligns items to the top if they have different heights */
    list-style: none; /* Removes default bullets from the ul */
    padding: 0; /* Remove default padding from the ul */
    margin: 10px 0; /* Adjust margin as needed around the list */
}

#detection-list li {
    flex-basis: calc(25% - 20px); /* Roughly 4 items per line, accounting for gap */
    margin: 10px; /* Adds space around each item */
    text-align: center; /* Center the text inside each detection item */
    background-color: #f0f0f0; /* Optional: light background for each item */
    padding: 8px 12px; /* Optional: padding inside each item */
    border-radius: 5px; /* Optional: slightly rounded corners */
    box-sizing: border-box; /* Ensures padding/border are included in the 25% width */
    white-space: nowrap; /* Prevents text from wrapping within an item */
    overflow: hidden; /* Hides overflow if text is too long */
    text-overflow: ellipsis; /* Adds "..." if text is too long */
}

/* Specific styling for the "Current Detections:" title item */
#detection-list li:first-child {
    flex-basis: 100%; /* Makes the title take up the full width */
    text-align: left; /* Ensures the title itself is left-aligned */
    margin-bottom: 15px; /* Add some space below the title */
    background-color: transparent; /* No background for the title */
    padding: 0; /* No padding for the title */
    font-weight: bold; /* Make the title bold */
    font-size: 1.1em; /* Slightly larger font for the title */
}
.arrow-icon-size {
    font-size: 1.25rem; /* Start with 1.25rem, adjust as needed */
    /* You might also want to adjust vertical alignment slightly if needed */
    vertical-align: middle; /* Ensures it stays centered */
    line-height: 1; /* Helps with consistent vertical spacing */
}