/* Define CSS Variables for Colors */
:root {
    /* Default (Dark Mode) Colors - Darkish Luxurious Palette */
    --body-bg: linear-gradient(135deg, #1a1a1a, #222222); /* Deep charcoal gradient */
    --container-bg: #2c2c2c; /* Dark grey */
    --text-color: #e0c060; /* Muted antique gold */
    --heading-color: #c0a040; /* Darker antique gold */
    --section-bg: #383838; /* Slightly lighter dark grey for sections */
    --section-border: #505050; /* Medium grey border */
    --input-border: #606060; /* Grey border for inputs */
    --input-focus-border: #ffc000; /* Brighter gold accent for focus */
    --input-focus-shadow: rgba(255, 192, 0, 0.4); /* Gold shadow */
    --label-color: #d0b050; /* Lighter muted gold for labels */
    --capital-unit-bg: #4a4a4a; /* Background for 'Jt' label */
    --fee-text-color: #a0a0a0; /* Muted grey fee text */
    --fee-label-color: #c0c0c0; /* Lighter grey fee label color */
    --output-bg: #333333; /* Slightly darker grey for output */
    --output-border-bottom: #707070; /* Dotted line */
    --error-text-color: #e57373; /* Light red for errors */
    --error-bg: #422a2a; /* Dark red background for errors */
    --button-primary-bg: #5a4a3a; /* Deep bronze primary button */
    --button-primary-hover-bg: #6b5a4a; /* Slightly lighter bronze */
    --button-success-bg: #669966; /* Muted green success button */
    --button-success-hover-bg: #558855; /* Darker muted green */
    --button-danger-bg: #b71c1c; /* Dark red danger button */
    --button-danger-hover-bg: #a01a1a; /* Darker red */
    --button-disabled-bg: #606060; /* Muted grey disabled button */
    --accent-color: #ffc000; /* Bright gold accent */
    --profit-color: #669966; /* Muted green for profit */
    --loss-color: #e57373; /* Light red for loss */
    --focus-outline-color: #ffc000; /* Gold for focus outline */
    --invalid-border-color: #e57373; /* Light red for invalid input border */
    --invalid-focus-shadow: rgba(229, 115, 115, 0.4); /* Red shadow for invalid focus */
}

/* Light Mode Colors with Accent */
body.light-mode {
    --body-bg: #f8f9fa; /* Very light grey */
    --container-bg: #ffffff; /* White */
    --text-color: #333; /* Dark grey */
    --heading-color: #0077b6; /* Primary blue */
    --section-bg: #e9ecef; /* Light grey */
    --section-border: #ced4da; /* Grey border */
    --input-border: #adb5bd; /* Medium grey border */
    --input-focus-border: #0077b6; /* Accent color for focus */
    --input-focus-shadow: rgba(0, 119, 182, 0.25); /* Accent shadow */
    --label-color: #495057; /* Dark grey for labels */
    --capital-unit-bg: #dee2e6; /* Light grey background for 'Jt' */
    --fee-text-color: #6c757d; /* Muted grey fee text */
    --fee-label-color: #333; /* Dark grey fee label */
    --output-bg: #cfd8dc; /* Light blue-grey for output */
    --output-border-bottom: #b0bec5; /* Muted grey dotted line */
    --error-text-color: #dc3545; /* Red for errors */
    --error-bg: #f8d7da; /* Light red background */
    --button-primary-bg: #007bff; /* Primary blue button */
    --button-primary-hover-bg: #0056b3; /* Darker blue */
    --button-success-bg: #28a745; /* Green button */
    --button-success-hover-bg: #218838; /* Darker green */
    --button-danger-bg: #dc3545; /* Red button */
    --button-danger-hover-bg: #c82333; /* Darker red */
    --button-disabled-bg: #b0b0b0; /* Grey disabled button */
    --accent-color: #0077b6; /* Primary blue accent */
    --profit-color: #28a745; /* Green for profit */
    --loss-color: #dc3545; /* Red for loss */
    --focus-outline-color: #0077b6; /* Primary blue for focus outline */
    --invalid-border-color: #dc3545; /* Red for invalid input border */
    --invalid-focus-shadow: rgba(220, 53, 69, 0.4); /* Red shadow for invalid focus */
}


/* Apply Variables to Styles */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background: var(--body-bg); /* Use variable (can be gradient) */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center;
    align-items: center; /* Center horizontally */
    min-height: 100vh;
    color: var(--text-color); /* Use variable */
    transition: background 0.5s ease, color 0.5s ease; /* Smooth transition for background */
    box-sizing: border-box; /* Include padding in height calculation */
}

