h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- App shell ---- */

:root {
    --bc-bg: #f4f5f7;
    --bc-surface: #ffffff;
    --bc-text: #1f2328;
    --bc-muted: #59636e;
    --bc-border: #d0d7de;
    --bc-accent: #1f6feb;
    --bc-danger: #b42318;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* Header on top, the page fills the rest of the window. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bc-bg);
    color: var(--bc-text);
}

.app-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--bc-surface);
    border-bottom: 1px solid var(--bc-border);
}

.app-name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.app-user {
    color: var(--bc-muted);
}

.app-logout {
    margin: 0;
}

.app-main {
    padding: 1rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.auth-card button,
.app-logout button {
    font: inherit;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
    background: var(--bc-surface);
    cursor: pointer;
}

/* ---- Login ---- */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 22rem;
    padding: 2rem;
    background: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 10px;
}

.auth-card h1 {
    margin: 0 0 1.5rem;
    font-size: 1.4rem;
    text-align: center;
}

.auth-card form {
    display: grid;
    gap: 0.4rem;
}

.auth-card label {
    font-size: 0.9rem;
    color: var(--bc-muted);
    margin-top: 0.5rem;
}

.auth-card input {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
}

.auth-card button {
    margin-top: 1rem;
    background: var(--bc-accent);
    border-color: var(--bc-accent);
    color: #fff;
}

.auth-error {
    margin: 0.5rem 0 0;
    color: var(--bc-danger);
    font-size: 0.9rem;
}

.app-nav {
    display: flex;
    gap: 0.25rem;
    margin-right: auto;
}

.app-nav a {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--bc-muted);
    text-decoration: none;
}

.app-nav a.active {
    background: var(--bc-bg);
    color: var(--bc-text);
    font-weight: 600;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-header h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* ---- Accounts ---- */

.accounts-table {
    max-width: 52rem;
}

.accounts-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.accounts-table .actions {
    text-align: right;
    white-space: nowrap;
}

.accounts-table tr.archived td {
    color: var(--bc-muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Calendar ---- */

:root {
    --cal-positive-bg: #eaf6ec;
    --cal-negative-bg: #fdecea;
    --cal-income: #1a7f37;
    --cal-expense: #b42318;
}

.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.cal-month-picker {
    max-width: 11rem;
}

.cal-month-picker input {
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
}

.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* Weeks share the height left under the toolbar; a busy day still grows. */
    flex: 1 1 auto;
    grid-template-rows: auto repeat(var(--cal-weeks, 6), minmax(7.5rem, 1fr));
    gap: 1px;
    background: var(--bc-border);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    overflow: hidden;
}

.cal-weekday {
    background: var(--bc-surface);
    padding: 0.35rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bc-muted);
}

.cal-day {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cal-day.positive {
    background: var(--cal-positive-bg);
}

.cal-day.negative {
    background: var(--cal-negative-bg);
}

.cal-day.outside {
    opacity: 0.55;
}

.cal-day.today {
    outline: 2px solid var(--bc-accent);
    outline-offset: -2px;
}

.cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.3rem 0 0.4rem;
}

.cal-day-num {
    font-size: 0.85rem;
    font-weight: 600;
}

.cal-day.today .cal-day-num {
    color: var(--bc-accent);
}

.cal-add {
    border: none;
    background: transparent;
    color: var(--bc-muted);
    font-size: 1.1rem;
    line-height: 1;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
}

.cal-day:hover .cal-add,
.cal-add:focus-visible {
    opacity: 1;
}

.cal-add:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--bc-text);
}

.cal-entries {
    list-style: none;
    margin: 0;
    padding: 0.1rem 0.25rem;
    flex: 1;
}

.cal-entry {
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    color: var(--bc-text);
}

.cal-entry:hover {
    background: rgba(0, 0, 0, 0.06);
}

.cal-entry-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-entry-amount {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.cal-entry-amount.expense {
    color: var(--cal-expense);
}

.cal-entry-amount.income {
    color: var(--cal-income);
}

.cal-day-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.05);
}

.cal-day.negative .cal-day-balance {
    color: var(--cal-expense);
}

/* ---- Calendar layout and account filter ---- */

.cal-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
    flex: 1 1 auto;
}

.cal-side {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cal-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.side-card {
    background: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    padding: 0.75rem;
}

.side-card h2 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.side-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bc-muted);
}

.acct-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.acct-row:hover {
    background: var(--bc-bg);
}

.acct-row-all {
    font-weight: 600;
    border-bottom: 1px solid var(--bc-border);
    border-radius: 0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.45rem;
}

.acct-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-balance {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.acct-balance.negative {
    color: var(--cal-expense);
}

.acct-filter-note,
.acct-filter-empty {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--bc-muted);
}

