/* FaraSync — «گردش پول» (Money Flow) tab, v1.0.0.
 * Scoped under .farasync-mf-*; tokens come from admin.css variables. */

/* ---------------- callout ---------------- */
.farasync-mf-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 14px;
    border: 1px solid var(--farasync-warning);
    border-inline-start-width: 4px;
    border-radius: var(--farasync-radius);
    background: #fdf8ec;
}
/* v1.0.0 (user report): display:flex DEFEATS the hidden attribute —
   the amber callout rendered even with zero pending items. Same armor
   pattern as .farasync-fchip-pop in admin.css (v1.0.0). */
.farasync-mf-callout[hidden] {
    display: none;
}
.farasync-mf-callout-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--farasync-warning);
    color: #fff;
}
.farasync-mf-callout-ic svg { width: 18px; height: 18px; display: block; }
.farasync-mf-callout-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.farasync-mf-callout-t b { font-size: 13.5px; color: var(--farasync-text); }
.farasync-mf-callout-t small { color: var(--farasync-text-muted); font-size: 12px; line-height: 1.8; }
.farasync-mf-callout .button { flex: 0 0 auto; }

/* ---------------- stat cards ----------------
 * v1.0.0 (user request): the four cards adopt the dashboard's
 * «روند رزروها (۳۰ روز گذشته)» theme (admin-command-center.css v1.0.0 #3):
 * pastel surface + tinted border + 3px top accent bar (999px pill) +
 * colored value, ALL centered, muted label — one hue per card.
 * Hue map: شارژ تاییدشده=green (confirmed), مجموع کسرها=red (released),
 * در انتظار تایید=amber (near limit), موجودی نقدی=indigo (new). */