.container {
    background: var(--container-bg); /* Use variable */
    padding: 30px;
    border-radius: 12px; /* Slightly more rounded */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* More prominent shadow for depth */
    width: 100%;
    max-width: 1000px;
    position: relative;
    margin-bottom: 10px; /* Further reduced space below the container */
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
}

body.dark-mode .container {
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Slightly stronger shadow in dark mode */
}


h1, h2 {
    text-align: center;
    color: var(--heading-color); /* Use variable */
    margin-bottom: 25px;
    transition: color 0.5s ease; /* Smooth transition */
}

h2 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--section-border); /* Use variable */
    padding-bottom: 10px;
    transition: border-bottom-color 0.5s ease; /* Smooth transition */
}


/* --- Calculator Tabs Styling --- */
.calculator-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--section-border); /* Match section border */
}

.tab-button {
    padding: 10px 15px;
    border: none;
    background-color: transparent; /* Transparent background */
    color: var(--label-color); /* Muted text color */
    font-size: 1em;
    cursor: pointer;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 2px solid transparent; /* Transparent bottom border by default */
}

.tab-button:hover {
    color: var(--text-color); /* Brighter on hover */
}

.tab-button.active {
    color: var(--heading-color); /* Accent color when active */
    border-bottom-color: var(--heading-color); /* Accent color border when active */
    font-weight: 700;
}


/* --- Calculator Section Styling --- */
.calculator-section {
    display: none; /* Hidden by default */
    width: 100%; /* Ensure sections take full width when displayed */
}

.calculator-section.active {
    /* Apply flex directly to the active calculator section */
    display: flex;
    flex-direction: column; /* Stack columns vertically by default (mobile) */
    gap: 15px; /* Gap between input and output columns */
}


/* Apply flex behavior to the main-layout div within the active calculator section */
/* This is the container that holds the input and output columns */
.main-layout {
    /* main-layout is no longer the flex container for columns */
    width: 100%; /* Ensure it takes full width */
}


/* Styles for input and output columns */
.input-column, .output-column {
    width: 100%; /* Full width on mobile */
    display: flex;
    flex-direction: column; /* Stack sections within columns */
    gap: 15px; /* Gap between sections within a column */
}


/* Styles for individual input/output sections */
.input-section, .output-section {
    margin-bottom: 0; /* Remove default margin, gap handles spacing */
    padding: 18px;
    border: 1px solid var(--section-border);
    border-radius: 10px;
    background-color: var(--section-bg);
    box-sizing: border-box;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle inner shadow for depth */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.input-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--label-color);
    font-size: 1em;
    transition: color 0.5s ease;
}

/* Style for the header containing label and Sell All button */
.sell-entries-header {
    display: flex;
    justify-content: space-between; /* Pushes label and button to ends */
    align-items: center; /* Vertically centers items */
    margin-bottom: 10px; /* Space below the header */
}

.sell-entries-header label {
    margin-bottom: 0; /* Remove default margin from label within flex */
}


.input-section input[type="number"],
.input-section select {
    width: calc(100% - 2px);
    padding: 14px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.5s ease, color 0.5s ease;
    background-color: var(--container-bg);
    color: var(--text-color);
    outline: none; /* Remove default outline */
}

.input-section input[type="number"]:focus,
.input-section select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 8px var(--input-focus-shadow);
    outline: 2px solid var(--focus-outline-color); /* Add custom outline */
    outline-offset: 2px; /* Space between element and outline */
}

/* Style for select dropdown arrow color in dark mode */
body.dark-mode .input-section select {
    filter: invert(1) grayscale(1) brightness(0.8);
}

/* Style for invalid input fields */
.input-section input[type="number"].invalid-input,
.input-section select.invalid-input {
    border-color: var(--invalid-border-color); /* Red border for invalid */
}