@media (max-width: 900px) {
    .cal-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Frequency tab ---- */

.freq {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.freq-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 2.6rem;
}

.freq-num {
    flex: 0 0 5.5rem;
}

.freq-select {
    flex: 0 0 8rem;
}

.freq-date {
    flex: 0 0 10rem;
}

.freq-weekdays {
    padding-left: 2.6rem;
    gap: 0.25rem;
    min-height: 0;
    margin-bottom: 0.4rem;
}

.freq-day {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--bc-border);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
}

.freq-day.selected {
    background: var(--bc-accent);
    border-color: var(--bc-accent);
    color: #fff;
}

.freq-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.freq-day:has(input:disabled) {
    opacity: 0.5;
    cursor: default;
}

.freq-day:has(input:focus-visible) {
    outline: 2px solid var(--bc-accent);
    outline-offset: 2px;
}

.freq-heading {
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
}

/* ---- Transaction dialog ---- */

.txn-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.freq-label {
    margin: 0.75rem 0 0.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bc-muted);
}

@media (max-width: 480px) {
    .txn-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---- Edit scope ---- */

.scope-question {
    margin: 0 0 0.75rem;
}

.scope-choices {
    display: grid;
    gap: 0.5rem;
}

.scope-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--bc-muted);
}

/* ---- Approval ---- */

.cal-item {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.cal-item .cal-entry {
    flex: 1;
    min-width: 0;
}

.cal-approve {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    border: 1.5px solid var(--bc-border);
    border-radius: 50%;
    background: var(--bc-surface);
    color: #fff;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.cal-approve:hover,
.cal-approve:focus-visible {
    opacity: 1;
    border-color: var(--cal-income);
}

.cal-item.approved .cal-approve {
    background: var(--cal-income);
    border-color: var(--cal-income);
    opacity: 1;
}

.cal-item.approved .cal-entry-name,
.cal-item.approved .cal-entry-amount {
    opacity: 0.6;
}

.cal-entry-amount.transfer {
    color: var(--bc-accent);
}

/* ---- Categories ---- */

.categories-table {
    max-width: 36rem;
}

.categories-table .actions {
    text-align: right;
    white-space: nowrap;
}

.category-top .category-name {
    font-weight: 600;
}

.category-sub .category-name {
    padding-left: 2rem;
}

.category-option-sub {
    padding-left: 2rem !important;
}

/* ---- Search ---- */

.search-filters {
    background: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    padding: 0.5rem 1rem 1rem;
    max-width: 64rem;
}

.search-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 1rem;
    align-items: end;
}

.search-types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    padding-top: 0.75rem;
}

.search-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.search-summary {
    margin: 1rem 0 0.5rem;
    color: var(--bc-muted);
}

.search-summary .income,
.search-results .income {
    color: var(--cal-income);
}

.search-summary .expense,
.search-results .expense {
    color: var(--cal-expense);
}

.search-results .transfer {
    color: var(--bc-accent);
}

.search-results .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.search-results .search-approved {
    color: var(--cal-income);
    font-weight: 700;
}

.search-row-click {
    cursor: pointer;
}

/* ---- Day footer: the day's own total on the left, end-of-day balance on the right ---- */

.cal-day-net {
    font-weight: 500;
}

.cal-day-net.income {
    color: var(--cal-income);
}

.cal-day-net.expense {
    color: var(--cal-expense);
}

.cal-day-balance {
    margin-left: auto;
}

/* ---- Day selection and summary ---- */

.cal-day {
    cursor: pointer;
}

.cal-day.selected {
    outline: 3px solid var(--bc-accent);
    outline-offset: -3px;
}