.farasync-mf-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}
.farasync-mf-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-height: 86px;
    padding: 15px 12px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    box-shadow: none;
    overflow: hidden;
}
.farasync-mf-stat::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    border-radius: 999px;
}
.farasync-mf-stat-val {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.farasync-mf-stat-lbl {
    display: block;
    width: 100%;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #64748b !important;
}
.farasync-mf-stat-sub { font-size: 11px; color: #94a3b8; }
/* hue — شارژ تاییدشده: green (reservations «confirmed» card) */
.farasync-mf-stat.is-in { background: #ecfdf5; border-color: #c8ecdb; }
.farasync-mf-stat.is-in::before { background: #10b981; }
.farasync-mf-stat.is-in .farasync-mf-stat-val { color: #047857; }
/* hue — مجموع کسرها: red (reservations «released/expired» card) */
.farasync-mf-stat.is-out { background: #fef2f2; border-color: #fadcdc; }
.farasync-mf-stat.is-out::before { background: #ef4444; }
.farasync-mf-stat.is-out .farasync-mf-stat-val { color: #b91c1c; }
/* hue — در انتظار تایید شما: amber (same family — keys-health «near limit») */
.farasync-mf-stat.is-warn { background: #fffbeb; border-color: #fdeec6; }
.farasync-mf-stat.is-warn::before { background: #f59e0b; }
.farasync-mf-stat.is-warn .farasync-mf-stat-val { color: #b45309; }
/* hue — موجودی نقدی کل: indigo (reservations «new» card) */
.farasync-mf-stat.is-bal { background: #eef2ff; border-color: #dbe3fb; }
.farasync-mf-stat.is-bal::before { background: #6366f1; }
.farasync-mf-stat.is-bal .farasync-mf-stat-val { color: #4338ca; }

/* ---------------- toolbar ---------------- */
.farasync-mf-toolbar { align-items: flex-end; }
/* v1.0.0: the quick-range buttons (امروز / ۷ روز / ۳۰ روز / همه) are REMOVED
   (user request) — their .farasync-mf-quick rules went with them. */
.farasync-mf-toolbar .farasync-toolbar-actions { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.farasync-mf-toolbar .farasync-toolbar-actions form { display: inline-flex; margin: 0; }

/* limits gear popover */
.farasync-mf-gear-wrap { position: relative; display: inline-flex; }
.farasync-mf-gear-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 30;
    width: 300px;
    padding: 14px;
    background: var(--farasync-surface);
    border: 1px solid var(--farasync-border-strong);
    border-radius: var(--farasync-radius-lg);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
/* v1.0.0 (user report): the «محدودهٔ شارژ کیف پول» popover was ALWAYS
   open — display:flex on the base rule overrode the hidden attribute.
   Armor: the attribute wins again. Closed by default, gear-click toggles. */
.farasync-mf-gear-pop[hidden] {
    display: none;
}
.farasync-mf-gear-pop b { font-size: 13px; color: var(--farasync-text); }
.farasync-mf-gear-pop small { color: var(--farasync-text-muted); font-size: 11px; margin-top: -4px; }
.farasync-mf-gear-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--farasync-text-muted); }
.farasync-mf-gear-pop input[type="text"],
.farasync-mf-gear-pop input[type="number"] { width: 100%; }
.farasync-mf-gear-pop .button { align-self: flex-start; }
.farasync-mf-gear-msg { font-size: 11.5px; min-height: 16px; }
.farasync-mf-gear-msg.is-ok { color: var(--farasync-success); }
.farasync-mf-gear-msg.is-error { color: var(--farasync-danger); }

/* ---------------- table ---------------- */
.farasync-mf-table { margin-top: 2px; }
.farasync-mf-txid { font-family: var(--farasync-mono); font-size: 12px; font-weight: 600; color: var(--farasync-primary); cursor: pointer; }
.farasync-mf-txid:hover { text-decoration: underline; }
.farasync-mf-rep-nm { font-weight: 600; font-size: 12.5px; color: var(--farasync-text); display: flex; align-items: center; gap: 6px; }
.farasync-mf-rep-key { font-size: 11px; color: var(--farasync-text-light); margin-top: 2px; }
.farasync-mf-newpill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--farasync-warning);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.7;
}
.farasync-mf-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.farasync-mf-reason { color: var(--farasync-text-muted); font-size: 12px; }
.farasync-mf-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.farasync-mf-amt.plus { color: var(--farasync-success); }
.farasync-mf-amt.minus { color: var(--farasync-danger); }
.farasync-mf-amt.zero { color: var(--farasync-text-light); }

.farasync-mf-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.farasync-mf-pill.is-pending { background: #fdf8ec; color: #8a6d1a; border: 1px solid var(--farasync-warning); }
.farasync-mf-pill.is-auto { background: var(--farasync-success-bg); color: #1a7f37; border: 1px solid var(--farasync-success-border); }
.farasync-mf-pill.is-manual { background: var(--farasync-primary-light); color: var(--farasync-primary); border: 1px solid #c5d9ed; }
.farasync-mf-pill.is-reject { background: var(--farasync-danger-bg); color: var(--farasync-danger); border: 1px solid var(--farasync-danger-border); }
.farasync-mf-pill.is-sys { background: #f0f0f1; color: var(--farasync-text-muted); border: 1px solid var(--farasync-border); }

/* v1.0.0 (user request): the action buttons hug the LEFT edge of the cell
   (چپ‌چین) — in the RTL table this is the table's outer edge. The header
   follows so the column reads coherently. */
.farasync-mf-acts { white-space: nowrap; text-align: left; }
.farasync-mf-table th.farasync-mf-col-actions { text-align: left; }
/* v1.0.0 (user request): the row buttons now carry the invoices tab's exact
   classes (button button-secondary farasync-icon-btn [+ farasync-del-btn on
   the trash]) — the shared admin.css chrome (30×30 white square, #475569
   glyph, #d7dfe8 border, 7px radius, faint shadow, hover/focus state) styles
   base AND hover IDENTICALLY on both tabs. The old moneyflow-private sizing
   and gray-theme blocks are gone; what remains here is only what moneyflow
   genuinely owns: the inter-button gap and the ✓/✗ glyph colors. */
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
/* 4px gap between adjacent action buttons only (the user's 3-5px range) —
   margin-inline-END on every button except the last so the cluster edge
   stays flush against the cell edge in RTL and LTR alike. (0,4,0)+important
   outranks the shared chrome's margin rules regardless of load order. */
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn:not(:last-child) { margin-inline-end: 4px !important; }
/* the ✓ and ✗ stay colored — gray family body, colored glyph */
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn.is-ok svg { color: var(--farasync-success); }
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn.is-no svg { color: var(--farasync-danger); }
/* v1.0.0 (user request, kept): approving/rejecting hovers stay neutral gray
   — only the tick/X glyph is colored. (0,5,0)+important outranks the shared
   chrome's hover. */
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn.is-ok:hover,
.farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn.is-no:hover {
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* v1.0.0 (user report): the checkbox column read “scattered” — WP core and
   the admin theme give the HEADER checkbox different margins from the row
   ones (margin-bottom:8px on .widefat th input, RTL margin asymmetries), so
   the boxes sat off one vertical line. Own the whole column: center every
   cell and zero every checkbox margin — header and rows share ONE line. */
.farasync-mf-table th.farasync-mf-col-check {
    text-align: center;
}
.farasync-mf-table tbody tr:not(.farasync-empty-row) td:first-child {
    text-align: center;
}
.farasync-mf-table th.farasync-mf-col-check input[type="checkbox"],
.farasync-mf-table tbody tr:not(.farasync-empty-row) td:first-child input[type="checkbox"] {
    margin: 0 !important;
    vertical-align: middle;
    cursor: pointer;
}

/* ---------------- modals ---------------- */
.farasync-mf-modal {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 31, 0.55);
    padding: 20px;
}
.farasync-mf-modal[hidden] { display: none; }
.farasync-mf-modal-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow: auto;
    background: var(--farasync-surface);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}
.farasync-mf-modal-card h3 { margin: 0 0 14px; font-size: 15.5px; color: var(--farasync-text); }
.farasync-mf-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--farasync-text-light);
    cursor: pointer;
    padding: 4px;
}
.farasync-mf-close:hover { color: var(--farasync-danger); }
.farasync-mf-modal-line { margin: 0 0 10px; font-size: 13px; }
.farasync-mf-kv { width: 100%; border-collapse: collapse; margin-top: 4px; }
.farasync-mf-kv td { padding: 7px 8px; border-bottom: 1px solid var(--farasync-border); font-size: 12.5px; vertical-align: top; }
.farasync-mf-kv td:first-child { width: 34%; color: var(--farasync-text-muted); white-space: nowrap; }
.farasync-mf-note-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--farasync-text-muted); margin: 10px 0; }
.farasync-mf-note-label textarea { width: 100%; }
.farasync-mf-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.farasync-mf-err { color: var(--farasync-danger); font-size: 12px; }
.farasync-mf-danger { color: var(--farasync-danger) !important; border-color: var(--farasync-danger-border) !important; }

/* ---------------- toast ---------------- */
.farasync-mf-toast {
    position: fixed;
    bottom: 26px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 100150;
    padding: 10px 20px;
    border-radius: 999px;
    background: #1d2327;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.farasync-mf-toast.is-error { background: var(--farasync-danger); }
.farasync-mf-toast.is-ok { background: #1d2327; }
[dir="rtl"] .farasync-mf-toast { transform: translateX(50%); }

/* ---------------- mobile ---------------- */
@media (max-width: 782px) {
    .farasync-mf-callout { flex-direction: column; align-items: flex-start; }
    .farasync-mf-stats { grid-template-columns: 1fr 1fr; }
    .farasync-mf-gear-pop { width: 260px; }
}
@media (max-width: 480px) {
    .farasync-mf-stats { grid-template-columns: 1fr; }
    .farasync-mf-table .farasync-mf-acts .farasync-mf-icobtn { margin-bottom: 4px !important; }
}