/* ===== /Trips/Expenses page shell ===== */
.jn-expenses-container { max-width: 720px; margin: 0 auto; padding: 28px 20px 100px; }
.jn-expenses-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.jn-trip-title { font-size: var(--jn-fs-2xl); font-weight: var(--jn-fw-bold); margin: 0 0 6px; }
.jn-trip-meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--jn-text-secondary); }
.jn-trip-meta-sep { color: var(--jn-border-strong); }

.jn-expense-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.jn-summary-card { background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-lg); padding: 16px; text-align: center; }
.jn-summary-label { font-size: 12px; color: var(--jn-text-tertiary); margin-bottom: 6px; }
.jn-summary-value { font-size: 20px; font-weight: var(--jn-fw-bold); }

.jn-category-bars { background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-lg); padding: 16px 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.jn-category-bar-row { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 10px; font-size: 13px; }
.jn-category-bar-label { display: flex; align-items: center; gap: 6px; color: var(--jn-text-secondary); white-space: nowrap; }
.jn-category-bar-track { height: 8px; background: var(--jn-surface-alt); border-radius: var(--jn-radius-pill); overflow: hidden; }
.jn-category-bar-fill { height: 100%; background: var(--jn-primary); border-radius: var(--jn-radius-pill); }
.jn-category-bar-value { text-align: right; font-weight: 600; white-space: nowrap; }

.jn-settlement-panel { background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-lg); padding: 16px 18px; margin-bottom: 20px; }
.jn-settlement-panel h2 { font-size: 15px; margin: 0 0 10px; }
.jn-settlement-clear { color: var(--jn-success); font-weight: 600; display: flex; align-items: center; gap: 6px; margin: 0; }
.jn-settlement-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.jn-settlement-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--jn-surface-alt); border-radius: var(--jn-radius-md); }
/* Deliberately NOT .jn-btn-secondary -- that class's background
   (var(--jn-surface-alt)) is the exact same colour as this row's own
   background above, so the button visually disappeared into plain text
   (2026-09-09 feedback: "looks like it's already marked settled"). A
   bordered pill in the primary colour, on the row's contrasting surface,
   reads unambiguously as a tappable action instead. */
.jn-settlement-mark-btn { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; background: var(--jn-surface); border: 1.5px solid var(--jn-primary); color: var(--jn-primary-hover); padding: 8px 14px; border-radius: var(--jn-radius-pill); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.jn-settlement-mark-btn:hover { background: var(--jn-primary-light); }
.jn-settlement-mark-btn:disabled { opacity: 0.5; cursor: default; }

.jn-settlement-history { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--jn-border); }
.jn-settlement-history h3 { font-size: 13px; font-weight: 700; color: var(--jn-text-tertiary); margin: 0 0 8px; }
.jn-settlement-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.jn-settlement-history-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px; color: var(--jn-text-secondary); }
.jn-settlement-history-list li i { color: var(--jn-success); margin-right: 4px; }

.jn-expenses-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.jn-expenses-list-header h2 { font-size: 16px; margin: 0; }

.jn-expenses-empty { text-align: center; padding: 60px 20px; color: var(--jn-text-tertiary); }
.jn-expenses-empty i { font-size: 32px; margin-bottom: 10px; display: block; }

.jn-expense-day-group { margin-bottom: 18px; }
.jn-expense-day-heading { font-size: 12.5px; font-weight: var(--jn-fw-bold); color: var(--jn-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }

.jn-expense-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-md); margin-bottom: 8px; }
.jn-expense-row-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--jn-primary-light); color: var(--jn-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.jn-expense-row-main { flex: 1; min-width: 0; }
.jn-expense-row-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jn-expense-row-stop { font-size: 12px; color: var(--jn-text-tertiary); font-weight: 400; display: inline-flex; align-items: center; gap: 3px; }
.jn-expense-row-sub { font-size: 12.5px; color: var(--jn-text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jn-expense-receipt-link { color: var(--jn-primary); }
.jn-expense-row-amount { text-align: right; flex-shrink: 0; }
.jn-expense-row-home { font-weight: var(--jn-fw-bold); font-size: 15px; }
.jn-expense-row-original { font-size: 11.5px; color: var(--jn-text-tertiary); }
.jn-expense-row-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* .jn-icon-btn in trips.css is 28x28 -- fine for a mouse, too small to hit
   reliably while walking. Every actionable element in the expense UI uses
   this 44px variant instead. */
.jn-icon-btn-lg { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--jn-text-secondary); border-radius: var(--jn-radius-md); cursor: pointer; font-size: 16px; flex-shrink: 0; }
.jn-icon-btn-lg:hover { background: var(--jn-surface-alt); }

/* Floating "記一筆" entry point -- also loaded by Detail.cshtml for the FAB
   there, so both pages share one definition instead of duplicating it into
   planner.css the way most components in this app are duplicated per
   stylesheet. z-index sits below .jn-modal-overlay's 100/1000 so opening the
   modal always covers it. */
/* An icon-only circle read as unlabelled to anyone who hadn't already learned
   what it does (2026-09-09 feedback) -- widened into a pill with its own
   label instead of staying a fixed-size circle, so the text always has room
   regardless of length. */
/* bottom stacks the safe-area/minimum margin on top of the fixed, bottom-
   docked .jn-interest-panel's real height (--jn-interest-panel-space, kept
   in sync by applyInterestPanelCollapseState in Detail.cshtml) so the button
   never sits underneath it, collapsed or expanded. */
.jn-fab { position: fixed; right: 20px; bottom: calc(var(--jn-interest-panel-space, 80px) + max(24px, env(safe-area-inset-bottom))); height: 52px; padding: 0 20px 0 18px; border-radius: var(--jn-radius-pill); background: var(--jn-primary); color: #fff; border: none; box-shadow: var(--jn-shadow-lg); display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; font-family: inherit; white-space: nowrap; cursor: pointer; z-index: 90; }
.jn-fab i { font-size: 19px; }
.jn-fab:hover { background: var(--jn-primary-hover); }

/* ===== Quick-add / edit form ===== */
.jn-expense-form { gap: 16px; }
.jn-expense-amount-row { display: flex; gap: 8px; }
/* Large, right-aligned display -- the actual value lives in a hidden input
   (see [data-amount-hidden]) and is typed via the on-screen keypad below
   rather than this being a native input, so tapping it never summons the
   OS keyboard. */
.jn-expense-amount-display { flex: 1; min-width: 0; font-size: 32px; font-weight: var(--jn-fw-bold); padding: 14px; border: 1.5px solid var(--jn-border); border-radius: var(--jn-radius-md); text-align: right; background: var(--jn-surface-alt); color: var(--jn-text); overflow-x: auto; white-space: nowrap; user-select: none; }
.jn-expense-currency-select { width: 96px; font-size: 16px; font-weight: 600; padding: 0 8px; border: 1.5px solid var(--jn-border); border-radius: var(--jn-radius-md); background: var(--jn-surface); }
.jn-expense-converted-hint { font-size: 13px; color: var(--jn-text-tertiary); text-align: right; min-height: 18px; }

/* On-screen keypad -- 4 columns, 16 single-cell buttons filling the first 4
   rows exactly, backspace + equals sharing the 5th row at 2 columns each. */
.jn-calculator { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jn-calc-btn { min-height: 48px; border: none; border-radius: var(--jn-radius-md); background: var(--jn-surface-alt); color: var(--jn-text); font-size: 18px; font-weight: 600; cursor: pointer; font-family: inherit; }
.jn-calc-btn:active { background: var(--jn-border); }
.jn-calc-btn-op { background: var(--jn-primary-light); color: var(--jn-primary-hover); }
.jn-calc-btn-clear { background: var(--jn-danger-bg); color: var(--jn-danger); }
.jn-calc-btn-backspace { grid-column: span 2; }
.jn-calc-btn-equals { grid-column: span 2; background: var(--jn-primary); color: #fff; }
.jn-expense-rate-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.jn-expense-rate-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--jn-border); border-radius: var(--jn-radius-md); font-family: inherit; }

/* Category / payer chips -- large tap targets, no dropdown to open on a
   screen that's easy to fumble one-handed. */
.jn-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* flex-shrink:0 + nowrap matter on a real phone width: without them, a flex
   row with more chips than fit on one line shrinks each chip below its own
   content width instead of wrapping whole chips to the next line -- and
   because CJK text can break between ANY two characters (no space needed,
   unlike Latin text), a squeezed chip wraps its label under the icon instead
   of just getting narrower, turning the pill into a broken-looking circle
   (2026-10-14 feedback, seen first on the share-ledger's copy of this rule). */
.jn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; border-radius: var(--jn-radius-pill); background: var(--jn-surface-alt); color: var(--jn-text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; user-select: none; flex-shrink: 0; white-space: nowrap; }
.jn-chip.is-selected { background: var(--jn-primary-light); color: var(--jn-primary-hover); border-color: var(--jn-primary); }

.jn-split-mode-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.jn-split-participants { display: flex; flex-direction: column; gap: 8px; }
.jn-split-participant-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--jn-surface-alt); border-radius: var(--jn-radius-md); }
.jn-split-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; flex: 1; }
.jn-split-checkbox input { width: 20px; height: 20px; accent-color: var(--jn-primary); cursor: pointer; }
.jn-split-participant-row input[data-custom-share] { width: 100px; padding: 8px 10px; border: 1.5px solid var(--jn-border); border-radius: var(--jn-radius-sm); font-family: inherit; text-align: right; }
.jn-split-participant-row input[data-custom-share]:disabled { opacity: 0.4; }

.jn-receipt-picker { display: flex; align-items: center; gap: 10px; }
.jn-receipt-preview { position: relative; width: 72px; height: 72px; border-radius: var(--jn-radius-md); overflow: hidden; flex-shrink: 0; }
.jn-receipt-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jn-receipt-preview .jn-icon-btn-lg { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; background: var(--jn-surface); box-shadow: var(--jn-shadow-sm); color: var(--jn-danger); }
.jn-receipt-upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 44px; border: 1.5px dashed var(--jn-border); border-radius: var(--jn-radius-md); font-size: 13.5px; font-weight: 600; color: var(--jn-text-secondary); cursor: pointer; }
.jn-receipt-uploading { font-size: 13px; color: var(--jn-text-tertiary); }

