/* General Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3 {
    font-weight: 500;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
}

label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9em;
}

small {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
}

hr {
    border: none;
    height: 1px;
    margin: 15px 0;
}

/* Sections */
.input-section, .results-section {
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Inputs & Buttons */
input[type="file"],
input[type="number"] {
    width: calc(100% - 24px); /* Adjust for padding */
    padding: 10px 12px;
    margin-top: 5px;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

/* Removed styles for radio/checkbox groups */


button {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 20px; /* Rounded like Robinhood */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Results Section Specifics */
#resultsSection {
    margin-top: 30px;
}

/* Removed styles for manual input area */


/* Style for sub-sections within results */
.sub-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2A2E30; /* Separator for dark theme */
    max-width: 700px; /* Limit width on large screens */
    margin-left: auto; /* Center the section */
    margin-right: auto;
}

.sub-section:last-child {
    border-bottom: none; /* No border for the last section */
    margin-bottom: 0;
    padding-bottom: 0;
}

.sub-section h3 {
    margin-bottom: 15px;
    color: #00C805; /* Green heading for sub-sections */
    font-size: 1.1em;
}


/* Apply flex layout to result paragraphs */
#incomeSummary p,
#estimatedIncomeRates p,
#portfolioOverview p:first-of-type { /* Target Total Purchase Cost line */
    margin: 12px 0;
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between; /* Keep space-between */
    align-items: baseline; /* Align text baselines */
    font-size: 0.95em;
    line-height: 1.4; /* Adjust line height */
}

/* Style for the label text part */
.label-text {
    flex-grow: 1; /* Allow label to take up space */
    margin-right: 15px; /* Space between label and value */
    color: #AAB0B6; /* Lighter grey for label text */
    font-weight: normal; /* Normal weight for label text */
}

/* Style for the value text part */
.value-text {
    font-weight: bold;
    text-align: right;
    flex-shrink: 0; /* Prevent value from shrinking */
    color: #FFFFFF; /* White for value text */
}

/* Removed specific styles for margin status/risk */
/* Removed styles for profit status */


#portfolioOverview p, /* General style for notes below chart */
#estimatedIncomeRates p:last-of-type { /* Target note in income rates */
    margin: 10px 0;
    font-size: 0.95em;
    /* Reset flex for the note paragraphs */
    display: block;
}
#portfolioOverview small {
     font-style: italic;
}
#portfolioChartContainer {
    max-width: 550px; /* Increased max-width */
    min-height: 400px; /* Added min-height for chart + legend */
    margin: 20px auto; /* Center chart, slightly more margin */
    padding: 15px; /* Slightly more padding */
    border-radius: 4px;
    /* background-color: #2A2E30; Removed placeholder background */
    color: #7A828A;
    display: flex; /* Use flex to help center canvas */
    flex-direction: column; /* Stack canvas and potential messages */
    justify-content: center;
    align-items: center;
}
#portfolioChart { /* Style the canvas itself */
    display: block;
    max-width: 100%;
    max-height: 350px; /* Limit canvas height within container */
    margin-bottom: 15px; /* Add space below chart for legend */
}


#transactions { /* Now within .sub-section */
    margin-top: 25px;
}

#transactionLog {
    padding: 15px;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 0.8em; /* Slightly smaller for monospace */
    line-height: 1.5;
}

/* --- Dark Theme --- */
body.dark-theme {
    background-color: #101213; /* Robinhood-like dark background */
    color: #E1E1E1; /* Light grey text */
}

.dark-theme h1,
.dark-theme h2,
.dark-theme h3 {
    color: #FFFFFF; /* White headings */
}

.dark-theme .input-section,
.dark-theme .results-section {
    background-color: #1C1F21; /* Slightly lighter dark section background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #2A2E30; /* Subtle border */
}

.dark-theme label {
    color: #AAB0B6; /* Lighter grey for labels */
}

.dark-theme small {
    color: #7A828A; /* Dimmer grey for small text */
}

.dark-theme input[type="file"],
.dark-theme input[type="number"] {
    background-color: #2A2E30; /* Dark input background */
    border: 1px solid #4A5054; /* Grey border */
    color: #E1E1E1; /* Light text in input */
}

.dark-theme input[type="file"]:focus,
.dark-theme input[type="number"]:focus {
    border-color: #00C805; /* Robinhood green on focus */
    outline: none;
}

/* Style radio/checkbox for dark theme if possible (browser dependent) */
.dark-theme input[type="checkbox"],
.dark-theme input[type="radio"] {
    accent-color: #00C805; /* Use accent color for check/radio */
}

.dark-theme button {
    background-color: #00C805; /* Robinhood green */
    color: #101213; /* Dark text on green button */
}

.dark-theme button:hover {
    background-color: #00A304; /* Slightly darker green on hover */
}

/* No change needed for sub-section border as it's already dark */

/* Dark theme adjustments for label/value */
.dark-theme .label-text {
     color: #AAB0B6;
}
.dark-theme .value-text {
     color: #FFFFFF;
}
/* Removed specific dark theme overrides for deleted sections */

.dark-theme hr { /* Keep hr styling if used elsewhere, though sub-section borders replace some */
    background-color: #2A2E30; /* Darker hr */
}

.dark-theme #transactionLog {
    background-color: #101213; /* Match body background */
    border: 1px solid #2A2E30;
    color: #AAB0B6; /* Lighter grey for log text */
}

/* Footer Styles */
.footer-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #2A2E30;
    text-align: center; /* Center align the footer content */
    font-size: 0.9em;
    color: #AAB0B6;
}
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 10px auto; /* Center the list block */
    max-width: 600px; /* Prevent excessive width */
    display: inline-block; /* Allow text-align on parent to center */
    text-align: left; /* Keep text inside aligned left */
}
.footer-section li {
    margin-bottom: 8px;
    display: flex; /* Use flexbox for alignment */
    align-items: baseline; /* Align text baselines */
}
.footer-section strong {
    color: #E1E1E1;
    /* Removed fixed width */
    flex-shrink: 0; /* Prevent label from shrinking */
    text-align: right;
    margin-right: 10px;
}
.crypto-address {
    flex-grow: 1; /* Allow address to take remaining space */
    flex-shrink: 1; /* Allow address to shrink if needed */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis (...) for overflow */
    font-family: monospace;
    font-size: 0.95em;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
}
.crypto-address:hover {
    background-color: #4A5054;
}