/* Mâm — quản lý ăn uống.
   Token, anatomy và mật độ lấy nguyên từ Moreh Design System của Finance Assistant
   (design-system/dist/finance-assistant/tokens.css). Thứ duy nhất đổi là nhóm
   --accent: cam #FF5700 là thương hiệu Finance, Mâm dùng mận #B53C7F.
   --navy giữ nguyên nghĩa của hệ và ở đây dành riêng cho quỹ chung. */

:root {
  --accent:#B53C7F; --accent-deep:#8E2F64; --accent-tint:#F7E4EE;
  --accent-soft:#FDF5F9; --accent-border:#EBC8DC;
  --income:#285F49; --income-bg:#EAF3EE; --expense:#B3402F; --expense-bg:#FBEDEA;
  --danger:#CC0000; --warn:#8A5A00; --navy:#2C4F6A; --slate:#37505C;
  --fg-1:#000000; --fg-2:#212121; --fg-3:#333333; --fg-4:#777777; --fg-5:#9B9D96;
  --bg-app:#F4F5F6; --surface:#FFFFFF;
  --border-1:#D8DBDF; --border-2:#E5E7EA; --border-3:#F0F1F2;
  --row-line:#F3F4F5; --track:#EFF0F1; --hover:#FAFAFA;
  --tag-neutral-bg:#F1F2F3; --tag-neutral-fg:#555555;
  --toast-bg:#1B1F24; --toast-fg:#FFFFFF; --overlay:rgba(11,13,16,.4);
  --font-sans:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-tint:#331726; --accent-soft:#20121A; --accent-border:#4A2236;
    --income:#5FBF97; --income-bg:#16261F; --expense:#E07B6A; --expense-bg:#2B1B18;
    --danger:#FF6B6B; --warn:#E0A758; --navy:#7FA8C9; --slate:#93AEBC;
    --fg-1:#FFFFFF; --fg-2:#E8EAED; --fg-3:#C8CCD2; --fg-4:#8A9098; --fg-5:#6A7078;
    --bg-app:#0B0D10; --surface:#14171B;
    --border-1:#2A2F36; --border-2:#22262C; --border-3:#1B1F24;
    --row-line:#1B1F24; --track:#22262C; --hover:#1B1F24;
    --tag-neutral-bg:#22262C; --tag-neutral-fg:#C8CCD2;
    --toast-bg:#E8EAED; --toast-fg:#14171B; --overlay:rgba(0,0,0,.55);
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; height:100%; }
body {
  font:400 14px/1.5 var(--font-sans);
  color:var(--fg-2); background:var(--bg-app);
  overscroll-behavior:none; height:100%;
  -webkit-text-size-adjust:100%;
}
button { font-family:var(--font-sans); -webkit-tap-highlight-color:transparent; cursor:pointer; }
input, select { font-family:var(--font-sans); }
[hidden] { display:none !important; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── Đăng nhập ─────────────────────────────────────────────────────────────── */
.login { min-height:100%; display:grid; place-items:center; padding:24px; }
.login-card {
  background:var(--surface); border:1px solid var(--border-2); border-radius:10px;
  padding:26px 22px; width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:9px;
}
.login-card h1 { font-weight:800; font-size:28px; color:var(--fg-1); letter-spacing:-.02em; }
.login-card .sub {
  font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-4); margin-bottom:12px;
}
.login-card label {
  font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-4); margin-top:6px;
}
.input {
  height:44px; padding:0 12px; border:1px solid var(--border-1); border-radius:8px;
  font:500 13.5px var(--font-sans); color:var(--fg-2); background:var(--surface);
  outline:none; width:100%;
}
.input:focus-visible, button:focus-visible, select:focus-visible {
  outline:2px solid var(--accent); outline-offset:1px;
}
.err { color:var(--danger); font-size:12.5px; margin-top:4px; }

/* ── Khung app ─────────────────────────────────────────────────────────────── */
.app-shell { min-height:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; }

.app-header {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;
  border-bottom:1px solid var(--border-2); background:var(--surface);
}
.avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent-tint); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; flex:none;
}
.header-name { font-weight:800; font-size:15px; color:var(--fg-1); line-height:1.2; }
.header-eyebrow {
  font-size:10px; color:var(--fg-4); letter-spacing:.1em;
  text-transform:uppercase; font-weight:700;
}
.icon-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border-1); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--fg-3); flex:none; transition:border-color .15s, color .15s;
}
.icon-btn:active { border-color:var(--accent); color:var(--accent); }
.icon-btn:disabled { opacity:.5; }
.spinning { animation:mam-spin .9s linear infinite; color:var(--accent); }
@keyframes mam-spin { to { transform:rotate(360deg); } }

.day-bar {
  position:sticky; top:65px; z-index:29;
  display:flex; align-items:center; padding:4px 8px;
  border-bottom:1px solid var(--border-2); background:var(--surface);
}
.day-nav {
  width:44px; height:44px; border:none; background:none;
  font-size:20px; color:var(--fg-3);
  display:flex; align-items:center; justify-content:center;
}
.day-nav:disabled { color:var(--border-1); }
.day-label { font-weight:800; font-size:14.5px; color:var(--fg-1); }
.day-sub { font:500 10.5px var(--font-mono); color:var(--fg-4); }

.app-main {
  flex:1; min-height:0;
  padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:16px;
}

.banner {
  padding:10px 16px; font-size:12.5px;
  background:color-mix(in srgb, var(--warn) 12%, var(--surface));
  color:var(--warn); border-bottom:1px solid var(--border-2);
}

