*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: #f4f6f9;
    color: #1a1a2e;
    min-height: 100vh;
}
header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
    padding: 2rem 1rem 1.5rem;
}
.header-row {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
header h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -.5px; }
header p { margin-top: .3rem; color: #a8b8d8; font-size: .9rem; }

.user-box { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.user-chip {
    padding: .35rem .9rem; border-radius: 2rem; font-size: .82rem; font-weight: 700; color: #fff;
}
.user-link {
    color: #cbd5e1; text-decoration: none; font-size: .82rem; font-weight: 500;
    padding: .35rem .7rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,.25);
}
.user-link:hover { color: #fff; border-color: rgba(255,255,255,.6); }

nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
}
nav a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .75rem 1.2rem;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    color: #475569;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
nav a:hover { color: #0f3460; }
nav a.active { color: #0f3460; border-bottom-color: #0f3460; }
nav.subnav { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
nav.subnav a { padding: .55rem 1rem; font-size: .82rem; }

main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem 4rem; }

.card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.card h2 { font-size: 1.15rem; margin-bottom: 1rem; color: #1a1a2e; }
.card h2 a.btn-sm { float: right; }
.card h2 a.card-link { color: inherit; text-decoration: none; }
.card h2 a.card-link:hover { color: #0f3460; text-decoration: underline; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat-box { text-align: center; padding: 1rem; min-width: 0; }
.stat-box .value { font-size: 1.6rem; font-weight: 700; color: #0f3460; }
.stat-box.negative .value { color: #dc2626; }
.stat-box.positive .value { color: #16a34a; }
.stat-box.warning .value { color: #f59e0b; }
.stat-box .label { font-size: .82rem; color: #64748b; margin-top: .25rem; overflow-wrap: break-word; }

/* Compact side-by-side pair of small stats — for narrow dashboard tiles where a full-size
   .stat-box would make the card disproportionately tall next to its single-stat neighbours. */
.mini-stat-row { display: flex; gap: .5rem; }
.mini-stat { flex: 1; text-align: center; padding: .5rem .25rem; border-radius: .5rem; background: #f8fafc; min-width: 0; }
.mini-stat.warning { background: #fffbeb; }
.mini-stat-value { display: block; font-size: 1.15rem; font-weight: 700; color: #0f3460; }
.mini-stat.warning .mini-stat-value { color: #f59e0b; }
.mini-stat-label { display: block; font-size: .7rem; color: #64748b; margin-top: .2rem; line-height: 1.25; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #e2e8f0; }
th { color: #475569; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
.amount-pos { color: #16a34a; font-weight: 600; }
.amount-neg { color: #dc2626; font-weight: 600; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
}
.badge-soft { background: #e2e8f0; color: #334155; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-ok { background: #dcfce7; color: #166534; }

input[type=text], input[type=number], input[type=file], input[type=month],
input[type=date], input[type=password], input[type=url], select, textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1.5px solid #cbd5e1;
    border-radius: .6rem;
    font-size: .9rem;
    outline: none;
    background: #fff;
    color: #1a1a2e;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: #0f3460; }
label { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: .3rem; margin-top: .8rem; }
label:first-child { margin-top: 0; }

.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.2rem;
    background: #0f3460;
    color: #fff;
    border: none;
    border-radius: .6rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1rem;
}
.btn:hover { background: #16213e; }
.btn-danger { background: #fff; color: #dc2626; border: 1.5px solid #fca5a5; }
.btn-danger:hover { background: #fef2f2; }
.btn-secondary { background: #fff; color: #374151; border: 1.5px solid #cbd5e1; }
.btn-secondary:hover { border-color: #0f3460; color: #0f3460; }
.btn-sm { padding: .5rem .8rem; font-size: .8rem; margin-top: 0; }

.icon-btn {
    border: none; background: none; cursor: pointer;
    padding: .5rem; margin: -.5rem;
    font-size: 1.1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
}

.progress-bar {
    height: .5rem; background: #e2e8f0; border-radius: 1rem; overflow: hidden; margin-top: .4rem;
}
.progress-bar .fill { height: 100%; border-radius: 1rem; }
.fill-ok { background: #16a34a; }
.fill-warning { background: #f59e0b; }
.fill-over { background: #dc2626; }

.advice-row { padding: .9rem 0; border-bottom: 1px solid #e2e8f0; }
.advice-row:last-child { border-bottom: none; }
.advice-head { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; font-weight: 600; }
.advice-msg { font-size: .82rem; color: #64748b; margin-top: .3rem; }

.flash {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    border-radius: .75rem; padding: .9rem 1.2rem; font-size: .875rem; margin-bottom: 1.2rem;
}
.flash.error { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

.state-box { text-align: center; color: #64748b; padding: 2rem; }
.state-box .icon { font-size: 2.2rem; margin-bottom: .6rem; }

.tag-select { display: inline-block; min-width: 160px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.legend-item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 2rem;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: .8rem;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, background .15s, font-weight .15s;
}
.legend-item .dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.legend-item:hover { border-color: #94a3b8; }
.legend-item.active { border-color: #0f3460; background: #eff6ff; font-weight: 700; }

.trend-line { transition: opacity .15s; }
.trend-line .line { fill: none; stroke-width: 2.5; }
.trend-line .dot { stroke: #fff; stroke-width: 1; }
.trend-line.dimmed { opacity: .12; }
.trend-line.active .line { stroke-width: 4.5; }
.trend-line.active .dot { r: 4.5; }

/* ── Checklists (taken, boodschappenlijst) ── */
.checklist { list-style: none; }
.checklist li {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .6rem 0; border-bottom: 1px solid #e2e8f0;
}
.checklist li:last-child { border-bottom: none; }
.checklist li.done .item-title { text-decoration: line-through; color: #94a3b8; }
.checklist .item-title { flex: 1; font-size: .9rem; }
.checklist .item-meta { font-size: .78rem; color: #64748b; }
.checklist input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: #0f3460; cursor: pointer; }

/* ── Maandkalender ── */
.cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 1rem; }
.cal-table th { text-align: center; padding: .4rem; font-size: .78rem; color: #64748b; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cal-day { border: 1px solid #e2e8f0; vertical-align: top; height: 92px; padding: .35rem; font-size: .78rem; }
.cal-day.other-month { background: #f8fafc; color: #cbd5e1; }
.cal-day.today { background: #eff6ff; border-color: #0f3460; }
.cal-day-num { font-weight: 600; margin-bottom: .25rem; }
.cal-event {
    display: block; font-size: .68rem; background: #e2e8f0; color: #1a1a2e; border-radius: .3rem;
    padding: 1px 5px; margin-bottom: 2px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event:hover { background: #cbd5e1; }
.cal-event-more { font-size: .68rem; color: #94a3b8; }

/* ── Auth pages ── */
.auth-wrap { max-width: 380px; margin: 4rem auto; }
.auth-wrap h1 { text-align: center; margin-bottom: .3rem; }
.auth-wrap .sub { text-align: center; color: #64748b; font-size: .85rem; margin-bottom: 1.5rem; }

footer {
    text-align: center;
    font-size: .78rem;
    color: #94a3b8;
    padding: 1.5rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    margin-top: 3rem;
}

/* ── Utility classes (avoid inline style="" so CSP can drop 'unsafe-inline') ── */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-end { align-items: flex-end; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-3 { gap: .3rem; }
.u-gap-4 { gap: .4rem; }
.u-gap-5 { gap: .5rem; }
.u-gap-6 { gap: .6rem; }
.u-gap-8 { gap: .8rem; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-inline { display: inline; }
.u-inline-block { display: inline-block; }
.u-m-0 { margin: 0; }
.u-mt-3 { margin-top: .3rem; }
.u-mt-4 { margin-top: .4rem; }
.u-mt-5 { margin-top: .5rem; }
.u-mt-6 { margin-top: .6rem; }
.u-mt-8 { margin-top: .8rem; }
.u-mt-10 { margin-top: 1rem; }
.u-mt-12 { margin-top: 1.2rem; }
.u-mt-15 { margin-top: 1.5rem; }
.u-mb-4 { margin-bottom: .4rem; }
.u-mb-5 { margin-bottom: .5rem; }
.u-mb-8 { margin-bottom: .8rem; }
.u-mb-10 { margin-bottom: 1rem; }
.u-text-muted { color: #64748b; font-size: .9rem; }
.u-text-muted-sm { color: #64748b; font-size: .85rem; }
.u-hint { font-size: .78rem; color: #94a3b8; margin-top: .3rem; }
.u-hint-mt5 { font-size: .78rem; color: #94a3b8; margin-top: .5rem; }
.u-hint-mt8 { font-size: .78rem; color: #94a3b8; margin-top: .8rem; }
.u-text-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-cursor-pointer { cursor: pointer; }
.u-w-full { width: 100%; }
.u-min-w-160 { min-width: 160px; }
.u-min-w-180 { min-width: 180px; }
.u-min-w-200 { min-width: 200px; }
.u-min-w-220 { min-width: 220px; }
.u-min-w-240 { min-width: 240px; }
.u-max-w-260 { max-width: 260px; }
.u-float-right { float: right; }
.u-color-dot { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.u-color-dot-sm { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.u-color-dot-md { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; margin-right: .4rem; }
.u-today { color: #0f3460; }
.u-strike { text-decoration: line-through; color: #94a3b8; }
.u-bold { font-weight: 700; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.u-filter-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.u-filter-row-8 { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.u-danger-text { color: #dc2626; }
.u-color-input { padding: .2rem; height: 2.6rem; }
.u-btn-block { width: 100%; justify-content: center; }
.u-note { font-size: .85rem; margin-bottom: .5rem; }
.u-fw-600 { font-weight: 600; }
.u-text-85 { font-size: .85rem; }
.u-day-sub { font-weight: 400; font-size: .75rem; color: #94a3b8; }
.u-meal-label { font-weight: 600; white-space: nowrap; }
.u-meal-cell { min-width: 150px; vertical-align: top; }
.u-flex-col-3 { display: flex; flex-direction: column; gap: .3rem; }
.u-select-sm { font-size: .78rem; padding: .35rem; }
.u-servings { font-weight: 400; font-size: .8rem; color: #64748b; }
.u-source-link { font-size: .82rem; margin-bottom: .8rem; }
.u-h3-sm { font-size: .9rem; margin-bottom: .5rem; }
.u-instructions { white-space: pre-wrap; font-size: .9rem; line-height: 1.6; }
.u-select-inline-sm { width: auto; padding: .3rem .4rem; }
.u-notes { font-size: .9rem; color: #374151; margin-top: .6rem; }
.u-section-label { font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: .4rem; }
.u-section-label-mt { font-size: .82rem; font-weight: 600; color: #374151; margin: .8rem 0 .4rem; }
.u-past-label { font-size: .82rem; font-weight: 600; color: #374151; margin: 1rem 0 .4rem; }
.u-add-note-row { display: flex; gap: .6rem; margin-bottom: 1rem; }
.note-card { background: #f8fafc; box-shadow: none; border: 1px solid #e2e8f0; margin-bottom: 0; }
.note-card.pinned { background: #fffbeb; }
.u-note-text { font-size: .9rem; white-space: pre-wrap; }
.u-note-meta { font-size: .75rem; color: #94a3b8; margin-top: .5rem; }
.u-note-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.u-subtask-wrap { width: 100%; margin: .5rem 0 0 1.9rem; }
.u-subtask-li { padding: .35rem 0; }
.u-subtask-form { display: flex; gap: .4rem; flex: 1; min-width: 200px; }
.u-subtask-input { flex: 1; padding: .35rem .6rem; font-size: .82rem; }
.u-field-label { font-size: .78rem; color: #64748b; white-space: nowrap; }
.u-field-note { font-size: .78rem; color: #64748b; }
.u-input-inline-sm { width: auto; padding: .35rem .5rem; font-size: .82rem; }
.u-input-days { width: 4rem; padding: .35rem .5rem; font-size: .82rem; }
.u-my-6 { margin: .6rem 0; }
.u-verify-link { font-size: 1.1rem; font-weight: 700; }
.u-usercode { font-size: 1.6rem; font-weight: 700; letter-spacing: .15em; color: #0f3460; }
.u-hint82-mt8 { font-size: .82rem; color: #94a3b8; margin-top: .8rem; }
.u-intro-text { color: #64748b; font-size: .9rem; margin-bottom: 1rem; }
.u-hint82-mt4 { font-size: .82rem; color: #94a3b8; margin-top: .4rem; }
.u-details-summary { cursor: pointer; font-size: .85rem; color: #374151; font-weight: 600; }
.u-connected-label { font-size: .85rem; color: #64748b; margin-bottom: 1rem; }
.u-sync-meta { font-size: .82rem; color: #64748b; }
.u-action-row { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.u-min-w-180 { min-width: 180px; }
.u-w-100 { width: 100px; }
.u-row-between { display: flex; justify-content: space-between; align-items: center; }
.u-h2-row { display: flex; align-items: center; gap: .5rem; margin-bottom: 0; }
.u-type-tag { font-size: .7rem; color: #94a3b8; font-weight: 500; }
.u-rules-wrap { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.rule-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #f1f5f9; border-radius: 2rem; padding: .2rem .3rem .2rem .7rem;
    font-size: .78rem; max-width: 100%;
}
.rule-pill-remove { border: none; background: none; cursor: pointer; color: #dc2626; font-weight: 700; }
.u-empty-hint { font-size: .8rem; color: #94a3b8; }
.u-add-rule-row { display: flex; gap: .5rem; margin-top: .8rem; }
.u-mb-9 { margin-bottom: .9rem; }
.u-spend-row { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .25rem; }
.u-desc-sub { font-size: .78rem; color: #94a3b8; }
.u-account-badge { font-size: .7rem; margin-top: .25rem; }
.u-tag-select-pad { padding: .3rem .5rem; font-size: .82rem; }
.u-pagination { display: flex; gap: .4rem; margin-top: 1.2rem; flex-wrap: wrap; }
.u-flex-row-6 { display: flex; gap: .6rem; align-items: flex-end; }
.u-flex-row-6-mb10 { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.u-intro-85 { color: #64748b; font-size: .85rem; margin-bottom: .8rem; }
.u-intro-90 { color: #64748b; font-size: .9rem; margin-bottom: .8rem; }
.u-text-right-bold { text-align: right; font-weight: 600; }
.u-not-set { color: #cbd5e1; }
.u-w-140 { width: 140px; }
.u-dash { color: #94a3b8; }
.u-minmax-range { font-size: .72rem; color: #94a3b8; }
.badge-active { background: #16a34a; }
.badge-inactive { background: #94a3b8; }
.u-text-right-muted { text-align: right; color: #64748b; }
.u-svg-full { width: 100%; height: auto; }
.u-remaining-count { font-size: .9rem; margin-top: .6rem; }
.u-text-90 { font-size: .9rem; }
.u-textarea-lg { width: 100%; height: 300px; font-family: monospace; font-size: .8rem; }
.u-textarea-md { width: 100%; height: 200px; font-family: monospace; font-size: .85rem; }

/* ── Telefoon / smal scherm ── */
@media (max-width: 640px) {
    header { padding: 1.2rem 1rem 1rem; }
    header h1 { font-size: 1.4rem; }
    header p { font-size: .8rem; }
    .header-row { gap: .6rem; }
    .user-box { gap: .4rem; }
    .user-chip, .user-link { font-size: .76rem; padding: .3rem .6rem; }

    nav, nav.subnav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav::-webkit-scrollbar, nav.subnav::-webkit-scrollbar { display: none; }
    nav a { flex: 0 0 auto; padding: .7rem .9rem; font-size: .85rem; }
    nav.subnav a { padding: .5rem .8rem; font-size: .78rem; }

    main { margin: 1rem auto; padding: 0 .6rem 3rem; }
    .card { padding: 1rem; border-radius: .75rem; }
    .grid { gap: 1rem; }

    table { font-size: .82rem; }
    th, td { padding: .5rem .4rem; }

    .stat-box .value { font-size: 1.35rem; }

    .btn, .btn-secondary, .btn-danger { padding: .6rem 1rem; }

    .cal-table th { padding: .25rem .1rem; font-size: .68rem; }
    .cal-day { height: 60px; padding: .2rem; font-size: .68rem; }
    .cal-day-num { margin-bottom: .1rem; }
    .cal-event { font-size: .6rem; padding: 0 3px; }
}