/* 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); }

/* warnings: over the limit, possible duplicate (they never block; the approver gets the stronger look) */
.exp-st-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exp-flags { display: inline-flex; align-items: center; gap: 4px; }
.exp-flag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); cursor: help; }
.exp-flag.dup { background: var(--info-soft); color: var(--info-ink); }
.exp-warns { display: grid; gap: 8px; margin-bottom: 14px; }
.exp-warns .hr-warn { margin: 0; align-items: flex-start; }
.exp-warns.deciding .hr-warn { border-width: 2px; border-color: var(--warn); font-size: 14px; }
.exp-dups { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.exp-dups li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.exp-page .hr-note, .exp-page > small.muted { margin-bottom: 12px; }
.exp-page > small.muted { display: block; }
.exp-payroll { margin-top: 14px; padding: 14px 18px; }
.exp-payroll .exp-check { align-items: flex-start; }
.exp-payroll .exp-check span { display: grid; gap: 2px; }
.exp-fails { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exp-fails li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }

/* category form: limits per job position */
.exp-limits { display: grid; gap: 8px; }
.exp-limit-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
.exp-limits .btn { justify-self: start; }

/* 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.exp-seg-sm { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }   /* Cash / Bank in a dialog: side by side, also on a phone */
.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-sec .date-box { width: 100%; }   /* the Arabic date box fills its field like the English date input */
.exp-q-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exp-q-actions .btn { min-height: 44px; }

/* 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:not(.exp-seg-sm) { 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); }
}