/* المصاريف والمشتريات اليومية — mobile first, RTL */
.xp-bar { flex-wrap: wrap; }
.xp-badge {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-inline-start: 6px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; line-height: 18px; text-align: center;
}
.pill.xp-pending { background: rgba(245,166,35,.18); color: var(--warn); }
.pill.xp-needs_edit { background: rgba(59,130,246,.18); color: #60a5fa; }
.pill.xp-rejected { background: rgba(229,72,77,.18); color: var(--danger); }
.pill.xp-approved { background: rgba(23,185,120,.18); color: var(--ok); }

.xp-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 720px) { .xp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .xp-filters .xp-grid { grid-template-columns: repeat(3, 1fr); } }
.xp-inline { display: flex; gap: 8px; }
.xp-inline .btn { flex: 0 0 auto; }
.xp-err { color: var(--danger); margin-bottom: 8px; min-height: 1em; }
.xp-kpis { margin: 14px 0; }
@media (min-width: 720px) { .xp-kpis { grid-template-columns: repeat(3, 1fr); } }
.xp-cols { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 980px) { .xp-cols { grid-template-columns: repeat(3, 1fr); } }

.xp-upload label.btn { flex: 1 1 160px; text-align: center; }
.xp-preview { margin-top: 10px; }
.xp-thumb { display: block; max-width: 100%; max-height: 320px; margin: 0 auto 8px; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; background: #fff; }
.xp-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }

.xp-item { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.xp-item-main { flex: 1; min-width: 0; }
.xp-item .name, .xp-head .name { font-weight: 700; overflow-wrap: anywhere; }
.xp-item .amount, .xp-head .amount { font-weight: 800; text-align: end; white-space: nowrap; }
.xp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.xp-note { border-inline-start: 4px solid var(--line); }
.xp-note.warn { border-inline-start-color: #60a5fa; }
.xp-note.bad { border-inline-start-color: var(--danger); }
.xp-note.ok { border-inline-start-color: var(--ok); }

.xp-dl { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: 8px 12px; }
.xp-dl .k { color: var(--muted); font-size: .85rem; }
.xp-dl .v { overflow-wrap: anywhere; }
.xp-history { list-style: none; margin: 0; padding: 0; }
.xp-history li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.xp-history li:last-child { border-bottom: 0; }
.xp-review { border-color: var(--brand); }

.xp-modal { position: fixed; inset: 0; z-index: 100; background: rgba(5,10,15,.94); display: flex; flex-direction: column; }
.xp-modal-bar { display: flex; gap: 8px; padding: 10px calc(10px + env(safe-area-inset-right,0)) 10px 10px; padding-top: calc(10px + env(safe-area-inset-top,0)); }
.xp-modal-bar .spacer { flex: 1; }
.xp-modal-body { flex: 1; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.xp-modal-body img { display: inline-block; background: #fff; cursor: zoom-in; }

/* MAJHAD BY identity — original logo, proportions preserved (never stretched) */
.brand-logo { height: 40px; width: auto; aspect-ratio: 1125 / 798; object-fit: contain; border-radius: 8px; background: #000; flex: 0 0 auto; display: block; }
.login-hero { text-align: center; margin: 8px 0 16px; }
.login-hero img { width: min(320px, 80%); height: auto; border-radius: 14px; background: #000; display: inline-block; }
.splash { min-height: 70vh; display: grid; place-items: center; background: #000; }
.splash img { width: min(360px, 70vw); height: auto; }

/* Narrow phones: let the top bar wrap instead of overflowing the screen */
@media (max-width: 560px) {
  .appbar { flex-wrap: wrap; row-gap: 8px; }
  .appbar .spacer { flex-basis: 0; }
}
@media (max-width: 560px) {
  table.mini { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Trial copy warning (shown on every screen while the server runs as a trial) */
.trial-banner { position: sticky; top: 0; z-index: 40; background: #8a5a00; color: #fff; text-align: center; font-weight: 700; font-size: .9rem; padding: 6px 12px; }