/* ==========================================================================
   /year page
   ========================================================================== */

.year {
    --week-ok: #6096ba;
    --week-warn: #e0a100;
    --week-over: #CD0A0A;
    --week-good: #30AD23;
    --week-ink: #232f3e;
    --week-muted: #777;
    --week-line: #e6e6e6;
    --week-soft: #f6f7f9;
    color: var(--week-ink);
}

.year section {
    margin-bottom: 1.5rem;
}

/* ── Navigation ───────────────────────────────────────────────────────── */

.year .week-nav {
    flex-wrap: wrap;
}

.year-nav__today {
    margin-left: .5rem;
}

.year-nav__actions {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.year-nav__actions form {
    margin: 0;
}

/* ── Summary ──────────────────────────────────────────────────────────── */

.year-summary__totals {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: var(--week-muted);
    font-size: .875rem;
    text-align: right;
}

.year-summary__totals strong {
    color: var(--week-ink);
    font-weight: 600;
}

.year-summary__totals .red,
.year-summary__totals .red strong {
    color: var(--week-over);
}

.year-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 1rem 0 0;
    overflow: hidden;
    border: 1px solid var(--week-line);
    border-radius: 6px;
    background: var(--week-line);
}

.year-stats > div {
    padding: .5rem .75rem;
    background: #fff;
}

.year-stats dt {
    color: var(--week-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.year-stats dd {
    margin: .1rem 0 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Not-budgeted expenses ────────────────────────────────────────────── */

.year-alert {
    padding: .75rem 1rem .25rem;
    border: 1px solid #f1c4c4;
    border-radius: 8px;
    background: #fdf5f5;
}

.year-alert .week-section-head h4 {
    color: var(--week-over);
}

.year-alert .expense:hover {
    background: #fbeaea;
}

.year-alert .expense:last-child {
    border-bottom: 0;
}

.year-expense__date {
    color: var(--week-muted);
    white-space: nowrap;
}

.year-expense__edit {
    padding: .25rem .5rem;
    color: #888;
}

.year-expense__edit:hover {
    color: var(--week-ink);
}

/* ── Budget items ─────────────────────────────────────────────────────── */

.budget-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--week-line);
}

.budget-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 22rem) auto;
    grid-template-areas: "handle main amounts actions";
    align-items: center;
    gap: .5rem 1rem;
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--week-line);
    background: #fff;
}

.budget-item:hover {
    background: var(--week-soft);
}

.budget-item__handle     { grid-area: handle; }
.budget-item__main       { grid-area: main; }
.budget-item__amounts    { grid-area: amounts; }
.budget-item__actions    { grid-area: actions; }

.budget-item__handle {
    padding: .25rem .4rem;
    color: #b5bcc4;
    cursor: grab;
    touch-action: none;
}

.budget-item__handle:hover {
    color: var(--week-ink);
}

.budget-item__main {
    min-width: 0;
}

.budget-item__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.budget-item__name {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.budget-item__name:hover {
    text-decoration: underline;
}

.budget-item__type {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: #eef1f4;
    color: var(--week-muted);
    font-size: .7rem;
}

.budget-item__type--fixed {
    background: #e4e9ee;
}

.budget-item__desc {
    display: block;
    overflow: hidden;
    color: var(--week-muted);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-item__share {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 16rem;
    margin-top: .4rem;
}

.budget-item__share .progress {
    flex: 1;
    height: 6px;
}

.budget-item__share-label {
    min-width: 2.2rem;
    color: var(--week-muted);
    font-size: .75rem;
    text-align: right;
}

.budget-item__amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    text-align: right;
}

.budget-item__amounts dt {
    color: var(--week-muted);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.budget-item__amounts dd {
    margin: 0;
    color: var(--week-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.budget-item__amounts .is-entered dd {
    color: var(--week-ink);
    font-weight: 700;
}

.budget-item__actions {
    display: flex;
    align-items: center;
    gap: .15rem;
    width: 4.75rem;
}

.budget-item__actions a {
    padding: .25rem .5rem;
    border-radius: 4px;
    color: #888;
}

.budget-item__actions a:hover {
    background: #e6e6e6;
    color: var(--week-ink);
}

.budget-item__actions a.red:hover {
    color: var(--week-over);
}

.budget-item.draggable-source--is-dragging {
    opacity: .35;
}

.budget-item.draggable-mirror {
    z-index: 10;
    border: 1px solid var(--week-line);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(35, 47, 62, .18);
}

/* ── Income, year details, chart ──────────────────────────────────────── */

.year-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.year-card {
    padding: .8rem 1rem;
    border: 1px solid var(--week-line);
    border-radius: 8px;
    background: #fff;
}

.year-card--chart {
    grid-column: 1 / -1;
}

.year-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.year-card__head h4 {
    margin: 0;
}

.year-card__head a {
    font-size: .8rem;
}

.year-card__list {
    margin: 0;
}

.year-card__list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: 1px dotted var(--week-line);
    font-size: .875rem;
}

.year-card__list > div:last-child {
    border-bottom: 0;
}

.year-card__list dt {
    color: var(--week-muted);
}

.year-card__list dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.year-card__list .is-over dd {
    color: var(--week-over);
}

.year-card__empty {
    margin: 0 0 .75rem;
    color: var(--week-muted);
}

.year-chart {
    position: relative;
    height: 16rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media screen and (max-width: 48em) {
    .budget-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "handle main    actions"
            "handle amounts amounts";
    }

    .budget-item__share {
        max-width: none;
    }
}

@media screen and (max-width: 35.5em) {
    .year-nav__actions {
        width: 100%;
    }

    .year-nav__actions form,
    .year-nav__actions .pure-button {
        flex: 1;
    }

    .year-nav__actions form .pure-button {
        width: 100%;
    }

    .year-summary__totals {
        text-align: left;
    }

    .year-details {
        grid-template-columns: 1fr;
    }

    .year-expense__date {
        display: none;
    }

    .year-chart {
        height: 18rem;
    }
}