/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    background-color: #f4f6fa;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.month-label {
    min-width: 140px;
    text-align: center;
    font-size: 1rem;
}

/* ── Summary cards ───────────────────────────────────────────────────────── */
.summary-card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-radius: 0.75rem;
    transition: box-shadow .15s ease;
}
.summary-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.summary-card .card-body {
    padding: 0.85rem 0.5rem;
}
.summary-card .h4 {
    font-size: clamp(0.9rem, 3vw, 1.35rem);
}

/* ── Letter spacing utility ──────────────────────────────────────────────── */
.letter-spacing { letter-spacing: .05em; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.transition-width {
    transition: width 0.4s ease;
}

/* ── Chart container ─────────────────────────────────────────────────────── */
.chart-container {
    position: relative;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-container { height: 360px; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-radius: 0.75rem;
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

/* ── Dashed border (no-budget card) ─────────────────────────────────────── */
.border-dashed {
    border: 2px dashed #dee2e6 !important;
    background-color: #fff;
}

/* ── Expense rows ────────────────────────────────────────────────────────── */
.expense-row {
    transition: background-color .1s;
}
.expense-row:hover {
    background-color: #f8f9ff;
}
.expense-row:last-child {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* ── Delete button ───────────────────────────────────────────────────────── */
.delete-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.6;
    transition: opacity .15s;
}
.delete-btn:hover { opacity: 1; }

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .month-label { min-width: 110px; font-size: 0.9rem; }
    .navbar .btn-sm { padding: 0.2rem 0.45rem; }
}

/* ── PWA standalone safe area ────────────────────────────────────────────── */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); }
    .sticky-top { padding-top: env(safe-area-inset-top); }
}