:root {
    --pico-font-size: 100%;
    --sovit-highlight: #fde2e1;
    --sovit-highlight-text: #8a1c14;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sovit-highlight: #4a1f1c;
        --sovit-highlight-text: #ffd7d3;
    }
}

.app-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
}

.app-title small { display: block; color: var(--pico-muted-color); }
.app-user { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; }
.app-header nav { flex-basis: 100%; }

form.inline { display: inline; margin: 0; }
button.link {
    padding: 0; border: 0; background: none; color: var(--pico-primary);
    width: auto; margin: 0; text-decoration: underline; cursor: pointer;
}

.narrow { max-width: 28rem; margin-inline: auto; }

.message { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius); }
.message.success { background: var(--pico-ins-color); color: #fff; }
.message.error { background: var(--pico-del-color); color: #fff; }

/* Calendar: wide table scrolls horizontally on small screens */
.calendar-scroll { overflow-x: auto; }
table.calendar { font-size: 0.8rem; white-space: nowrap; }
table.calendar th, table.calendar td { padding: 0.25rem; text-align: center; }
table.calendar th[scope="row"] { text-align: left; position: sticky; left: 0; background: var(--pico-background-color); }
table.calendar td[data-highlighted], table.calendar th.highlighted {
    background: var(--sovit-highlight); color: var(--sovit-highlight-text);
}
table.calendar select { padding: 0.1rem 0.2rem; margin: 0; min-width: 3.2rem; font-size: 0.8rem; height: auto; }
table.calendar tr.edited th[scope="row"] { font-weight: bold; }

.calendar-nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.calendar-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.calendar-jump select, .calendar-jump button { width: auto; margin: 0; }

table.calendar select:disabled { opacity: 0.45; border-style: dashed; }

table.balance th, table.balance td { text-align: center; white-space: nowrap; }

dl.legend { columns: 16rem; column-gap: 2rem; }
dl.legend div { display: flex; gap: 0.75rem; break-inside: avoid; margin-bottom: 0.15rem; }
dl.legend dt { font-weight: bold; min-width: 2rem; margin: 0; }
dl.legend dd { margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-block: 1rem; }
.actions form { margin: 0; }
.actions button, .actions [role="button"] { width: auto; margin: 0; }
.actions.row-actions { margin: 0; gap: 0.25rem 1rem; }
button.link.danger { color: var(--pico-del-color); }
fieldset > legend { font-weight: 600; font-size: 1.15rem; margin-bottom: 0.5rem; }
input[readonly] { background: var(--pico-muted-border-color); cursor: not-allowed; }