/* expenses app styles (use the tokens from admin.css: --panel, --line, --ink, --muted, --brand, --accent, --ok, --warn, --danger, --info + their -soft variants; logical properties for RTL) */
.exp-page { --exp: #f39c12; }
.exp-desc { display: grid; line-height: 1.3; min-width: 0; }
.exp-desc b, .exp-desc small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.exp-desc.link:hover b { color: var(--accent-d); text-decoration: underline; }
.exp-st { display: grid; gap: 4px; justify-items: start; }
.exp-row-action td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
[dir="rtl"] .exp-row-action td:first-child { box-shadow: inset -3px 0 0 var(--warn); }
.exp-catname { display: inline-flex; align-items: center; gap: 8px; }
.exp-catname .ico { color: var(--exp); }

/* receipts */
.exp-mini { padding: 0; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); cursor: zoom-in; }
.exp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-receipt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.exp-camera { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 22px 16px; border: 2px dashed color-mix(in srgb, var(--exp) 55%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--exp) 7%, var(--panel)); color: var(--ink); font: inherit; cursor: pointer; min-height: 120px; align-content: center; }
.exp-camera:hover { border-color: var(--exp); background: color-mix(in srgb, var(--exp) 12%, var(--panel)); }
.exp-camera .ico { color: var(--exp); }
.exp-thumb { padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; width: 140px; height: 140px; background: var(--panel-2); cursor: zoom-in; flex: 0 0 auto; }
.exp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-thumb-actions { display: grid; gap: 8px; justify-items: start; }
.exp-preview { display: grid; place-items: center; background: var(--panel-3); border-radius: var(--r-sm); padding: 8px; }
.exp-preview img { max-width: 100%; max-height: 70vh; border-radius: 8px; }

/* quick form */
.exp-quick-page { max-width: 720px; }
.exp-quick { display: grid; gap: 18px; padding: 18px; }
.exp-q-sec { display: grid; gap: 8px; min-width: 0; }
.exp-q-sec.invalid > .exp-lbl { color: var(--danger-ink); }
.exp-q-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.exp-lbl { font-weight: 700; font-size: 13px; color: var(--muted); }
.exp-lbl .req { color: var(--danger-ink); }
.exp-amount { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.exp-amount:focus-within { border-color: var(--exp); background: var(--panel); }
.exp-amount-in { flex: 1; min-width: 0; border: 0; background: transparent; font-size: clamp(30px, 9vw, 44px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); padding: 6px 0; outline: none; width: 100%; text-align: start; }
.exp-cur { color: var(--muted); font-weight: 700; font-size: 16px; }
.exp-vat-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink); font-size: 13.5px; }
.exp-vat-line:empty { display: none; }
.exp-vat-line .ico { color: var(--ok-ink); }
.exp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.exp-cat { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; cursor: pointer; }
.exp-cat .ico { color: var(--muted); }
.exp-cat:hover { border-color: var(--exp); }
.exp-cat.on { border-color: var(--exp); background: color-mix(in srgb, var(--exp) 14%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--exp) 35%, transparent); }
.exp-cat.on .ico { color: var(--exp); }
.exp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exp-seg-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1.2; cursor: pointer; text-align: center; }
.exp-seg-b.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.exp-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; cursor: pointer; }
.exp-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.exp-tax-box { display: grid; gap: 12px; margin-top: 8px; }
.exp-tax-box:empty { display: none; }
.exp-more { border-top: 1px solid var(--line); padding-top: 12px; }
.exp-more summary { cursor: pointer; font-weight: 700; color: var(--accent-d); min-height: 32px; display: flex; align-items: center; }
.exp-more-body { display: grid; gap: 14px; padding-top: 12px; }
.exp-q-bar { position: sticky; inset-block-end: 0; z-index: 5; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.exp-q-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exp-q-actions .btn { min-height: 44px; }
.exp-q-actions .btn-lg { flex: 1 1 160px; justify-content: center; }

/* report page */
.exp-rep-who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.exp-rep-meta { display: grid; gap: 2px; }
.exp-mode { display: grid; gap: 8px; }
.exp-radio { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-weight: 600; }
.exp-radio input { accent-color: var(--accent); width: 18px; height: 18px; }
.exp-pick { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.exp-pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.exp-pick-row:hover { background: var(--panel-2); }
.exp-pick-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.exp-pick-main { display: grid; flex: 1; min-width: 0; }

/* dashboard */
.exp-recent { list-style: none; margin: 0; padding: 0; display: grid; }
.exp-recent li + li { border-top: 1px solid var(--line-2); }
.exp-recent a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: inherit; }
.exp-recent a:hover { background: var(--panel-2); }
.exp-recent-main { flex: 1; min-width: 0; display: grid; }
.exp-recent-main b, .exp-recent-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-fab { display: none; }
.exp-an-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.exp-an { display: grid; gap: 16px; }

@media (max-width: 720px) {
  .exp-page .grid-dash { grid-template-columns: 1fr; }
  .exp-page .grid-dash .span-2, .exp-page .grid-dash .span-3 { grid-column: auto; }
  .exp-quick { padding: 14px; border-radius: var(--r); }
  .exp-seg { grid-template-columns: 1fr; }
  .exp-thumb { width: 112px; height: 112px; }
  .exp-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; inset-inline-end: 16px; inset-block-end: calc(76px + env(safe-area-inset-bottom)); z-index: 20; padding: 0 18px; min-height: 52px; border-radius: 999px; background: var(--exp); color: #1d1405; font-weight: 800; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); }
  .exp-quick-page .exp-q-bar { inset-block-end: calc(60px + env(safe-area-inset-bottom)); padding-block-end: 8px; }
}