/* --- Base & Variables --- */
:root {
    --font-family: 'Poppins', sans-serif;

    /* Light Theme */
    --bg-light: #f8f9fa;
    --card-bg-light: #ffffff;
    --text-light: #212529;
    --text-muted-light: #6c757d;
    --border-light: #dee2e6;
    --input-bg-light: #ffffff;
    --input-border-light: #ced4da;
    --primary-light: #0056b3; /* Darker blue */
    --primary-hover-light: #004085;
    --accent-light: #e9ecef;
    --paid-bg-light: #d4edda;
    --paid-text-light: #155724;
    --unpaid-bg-light: #f8d7da;
    --unpaid-text-light: #721c24;
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* Dark Theme */
    --bg-dark: #121212; /* Very dark grey */
    --card-bg-dark: #1e1e1e; /* Slightly lighter grey */
    --text-dark: #e0e0e0;
    --text-muted-dark: #adb5bd;
    --border-dark: #495057; /* Darker border */
    --input-bg-dark: #2a2a2a;
    --input-border-dark: #495057;
    --primary-dark: #4dabf7; /* Lighter blue */
    --primary-hover-dark: #74c0fc;
    --accent-dark: #343a40;
    --paid-bg-dark: #1a4a2a;
    --paid-text-dark: #a3e9a4;
    --unpaid-bg-dark: #5a2d2f;
    --unpaid-text-dark: #f5c6cb;
    --shadow-dark: 0 1px 3px rgba(255, 255, 255, 0.05);
}

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

body {
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 1rem;
}

/* --- Theme Application --- */
body {
    --bg-color: var(--bg-light);
    --card-bg: var(--card-bg-light);
    --text-color: var(--text-light);
    --text-muted: var(--text-muted-light);
    --border-color: var(--border-light);
    --input-bg: var(--input-bg-light);
    --input-border: var(--input-border-light);
    --primary-color: var(--primary-light);
    --primary-hover: var(--primary-hover-light);
    --accent-color: var(--accent-light);
    --paid-bg: var(--paid-bg-light);
    --paid-text: var(--paid-text-light);
    --unpaid-bg: var(--unpaid-bg-light);
    --unpaid-text: var(--unpaid-text-light);
    --shadow: var(--shadow-light);
}

body.dark-theme {
    --bg-color: var(--bg-dark);
    --card-bg: var(--card-bg-dark);
    --text-color: var(--text-dark);
    --text-muted: var(--text-muted-dark);
    --border-color: var(--border-dark);
    --input-bg: var(--input-bg-dark);
    --input-border: var(--input-border-dark);
    --primary-color: var(--primary-dark);
    --primary-hover: var(--primary-hover-dark);
    --accent-color: var(--accent-dark);
    --paid-bg: var(--paid-bg-dark);
    --paid-text: var(--paid-text-dark);
    --unpaid-bg: var(--unpaid-bg-dark);
    --unpaid-text: var(--unpaid-text-dark);
    --shadow: var(--shadow-dark);
}

/* --- Layout & Container --- */
.container {
    max-width: 900px; /* Wider for table */
    margin: 1.5rem auto;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

header h1 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.75rem;
    margin: 0;
}

.controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* --- Sections --- */
section {
    margin-bottom: 2rem;
}

section:last-child {
    margin-bottom: 0;
}

h2, h3 {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 1rem;
}

/* --- Settings Section --- */
.settings-section {
    background-color: var(--accent-color);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.setting-item label {
    font-weight: 500;
    margin-right: 0.5rem;
    font-size: 0.95rem;
}

#default-rate {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    width: 120px; /* Fixed width for rate */
}

/* --- Month Navigation --- */
.month-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

#current-month-display {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    margin: 0;
}

.month-navigation button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1.5rem; /* Larger arrows */
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.month-navigation button:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

/* --- Table --- */
.table-container {
    overflow-x: auto; /* Essential for responsiveness */
}

#month-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem; /* Slightly smaller font for table */
}

#month-table th,
#month-table td {
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.5rem; /* Adjust padding */
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; /* Prevent wrapping in cells */
}

#month-table th {
    background-color: var(--accent-color);
    font-weight: 500;
    color: var(--text-muted);
}

#month-table tbody tr:hover {
    background-color: rgba(128, 128, 128, 0.05); /* Subtle hover */
}

/* Table Inputs */
#month-table input[type="number"] {
    width: 65px; /* Compact input size */
    padding: 0.4rem;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    background-color: var(--input-bg);
    color: var(--text-color);
    text-align: center;
    font-size: 0.9rem;
    -moz-appearance: textfield; /* Hide spinners Firefox */
}
#month-table input[type="number"]::-webkit-outer-spin-button,
#month-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide spinners Chrome/Safari */
    margin: 0;
}

#month-table .date-cell {
    font-weight: 500;
}

#month-table .total-cell {
    font-weight: 500;
}

/* Paid Status Toggle */
.paid-toggle {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8rem;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid transparent; /* Placeholder for consistency */
    min-width: 60px; /* Ensure consistent width */
    text-align: center;
}

.paid-toggle.paid {
    background-color: var(--paid-bg);
    color: var(--paid-text);
    border-color: var(--paid-text);
}

.paid-toggle.unpaid {
    background-color: var(--unpaid-bg);
    color: var(--unpaid-text);
    border-color: var(--unpaid-text);
}

/* --- Summary Section --- */
.summary-section h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid */
    gap: 0.8rem;
    font-size: 0.95rem;
}
.summary-grid div span:first-child {
    font-weight: 500;
    color: var(--text-muted);
}
.summary-grid div span:last-child {
    font-weight: 600;
}

/* --- Footer --- */
footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
footer p {
    margin-bottom: 0.3rem;
}

/* --- Controls Styling --- */
#theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem; /* Adjust if using icons */
}
#theme-toggle:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

#language-select {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- Utility --- */
.info-message {
    text-align: center;
    margin-top: 1rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .container {
        margin: 1rem;
        padding: 1rem;
    }
    header h1 {
        font-size: 1.5rem;
    }
    #current-month-display {
        font-size: 1.2rem;
    }
    .month-navigation button {
        font-size: 1.2rem;
        padding: 0.1rem 0.6rem;
    }
    #month-table {
        font-size: 0.85rem;
    }
    #month-table input[type="number"] {
        width: 55px; /* Smaller inputs on mobile */
        font-size: 0.85rem;
    }
    #month-table th, #month-table td {
        padding: 0.5rem 0.3rem;
    }
    .summary-grid {
        grid-template-columns: 1fr; /* Stack summary items */
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
     header {
        flex-direction: column;
        align-items: flex-start;
    }
    .controls {
        margin-top: 0.5rem;
    }
     #month-table input[type="number"] {
        width: 50px;
    }
     .paid-toggle {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        min-width: 50px;
    }
}