.input-section input[type="number"].invalid-input:focus,
.input-section select.invalid-input:focus {
    border-color: var(--invalid-border-color); /* Keep red border on focus */
    box-shadow: 0 0 8px var(--invalid-focus-shadow); /* Red shadow on focus */
    outline-color: var(--invalid-border-color); /* Red outline on focus */
}


/* --- Styles for grouped input sections --- */
.input-group-row {
    display: flex;
    gap: 25px;
    margin-bottom: 15px; /* Reduced margin-bottom */
    flex-wrap: wrap;
}

.input-group-row .input-section {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}


/* Style for the capital input group (input + label) - Reused for Shares/Lots */
.capital-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.capital-input-group input[type="number"] {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Style for the static capital unit label - Reused for Shares/Lots Unit */
.capital-unit-label {
    padding: 14px 10px;
    font-weight: 700;
    color: var(--label-color);
    flex-shrink: 0;
    background-color: var(--capital-unit-bg);
    border-radius: 6px; /* Corrected to 6px for consistency */
    font-size: 1em;
    transition: background-color 0.5s ease, color 0.5s ease;
}


/* --- Style for the individual entry/exit group container (input + buttons) ---
/* Applies to both Lot Size entry and P/L buy/sell entries */
/* This style is now applied to the container created by JS for P/L entries */
.entry-price-group, .buy-entry-group-pl, .sell-entry-group-pl {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px; /* Keep gap between inputs and buttons */
}

/* Style for the price and lot inputs within P/L entry groups */
.pl-entry-group input[type="number"] {
    flex: 1; /* Allow inputs to grow */
    margin-bottom: 0; /* Remove default margin */
}

/* Style for the Lot Size entry price input */
.entry-price-group input[type="number"] {
     flex-grow: 1; /* Allow the input to grow */
     margin-bottom: 0; /* Remove default margin */
}

/* Style for the calculated lot output span next to Lot Size entry */
.entry-lot-output {
    font-weight: 700;
    color: var(--heading-color); /* Use accent color */
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: 10px; /* Space between input and output */
    min-width: 60px; /* Give it some minimum width */
    text-align: right; /* Align text to the right */
}


/* Style for the remove and inline add buttons */
button.remove-entry,
button.add-entry-inline,
button.remove-entry-pl,
button.add-entry-inline-pl { /* Apply to P/L buttons as well */
    padding: 6px 10px; /* Adjusted padding */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.2s ease-in-out;
    width: 30px; /* Adjusted width */
    height: 30px; /* Adjusted height */
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none; /* Remove default outline */
}

button.remove-entry:focus,
button.add-entry-inline:focus,
button.remove-entry-pl:focus,
button.add-entry-inline-pl:focus {
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
}


button.remove-entry,
button.remove-entry-pl { /* Apply to P/L remove buttons */
    background-color: var(--button-danger-bg);
    transition: background-color 0.2s ease-in-out;
}

button.remove-entry:hover:not(:disabled),
button.remove-entry-pl:hover:not(:disabled) { /* Apply to P/L remove hover */
    background-color: var(--button-danger-hover-bg);
}

button.add-entry-inline,
button.add-entry-inline-pl { /* Apply to P/L add buttons */
     background-color: var(--button-success-bg);
     font-size: 1.2em; /* Reduced font size for the '+' character */
     transition: background-color 0.2s ease-in-out;
}

button.add-entry-inline:hover:not(:disabled),
button.add-entry-inline-pl:hover:not(:disabled) { /* Apply to P/L add hover */
     background-color: var(--button-success-hover-bg);
}


button.remove-entry:disabled,
button.add-entry-inline:disabled,
button.remove-entry-pl:disabled,
button.add-entry-inline-pl:disabled { /* Apply to all disabled buttons */
    background-color: var(--button-disabled-bg);
    cursor: not-allowed;
}


/* Style for fee display container */
.fee-display {
     margin-top: 15px;
     font-style: italic;
     color: var(--fee-text-color);
     font-size: 0.95em;
     transition: color 0.5s ease;
}

/* Style for the "Broker Fee |" text using a pseudo-element for consistent styling */
/* Removed the ::before pseudo-element from CSS as the text is now directly in HTML */


.fee-display p {
    margin-bottom: 0;
    padding: 0;
    border: none;
    display: flex;
    /* Increased gap between Buy and Sell */
    gap: 20px; /* Increased from 10px */
    align-items: center;
    flex-wrap: wrap;
}


.fee-display p span {
    font-weight: normal;
    float: none;
    text-align: right; /* Align fee values to the right */
    /* Reduced margin-left between label and value */
    margin-left: 5px; /* Reduced from 15px */
    color: inherit;
}


/* Removed #addEntryPrice rule as the element is removed from HTML */


button#calculateBtn,
button#calculatePLBtn { /* Apply styles to calculate buttons */
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--button-primary-bg);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 700;
    /* Removed margin-top */
    transition: background-color 0.2s ease-in-out;
    outline: none; /* Remove default outline */
}