/* ── Khối ──────────────────────────────────────────────────────────────────── */
.block { display:flex; flex-direction:column; gap:9px; }
.block-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.card-title {
  font-weight:700; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3);
}
.block-n { font:500 10.5px var(--font-mono); color:var(--fg-4); }
.card { background:var(--surface); border:1px solid var(--border-2); border-radius:10px; }

/* ── Bữa ăn ────────────────────────────────────────────────────────────────── */
.slot-icon {
  width:34px; height:34px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
  background:var(--bg-app); color:var(--fg-4);
}
.slot-icon--fund { background:color-mix(in srgb, var(--navy) 10%, var(--surface)); color:var(--navy); }
.slot-icon--draft { background:var(--accent-tint); color:var(--accent); }

.meal-row {
  display:flex; align-items:center; gap:10px;
  padding:11px 0; border-top:1px solid var(--row-line);
}
.meal-row:first-child { border-top:none; }
.meal-name {
  font-weight:600; font-size:13px; color:var(--fg-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.meal-sub {
  font-size:10.5px; color:var(--fg-4); margin-top:1px; line-height:1.45;
}
.meal-amt { font:600 12.5px var(--font-mono); color:var(--fg-2); flex:none; text-align:right; }
.meal-amt--zero { color:var(--fg-5); }
.meal-end { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* Bữa nháp — cùng bộ xương với Hộp chờ xác nhận của Finance */
.draft {
  border:1px solid var(--accent-border); background:var(--accent-soft);
  border-radius:10px; padding:13px 14px;
  display:flex; flex-direction:column; gap:9px;
}
.draft--fund {
  border-color:color-mix(in srgb, var(--navy) 22%, var(--surface));
  background:color-mix(in srgb, var(--navy) 5%, var(--surface));
}
.draft-top { display:flex; align-items:center; gap:9px; }
.draft-actions { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:6px; }

.tags { display:flex; flex-wrap:wrap; gap:5px; }
.badge {
  height:20px; padding:0 7px; border-radius:6px;
  display:inline-flex; align-items:center; flex:none;
  font:700 9.5px var(--font-sans); letter-spacing:.06em;
  background:var(--bg-app); color:var(--fg-4); white-space:nowrap;
}
.badge--navy { background:color-mix(in srgb, var(--navy) 10%, var(--surface)); color:var(--navy); }
.badge--income { background:var(--income-bg); color:var(--income); }
.badge--warn { background:color-mix(in srgb, var(--warn) 12%, var(--surface)); color:var(--warn); }

/* ── Thước đo ──────────────────────────────────────────────────────────────── */
.meter { padding:13px 14px; display:flex; flex-direction:column; gap:8px; }
.meter-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.meter-val { font:600 15px var(--font-mono); color:var(--fg-1); letter-spacing:-.02em; }
.meter-foot {
  display:flex; justify-content:space-between; gap:10px;
  font:500 10.5px var(--font-mono); color:var(--fg-4);
}
.track { height:6px; border-radius:999px; background:var(--track); overflow:hidden; }
.track > i { display:block; height:6px; border-radius:999px; background:var(--accent); transition:width .3s; }
.track > i.over { background:var(--expense); }
.track > i.navy { background:var(--navy); }

/* ── Nút ───────────────────────────────────────────────────────────────────── */
.btn {
  height:44px; border-radius:8px; border:1px solid var(--border-1);
  background:var(--surface); color:var(--tag-neutral-fg);
  font:700 12.5px var(--font-sans);
}
.btn--pri { border:none; background:var(--accent); color:#fff; font:700 13px var(--font-sans); }
.btn--pri:active { background:var(--accent-deep); }
.btn--fund { border:none; background:var(--navy); color:#fff; font:700 13px var(--font-sans); }
.btn--tall { height:48px; width:100%; font:700 14px var(--font-sans); }
.btn--sm { height:32px; padding:0 12px; font:700 11.5px var(--font-sans); }
.btn:disabled { opacity:.5; }

.fab {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(76px + env(safe-area-inset-bottom,0px));
  margin-left:146px;
  height:48px; padding:0 18px; border:none; border-radius:999px;
  background:var(--accent); color:#fff; font:700 13px var(--font-sans);
  display:flex; align-items:center; gap:7px; z-index:35;
}
.fab:active { background:var(--accent-deep); }

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
.tab-bar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px; z-index:40;
  display:flex; border-top:1px solid var(--border-2); background:var(--surface);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab-btn {
  position:relative; flex:1; height:60px; border:none; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--fg-5); font:700 10px var(--font-sans);
  letter-spacing:.04em; text-transform:uppercase; transition:color .15s;
}
.tab-btn.is-active { color:var(--fg-1); }
.tab-ind {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--accent);
}

/* ── Danh sách kiểu hàng ───────────────────────────────────────────────────── */
.field-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-top:1px solid var(--row-line);
}
.field-row:first-child { border-top:none; }
.field-label {
  font-weight:700; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-4);
}
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  height:30px; padding:0 11px; border-radius:999px;
  border:1px solid var(--accent); background:var(--accent-tint); color:var(--accent);
  font:700 11.5px var(--font-sans);
}
.chip--navy { border-color:var(--navy); background:color-mix(in srgb, var(--navy) 10%, var(--surface)); color:var(--navy); }

.empty { font-size:12.5px; color:var(--fg-5); padding:2px 0; }

.toast {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(136px + env(safe-area-inset-bottom,0px));
  background:var(--toast-bg); color:var(--toast-fg);
  padding:10px 16px; border-radius:999px;
  font:600 12px var(--font-sans); z-index:50; max-width:90vw;
}

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }