* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    background: #f6f8f7;
    color: #24302c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 1.25rem 0 0.75rem; line-height: 1.25; }
p { margin: 0 0 1rem; }
a { color: #176b52; text-decoration: none; }
a:hover { color: #0e513d; text-decoration: underline; }
:focus-visible { outline: 3px solid #77b9a5; outline-offset: 2px; }

.container, main.container {
    width: min(100% - 2rem, 1120px);
    margin-inline: auto;
}

.container-fluid { width: 100%; padding-inline: 1rem; }
main { padding-block: 1rem 2rem; }

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    min-height: 3.75rem;
    background: #fff;
    border-bottom: 1px solid #d9e2de;
    box-shadow: 0 1px 3px rgb(22 48 39 / 8%);
}

nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0; padding: 0; list-style: none; }
nav li { margin: 0; }
nav a { display: inline-block; padding: 0.4rem 0; }
nav a.contrast { color: #154c3c; }
nav form { margin: 0; }
nav button { font: inherit; cursor: pointer; }

form { margin: 0 0 1rem; }
label { display: block; margin-bottom: 0.75rem; font-weight: 600; }
input, select, textarea, button {
    max-width: 100%;
    border-radius: 0.4rem;
    font: inherit;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    margin-top: 0.3rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #afc1ba;
    background: #fff;
    color: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { margin-right: 0.35rem; accent-color: #2a7f62; }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: 0.6; }
input:focus, select:focus, textarea:focus { border-color: #2a7f62; outline: 3px solid rgb(42 127 98 / 20%); }
input:invalid:not(:placeholder-shown) { border-color: #c62828; }

button, input[type="submit"], input[type="button"], [role="button"] {
    display: inline-block;
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid #2a7f62;
    border-radius: 0.4rem;
    background: #2a7f62;
    color: #fff;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, [role="button"]:hover { background: #236b51; border-color: #236b51; color: #fff; text-decoration: none; }
button.contrast, .contrast[role="button"] { background: #154c3c; border-color: #154c3c; }
button.secondary, .secondary[role="button"] { background: #68756f; border-color: #68756f; }
button.outline, .outline[role="button"], a.outline { background: transparent; border-color: #2a7f62; color: #176b52; }
button.outline:hover, .outline[role="button"]:hover, a.outline:hover { background: #e7f3ee; color: #0e513d; }
button.small, a[role="button"].small, a.small { min-height: auto; padding: 0.25rem 0.55rem; font-size: 0.82rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem 1rem; align-items: start; }
.grid > * { min-width: 0; }

.table-responsive { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 0.65rem 0.75rem; border: 1px solid #d9e2de; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { background: #edf4f1; color: #24463a; font-weight: 700; }
.striped tbody tr:nth-child(even) { background: #f7faf8; }

article { margin: 1rem 0; padding: 1rem; background: #fff; border: 1px solid #d9e2de; border-radius: 0.5rem; box-shadow: 0 1px 2px rgb(22 48 39 / 6%); }
details { margin: 1rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #d9e2de; border-radius: 0.5rem; }
summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 0.75rem; }

dialog { width: min(calc(100% - 2rem), 44rem); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 0.5rem; background: #fff; color: inherit; overflow: auto; box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%); }
dialog[open] { display: block; }
dialog::backdrop { background: rgb(18 33 27 / 45%); }
dialog article { margin: 0; border: 0; box-shadow: none; }

.flash { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 0.5rem; }
.flash-success { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #4caf50; }
.flash-error { background: #fce4ec; color: #c62828; border-left: 4px solid #ef5350; }
.flash-info { background: #e3f2fd; color: #1565c0; border-left: 4px solid #42a5f5; }
.flash-warning, .warning { background: #fff3e0; color: #a64b00; border-left: 4px solid #f39c12; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 1rem; background: #f1f3f2; color: #596660; font-size: 0.8rem; font-weight: 600; }
.badge-income, .income-text { color: #2e7d32; }
.badge-income { background: #e8f5e9; }
.badge-expense, .expense-text { color: #c62828; }
.badge-expense { background: #fce4ec; }
.badge-neutral { background: #f1f3f2; color: #596660; }
.badge-warn, .warn-text { color: #a64b00; }
.badge-warn { background: #fff3e0; }
.hint, .empty-hint { color: #68756f; font-size: 0.9rem; }
.action-cell { white-space: nowrap; }
.action-cell a, .action-cell button, .action-cell form { display: inline-block; }
.action-cell form { margin: 0; }
.del-btn { color: #c62828 !important; border-color: #c62828 !important; }

@media (max-width: 768px) {
    .container, main.container { width: min(100% - 1rem, 1120px); }
    nav { align-items: flex-start; flex-direction: column; padding-block: 0.65rem; }
    nav ul { width: 100%; }
    .grid { grid-template-columns: 1fr; }
    th, td { padding: 0.5rem; }
    dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
}