button#calculateBtn:focus,
button#calculatePLBtn:focus {
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
}


button#sellAllLotsBtn { /* Specific style for Sell All Lots button */
     /* Removed display: block and width: 100% */
     padding: 8px 12px; /* Smaller padding for inline button */
     background-color: var(--button-primary-bg); /* Use primary color */
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 0.9em; /* Smaller font size for inline */
     font-weight: 700;
     margin-top: 0; /* Remove top margin */
     margin-bottom: 0; /* Remove bottom margin */
     transition: background-color 0.2s ease-in-out;
     flex-shrink: 0; /* Prevent shrinking in flex container */
     outline: none; /* Remove default outline */
}

button#sellAllLotsBtn:focus {
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
}


button#calculateBtn:hover:not(:disabled),
button#calculatePLBtn:hover:not(:disabled) { /* Apply hover to calculate */
    background-color: var(--button-primary-hover-bg);
}

button#sellAllLotsBtn:hover:not(:disabled) { /* Apply hover to Sell All Lots */
     background-color: var(--button-primary-hover-bg);
}


.output-section {
     background-color: var(--output-bg);
     padding: 18px;
     border-radius: 10px;
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle inner shadow for depth */
     transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.output-section h2 {
    color: var(--heading-color);
}

/* Style for the header containing the main heading and the RR toggle button */
.output-header {
    display: flex; /* Use flexbox */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space out the heading and the button */
    margin-bottom: 15px; /* Space below the header */
}

/* Style for the main heading within the output section header */
.output-section .output-header h2 {
    /* Removed flex-grow: 1; */ /* Allow h2 to take only necessary space */
    text-align: left; /* Align text to the left */
    margin: 0; /* Remove default margin from h2 in flex container */
    padding: 0; /* Remove default padding */
    border-bottom: none; /* Remove border from h2 rule */
    padding-bottom: 0; /* Remove padding from h2 rule */
}


/* Style for the RR toggle button within the output header */
#rrToggleBtn, #plFeeToggleBtn { /* Apply styles to both toggle buttons */
    /* Removed absolute positioning */
    position: static;
    top: auto;
    right: auto;
    padding: 6px 10px; /* Adjusted padding */
    border: 1px solid var(--heading-color); /* Border matching heading color */
    background-color: transparent; /* Transparent background by default */
    color: var(--heading-color); /* Text color matching heading color */
    border-radius: 4px; /* Slightly rounded corners */
    cursor: pointer;
    font-size: 0.9em; /* Slightly smaller font size */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking in flex container */
    /* Removed align-self: center; as it's now in a flex container */
    /* Removed margin-left: 10px; as gap handles spacing */
    outline: none; /* Remove default outline */
    z-index: auto; /* Reset z-index */
    margin-left: 10px; /* Add a small margin to the left of the button */
}

#rrToggleBtn:focus, #plFeeToggleBtn:focus { /* Apply focus styles to both */
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
     border-radius: 4px; /* Match button border-radius */
}

#rrToggleBtn:hover, #plFeeToggleBtn:hover { /* Apply hover styles to both */
    background-color: var(--heading-color); /* Background color on hover */
    color: var(--container-bg); /* Text color on hover (use container background for contrast) */
}

/* Style for the toggle buttons when showing fees */
#rrToggleBtn:not(.no-fees), #plFeeToggleBtn:not(.no-fees) { /* Apply when it does NOT have the 'no-fees' class */
    background-color: var(--heading-color); /* Solid background when showing fees */
    color: var(--container-bg); /* Text color when showing fees */
}