.cal-day-num {
    border: none;
    background: transparent;
    padding: 0 0.2rem;
    border-radius: 4px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.cal-day-num:hover,
.cal-day-num:focus-visible {
    background: rgba(0, 0, 0, 0.08);
}

.day-summary h2::first-letter {
    text-transform: uppercase;
}

.day-summary-entries {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.day-summary-entries .cal-entry {
    font-size: 0.85rem;
}

.day-figures {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
}

.day-figures dt {
    color: var(--bc-muted);
}

.day-figures dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.day-figures .income {
    color: var(--cal-income);
}

.day-figures .expense {
    color: var(--cal-expense);
}

.day-figures .day-figures-total {
    border-top: 1px solid var(--bc-border);
    padding-top: 0.25rem;
    font-weight: 700;
    color: var(--bc-text);
}

.day-figures dd.day-figures-total.expense {
    color: var(--cal-expense);
}

/* ---- Monthly balance chart ---- */

.chart-range {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    color: var(--bc-muted);
}

.chart-range strong {
    font-variant-numeric: tabular-nums;
    color: var(--bc-text);
}

.chart-range strong.income {
    color: var(--cal-income);
}

.chart-range strong.expense {
    color: var(--cal-expense);
}

.chart {
    display: block;
    width: 100%;
    height: 7rem;
}

.chart-bar {
    cursor: pointer;
}

.chart-bar.positive {
    fill: #3fa35b;
}

.chart-bar.negative {
    fill: #d64b3c;
}

.chart-bar:hover {
    opacity: 0.75;
}

.chart-bar.selected {
    stroke: var(--bc-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.chart-zero {
    stroke: var(--bc-muted);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--bc-muted);
}

/* ---- Day list (narrow screens) ---- */

.day-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bc-border);
}

.day-row {
    margin-bottom: 1px;
    padding: 0.35rem 0.5rem;
}

.day-row:last-child {
    margin-bottom: 0;
}

.day-row.positive {
    background: var(--cal-positive-bg);
}

.day-row.negative {
    background: var(--cal-negative-bg);
}

.day-row.today {
    box-shadow: inset 4px 0 0 var(--bc-accent);
}

.day-row.selected {
    outline: 2px solid var(--bc-accent);
    outline-offset: -2px;
}

.day-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.day-row-date {
    border: none;
    background: transparent;
    padding: 0.2rem 0;
    font: inherit;
    color: inherit;
    min-width: 3.5rem;
    text-align: left;
    cursor: pointer;
}

.day-row-date strong {
    font-size: 1.05rem;
}

.day-row-balance {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.day-row.negative .day-row-balance {
    color: var(--cal-expense);
}

.day-row-add {
    border: 1px solid var(--bc-border);
    background: var(--bc-surface);
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.day-row-entries {
    padding: 0.15rem 0 0.1rem 3.5rem;
}

.day-row-entries .cal-entry {
    font-size: 0.9rem;
    padding: 0.2rem 0.15rem;
}

/* Tablets: calendar first, side panels under it. */
@media (max-width: 900px) {
    .cal-main {
        order: -1;
    }

    .cal-side {
        align-self: stretch;
    }

    .app-header {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}

/* Phones: a list of days instead of the seven-column grid. */
@media (max-width: 700px) {
    .app-main {
        padding: 0.5rem;
    }

    .app-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .app-user {
        display: none;
    }

    .cal-toolbar {
        flex-wrap: wrap;
    }

    .cal-month-picker {
        max-width: 9.5rem;
    }

    .cal {
        display: none;
    }

    .day-list {
        display: block;
    }

    .day-summary {
        display: none;
    }

    .cal-approve {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
    }
}

/* ---- Import ---- */

.import-upload {
    max-width: 48rem;
}

.import-upload p {
    margin: 0 0 0.5rem;
}

.import-file-summary {
    margin: 1rem 0 0.25rem;
    color: var(--bc-muted);
}

.import-result {
    margin-bottom: 1rem;
    max-width: 48rem;
}

.import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem;
}

.import-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.import-table .import-sub {
    padding-left: 2rem;
}

.import-unused td {
    color: var(--bc-muted);
}

.import-muted {
    color: var(--bc-muted);
    font-size: 0.85rem;
}

.import-changed {
    font-weight: 600;
    color: var(--bc-accent);
}

.import-skipped-row td {
    color: var(--bc-muted);
    font-style: italic;
}

.import-table .expense {
    color: var(--cal-expense);
}

.import-table .income {
    color: var(--cal-income);
}

.import-series {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.import-series-item {
    background: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.import-series-item.skipped {
    opacity: 0.55;
}

.import-series-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.import-series-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 16rem;
}

.import-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.import-series-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.import-choice {
    min-width: 13rem;
}

.import-series-details {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--bc-border);
    padding-top: 0.75rem;
}

.import-adjust h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.import-adjust-start {
    max-width: 12rem;
}

.import-adjust-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.import-occurrences {
    max-height: 26rem;
    overflow-y: auto;
}

.import-summary {
    margin-top: 1rem;
    max-width: 48rem;
}

.import-summary ul {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.import-warning {
    color: var(--cal-expense);
}

@media (max-width: 900px) {
    .import-series-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Drag and drop ---- */

.cal-item[draggable="true"] {
    cursor: grab;
}

.cal-item[draggable="true"]:active {
    cursor: grabbing;
}

.cal-day.drop-target {
    outline: 2px dashed var(--bc-accent);
    outline-offset: -4px;
    background-image: linear-gradient(rgba(31, 111, 235, 0.08), rgba(31, 111, 235, 0.08));
}

/* ---- Users ---- */

.users-table {
    max-width: 52rem;
}

.users-table .actions {
    text-align: right;
    white-space: nowrap;
}

.user-disabled td {
    color: var(--bc-muted);
}

.user-status.active {
    color: var(--cal-income);
}

.user-status.locked,
.user-status.disabled {
    color: var(--cal-expense);
}