/* Import past spending (js/spendImportView.js): the preview inside the shared #entry-detail-sheet.
   While it is shown the sheet's own head is replaced by a sticky one (its title in the app's language)
   and the save button sits in a sticky foot, so both stay on screen however long the month is. Money
   keeps its own quiet peach ₫ cue, apart from the Diary's kcal colours. Amounts never wrap or clip: the
   description wraps instead. Everything sits on theme surfaces (var(--surface) / --surface-soft), so the
   night palette reads as well as the day one. Loaded after css/diary.css. */
#entry-detail-sheet:has(> #entry-detail-body > .si-root) { padding-top: 0; padding-bottom: 0; max-height: 90vh; overscroll-behavior: contain; }
#entry-detail-sheet:has(> #entry-detail-body > .si-root) > .entry-detail-head { display: none; }
.si-root { color: var(--text-primary); }
/* app.css makes every li a flex row with a top rule: here lists are laid out by their own classes. */
:where(.si-root) li { display: block; gap: 0; padding: 0; border-top: 0; font-size: inherit; }
.si-root p { margin: 6px 0; }
.si-head h3 { font-size: 18px; }
.si-note { color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
.si-lead { font-size: 14.5px; line-height: 1.45; }
.si-error { color: #A4231B; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.si-ok { color: var(--accent-strong); font-size: 13.5px; font-weight: 700; }

/* ---- Pick a file: a button (touch) or a drop zone (mouse) ---- */
.si-drop { margin: 10px 0; padding: 18px 14px; border: 1.5px dashed color-mix(in srgb, var(--peach) 70%, transparent); border-radius: var(--radius-lg);
  background: var(--peach-light); text-align: center; transition: background 150ms, border-color 150ms; }
.si-root.is-dragover .si-drop { border-color: var(--peach-strong); background: color-mix(in srgb, var(--peach-light) 70%, var(--peach) 30%); }
button.si-choose { width: 100%; min-height: 48px; margin: 0; }
.si-drop-hint { margin: 8px 0 0 !important; color: var(--text-secondary); font-size: 12.5px; }
@media (hover: hover) and (pointer: fine) { .si-drop { cursor: pointer; } }
@media (pointer: coarse) { .si-drop-hint { display: none; } }
.si-reading { display: flex; align-items: center; gap: 10px; margin: 18px 0 !important; font-size: 14.5px; font-weight: 700; }
.si-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.si-file .si-note { margin: 0; }

/* ---- The unit question (asked once per file) ---- */
.si-unit { margin: 10px 0; padding: 12px; border-radius: 16px; background: var(--peach-light); }
.si-unit-q { margin: 0 0 10px !important; font-size: 15px; font-weight: 800; line-height: 1.4; }
.si-unit-q b { white-space: nowrap; color: var(--peach-strong); }
.si-unit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.si-unit-btns button { flex: 1 1 130px; min-height: 48px; margin: 0; }
.si-suggest { font-size: 12px; font-weight: 600; opacity: 0.85; }
.si-unit-set { font-size: 13.5px; color: var(--text-secondary); }
.si-unit-set b { color: var(--text-primary); white-space: nowrap; }

/* ---- One month ---- */
.si-month { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--diary-line); }
.si-month-title { margin: 0; font-size: 17px; font-weight: 800; }
.si-month-title:focus { outline: none; }
.si-month-title:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; }
.si-recon { margin: 8px 0 2px !important; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); font-size: 14px; font-weight: 800; line-height: 1.4; }
.si-recon.is-ok { background: var(--accent-light); color: var(--accent-strong); }
.si-recon.is-bad { background: #FFF4E5; color: #6B3F00; }
.si-recon.is-bad p { margin: 0 0 4px; }
.si-recon.is-bad .si-note { color: #6B3F00; font-weight: 600; }
.si-recon-why { font-size: 12.5px; font-weight: 700; }
.si-recon-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; }
.si-recon-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid rgba(107, 63, 0, 0.15); }
.si-recon-list li span { min-width: 0; overflow-wrap: anywhere; }
.si-recon-list li b { flex: none; white-space: nowrap; }
.si-counts { font-size: 13px; font-weight: 700; color: var(--text-secondary); line-height: 1.45; }
.si-sec { margin: 14px 0 6px; font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.si-sec-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.si-sec-row .si-sec { margin-bottom: 2px; }
.si-sec-row .link-btn { font-size: 13px; }

/* ---- Rows: ₫ cue · raw description (wraps) · amount (never wraps) ---- */
.si-cue { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--peach-light); color: var(--peach-strong); font-size: 13px; font-weight: 800; line-height: 1; }
.si-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.si-desc { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.si-desc.is-none { color: var(--text-secondary); font-style: italic; font-weight: 600; }
.si-sub { color: var(--text-secondary); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.si-amt { flex: none; margin-left: 4px; font-size: 14px; font-weight: 800; white-space: nowrap; text-align: right; }
.si-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; padding: 0; list-style: none; }
.si-chips:empty { display: none; }
.si-chip { padding: 1px 8px; border-radius: 999px; background: var(--yellow-light); color: var(--diary-ink-yellow, #6B4E00); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.si-chip.is-clipped, .si-chip.is-hidden_row { background: var(--sky-light); color: var(--diary-ink-sky, #1F5F86); }
.si-chip.is-already { background: var(--accent-light); color: var(--accent-strong); }
.si-chip.is-dup, .si-chip.is-bad { background: var(--coral-light); color: var(--diary-ink-coral, #8A3522); }
.si-clip, .si-dupnote { color: var(--text-secondary); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }

/* The ready list, by day: a whole row is the tick's label (48 px tall at least). */
.si-day-title { margin: 12px 0 0; color: var(--text-secondary); font-size: 12.5px; font-weight: 800; }
.si-list { margin: 0; padding: 0; list-style: none; }
.si-row { border-top: 1px solid var(--diary-line); }
.si-row:first-child { border-top: none; }
.si-tick { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 7px 2px; cursor: pointer; }
.si-tick input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.si-tick input:disabled { cursor: default; }
.si-row.is-off .si-desc, .si-row.is-off .si-amt { opacity: 0.55; }
.si-row.is-off .si-amt { text-decoration: line-through; }
.si-row.is-already .si-tick { cursor: default; }

/* "Needs you": one card per item — what the file says, why it is here, the fix, and the choice. */
.si-review { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.si-item { padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--diary-line); }
.si-item.is-confirmed { box-shadow: inset 0 0 0 2px var(--accent); }
.si-item.is-needs_review { box-shadow: inset 0 0 0 2px var(--yellow); }
.si-item.is-skip .si-item-top { opacity: 0.6; }
.si-item-top { display: flex; align-items: flex-start; gap: 8px; }
.si-item > .si-dupnote { margin: 6px 0 0; } /* a deleted import whose purchase is live under another key */
.si-clipbox { display: grid; gap: 2px; margin: 6px 0 0 !important; padding: 6px 8px; border-radius: 10px; background: var(--surface); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.si-fix { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.si-label { display: block; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
.si-field { display: flex; flex: 1 1 120px; flex-direction: column; gap: 3px; min-width: 0; }
.si-field.is-amount { flex-basis: 120px; } /* 10+ digits stay whole; on a 320 px phone the two fields take a line each */
.si-field.is-date { flex-basis: 150px; } /* a whole dd/mm/yyyy beside its calendar button, also at 320 px */
.si-field input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin: 0; background-color: var(--surface); }
.si-kinds, .si-readings { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 6px; }
.si-kinds .si-label, .si-readings .si-label { flex: 1 1 100%; }
.si-root .chip { margin: 0; }
.si-root .chip:disabled { opacity: 0.45; cursor: default; }
.si-root .chip:focus-visible, .si-tick input:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.si-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.si-acts .chip { flex: 1 1 auto; }
.si-problem { margin: 6px 0 0 !important; color: #A4231B; font-size: 12.5px; font-weight: 700; }

/* A later file's corrections (only rows the user never edited): before → after; once applied, an Undo */
.si-upd { margin: 10px 0; padding: 8px 12px 12px; border-radius: 14px; background: var(--sky-light); }
.si-upd .si-sec { margin-top: 4px; }
.si-upd .si-row { border-top-color: color-mix(in srgb, var(--sky-ink) 20%, transparent); }
.si-upd-done .si-row { padding: 6px 2px; }
.si-upd-done .si-row.is-off .si-desc { opacity: 0.6; text-decoration: line-through; }
button.si-upd-btn { width: 100%; min-height: 44px; margin: 6px 0 0; }

/* Imported, then deleted: each comes back only through its own unticked "Nhập lại" — the same row, this
   file's values; what it held before is shown under it ("trước khi xoá: 45 ₫"). */
.si-gone { margin: 10px 0; padding: 8px 12px 10px; border-radius: 14px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--diary-line); }
.si-gone .si-sec { margin-top: 4px; }
.si-gone .si-review { margin-top: 6px; }
.si-gone .si-item { background: var(--surface); }
.si-re { align-self: flex-start; margin-bottom: 2px; padding: 0 8px; border-radius: 999px; background: var(--peach-light); color: var(--peach-strong); font-size: 11.5px; font-weight: 800; line-height: 1.6; }
.si-was { color: var(--text-secondary); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }

/* ---- The sticky foot: the live Ăn uống check, what will happen, the one save button ---- */
.si-foot .si-live { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.si-foot .si-live:empty { display: none; }
.si-live-line { display: block; }
.si-live-line.is-ok { color: var(--accent-strong); }
.si-foot .si-plan { margin: 0 0 8px; color: var(--text-secondary); font-size: 12.5px; }
.si-foot button:disabled { opacity: 0.5; }
.si-progress { display: block; width: 100%; height: 8px; margin: 2px 0 8px; accent-color: var(--accent); }
.si-result { margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--accent-light); }
.si-result-line { font-size: 16px; line-height: 1.4; }
.si-fail { margin: 12px 0; padding: 10px 12px; border-radius: 14px; background: #FFF4E5; color: #6B3F00; font-size: 14px; }
.si-fail .si-note { color: #6B3F00; }

/* Touch: 44 px targets. Narrow phones (320–380 px): a little tighter, still no sideways scroll. */
@media (pointer: coarse) { .si-root .chip, .si-root .link-btn { min-height: 44px; } }
@media (max-width: 380px) {
  .si-item { padding: 8px 10px; }
  .si-desc { font-size: 14px; }
  .si-amt { font-size: 13.5px; }
  .si-fix { gap: 6px 8px; }
}
html[data-motion="reduced"] .si-root .progress-dot, html[data-motion="off"] .si-root .progress-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .si-drop { transition: none; } }