/* Style for the toggle buttons when NOT showing fees */
#rrToggleBtn.no-fees, #plFeeToggleBtn.no-fees { /* Apply when it HAS the 'no-fees' class */
    background-color: transparent; /* Transparent background when not showing fees */
    color: var(--heading-color); /* Text color when not showing fees */
    border-color: var(--heading-color); /* Keep the border */
}


/* Style for the summary sections within the P/L output */
.output-section .summary-section {
    margin-bottom: 20px; /* Space below each summary */
    padding-bottom: 15px; /* Space below content within summary */
    border-bottom: 1px solid var(--section-border); /* Separator line */
}

.output-section .summary-section h3 {
    font-size: 1.1em;
    color: var(--label-color); /* Muted color for sub-headings */
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: none; /* Remove border from h2 rule */
    padding-bottom: 0; /* Remove padding from h2 rule */
}

/* Style for the P/L Recap header (the new h3) */
.output-section h3:last-of-type { /* Target the last h3 in output-section */
     font-size: 1.1em; /* Keep consistent size with other h3 */
     color: var(--label-color); /* Keep consistent color */
     margin-top: 20px; /* Add space above */
     margin-bottom: 10px; /* Space below the header */
     border-top-style: double; /* Double border style */
     border-top-width: 3px; /* Increased width */
     border-top-color: var(--section-border); /* Use existing color */
     padding-top: 15px; /* Add padding above the border */
     border-bottom: none; /* Ensure no bottom border */
     padding-bottom: 0; /* Ensure no padding below */
}


.output-section p {
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--output-border-bottom);
    display: flex;
    justify-content: space-between; /* Default alignment for paragraphs */
    align-items: center;
    transition: border-bottom-color 0.5s ease;
}

.output-section p:last-of-type {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}

/* Style for the paragraph with the rr-paragraph class */
.output-section p.rr-paragraph {
    border-top: 3px double var(--section-border); /* Double border */
    padding-top: 15px; /* Space above the text */
    margin-top: 20px; /* Space above the border - Adjusted from 15px to 20px */
    margin-bottom: 12px; /* Keep consistent margin below */
    padding-bottom: 6px; /* Keep consistent padding below */
    border-bottom: 1px dotted var(--output-border-bottom); /* Keep the dotted line below */
}


/* Style for the final Profit/Loss line */
.output-section p.final-pl {
    font-size: 1.3em; /* Larger font size */
    font-weight: 700; /* Bold */
    /* Removed text-align: right; */
    margin-top: 12px; /* Reduced margin-top after the new h3 */
    border-top: none; /* Remove the top border that was here */
    padding-top: 0; /* Remove the padding-top that was here */
    border-bottom: none; /* Ensure no bottom border */
    /* Removed justify-content: flex-end; */ /* Use default space-between */
    /* Removed gap: 20px; */ /* Use default spacing */
}

/* Style for the Profit/Loss value span */
.output-section p.final-pl span {
    font-weight: 700; /* Make the value bold too */
    /* Color will be set by JS based on positive/negative */
}

/* Make the paragraph containing the Net Profit/Loss label and value bold */
/* Using :has() to select the parent p element */
p:has(#netProfitLossOutput) {
    font-weight: 700;
}


.error { /* Removed .output-section prefix */
    color: var(--error-text-color); /* Use the brighter error text color */
    font-weight: 700;
    text-align: center;
    margin-top: 15px; /* Added a small margin top to separate from button */
    border: 1px solid var(--error-text-color); /* Add a border matching the text color */
    padding: 12px;
    background-color: var(--error-bg); /* Use the darker error background */
    border-radius: 6px;
    display: block; /* Ensure it takes full width */
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding and border in element's total width */
    margin-bottom: 0; /* Remove any default paragraph margin-bottom */
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}


.output-section p span {
    font-weight: normal; /* Ensure other spans are not bold by default */
    color: var(--text-color);
    float: none;
    text-align: right;
    margin-left: 15px;
    transition: color 0.5s ease;
}


.hidden {
    display: none;
}

/* --- Theme Toggle Button Styling --- */
.theme-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.6em;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    transition: transform 0.2s ease;
    outline: none; /* Remove default outline */
}

