/* ============================================================================
   Huishoud-OS — styles. Clean & minimal, mobile-first, light + dark.
   ========================================================================== */
:root {
  --bg: #f4f2f0;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --text: #1a1a1a;
  --muted: #8a8a86;
  --border: #e9e6e2;
  --accent: #1a1a1a;
  --accent-ink: #ffffff;
  --danger: #f43f5e;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414; --surface: #1e1e1d; --surface-2: #242423;
    --text: #f0efec; --muted: #9a9a94; --border: #2e2d2b;
    --accent: #f0efec; --accent-ink: #141414;
    --shadow: none;
  }
}
:root[data-theme="light"] { --bg:#f4f2f0; --surface:#fff; --surface-2:#faf9f7; --text:#1a1a1a; --muted:#8a8a86; --border:#e9e6e2; --accent:#1a1a1a; --accent-ink:#fff; --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); }
:root[data-theme="dark"]  { --bg:#141414; --surface:#1e1e1d; --surface-2:#242423; --text:#f0efec; --muted:#9a9a94; --border:#2e2d2b; --accent:#f0efec; --accent-ink:#141414; --shadow:none; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Loading / auth ────────────────────────────────────────────────────── */
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--muted); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 22px; width: 100%; max-width: 340px; text-align: center; box-shadow: var(--shadow); }
.auth-logo { font-size: 40px; }
.auth-card h1 { margin: 6px 0 2px; font-size: 22px; }
.auth-card input { display: block; width: 100%; margin: 10px 0 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.auth-err { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell { max-width: 540px; margin: 0 auto; min-height: 100vh; }
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 8px;
}
.brand { font-weight: 700; font-size: 16px; display: flex; gap: 6px; align-items: center; }
.brand span { letter-spacing: .2px; }
.identity { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.seg { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg.active { background: var(--accent); color: var(--accent-ink); }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Category tabs */
.tabstrip { display: flex; gap: 6px; padding: 0 12px 8px; }
.tabstrip button {
  flex: 1; padding: 9px 4px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: transparent; transition: background .15s, color .15s;
}
.tabstrip button.active { background: var(--accent); color: var(--accent-ink); }

/* Sub-tabs (segmented control inside a category) */
.subtabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.subtabs button { flex: 1; padding: 8px 4px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.subtabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.content { padding: 14px 14px 40px; }
.view { display: flex; flex-direction: column; gap: 14px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.card.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
.card-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.hero h2 { margin: 4px 0 0; font-size: 22px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.empty { color: var(--muted); font-size: 14px; padding: 4px 0; }
.pill { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 9px; border-radius: 999px; }
.pill.danger { color: #fff; background: var(--danger); border-color: transparent; }

/* ── Tasks ─────────────────────────────────────────────────────────────── */
.period-block { margin-top: 6px; }
.period-lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; margin: 8px 0 4px; }
.add-mini { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 15px; line-height: 1; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.task-row:last-child { border-bottom: none; }
.task-row.edit { gap: 8px; }
.task-row input[type=checkbox] { width: 20px; height: 20px; accent-color: #22c55e; flex-shrink: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.tap { width: 12px; height: 12px; cursor: pointer; }
.task-name, .task-title { flex: 1; word-break: break-word; }
.task-title { outline: none; }
.task-title:focus { background: var(--surface-2); border-radius: 6px; padding: 0 4px; }
.done { text-decoration: line-through; color: var(--muted); }
.owner-tag { font-size: 11px; font-weight: 700; }
.owner-chip { width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.owner-chip:active { transform: scale(.9); }
.area-tag { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px; }
.due { font-size: 11px; color: var(--muted); }
.due.late { color: var(--danger); font-weight: 700; }
.del { color: var(--muted); font-size: 13px; opacity: .5; padding: 4px; flex-shrink: 0; }
.del:hover { opacity: 1; color: var(--danger); }

.row-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chip-btn { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }

/* ── Meals ─────────────────────────────────────────────────────────────── */
.meal-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.meal-row:last-child { border-bottom: none; }
.meal-day { font-size: 11px; font-weight: 700; color: var(--muted); width: 24px; padding-top: 2px; }
.meal-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.meal-title { font-weight: 500; }
.meal-ing { font-size: 11px; color: var(--muted); }
.approve { font-size: 12px; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); flex-shrink: 0; }
.approve.on { background: #22c55e; color: #fff; border-color: transparent; }

/* ── grid2 / mini ──────────────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card.mini { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.mini-n { font-size: 26px; font-weight: 800; }
.mini-l { font-size: 13px; color: var(--muted); }

/* ── Week / day cards ──────────────────────────────────────────────────── */
.weeknav { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); }
.weeknav button { font-size: 22px; color: var(--muted); width: 36px; }
.day-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.day-card.today { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; padding-bottom: 2px; }
.day-date { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ── Boodschappen ──────────────────────────────────────────────────────── */
.add-bar { display: flex; gap: 8px; }
.add-bar input[type=text] { flex: 1; min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.add-bar select { flex: 0 0 auto; max-width: 116px; padding: 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.add-bar .btn-primary.sm { flex: 0 0 auto; }
.usuals { display: flex; gap: 8px; overflow-x: auto; padding: 2px; -webkit-overflow-scrolling: touch; }
.usual { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }

/* ── forms ─────────────────────────────────────────────────────────────── */
.form-row { display: flex; gap: 8px; }
.form-row > * { flex: 1; min-width: 0; }
.card input, .card select { width: 100%; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; }
.card .form-row input, .card .form-row select { margin-top: 8px; }

/* ── Agenda ────────────────────────────────────────────────────────────── */
.evt-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.evt-time { font-size: 12px; font-weight: 700; color: var(--muted); width: 42px; }
.evt-title { flex: 1; }

/* ── Geld ──────────────────────────────────────────────────────────────── */
.total-card .total-nums { display: flex; align-items: baseline; gap: 8px; }
.big { font-size: 30px; font-weight: 800; }
.bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 10px; border: 1px solid var(--border); }
.bar.sm { height: 6px; margin-top: 6px; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.budget-row { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.budget-row:last-child { border-bottom: none; }
.budget-top { display: flex; justify-content: space-between; font-size: 14px; }
.budget-top .over { color: var(--danger); font-weight: 700; }
.exp-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 14px; }
.exp-row:last-child { border-bottom: none; }
.exp-date { font-size: 12px; color: var(--muted); width: 38px; flex-shrink: 0; }
.exp-note { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-cat { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.exp-amt { font-weight: 700; flex-shrink: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 12px 16px; border-radius: 12px; }
.btn-primary.sm { padding: 0 16px; }
.btn-primary.full, .btn-ghost.full { width: 100%; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow); }

/* ── Chat ──────────────────────────────────────────────────────────────── */
.chat-view { gap: 10px; min-height: calc(100vh - 180px); }
.chat-empty { text-align: center; padding: 24px 8px 8px; }
.chat-logo { font-size: 40px; }
.chat-empty p { margin: 8px auto 14px; max-width: 320px; }
.chat-suggest { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.chat-suggest button { font-size: 14px; font-weight: 600; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); text-align: left; }
.chat-stream { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.bubble.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--shadow); }
.bubble-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.chip-done { font-size: 12px; font-weight: 600; color: #16a34a; background: color-mix(in srgb, #22c55e 12%, transparent); border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); padding: 3px 9px; border-radius: 999px; align-self: flex-start; }
.bubble.typing { display: flex; gap: 4px; align-items: center; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-bar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 0 calc(8px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 72%, transparent); }
.chat-bar input { flex: 1; min-width: 0; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); }
.chat-send { border-radius: 50%; width: 46px; height: 46px; padding: 0; font-size: 16px; flex-shrink: 0; }
.chat-mode-note { text-align: center; margin: -2px 0 4px; }

.mode-badge { position: fixed; bottom: calc(12px + var(--safe-b)); right: 12px; z-index: 25; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; box-shadow: var(--shadow); opacity: .8; }