:root {
--purple-light: #f5f0ff;
--purple-main: #820ad1;
--gray-dark: #333333;
--gray-medium: #666666;
--gray-light: #ebebeb;
--gray-very-light: #f7f7f7;
--green-paid: #00b900;
--red-alert: #e53e3e;
--card-bg: #ffffff;
--border-color: #e2e2e2;
--body-bg: var(--gray-very-light);
--text-color: var(--gray-dark);

font-family: 'Inter', sans-serif;
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;

}

:root.dark-mode {
--purple-light: #2c0847;
--purple-main: #9c51e3;
--gray-dark: #e0e0e0;
--gray-medium: #b0b0b0;
--gray-light: #444;
--gray-very-light: #121212;
--green-paid: #27c24c;
--red-alert: #ff6b6b;
--card-bg: #1e1e1e;
--border-color: #333;
--body-bg: var(--gray-very-light);
--text-color: var(--gray-dark);
}

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

body {
background: var(--body-bg);
color: var(--text-color);
padding: 20px;
line-height: 1.6;
}

.container {
max-width: 100vw;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}

/* Typography & General Styles */
h1 {
font-size: 2em;
font-weight: 800;
color: var(--purple-main);
}

h2 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 16px;
}

h3 {
font-size: 1rem;
font-weight: 500;
color: var(--gray-medium);
margin: 0;
}

.muted {
color: var(--gray-medium);
font-size: 14px;
}

/* Layout Components */
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.header-actions {
display: flex;
align-items: center;
gap: 10px;
}

.btn-icon {
background: transparent;
border: none;
cursor: pointer;
font-size: 24px;
padding: 8px;
transition: transform 0.2s;
}

.main-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 5px;
margin-bottom: 5px;
}

.card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.summary-card {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

.balance-container {
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 24px;
margin-top: 24px;
}

.balance-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.balance-input {
width: 140px;
text-align: center;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--gray-very-light);
color: var(--text-color);
font-size: 18px;
font-weight: 600;
}

.balance-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.balance-value {
font-size: 28px;
font-weight: 700;
color: var(--purple-main);
}

.form-grid {
display: flex;
flex-direction: column;
gap: 16px;
}

.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}

label {
font-size: 14px;
color: var(--gray-medium);
margin-bottom: 0;
}

input, select {
padding: 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
font-size: 16px;
background: var(--gray-very-light);
color: var(--text-color);
}

input:focus, select:focus {
outline: 2px solid var(--purple-main);
border-color: transparent;
}

.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
}

/* Buttons */
.btn {
padding: 12px 20px;
border-radius: 8px;
border: 0;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}

.btn.primary {
background: var(--purple-main);
color: #fff;
}

.btn.primary:hover {
background: #7308bd;
}

.btn.ghost {
background: transparent;
color: var(--text-color);
border: 1px solid var(--border-color);
}

.btn.ghost:hover {
background: var(--gray-light);
}

.btn.danger-ghost {
background: transparent;
color: var(--red-alert);
border: 1px solid var(--red-alert);
}

.btn.danger-ghost:hover {
background: #ffe3e3;
}

/* Tables */
.tables-section {
padding: 24px;
}

.gasto-tables-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 24px;
}

.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.table-actions {
display: flex;
gap: 12px;
}

table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
background: transparent;
}

thead th {
background: var(--purple-main);
color: #fff;
padding: 14px;
text-align: left;
font-weight: 600;
}

tbody td {
padding: 14px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}

.actions-cell {
white-space: nowrap;
}

.actions-cell .btn {
font-size: 13px;
padding: 8px 12px;
}

.status-check {
width: 22px;
height: 22px;
cursor: pointer;
}

/* Edição Inline */
.edit-mode {
width: 100%;
padding: 6px;
font-size: 14px;
box-sizing: border-box;
}

.edit-mode-select {
width: 100%;
font-size: 14px;
padding: 6px;
}

/* Footer */
footer {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px;
text-align: right;
}

/* Responsive Design */
@media (max-width: 900px) {
.main-grid {
grid-template-columns: 1fr;
}
.gasto-tables-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 500px) {
.balance-container {
flex-direction: column;
}
.table-actions {
flex-direction: column;
gap: 8px;
}
}