/* Basic Reset & Root Variables */
:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --header-bg: #3a5a78;
    --header-text: #fff;
    --footer-bg: #333;
    --footer-text: #ccc;
    --border-color: #ccc;
    --input-bg: #fff;
    --input-border: #ccc;
    --button-bg: #5c85ad;
    --button-text: #fff;
    --button-hover-bg: #4a6e8f;
    --table-header-bg: #e0e0e0;
    --table-row-odd-bg: #fff;
    --table-row-even-bg: #f9f9f9;
    --danger-bg: #f44336;
    --danger-text: #fff;
    --danger-hover-bg: #d32f2f;
    --section-divider-color: #ddd;
}

body.dark-mode {
    --bg-color: #333;
    --text-color: #f4f4f4;
    --header-bg: #222;
    --header-text: #eee;
    --footer-bg: #1a1a1a;
    --footer-text: #aaa;
    --border-color: #555;
    --input-bg: #444;
    --input-border: #666;
    --button-bg: #446e9b;
    --button-text: #eee;
    --button-hover-bg: #36597a;
    --table-header-bg: #555;
    --table-row-odd-bg: #444;
    --table-row-even-bg: #4a4a4a;
    --danger-bg: #c62828;
    --danger-text: #eee;
    --danger-hover-bg: #b71c1c;
    --section-divider-color: #666;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 1.5rem;
}

#darkModeToggle {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}
#darkModeToggle:hover {
     background-color: var(--button-hover-bg);
}


main {
    padding: 2rem;
    max-width: 1000px;
    margin: 1rem auto;
    background-color: var(--input-bg); /* Give main distinct bg in dark mode */
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-color); /* Sections distinct from main */
}

h2, h3 {
    margin-bottom: 1rem;
    color: var(--header-bg); /* Use header color for titles */
}
body.dark-mode h2, body.dark-mode h3 {
     color: var(--header-text); /* Adjust for dark mode */
}


.form-row {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center; /* Align items vertically */
    gap: 0.5rem; /* Space between elements */
}

.form-row label {
    flex-basis: 120px; /* Fixed width for labels */
    font-weight: bold;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row select {
    flex-grow: 1; /* Allow inputs to take remaining space */
    padding: 0.6rem;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-color);
    border-radius: 4px;
    min-width: 150px; /* Minimum width */
}

button {
    padding: 0.7rem 1.5rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 0.5rem; /* Add some margin */
}

button:hover {
    background-color: var(--button-hover-bg);
}

button[type="submit"] {
    background-color: #4CAF50; /* Green for primary actions */
}
button[type="submit"]:hover {
    background-color: #45a049;
}

button.remove-item-btn,
button.delete-btn {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}
button.remove-item-btn:hover,
button.delete-btn:hover {
     background-color: var(--danger-hover-bg);
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 1.5rem 0;
}
hr.section-divider {
    background-color: var(--section-divider-color);
     margin: 2.5rem 0;
}


/* Invoice Specific Styles */
#invoiceItems .invoice-item-row {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 10px; /* Spacing between item inputs */
}
#invoiceItems .invoice-item-row:last-child {
    border-bottom: none;
}
#invoiceItems .item-desc { flex-basis: 40%; }
#invoiceItems .item-qty { flex-basis: 10%; min-width: 60px;}
#invoiceItems .item-price { flex-basis: 15%; min-width: 80px; }
#invoiceItems .item-total { flex-basis: 15%; font-weight: bold; text-align: right; min-width: 80px;}
#invoiceItems .remove-item-btn { flex-basis: auto; } /* Let button size itself */

.invoice-total {
    text-align: right;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.preview-area {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px dashed var(--border-color);
    background-color: var(--bg-color);
    border-radius: 5px;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

thead th {
    background-color: var(--table-header-bg);
    font-weight: bold;
}

tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-bg);
}

tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

tfoot td {
    font-weight: bold;
    background-color: var(--table-header-bg); /* Match header */
}
tfoot #totalIncome, tfoot #totalExpenditure {
    text-align: right; /* Align totals to the right */
}

/* Summary Section */
#summary p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
#summary strong {
    display: inline-block;
    min-width: 100px; /* Align values */
    text-align: right;
}


footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: 0.9rem;
}

/* Utility class */
.text-danger {
    color: var(--danger-bg);
}
body.dark-mode .text-danger {
    color: #ff7f7f; /* Lighter red for dark mode */
}