.theme-toggle:focus {
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
     border-radius: 4px; /* Match button border-radius */
}


.theme-toggle:hover {
    transform: scale(1.1);
}

/* --- Footer Styling --- */
footer {
    margin-top: 10px; /* Further reduced space above the footer */
    text-align: center; /* Center the text */
    font-size: 0.9em; /* Smaller font size */
    color: var(--label-color); /* Use label color for a softer look */
    transition: color 0.5s ease;
}

footer p {
    margin: 0; /* Remove default paragraph margin */
    padding: 0; /* Remove default paragraph padding */
    border: none; /* Remove any inherited borders */
}

/* Style for the superscript "Optional" text */
label sup {
    font-size: 0.6em; /* Make the font size smaller relative to the parent */
    vertical-align: super; /* Ensure it's superscript */
    margin-left: 2px; /* Add a tiny bit of space after TP */
}

/* Styling for the abbreviations info section */
.abbreviations-info {
    margin-top: 15px; /* Space above the section */
    padding-top: 15px; /* Padding above the content */
    border-top: 1px solid var(--section-border); /* Separator line */
    font-size: 0.9em; /* Slightly smaller font size */
    color: var(--label-color); /* Muted color */
    transition: border-top-color 0.5s ease, color 0.5s ease;
}

/* Style for the toggle button within the abbreviations section */
.abbreviations-info .toggle-button {
    display: block; /* Make it a block element */
    width: 100%; /* Full width */
    text-align: left; /* Align text to the left */
    background: none; /* No background */
    border: none; /* No border */
    color: var(--heading-color); /* Use accent color for the button text */
    font-size: 1em; /* Match parent font size */
    font-weight: 700; /* Make it bold */
    cursor: pointer;
    padding: 0; /* Remove default padding */
    margin-bottom: 10px; /* Space below the button */
    transition: color 0.3s ease;
    outline: none; /* Remove default outline */
}

.abbreviations-info .toggle-button:focus {
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
     border-radius: 4px; /* Match button border-radius */
}


.abbreviations-info .toggle-button:hover {
    color: var(--accent-color); /* Slightly different accent on hover */
    text-decoration: underline; /* Underline on hover */
}

/* Style for the content that will be collapsed */
#abbreviationsContent {
    overflow: hidden; /* Hide overflow when collapsed */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
    max-height: 0; /* Start collapsed */
    opacity: 0; /* Start invisible */
}

/* Style when the content is expanded */
#abbreviationsContent.expanded {
    max-height: 1000px; /* Sufficient height to show content (adjust if needed) */
    opacity: 1; /* Make visible */
}


.abbreviations-info h3 {
     font-size: 1em; /* Keep consistent size with toggle button */
     color: var(--label-color); /* Muted color for the heading inside */
     margin-top: 0; /* Remove top margin */
     margin-bottom: 10px; /* Space below the heading */
     border-bottom: none; /* Remove border */
     padding-bottom: 0; /* Remove padding */
}


.abbreviations-info p {
    margin: 5px 0; /* Reduced margin between paragraphs */
    padding: 0; /* Remove default paragraph padding */
    border: none; /* Remove any inherited borders */
    display: block; /* Ensure paragraphs stack */
    justify-content: flex-start; /* Align text to the left */
}

.abbreviations-info p strong {
    margin-right: 5px; /* Space after the abbreviation */
}


/* --- Responsive Layout --- */

/* Apply flex behavior to the active calculator section */
.calculator-section.active {
    display: flex; /* Make the active section a flex container */
    flex-direction: column; /* Stack columns vertically by default (mobile) */
    gap: 15px; /* Gap between input and output columns */
}


/* Default (Mobile/Stacked Layout) - Handled by the .calculator-section.active flex-direction: column */
.main-layout {
    /* main-layout is no longer the flex container for columns */
    width: 100%; /* Ensure it takes full width */
}

.input-column, .output-column {
    width: 100%; /* Full width on mobile */
    display: flex; /* Ensure columns are flex containers internally */
    flex-direction: column; /* Stack contents within columns */
    gap: 15px; /* Gap between sections within columns */
}