.jn-participant-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.jn-participant-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--jn-surface-alt); border-radius: var(--jn-radius-md); font-size: 14px; }

/* New-participant and per-currency-rate rows: label (rate rows only) + input
   + button side by side. trips.css's .jn-field-row is a 2-column grid built
   for exactly two children (date/time, currency pairs) -- a 3-item rate row
   forced into it overflows to a second implicit row, which is what was
   stacking label/input/button on top of each other instead of side by side.
   A dedicated flex row fits any number of children and, since it isn't
   scoped to .jn-field, is also where the input itself finally gets the same
   rounded border every other input in the app has (it fell back to bare
   browser chrome before, having no .jn-field ancestor to inherit style from). */
.jn-inline-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.jn-inline-input-row > label { flex-shrink: 0; min-width: 40px; font-size: 13px; font-weight: 600; color: var(--jn-text-secondary); }
.jn-inline-input-row > input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--jn-border);
  border-radius: var(--jn-radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--jn-surface);
  color: var(--jn-text);
}
.jn-inline-input-row > input:focus { outline: none; border-color: var(--jn-primary); }
.jn-inline-input-row > button { flex-shrink: 0; }

@media (max-width: 767.98px) {
  .jn-expenses-container { padding: 16px 14px 100px; }
  .jn-expense-summary { grid-template-columns: 1fr 1fr; }
  .jn-summary-card:first-child { grid-column: 1 / -1; }
  .jn-category-bar-row { grid-template-columns: 68px 1fr 76px; font-size: 12px; }
  .jn-expense-amount-display { font-size: 28px; }
  .jn-calc-btn { min-height: 44px; font-size: 16px; }
}