/* Προβολή φωτογραφιών αποδείξεων (saas_expense_photo_viewer.js) + μικρογραφία στις γραμμές των καρτών.
   Χωρίς σταθερό χρώμα φόντου σελίδας: η προβολή είναι επικάλυψη, οι επιφάνειες είναι λευκές κάρτες. */

/* ── Μικρογραφία 52×64 στη γραμμή του φακέλου ── */
.cfxph-thumb { flex: 0 0 52px; width: 52px; height: 64px; object-fit: cover; border: 1px solid #E2E8F0; border-radius: 8px; background: #F1F5F9; display: block; }
.cfxph-thumb-empty { background: #fff; }
/* Με τη μικρογραφία η γραμμή χωράει όνομα + ποσό σε μία σειρά ακόμα και στα 320px· το «Δεν έχει σταλεί» κατεβαίνει. */
.cfxfin-row[data-kind="folder"] .cfxfin-row-main { flex-basis: 110px; }
.cfxph-tap { cursor: pointer; }
.cfxph-tap:hover { background: #F8FAFC; }
.cfxph-tap:focus-visible { outline: 2px solid #1D6FD8; outline-offset: 2px; }

/* ── Προβολή ── */
.cfxph-root { position: fixed; inset: 0; z-index: 10100; background: rgba(15, 23, 42, .9); display: flex; justify-content: center; font-family: inherit; color: #0F172A; box-sizing: border-box; }
.cfxph-root * { box-sizing: border-box; }
.cfxph-box { display: flex; flex-direction: column; width: 100%; max-width: 960px; height: 100%; }
.cfxph-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #E2E8F0; }
.cfxph-top-txt { flex: 1 1 auto; min-width: 0; }
.cfxph-title { font-weight: 700; font-size: 1rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfxph-sub { font-size: .85rem; color: #475569; }
.cfxph-x { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: #0F172A; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cfxph-x:disabled { color: #CBD5E1; cursor: default; }

.cfxph-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.cfxph-stage.cfxph-zoomed { cursor: grab; }
.cfxph-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; -webkit-user-drag: none; }
.cfxph-empty { color: #fff; font-size: 1rem; padding: 24px; text-align: center; cursor: default; }

.cfxph-msg { padding: 10px 12px; background: #FEF2F2; color: #B91C1C; border-top: 1px solid #FECACA; font-size: .9rem; font-weight: 600; }

.cfxph-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #E2E8F0; }
.cfxph-btn { flex: 1 1 120px; max-width: 220px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; color: #1D6FD8; font-weight: 700; font-size: .95rem; cursor: pointer; }
.cfxph-btn:disabled { color: #CBD5E1; cursor: default; }
.cfxph-primary { background: #1D6FD8; border-color: #1D6FD8; color: #fff; }
.cfxph-primary:disabled { background: #93B8EC; border-color: #93B8EC; color: #fff; }
.cfxph-file { display: none; }

@media (max-width: 600px) {
  .cfxph-btn { flex-basis: 96px; padding: 0 8px; font-size: .9rem; }
}