/* Desktop Layout */
@media (min-width: 768px) {
    /* Apply flex-direction: row to the active calculator section on desktop */
    .calculator-section.active {
        flex-direction: row; /* Arrange columns side-by-side */
        gap: 30px; /* Slightly reduced gap on desktop */
    }

    .input-column {
        flex: 3; /* Input column takes 3 parts of the available space */
    }

    .output-column {
        flex: 2; /* Output column takes 2 parts of the available space */
    }

     button#calculateBtn,
     button#calculatePLBtn { /* Apply to calculate buttons */
         /* Removed margin-top on desktop as well */
     }

     button#sellAllLotsBtn { /* Specific style for Sell All Lots button */
         margin-top: 0; /* Remove top margin */
         margin-bottom: 0; /* Remove bottom margin */
     }
}

/* --- Plan Management Section Styling --- */
.plan-management {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items in the center */
    gap: 10px; /* Add space between the items */
    margin-top: 20px; /* Add some space above the plan management section */
    padding: 18px; /* Match padding of input/output sections */
    border: 1px solid var(--section-border); /* Add a border */
    border-radius: 10px; /* Match section border-radius */
    background-color: var(--section-bg); /* Use section background color */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.plan-management button {
    /* Ensure buttons have consistent size and padding */
    padding: 8px 12px; /* Adjust padding as needed */
    font-size: 1em; /* Adjust font size as needed */
    display: flex; /* Use flex to center icon and text */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    gap: 5px; /* Space between icon and text if text is added */
    border: none; /* Remove default button border */
    border-radius: 6px; /* Match other button border-radius */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    outline: none; /* Remove default outline */
}

.plan-management button:focus {
    outline: 2px solid var(--focus-outline-color); /* Add custom outline */
    outline-offset: 2px; /* Space between element and outline */
}


/* Apply primary theme to the Save Plan button */
.plan-management #savePlanBtn {
    background-color: var(--button-primary-bg);
    color: white; /* White text for contrast */
}

.plan-management #savePlanBtn:hover:not(:disabled) {
    background-color: var(--button-primary-hover-bg);
}

/* Apply danger theme to the Delete Plan button */
.plan-management #deletePlanBtn {
    background-color: var(--button-danger-bg);
    color: white; /* White text for contrast */
}

.plan-management #deletePlanBtn:hover:not(:disabled) {
    background-color: var(--button-danger-hover-bg);
}


.plan-management button svg {
    /* Style for the SVG icons within the buttons */
    width: 1.2em; /* Adjust size as needed */
    height: 1.2em; /* Adjust size as needed */
    fill: currentColor; /* Use the button's text color for the icon */
}

.plan-management select {
    /* Allow the select dropdown to grow and take available space */
    flex-grow: 1;
    /* Inherit other select styles from general select rules */
    width: auto; /* Allow flex-grow to control width */
    padding: 14px 12px; /* Match padding of other selects */
    margin-bottom: 0; /* Remove default margin */
    border: 1px solid var(--input-border); /* Match input border */
    border-radius: 6px; /* Match input border-radius */
    font-size: 1em; /* Match input font size */
    background-color: var(--container-bg); /* Match input background */
    color: var(--text-color); /* Match input text color */
    outline: none; /* Remove default outline */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.5s ease, color 0.5s ease;
}

.plan-management select:focus {
     border-color: var(--input-focus-border);
     box-shadow: 0 0 8px var(--input-focus-shadow);
     outline: 2px solid var(--focus-outline-color); /* Add custom outline */
     outline-offset: 2px; /* Space between element and outline */
}

/* Style for select dropdown arrow color in dark mode within plan management */
body.dark-mode .plan-management select {
    filter: invert(1) grayscale(1) brightness(0.8);
}

/* Style for disabled buttons within plan management */
.plan-management button:disabled {
    background-color: var(--button-disabled-bg);
    cursor: not-allowed;
    opacity: 0.7; /* Slightly reduce opacity when disabled */
}


/* Adjustments for smaller screens if needed */
@media (max-width: 480px) {
    .plan-management {
        flex-direction: column; /* Stack items vertically on very small screens */
        align-items: stretch; /* Stretch items to fill the container width */
    }

    .plan-management button,
    .plan-management select {
        width: 100%; /* Make items take full width when stacked */
    }
}