| texts wrapped
* character-by-character («ا/ف/ز/ا/ی/ش»), the header row split into two,
* and every body row collapsed into a ~600px-tall vertical scatter of
* cells. Each table now sits inside a .farasync-table-scroll wrapper
* (added in admin-page.php): the table keeps its natural width and the
* WRAPPER scrolls horizontally — columns never collapse again.
*
* v1.0.0 (user report): the date cell wrapped mid-value on phones —
* the anti-wrap list still pointed at td:nth-child(9), but the tracking
* (v1.0.0) + editable-status (v1.0.0) columns pushed تاریخ to child
* 10. The status select is inline-sized, so only the date needs the
* nowrap guard now.
* ==================================================================== */
.farasync-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.farasync-table-scroll > table {
min-width: 680px; /* floor for 6-10 column tables; wider on phones */
margin-bottom: 0;
}
/* v1.0.0 (Round Y12) THE REAL CULPRIT: the admin theme's narrow-width
stylesheet flips table rows to flex and cells to block
(tr{display:flex}, th/td{display:block}) — that is what scattered the
cells vertically and dropped the last header onto a second line, NOT
simple squeezing. Restore the real table model inside the wrappers
(!important so the theme rule loses regardless of load order). */
.farasync-table-scroll table {
display: table !important;
}
.farasync-table-scroll tr {
display: table-row !important;
}
.farasync-table-scroll th,
.farasync-table-scroll td {
display: table-cell !important;
}
.farasync-table-scroll > table th {
white-space: nowrap; /* headers can never letter-stack again */
}
/* v1.0.0 (item 3, user report): the EMPTY-state column artifact — pin the
header band to one surface and make .farasync-empty-row fully inert so no
per-column white strip or hover inset line can appear on the «عملیات»
column while a report table is empty. Mirror of the command-center block;
harmless when the command-center copy wins the cascade anyway. */
.farasync-wrap .wp-list-table thead th,
.farasync-wrap .wp-list-table thead th:last-child,
.farasync-wrap .wp-list-table thead th.farasync-imported-actions-col {
background: #f8fafc !important;
}
.farasync-wrap .wp-list-table tbody tr.farasync-empty-row,
.farasync-wrap .wp-list-table tbody tr.farasync-empty-row:hover,
.farasync-wrap .wp-list-table tbody tr.farasync-empty-row td,
.farasync-wrap .wp-list-table tbody tr.farasync-empty-row:hover td {
background: transparent !important;
box-shadow: none !important;
border-bottom: 0 !important;
}
/* v1.0.0: badges/pills/inline buttons must keep their words together —
in a squeezed column the status pill wrapped one-word-per-line and
turned into a tall blob (the «در سایت مبدا حذف شده» tower). */
.farasync-table-scroll .farasync-issue-badge,
.farasync-table-scroll .farasync-badge,
.farasync-table-scroll .farasync-sm-product-badge,
.farasync-table-scroll .farasync-inv-key-chip,
.farasync-table-scroll .farasync-sales-tracking,
.farasync-table-scroll td .button,
.farasync-table-scroll td .farasync-print-btn {
white-space: nowrap;
}
/* v1.0.0: dates/amounts/counts break mid-value at hyphens when their
column runs narrow («08-26-2029 20:43» wrapped onto three lines).
Column orders — sales: 2 order#, 3 src#, 4 date, 6 items, 7-9 amounts;
invoices: 2 order#, 5 items, 6-7 amounts, 10 date (v1.0.0: was 9
before the tracking + editable-status columns landed). */
.farasync-sales-table td:nth-child(2),
.farasync-sales-table td:nth-child(3),
.farasync-sales-table td:nth-child(4),
.farasync-sales-table td:nth-child(6),
.farasync-sales-table td:nth-child(7),
.farasync-sales-table td:nth-child(8),
.farasync-sales-table td:nth-child(9),
.farasync-invoices-table td:nth-child(2),
.farasync-invoices-table td:nth-child(5),
.farasync-invoices-table td:nth-child(6),
.farasync-invoices-table td:nth-child(7),
.farasync-invoices-table td:nth-child(10) {
white-space: nowrap;
}
/* the sales table carries ~12 columns (order, date, customer, product,
qty, amounts, statuses, tracking, print) — give it more floor */
.farasync-table-scroll > table.farasync-sales-table {
min-width: 880px;
}
.farasync-table-scroll > table.farasync-invoices-table {
min-width: 760px;
}
/* v1.0.0: the date-filter rows (sales + invoices tabs) — on phones the
two 170px-capped date inputs + labels + buttons wrapped with ragged
gaps. Let the inputs share the row proportionally instead. */
@media (max-width: 600px) {
.farasync-logs-filter {
row-gap: 8px;
}
.farasync-logs-filter input[type="date"] {
flex: 1 1 128px;
max-width: none !important; /* beats the inline max-width:170px */
width: auto;
}
}
/* v1.0.0: the grouped action buttons (CSV / retry-all / bulk-delete /
refresh — Y5's .farasync-toolbar-actions) had NO flex-wrap: on phones
the row stayed ~505px wide and dragged the whole page 170px past the
viewport. Let the buttons wrap onto extra lines. */
.farasync-toolbar-actions {
flex-wrap: wrap;
row-gap: 8px;
}
/* same disease, second host: the issues tab's inline-styled action row
( inside .farasync-keys-toolbar) —
the inline style owns display/gap but NOT flex-wrap, so a stylesheet
rule may add the wrapping. */
.farasync-keys-toolbar > div {
flex-wrap: wrap;
row-gap: 8px;
}
/* ==========================================================================
v1.0.0: INLINE filter chips (invoices tab + sales report)
A plain-text label that opens a small tick-list popover. NO extra apply
button — the tables reload instantly on every change. Shares the same
class contract as the rep-panel chips in representative.css, so the two
surfaces stay visually consistent.
========================================================================== */
.farasync-fchip {
position: relative;
display: inline-flex;
align-items: center;
}
.farasync-fchip-btn {
border: 1px dashed transparent;
background: transparent;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
color: #0f172a;
padding: 3px 8px;
border-radius: 8px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.farasync-fchip-btn:hover {
background: #f1f5f9;
}
.farasync-fchip.is-active .farasync-fchip-btn {
border-color: #2271b1;
background: #f0f6fc;
color: #2271b1;
}
.farasync-fchip-caret {
font-size: 10px;
opacity: .6;
}
.farasync-fchip-count {
font-weight: 700;
color: #2271b1;
}
.farasync-fchip-pop {
position: absolute;
top: calc(100% + 6px);
inset-inline-start: 0;
z-index: 9990;
min-width: 180px;
max-height: 280px;
overflow: auto;
background: #fff;
border: 1px solid #dcdcde;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
padding: 6px;
display: flex;
flex-direction: column;
}
/* v1.0.0 (user bug report): display:flex DEFEATED the hidden attribute —
every popover rendered permanently open and clicking could not close it.
The [hidden] rule outranks the display declaration above and restores
the closed-by-default / click-to-toggle behaviour. */
.farasync-fchip-pop[hidden] {
display: none;
}
/* v1.0.0 (user request): type-ahead search inside the representative
chip — the first letters of the rep name or site filter the list. */
.farasync-fchip-search {
width: 100%;
box-sizing: border-box;
margin: 2px 0 6px;
padding: 5px 9px;
border: 1px solid #dcdcde;
border-radius: 7px;
font-size: 12.5px;
font-family: inherit;
background: #f8fafc;
}
.farasync-fchip-search:focus {
border-color: #2271b1;
outline: none;
background: #fff;
}
.farasync-fchip-nores {
padding: 6px 8px;
font-size: 12px;
color: #94a3b8;
}
.farasync-fchip-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 7px;
font-size: 12.5px;
color: #1e293b;
cursor: pointer;
white-space: nowrap;
}
.farasync-fchip-opt:hover {
background: #f1f5f9;
}
.farasync-fchip-opt-all {
border-top: 1px solid #f1f5f9;
margin-top: 4px;
padding-top: 8px;
color: #64748b;
}
/* =====================================================================
v1.0.0 (user request): «چراغ» LED — the chip options no longer draw
the native checkbox/radio tick (on some setups it only repainted after
an outside click). The native input stays in the DOM (visually hidden,
keyboard-working) so the whole state contract is untouched; the light
is a CLASS-driven dot (.is-on) so it paints INSTANTLY on click.
Off = cool gray; On = the same green the key-status lights use.
===================================================================== */
.farasync-fchip-opt input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.farasync-fchip-opt .farasync-led {
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 999px;
background: #cbd5e1;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
transition: background 140ms ease, box-shadow 140ms ease;
}
.farasync-fchip-opt.is-on .farasync-led {
background: var(--farasync-success, #22c55e);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), 0 0 6px rgba(34, 197, 94, 0.55);
}
.farasync-fchip-opt.is-on {
color: #0f172a;
font-weight: 600;
}
/* =====================================================================
v1.0.0 (user request): CLICK-THE-ROW SELECTION — the invoices, sales
and failed-items tables select their row when the row BODY is clicked,
not only the checkbox. The pointer + the empty-state reset keep the
affordance honest.
===================================================================== */
.farasync-invoices-table tbody tr,
.farasync-sales-table tbody tr,
.farasync-issues-table tbody tr {
cursor: pointer;
}
.farasync-invoices-table tbody tr.farasync-empty-row,
.farasync-sales-table tbody tr.farasync-empty-row,
.farasync-issues-table tbody tr.farasync-empty-row {
cursor: default;
}
/* v1.0.0: notification deep-link landing highlight — the targeted row
pulses twice so the eye lands on it instantly. */
@keyframes farasync-row-flash {
0%, 100% { background-color: transparent; }
25%, 65% { background-color: #f0f6fc; }
45%, 85% { background-color: #dbeafe; }
}
tr.farasync-row-flash > td,
tr.farasync-row-flash > th {
animation: farasync-row-flash 2.4s ease-in-out 1;
}
/* v1.0.0 (user request): the «یاداشت» badge NO LONGER sits inside the
details button's label — it floats on the button's TOP-LEFT corner
(position:absolute on a relative wrapper). Amber while the note is
unread, muted gray once the admin has opened the details once. The
modal's inline badge (inside the note box title) keeps the pill look. */
.farasync-inv-view-wrap {
position: relative;
display: inline-block;
}
/* v1.0.0 (item 4): the per-row delete icon sits beside the details
button inside the Actions cell — same 6px gap the note badge uses. */
.farasync-inv-view-wrap .farasync-inv-del-row {
margin-inline-start: 6px;
vertical-align: middle;
}
.farasync-note-badge {
display: inline-block;
margin-inline-start: 6px;
padding: 1px 7px;
border-radius: 9px;
font-size: 11px;
font-weight: 700;
line-height: 1.7;
vertical-align: middle;
}
.farasync-note-badge.is-corner {
position: absolute;
top: -9px;
left: -9px; /* physical LEFT — the user asked for the top-left corner */
inset-inline-start: auto;
margin: 0;
z-index: 2;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
}
.farasync-note-badge.is-unread {
background: #fef3c7;
color: #92400e;
box-shadow: 0 0 0 1px #fcd34d inset, 0 1px 4px rgba(15, 23, 42, 0.22);
}
.farasync-note-badge.is-read {
background: #e2e8f0;
color: #475569;
}
.farasync-rep-note-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-inline-start: 4px solid #6366f1;
border-radius: 10px;
padding: 10px 14px;
margin-top: 14px;
}
.farasync-rep-note-box h3 {
margin: 0 0 6px;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.farasync-rep-note-box .farasync-rep-note-text {
margin: 0;
white-space: pre-line;
line-height: 1.9;
}
/* =====================================================================
v1.0.0 (user request): the INVOICE DETAILS POPUP redesign — compact
and tidy on desktop AND mobile. Chips strip → 2-column info cards →
note box → items table → totals card. All RTL-safe (logical physics
kept minimal; numbers use an explicit LTR code style).
v1.0.0 (user request): TIGHTER info cards (phone + postcode merge
into the customer card, rep site inline, address|shipping share one
row) so the note + items boxes get more room; the popup itself is a
flex column — the body scrolls while the three action buttons stay
pinned in ONE row above the brand footer (they must never fall onto
the page footer on mobile).
===================================================================== */
#farasync-invoice-modal .farasync-modal-content {
display: flex;
flex-direction: column;
max-height: calc(100vh - 64px);
padding: 24px 28px 0;
overflow: hidden;
}
#farasync-invoice-modal .farasync-modal-content h2 {
flex: 0 0 auto;
margin-bottom: 12px;
font-size: 17px;
}
#farasync-invoice-modal .farasync-modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-inline-end: 2px;
}
#farasync-invoice-modal #farasync-invoice-actions {
flex: 0 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin: 12px 0 0;
padding: 12px 0 14px;
border-top: 1px solid #e8edf3;
}
#farasync-invoice-modal #farasync-invoice-actions .button {
margin: 0;
}
#farasync-invoice-modal .farasync-invoice-mark-shipped-btn {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
text-align: center;
}
#farasync-invoice-modal .farasync-credit-footer {
flex: 0 0 auto;
margin: 0 -28px 0;
padding: 10px 24px 12px;
border-radius: 0 0 var(--farasync-radius-lg) var(--farasync-radius-lg);
}
#farasync-invoice-content .fs-inv-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 10px;
}
#farasync-invoice-content .fs-inv-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 3px 10px;
font-size: 12px;
color: #334155;
line-height: 1.8;
}
#farasync-invoice-content .fs-inv-chip .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
color: #64748b;
}
#farasync-invoice-content .fs-inv-chip code {
background: transparent;
padding: 0;
font-size: 12px;
color: #334155;
}
#farasync-invoice-content .fs-inv-edit {
margin-inline-start: auto;
font-size: 12px;
text-decoration: none;
color: #2563eb;
display: inline-flex;
align-items: center;
gap: 3px;
/* v1.0.0 (UI audit): real touch target without growing the chip row. */
padding: 5px 8px;
margin-block: -4px;
min-height: 28px;
box-sizing: border-box;
}
#farasync-invoice-content .fs-inv-edit .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
}
#farasync-invoice-content .fs-inv-edit:hover {
color: #1d4ed8;
text-decoration: underline;
}
#farasync-invoice-content .fs-inv-grid {
display: grid;
grid-template-columns: 1.35fr 1fr; /* v1.0.0: address column wider */
gap: 7px;
margin-bottom: 10px;
}
#farasync-invoice-content .fs-inv-cell {
background: #f8fafc;
border: 1px solid #e8edf3;
border-radius: 10px;
padding: 7px 10px;
min-width: 0;
}
#farasync-invoice-content .fs-inv-cell-wide {
grid-column: 1 / -1;
}
#farasync-invoice-content .fs-inv-lbl {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: #64748b;
margin-bottom: 2px;
}
#farasync-invoice-content .fs-inv-lbl .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
color: #94a3b8;
}
#farasync-invoice-content .fs-inv-val {
display: block;
font-size: 13px;
color: #0f172a;
line-height: 1.7;
word-break: break-word;
}
#farasync-invoice-content .fs-inv-strong {
font-weight: 700;
}
/* v1.0.0: the rep site rides INLINE after the name (was its own line). */
#farasync-invoice-content .fs-inv-site {
display: inline;
direction: ltr;
unicode-bidi: embed;
margin-inline-start: 2px;
font-size: 11px;
color: #2563eb;
text-decoration: none;
overflow-wrap: anywhere;
/* v1.0.0 (UI audit): padding-block enlarges the tap area of an inline
link WITHOUT changing the line box / popup compactness. */
padding: 8px 6px;
}
/* v1.0.0: phone + postal code merged into the customer card. */
#farasync-invoice-content .fs-inv-tel {
font-size: 12px;
color: #0f172a;
}
#farasync-invoice-content .fs-inv-zip {
color: #64748b;
font-size: 11px;
white-space: nowrap;
}
#farasync-invoice-content .fs-inv-zip code {
font-size: 11.5px;
color: #475569;
}
#farasync-invoice-content .fs-inv-site:hover {
text-decoration: underline;
}
#farasync-invoice-content .fs-inv-ltr {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
}
#farasync-invoice-content .fs-inv-val code,
#farasync-invoice-content .fs-inv-cell code {
background: transparent;
padding: 0;
font-size: 12.5px;
color: #0f172a;
}
#farasync-invoice-content .fs-inv-cost {
color: #64748b;
font-size: 12px;
}
#farasync-invoice-content .fs-inv-note-at {
margin: 6px 0 0;
font-size: 11px;
color: #94a3b8;
}
#farasync-invoice-content .fs-inv-note-at code {
background: transparent;
padding: 0;
color: #94a3b8;
font-size: 11px;
}
#farasync-invoice-content .fs-inv-sec-title {
margin: 4px 0 8px;
font-size: 13px;
color: #334155;
}
#farasync-invoice-content .fs-inv-items-wrap {
border: 1px solid #e8edf3;
border-radius: 10px;
overflow-x: auto;
margin-bottom: 12px;
}
#farasync-invoice-content table.fs-inv-items {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
#farasync-invoice-content table.fs-inv-items thead th {
background: #f1f5f9;
color: #475569;
font-size: 11.5px;
font-weight: 700;
text-align: start;
padding: 7px 10px;
border-bottom: 1px solid #e8edf3;
white-space: nowrap;
}
#farasync-invoice-content table.fs-inv-items tbody td {
padding: 7px 10px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
white-space: nowrap;
}
#farasync-invoice-content table.fs-inv-items tbody tr:last-child td {
border-bottom: 0;
}
#farasync-invoice-content table.fs-inv-items tbody tr:nth-child(even) td {
background: #fafcff;
}
#farasync-invoice-content table.fs-inv-items td.fs-inv-item-name {
white-space: normal;
min-width: 120px;
font-weight: 600;
color: #0f172a;
}
#farasync-invoice-content table.fs-inv-items code {
background: transparent;
padding: 0;
font-size: 11.5px;
color: #475569;
}
#farasync-invoice-content .fs-inv-totals {
background: #f8fafc;
border: 1px solid #e8edf3;
border-radius: 10px;
padding: 4px 12px;
margin-bottom: 4px;
}
#farasync-invoice-content .fs-inv-total-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 0;
font-size: 12.5px;
color: #475569;
border-bottom: 1px dashed #e2e8f0;
}
#farasync-invoice-content .fs-inv-total-row:last-child {
border-bottom: 0;
}
#farasync-invoice-content .fs-inv-total-row b {
color: #0f172a;
font-size: 13px;
}
#farasync-invoice-content .fs-inv-total-grand {
border-top: 1px solid #e2e8f0;
border-bottom: 0;
color: #0f172a;
font-weight: 700;
}
#farasync-invoice-content .fs-inv-total-grand b {
color: #047857;
font-size: 15px;
}
/* --- mobile: single column, full-width cells, scrollable items ------- */
@media (max-width: 782px) {
#farasync-invoice-modal .farasync-modal-content {
padding: 16px 16px 0;
max-height: calc(100vh - 32px);
}
#farasync-invoice-modal .farasync-credit-footer {
margin: 0 -16px 0;
padding: 9px 16px 11px;
}
#farasync-invoice-content .fs-inv-grid {
grid-template-columns: 1fr;
}
#farasync-invoice-content .fs-inv-head {
gap: 6px;
}
#farasync-invoice-content .fs-inv-edit {
margin-inline-start: 0;
width: 100%;
}
#farasync-invoice-content table.fs-inv-items thead th,
#farasync-invoice-content table.fs-inv-items tbody td {
padding: 6px 8px;
}
}
@media (max-width: 480px) {
#farasync-invoice-content .fs-inv-chip {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#farasync-invoice-content .fs-inv-cell {
padding: 6px 9px;
}
/* v1.0.0 (user request): all THREE action buttons in ONE row that
never wraps / never falls onto the footer — compact heights, the
shipped button drops its icon and keeps the short label. */
#farasync-invoice-modal #farasync-invoice-actions {
gap: 6px;
padding: 10px 0 12px;
}
#farasync-invoice-modal #farasync-invoice-actions .button {
height: 34px;
line-height: 32px;
padding: 0 10px;
font-size: 13px;
}
#farasync-invoice-modal .farasync-invoice-mark-shipped-btn {
font-size: 12.5px;
padding: 0 6px;
}
#farasync-invoice-modal .farasync-invoice-mark-shipped-btn .dashicons {
display: none;
}
#farasync-invoice-modal .farasync-print-btn {
flex: 0 0 auto;
padding: 0 8px;
}
#farasync-invoice-modal #farasync-invoice-close {
flex: 0 0 auto;
white-space: nowrap;
}
}
/* ================================================================
v1.0.0 (user request): universal table search + icon-only buttons
================================================================ */
/* The «جستجو…» box on the report filter rows / toolbars. */
input.farasync-table-search {
width: 300px;
max-width: 100%;
min-height: 30px;
padding: 3px 10px;
border-radius: 4px;
line-height: 1.6;
}
.farasync-logs-filter input.farasync-table-search,
.farasync-imported-filters input.farasync-table-search {
flex: 0 1 300px;
width: 300px;
}
.farasync-issues-searchrow input.farasync-table-search,
.farasync-admin-res-searchrow input.farasync-table-search {
width: 320px;
max-width: 100%;
}
/* CSV / refresh toolbar buttons are ICON-ONLY — square, the tooltip
(title attribute) carries the label, aria-label keeps a11y. The shared
.farasync-icon-btn box (30px square) already exists above and styles
both the keys-row SVG buttons and these WP .button icons; here we only
make the WP .button chrome and the dashicon fit the square. */
button.farasync-icon-btn.button,
a.farasync-icon-btn.button {
padding: 0;
line-height: 1;
}
.farasync-icon-btn .dashicons {
margin: 0;
font-size: 16px;
width: 16px;
height: 16px;
}
/* Rows hidden by the instant search + the «no match» row. */
tr.farasync-search-hidden {
display: none !important;
}
tr.farasync-search-none td {
padding: 14px 10px;
text-align: center;
color: #8c8f94;
}
@media (max-width: 782px) {
input.farasync-table-search,
.farasync-logs-filter input.farasync-table-search,
.farasync-imported-filters input.farasync-table-search {
flex: 1 1 100%;
width: 100%;
}
}
/* ================================================================
v1.0.0 — (1) ONE icon-button chrome everywhere (CSV / refresh /
printer), (2) the expandable Source-Health card.
================================================================ */
/* ---- 1) Unified icon-button chrome --------------------------------
The user approved the printer-button look (white bg, gray border,
slate glyph, soft shadow) as THE standard for every icon-only
control: CSV, refresh, global sync. WP's own .button chrome is
overridden so wp-admin buttons match the front-end panel exactly.
The inline SVG glyphs also cannot be hijacked by browser font
replacements (the v1.0.0 dashicons «cloud» incident). */
button.farasync-icon-btn.button,
a.farasync-icon-btn.button,
a.farasync-icon-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px !important;
height: 30px !important;
min-width: 30px;
padding: 0 !important;
margin: 0 !important;
background: #ffffff !important;
color: #475569 !important;
border: 1px solid #d7dfe8 !important;
border-radius: 7px !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
cursor: pointer;
text-decoration: none !important;
line-height: 1;
vertical-align: middle;
transition: all 0.15s ease;
box-sizing: border-box;
}
button.farasync-icon-btn.button:hover,
a.farasync-icon-btn.button:hover,
button.farasync-icon-btn.button:focus,
a.farasync-icon-btn.button:focus,
a.farasync-icon-btn:hover {
color: #4f46e5 !important;
background: #eef2ff !important;
border-color: #a5b4fc !important;
box-shadow: 0 3px 8px rgba(79, 70, 229, 0.18) !important;
}
.farasync-icon-btn svg,
.farasync-print-btn svg {
width: 16px;
height: 16px;
display: block;
margin: 0;
}
/* the global-sync button sits inside a th — keep it one row tall */
.farasync-imported-actions-header .farasync-icon-btn {
width: 26px;
height: 26px;
}
.farasync-imported-actions-header .farasync-icon-btn svg {
width: 14px;
height: 14px;
}
/* ---- 2) Expandable Source-Health card ---------------------------- */
/* v1.0.0: the card is now a header button + a collapsible body. The
old single-row flex layout is replaced (block layout; the head is
its own flex row). */
.farasync-health-card {
display: block;
padding: 0;
}
.farasync-hc-head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
background: transparent;
border: 0;
border-radius: inherit;
cursor: pointer;
text-align: right;
font: inherit;
color: inherit;
}
.farasync-hc-head:focus-visible {
outline: 2px solid var(--farasync-primary);
outline-offset: -2px;
}
.farasync-hc-headline {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.farasync-hc-errcount {
flex: 0 0 auto;
min-width: 20px;
height: 20px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #92400e;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 999px;
}
/* v1.0.0: running-campaign badge on the health card — violet, its own
link to that source's rep panel.
v1.0.0 (user request): it is now a SMALL CORNER BADGE pinned to the
card's top-left corner (floats over the card edge) instead of an
inline item in the head row; it disappears the moment the campaign
ends (the 5-minute poll no longer reports it active). */
.farasync-health-card {
position: relative;
}
.farasync-hc-campaign {
position: absolute;
top: -9px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 10px;
font-size: 11px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
border: 1px solid #a78bfa;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 1px 4px rgba(139, 92, 246, .35);
}
.farasync-hc-campaign:hover,
.farasync-hc-campaign:focus {
color: #ffffff;
background: linear-gradient(135deg, #6d28d9, #7c3aed);
text-decoration: none;
box-shadow: 0 1px 6px rgba(124, 58, 237, .5);
}
/* v1.0.0 (user request): «تخفیف اختصاصی شما ۵٪» — the exclusive
per-key discount, pinned to the card's TOP-RIGHT corner (mirrors the
campaign badge on the opposite corner). */
.farasync-hc-discount {
position: absolute;
top: -9px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 10px;
font-size: 11px;
font-weight: 700;
color: #7a3f04;
background: linear-gradient(135deg, #ffe9b8, #f5c66b);
border: 1px solid #eab308;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(234, 179, 8, .35);
}
/* v1.0.0: the SAME two badges on the «دریافت» tab's source cards. The
source card has overflow:hidden (the gradient top bar), so instead of
floating over the edge they HANG from the top edge as small tabs;
a sibling rule pushes the header content down so nothing overlaps. */
.farasync-source-card .farasync-src-corner {
position: absolute;
top: 0;
z-index: 3;
display: inline-flex;
align-items: center;
height: 21px;
padding: 0 12px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.farasync-source-card .farasync-src-corner.is-start {
left: 14px;
color: #ffffff;
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
border: 0;
border-top: 0;
}
.farasync-source-card .farasync-src-corner.is-start:hover,
.farasync-source-card .farasync-src-corner.is-start:focus {
color: #ffffff;
background: linear-gradient(135deg, #6d28d9, #7c3aed);
text-decoration: none;
}
.farasync-source-card .farasync-src-corner.is-end {
right: 14px;
color: #7a3f04;
background: linear-gradient(135deg, #ffe9b8, #f5c66b);
border: 0;
border-top: 0;
}
.farasync-source-card .farasync-src-corner ~ .farasync-source-card-header {
padding-top: 16px;
}
@media (max-width: 782px) {
.farasync-source-card .farasync-src-corner ~ .farasync-source-card-header {
padding-top: 14px;
}
}
.farasync-hc-chevron {
flex: 0 0 auto;
color: #94a3b8;
font-size: 12px;
transition: transform 0.15s ease;
}
.farasync-health-card.is-open .farasync-hc-chevron {
transform: rotate(180deg);
}
.farasync-hc-recovery {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 10px 0 2px;
padding: 8px 10px;
font-size: 12.5px;
color: #14532d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
}
.farasync-hc-recovery .dashicons {
color: #16a34a;
font-size: 16px;
width: 16px;
height: 16px;
margin-top: 1px;
}
.farasync-hc-errors-title,
.farasync-hc-fix-title {
font-weight: 700;
font-size: 12.5px;
color: #475569;
margin: 10px 0 5px;
}
.farasync-hc-errors {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.farasync-hc-errors li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
padding: 7px 9px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
}
.farasync-hc-err-time {
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 700;
color: #b91c1c;
direction: ltr;
unicode-bidi: embed;
}
.farasync-hc-err-type {
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 600;
color: #7f1d1d;
background: rgba(185, 28, 28, 0.09);
border-radius: 4px;
padding: 1px 6px;
direction: ltr;
unicode-bidi: embed;
}
.farasync-hc-err-msg {
flex: 1 1 160px;
min-width: 0;
color: #7f1d1d;
font-size: 12.5px;
line-height: 1.7;
word-break: break-word;
}
.farasync-hc-fix-text {
margin: 0;
color: #334155;
font-size: 12.5px;
line-height: 1.9;
}
.farasync-hc-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.farasync-hc-act-sync,
.farasync-hc-act-logs {
font-size: 12.5px !important;
line-height: 2 !important;
min-height: 30px;
padding: 0 12px !important;
border-radius: 6px !important;
}
.farasync-hc-act-sync:disabled {
opacity: 0.65;
cursor: default;
}
.farasync-hc-act-result {
margin-top: 8px;
padding: 8px 10px;
font-size: 12.5px;
color: #1e40af;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 6px;
}
/* Healthy/unknown cards keep the quiet single-row look. */
.farasync-health-card.status-healthy .farasync-hc-head,
.farasync-health-card.status-unknown .farasync-hc-head {
cursor: default;
}
@media (max-width: 600px) {
.farasync-hc-errors li {
flex-direction: column;
align-items: flex-start;
}
}
/* v1.0.0: the command-center skin (loaded AFTER admin.css) re-lays the
health card out as a flex row with 0-2-0 specificity — it must lose to
the expandable structure, so these overrides carry the same specificity
and the later position in THIS file. */
.farasync-command-center .farasync-health-card {
display: block;
min-height: 0;
padding: 0;
overflow: visible;
}
.farasync-command-center .farasync-health-card .farasync-health-dot {
margin-top: 0;
}
.farasync-command-center .farasync-health-card .farasync-hc-head {
padding: 12px 14px;
}
.farasync-command-center .farasync-health-card.status-healthy .farasync-hc-head,
.farasync-command-center .farasync-health-card.status-unknown .farasync-hc-head {
cursor: default;
}
/* =====================================================================
v1.0.0 — Source Health: clickable info tile + «خطاهای اخیر» MODAL.
The card keeps the restored info row and the WHOLE CARD opens the
errors dialog (the v1.0.0 inline expandable body is gone).
===================================================================== */
.farasync-health-card {
cursor: pointer;
}
.farasync-health-card .farasync-hc-head {
cursor: inherit;
}
.farasync-health-card.status-healthy .farasync-hc-head,
.farasync-health-card.status-unknown .farasync-hc-head {
cursor: inherit;
}
/* v1.0.0: the info row became a grid of LABELED STAT TILES — icon + small
gray label on TOP, bold value BELOW (the old same-line label/value pairs
ran together and the user called the card «بهم ریخته»). auto-fit keeps
desktop at 3 tracks, tablets at 2, phones at 1. */
.farasync-hc-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
padding: 12px 14px 14px;
border-top: 1px dashed var(--farasync-border);
font-size: 12.5px;
}
.farasync-hc-stat {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 9px 11px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.farasync-hc-stat-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #64748b;
line-height: 1.5;
}
.farasync-hc-stat-lbl svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
color: #94a3b8;
}
.farasync-hc-stat-val {
font-size: 12.5px;
font-weight: 700;
color: #0f172a;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* v1.0.0: the result box gets outcome tones (green «رفع شد» / red). */
.farasync-hc-act-result.ok {
color: #14532d;
background: #f0fdf4;
border-color: #bbf7d0;
}
.farasync-hc-act-result.err {
color: #991b1b;
background: #fef2f2;
border-color: #fecaca;
}
/* v1.0.0: the calm «history» note on a green card (no recovery row). */
.farasync-hc-recovery.is-history {
border-style: dashed;
color: #166534;
}
/* Beginner-friendly summary line — replaces the old «سالم: ۰ | اخطار: ۱»
badge row the user could not decode. */
.farasync-hc-summary {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 4px;
padding: 9px 12px;
border-radius: 8px;
font-size: 12.5px;
line-height: 1.9;
}
.farasync-hc-sumdot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
margin-top: 7px;
}
.farasync-hc-summary.tone-ok {
color: #14532d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
.farasync-hc-summary.tone-ok .farasync-hc-sumdot {
background: #22c55e;
}
.farasync-hc-summary.tone-warn {
color: #92400e;
background: #fffbeb;
border: 1px solid #fde68a;
}
.farasync-hc-summary.tone-warn .farasync-hc-sumdot {
background: #f59e0b;
}
.farasync-hc-summary.tone-crit {
color: #991b1b;
background: #fef2f2;
border: 1px solid #fecaca;
}
.farasync-hc-summary.tone-crit .farasync-hc-sumdot {
background: #ef4444;
}
/* The type chip now carries a Persian LABEL («توقف ناگهانی پردازش»), not a
slug — drop the old LTR forcing (the time chip keeps its own). */
.farasync-hc-err-type {
direction: inherit;
unicode-bidi: plaintext;
}
/* The errors modal: the same flex-scroll contract as the invoice popup —
the h2 stays put, the BODY scrolls, footer pinned. */
#farasync-health-modal .farasync-modal-content {
display: flex;
flex-direction: column;
max-height: calc(100vh - 64px);
padding: 24px 28px 0;
overflow: hidden;
}
#farasync-health-modal .farasync-modal-content h2 {
flex: 0 0 auto;
margin-bottom: 12px;
font-size: 17px;
}
#farasync-health-modal .farasync-modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-inline-end: 2px;
padding-bottom: 16px;
}
@media (max-width: 600px) {
#farasync-health-modal .farasync-modal-content {
padding: 16px 16px 0;
}
}
/* =====================================================================
v1.0.0 — round 6 (items 5, 7, 9, 10)
===================================================================== */
/* ITEM 5 — the campaign icon in the plugin header (receive mode). Hidden
unless at least one source runs an active campaign (the health AJAX
toggles .is-on; the server prefills it from the cached transient). */
.farasync-camp-head-icon {
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-inline-end: 6px;
color: #7c3aed;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border: 1px solid #ddd6fe;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 1px 3px rgba(124, 58, 237, .25);
transition: transform .15s ease, box-shadow .15s ease;
}
.farasync-camp-head-icon.is-on {
display: inline-flex;
}
.farasync-camp-head-icon:hover,
.farasync-camp-head-icon:focus {
color: #6d28d9;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(124, 58, 237, .35);
text-decoration: none;
outline: none;
}
/* ITEM 9 — the nav count badges. Each tab carries its OWN number:
«فاکتور نمایندگان» pending invoices, «رزروها» active reservations
(source); «موارد ناموفق» failed items, «گزارش فروش» invoices awaiting
payment (destination). Rendered only when the count is > 0. */
.farasync-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
margin-inline-start: 6px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #ffffff;
background: #7c3aed;
border-radius: 999px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
}
.farasync-tab[data-tab="invoices"] .farasync-tab-badge,
.farasync-tab[data-tab="reservations"] .farasync-tab-badge {
background: #7c3aed;
}
.farasync-tab[data-tab="issues"] .farasync-tab-badge {
background: #d63638;
}
.farasync-tab[data-tab="sales"] .farasync-tab-badge {
background: #46b450;
}
.farasync-tab.is-active .farasync-tab-badge {
color: #ffffff;
}
/* ITEM 7 — the inline tracking editor cell. */
.farasync-inv-col-track {
white-space: nowrap;
}
.farasync-track-input {
width: 100%;
max-width: 170px;
min-width: 110px;
padding: 2px 8px;
font-size: 12.5px;
line-height: 1.9;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #ffffff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.farasync-track-input:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, .18);
outline: none;
}
.farasync-track-input.is-saving {
opacity: .6;
pointer-events: none;
}
.farasync-track-input.is-saved {
border-color: #46b450;
box-shadow: 0 0 0 2px rgba(70, 180, 80, .2);
}
.farasync-track-input.is-error {
border-color: #d63638;
box-shadow: 0 0 0 2px rgba(214, 54, 56, .18);
}
.farasync-tracking-import-btn.is-busy {
opacity: .6;
}
/* ITEM 10 — the «کمپین در حال اجرا» pill must KEEP its rounded shape when
clicked: wp-admin paints a square a:focus ring that clipped the pill's
corners. The outline is replaced with a rounded box-shadow ring
(keyboard focus stays visible via :focus-visible). */
.farasync-hc-campaign:focus,
.farasync-source-card .farasync-src-corner.is-start:focus {
outline: none;
}
.farasync-hc-campaign:focus-visible,
.farasync-source-card .farasync-src-corner.is-start:focus-visible {
outline: none;
border-radius: 999px;
box-shadow: 0 0 0 2px rgba(124, 58, 237, .45);
}
.farasync-source-card .farasync-src-corner.is-start:focus-visible {
border-radius: 0 0 10px 10px;
}
/* ITEM 9 — the «خطاهای اخیر این مبدأ» modal: the copy breathes away from
the edges and the re-sync button is wide + centered. */
#farasync-health-modal .farasync-modal-body {
padding: 6px 22px 18px;
}
#farasync-health-modal .farasync-modal-body .farasync-hc-errors-title,
#farasync-health-modal .farasync-modal-body .farasync-hc-fix-title {
margin-top: 14px;
}
#farasync-health-modal .farasync-hc-actions {
justify-content: center;
margin-top: 16px;
}
#farasync-health-modal .farasync-hc-act-sync {
min-width: 240px;
text-align: center;
justify-content: center;
padding: 0 18px !important;
}
@media (max-width: 600px) {
#farasync-health-modal .farasync-modal-body {
padding: 4px 14px 14px;
}
#farasync-health-modal .farasync-hc-act-sync {
min-width: 0;
width: 100%;
}
}
/* v1.0.0 — the persistent currency notice (approved plan): a warning for
unknown / non-convertible units, an info line while the automatic
ریال↔تومان bridge is active. Sits above the health cards. */
.farasync-cur-banner {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 10px 13px;
border-radius: 10px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.9;
font-weight: 500;
}
.farasync-cur-banner .farasync-cur-dot {
width: 9px;
height: 9px;
border-radius: 50%;
margin-top: 7px;
flex: 0 0 auto;
}
.farasync-cur-banner.is-warn {
background: #fef3c7;
color: #7c4a03;
border: 1px solid #f2d38b;
}
.farasync-cur-banner.is-warn .farasync-cur-dot {
background: #d97706;
}
.farasync-cur-banner.is-info {
background: #e0f2fe;
color: #0c4a6e;
border: 1px solid #b9e2f7;
}
.farasync-cur-banner.is-info .farasync-cur-dot {
background: #0284c7;
}
@media (max-width: 600px) {
.farasync-cur-banner {
font-size: 12.5px;
padding: 9px 11px;
}
}
/* =====================================================================
v1.0.0 — items 1/2/3/5/7/10
===================================================================== */
/* ITEMS 1+8 — the ONE currency-notice surface: BELOW the plugin header,
between the header and the menu. X dismisses per user until the
currency situation changes again (the key embeds the fingerprint). */
.farasync-cur-notice {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0 0;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.9;
font-weight: 500;
}
.farasync-cur-notice .farasync-cur-notice-text {
flex: 1 1 auto;
margin: 0;
}
.farasync-cur-notice .farasync-cur-notice-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-top: 8px;
border-radius: 50%;
}
.farasync-cur-notice .farasync-cur-notice-x {
flex: 0 0 auto;
margin: -2px -6px -2px 0;
padding: 0 6px;
border: 0;
background: transparent;
color: inherit;
font-size: 17px;
line-height: 1.5;
cursor: pointer;
border-radius: 6px;
opacity: 0.7;
}
.farasync-cur-notice .farasync-cur-notice-x:hover,
.farasync-cur-notice .farasync-cur-notice-x:focus {
opacity: 1;
background: rgba(0, 0, 0, 0.06);
outline: none;
}
.farasync-cur-notice.is-warn {
background: #fef3c7;
color: #7c4a03;
border: 1px solid #f2d38b;
}
.farasync-cur-notice.is-warn .farasync-cur-notice-dot {
background: #d97706;
}
.farasync-cur-notice.is-info {
background: #e0f2fe;
color: #0c4a6e;
border: 1px solid #b9e2f7;
}
.farasync-cur-notice.is-info .farasync-cur-notice-dot {
background: #0284c7;
}
/* ITEM 2 — the bulk-print selection badge now floats on the TOP-LEFT
corner of the print button (outside the button itself). */
.farasync-print-wrap {
position: relative;
display: inline-flex;
}
.farasync-print-wrap .farasync-print-count {
position: absolute;
top: -7px;
left: -7px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
line-height: 1;
color: #ffffff;
background: #e11d48;
border: 2px solid #ffffff;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
pointer-events: none;
}
/* ITEM 5 — the delete icon buttons (group toolbar + per-row) of the
sales report, and the row action cluster. */
.farasync-del-btn {
color: #b32d2e !important;
}
.farasync-del-btn:hover,
.farasync-del-btn:focus {
color: #ffffff !important;
background: #b32d2e !important;
border-color: #b32d2e !important;
}
.farasync-sales-row-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ITEM 10 — the guide text next to «بستن کمپین» (rewards tab). */
.farasync-rw-close-hint {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-size: 12.5px;
font-weight: 600;
color: #92400e;
background: #fef3c7;
border: 1px dashed #f0c96b;
border-radius: 8px;
}
/* ================================================================
v1.0.0 (item 3, user request): the «روند فروش» KPI row — FOUR
cards, always ONE row on desktop, each with its own color theme.
The old 3 × .farasync-stat blocks wrapped onto two lines inside
.farasync-modules-grid (min 360px per column) — that was the
«کارتها باید در یک ردیف باشند» report.
================================================================ */
.farasync-src-sales-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 12px 0 16px;
}
.farasync-kpi-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* v1.0.0: keep the num/label spans symmetric for centered text */
gap: 2px;
padding: 14px 16px;
border-radius: 14px;
color: #fff;
overflow: hidden;
box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.35);
min-height: 84px;
text-align: center; /* v1.0.0 (user request): the four sales-trend KPI cards read centered */
}
.farasync-kpi-card .farasync-kpi-dot {
position: absolute;
top: 12px;
inset-inline-end: 12px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
}
.farasync-kpi-card .farasync-kpi-num {
font-size: 20px;
font-weight: 800;
line-height: 1.25;
/* v1.0.0 (user request): the Toman unit must sit LEFT of the amount
(Persian «۱۵۰٬۰۰۰ تومان»). The old forced LTR embed pushed the unit
to the right of the digits. `plaintext` picks the paragraph
direction from the content itself: fa strings render unit-left,
en strings stay amount-left — one rule for both UI languages. */
unicode-bidi: plaintext;
}
.farasync-kpi-card .farasync-kpi-label {
font-size: 11.5px;
font-weight: 600;
opacity: 0.92;
line-height: 1.5;
}
.farasync-kpi--blue {
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}
.farasync-kpi--violet {
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}
.farasync-kpi--green {
background: linear-gradient(135deg, #059669 0%, #34d399 100%);
}
.farasync-kpi--red {
background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
}
@media (max-width: 1280px) {
.farasync-src-sales-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.farasync-src-sales-cards {
grid-template-columns: 1fr;
}
}
/* ================================================================
v1.0.0 (user request): ONE icon-button size on EVERY page/modal.
The command-center chrome (.farasync-command-center .button) forces
min-height:38px + 7px/14px padding on every WP .button — the toolbar
squares silently grew into 30×38 rectangles while the row squares
(no .button class) stayed 30×30. This block is the single source of
truth: every icon-only action square is exactly 30×30 with a 16px
glyph, on every tab, every table row, every toolbar and every modal.
The two old exceptions (26px imported-header sync, 34×33 rep CSV)
are folded into the standard as well.
================================================================ */
button.farasync-icon-btn,
a.farasync-icon-btn,
.farasync-command-center button.farasync-icon-btn,
.farasync-command-center a.farasync-icon-btn,
.farasync-modal button.farasync-icon-btn,
.farasync-modal a.farasync-icon-btn,
.farasync-modal-content button.farasync-icon-btn,
.farasync-modal-content a.farasync-icon-btn,
button.farasync-print-btn:not(#farasync-x55),
a.farasync-print-btn:not(#farasync-x55),
.farasync-command-center button.farasync-print-btn:not(#farasync-x55),
.farasync-command-center a.farasync-print-btn:not(#farasync-x55),
.farasync-modal button.farasync-print-btn:not(#farasync-x55),
.farasync-modal a.farasync-print-btn:not(#farasync-x55),
.farasync-modal-content button.farasync-print-btn:not(#farasync-x55),
.farasync-modal-content a.farasync-print-btn:not(#farasync-x55),
.farasync-imported-actions-header button.farasync-icon-btn,
.farasync-imported-actions-header a.farasync-icon-btn,
.farasync-rep-csv-btn.farasync-icon-btn,
.farasync-rep-dashboard button.farasync-icon-btn,
.farasync-rep-dashboard a.farasync-icon-btn,
.farasync-action-dialog-close,
.farasync-rep-dashboard .farasync-print-btn:not(#farasync-x55),
#farasync-invoice-modal .farasync-print-btn:not(#farasync-x55),
.farasync-imported-sync-now {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
padding: 0 !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
flex: 0 0 auto !important;
line-height: 1 !important;
border-radius: 7px !important;
}
/* the glyph follows the box — one size, no per-page drift */
button.farasync-icon-btn > svg,
a.farasync-icon-btn > svg,
.farasync-command-center button.farasync-icon-btn > svg,
.farasync-command-center a.farasync-icon-btn > svg,
.farasync-modal button.farasync-icon-btn > svg,
.farasync-modal a.farasync-icon-btn > svg,
button.farasync-print-btn:not(#farasync-x55) > svg,
a.farasync-print-btn:not(#farasync-x55) > svg,
.farasync-command-center .farasync-print-btn > svg,
.farasync-modal .farasync-print-btn > svg,
.farasync-imported-actions-header .farasync-icon-btn > svg,
.farasync-rep-dashboard .farasync-print-btn > svg,
#farasync-invoice-modal .farasync-print-btn > svg,
.farasync-action-dialog-close > svg,
.farasync-action-dialog-close svg {
width: 16px !important;
height: 16px !important;
font-size: 16px !important;
margin: 0 !important;
display: block !important;
}
button.farasync-icon-btn .dashicons,
a.farasync-icon-btn .dashicons,
button.farasync-print-btn .dashicons,
a.farasync-print-btn .dashicons,
.farasync-imported-sync-now .dashicons {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
}
/* ============================================================
v1.0.0 (UI audit) — motion hygiene + tap targets + utilities
============================================================ */
/* v1.0.0: shared flex toolbar — replaces the copy-pasted inline flex
styles on the filter rows so spacing tweaks happen in one place. */
.farasync-toolbar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
/* v1.0.0: semantic stat-tile color modifiers — replace the inline
style="color:#…" escapes so all tiles share one styling regime. */
.farasync-stat--ok { color: #46b450; }
.farasync-stat--info { color: #007cba; }
.farasync-stat--warn { color: #dba617; }
.farasync-stat--bad { color: #d63638; }
.farasync-stat--muted { color: #94a3b8; }
/* v1.0.0: keyboard focus ring for visually-hidden chip inputs. */
.farasync-fchip-opt:focus-within {
outline: 2px solid #6366f1;
outline-offset: 1px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.farasync-command-center *,
.farasync-modal *,
#farasync-toast-container *,
.farasync-toast,
.farasync-spin,
.farasync-ord-spin,
.farasync-warning-pulse,
tr.farasync-row-flash {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 600px) {
.farasync-icon-btn,
.farasync-print-btn {
width: 40px !important;
height: 40px !important;
}
.farasync-chart-axis-txt {
font-size: 9px; /* v1.0.0: 7px Persian digits were unreadable */
}
}
/* ====================================================================
v1.0.0 (user request) — «موارد ناموفق» gets TWO sub-tabs:
«محصولات» (the existing failed-import list) and a NEW «سفارشات» list
for orders whose push to the source failed. Same design tokens as the
rest of the command center (WP palette vars + Vazirmatn stack).
==================================================================== */
/* ---- the sub-tab pill switcher ---- */
.farasync-issues-subtabs {
display: inline-flex;
align-items: center;
gap: 3px;
background: #ededee;
border: 1px solid var(--farasync-border);
border-radius: 999px;
padding: 3px;
margin: 0 0 14px;
max-width: 100%;
}
.farasync-issues-subtab {
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
border-radius: 999px;
padding: 5px 16px;
font-family: var(--farasync-font);
font-size: 12.5px;
line-height: 1.7;
color: var(--farasync-text-muted);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.farasync-issues-subtab:hover {
color: var(--farasync-text);
}
.farasync-issues-subtab:focus-visible {
outline: 2px solid var(--farasync-primary);
outline-offset: 1px;
}
.farasync-issues-subtab .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
position: relative;
top: -1px;
}
.farasync-issues-subtab.is-active {
background: var(--farasync-surface);
color: var(--farasync-text);
font-weight: 700;
box-shadow: var(--farasync-shadow-sm);
}
.farasync-issues-subtab-count {
min-width: 19px;
text-align: center;
font-size: 10.5px;
font-weight: 700;
line-height: 1.7;
border-radius: 999px;
padding: 0 6px;
background: #dcdcde;
color: var(--farasync-text-muted);
}
.farasync-issues-subtab-count.is-hot {
background: var(--farasync-danger-bg);
color: var(--farasync-danger);
border: 1px solid var(--farasync-danger-border);
}
.farasync-issues-subtab.is-active .farasync-issues-subtab-count.is-hot {
background: var(--farasync-danger);
color: #fff;
border-color: var(--farasync-danger);
}
.farasync-issues-subtab.is-active .farasync-issues-subtab-count:not(.is-hot) {
background: var(--farasync-primary-light);
color: var(--farasync-primary);
}
/* ---- view switching ---- */
.farasync-issues-view {
display: none;
}
.farasync-issues-view.is-active {
display: block;
}
/* ---- «سفارشات» table ---- */
.farasync-ord-num {
font-weight: 700;
font-size: 13px;
color: var(--farasync-primary);
text-decoration: none;
}
.farasync-ord-num:hover {
color: var(--farasync-primary-hover);
text-decoration: underline;
}
.farasync-ord-meta {
font-size: 11px;
color: var(--farasync-text-muted);
margin-top: 1px;
}
.farasync-ord-col-total {
font-weight: 700;
white-space: nowrap;
}
.farasync-ord-chip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.7;
margin-bottom: 6px;
white-space: nowrap;
}
.farasync-ord-chip .dashicons {
font-size: 13px;
width: 13px;
height: 13px;
}
.farasync-ord-chip.is-retrying {
background: var(--farasync-primary-light);
color: var(--farasync-primary);
border: 1px solid #c5d9ed;
}
.farasync-ord-chip.is-failed {
background: var(--farasync-danger-bg);
color: var(--farasync-danger);
border: 1px solid var(--farasync-danger-border);
}
.farasync-ord-why {
font-size: 12px;
line-height: 1.7;
word-break: break-word;
max-width: 340px;
}
.farasync-ord-row.is-retrying .farasync-ord-why {
color: var(--farasync-text-muted);
}
.farasync-ord-row.is-failed .farasync-ord-why {
color: var(--farasync-danger);
}
.farasync-ord-att {
font-weight: 700;
white-space: nowrap;
}
.farasync-ord-bar {
display: block;
width: 76px;
height: 5px;
border-radius: 999px;
background: #e5e7eb;
overflow: hidden;
margin-top: 4px;
direction: ltr;
}
.farasync-ord-bar i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--farasync-primary);
}
.farasync-ord-bar.is-full i {
background: var(--farasync-danger);
}
.farasync-ord-next {
display: block;
font-size: 10.5px;
color: var(--farasync-text-muted);
margin-top: 2px;
white-space: nowrap;
}
.farasync-ord-next.is-urgent {
color: var(--farasync-danger);
font-weight: 700;
}
.farasync-ord-actions {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.farasync-ord-retry {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid var(--farasync-border-strong);
border-radius: var(--farasync-radius-sm);
background: #f6f7f7;
color: var(--farasync-text);
font-family: var(--farasync-font);
font-size: 12px;
line-height: 1.7;
padding: 2px 10px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.farasync-ord-retry .dashicons {
font-size: 13px;
width: 13px;
height: 13px;
}
.farasync-ord-retry:hover {
background: #f0f0f1;
border-color: var(--farasync-text-light);
}
.farasync-ord-retry.is-primary {
background: var(--farasync-primary);
border-color: var(--farasync-primary);
color: #fff;
}
.farasync-ord-retry.is-primary:hover {
background: var(--farasync-primary-hover);
border-color: var(--farasync-primary-hover);
}
.farasync-ord-retry[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.farasync-ord-spin {
animation: farasync-spin 0.8s linear infinite;
}
/* the × mirrors the products list glyph (bare, big, no button chrome) */
.farasync-ord-dismiss {
appearance: none;
background: none !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 2px !important;
min-width: 32px !important;
min-height: 36px !important;
font-size: 32px !important;
font-weight: 300 !important;
line-height: 1 !important;
vertical-align: middle;
color: #b32d2e !important;
cursor: pointer;
}
.farasync-ord-dismiss:hover {
background: none !important;
color: #7f1d1d !important;
border: none !important;
opacity: 0.85;
}
.farasync-ord-dismiss:focus {
outline: 1px dotted #b32d2e;
outline-offset: 2px;
}
/* small screens: the pills stretch, table columns stack like the rest */
@media (max-width: 782px) {
.farasync-issues-subtabs {
display: flex;
width: 100%;
}
.farasync-issues-subtab {
flex: 1;
justify-content: center;
padding: 6px 10px;
}
.farasync-ord-why {
max-width: none;
}
}
/* ==================================================================
v1.0.0 — CREDIT: key-editor wallet controls + auto-paid badge
================================================================== */
.farasync-credit-current { margin: 0 0 8px; }
.farasync-credit-current strong { color: #2a9d76; font-size: 1.05em; }
.farasync-credit-adjust-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* v1.0.0 (user request): the amount field is DOUBLED in width — the old
75px .small-text box could not fit «۱٬۰۰۰٬۰۰۰» comfortably. */
input.farasync-credit-amount-input {
width: 180px;
min-width: 180px;
}
#farasync-key-credit-reason { margin-top: 8px; }
.farasync-credit-recent { margin-top: 12px; }
/* v1.0.0 (user request): clicking one direction LOCKS the opposite
button until the request settles — visually dimmed, no double fire. */
.farasync-credit-adjust.is-locked,
.farasync-credit-adjust:disabled {
opacity: .55;
cursor: not-allowed;
}
.farasync-credit-recent h4 { margin: 0 0 6px; }
.farasync-credit-recent-table .farasync-credit-reason { opacity: .7; font-size: .9em; }
/* v1.0.0 (user request): the recent-activity statement is a COLLAPSIBLE —
a clickable header (closed by default) revealing the table. The chevron
flips when expanded; works in RTL and LTR alike (inline-start padding). */
.farasync-credit-recent-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100%;
max-width: 420px;
margin: 0 0 8px;
padding: 6px 10px;
font-size: 13px;
font-weight: 600;
color: #1d2327;
background: #f6f7f7;
border: 1px solid #c3c4c7;
border-radius: 6px;
cursor: pointer;
text-align: start;
}
.farasync-credit-recent-toggle:hover { background: #f0f0f1; }
.farasync-credit-recent-toggle:focus { outline: 1px solid #4f46e5; outline-offset: 1px; }
.farasync-credit-recent-toggle .farasync-credit-recent-arrow::before {
content: '\25B8'; /* ▸ — collapsed (points at the closed header) */
display: inline-block;
font-size: 12px;
line-height: 1;
transition: transform .15s ease;
}
.farasync-credit-recent-toggle[aria-expanded="true"] .farasync-credit-recent-arrow::before {
content: '\25BE'; /* ▾ — expanded */
}
.farasync-credit-recent-body { margin-top: 2px; }
.farasync-inv-autopaid {
display: inline-block;
margin-inline-start: 6px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #1e8e5a;
background: #e7f7ef;
border: 1px solid #bfe6d2;
vertical-align: middle;
white-space: nowrap;
}
/* v1.0.0: the standalone autopaid checkbox is gone (the filter moved
INTO the status chip) — its label rule removed with it. */
/* ====================================================================
* v1.0.0 (user request) — the invoices-tab ACTIONS cell, merged.
*
* The old layout spent two columns on it (a text «جزئیات فاکتور» button
* + a narrow Print cell). Now ONE Actions cell holds three gray icon
* buttons: [eye] [printer] [trash]. The freed width went to the تاریخ /
* کد رهگیری / مجموع عمدهفروشی columns (thead widths), and the
* «شماره سفارش» header became «سفارش» on a narrower column.
* - white-space:nowrap + line-height:1 — the three 30px buttons stay
* on one line with no phantom baseline strut below them.
* - the shared gap is 4px (adjacent-sibling margin), applied to the
* cell's direct children so a missing print link never miscounts.
* - the plugin's own icon margins are zeroed inside this cell so the
* 4px rhythm is exact (farasync-icon-btn ships margin:0 2px).
* ==================================================================== */
.farasync-invoices-table td.farasync-inv-col-actions {
white-space: nowrap;
line-height: 1;
}
.farasync-invoices-table td.farasync-inv-col-actions > * {
vertical-align: middle;
}
.farasync-invoices-table td.farasync-inv-col-actions .farasync-icon-btn,
.farasync-invoices-table td.farasync-inv-col-actions .farasync-print-btn {
margin: 0 !important;
}
/* v1.0.0 (user report): the 5px gap NEVER rendered — this rule's old
selector (0,2,1) LOST to the zeroing rule above (0,3,1, both !important),
so all three buttons stayed glued together. Two repairs: the selector is
bumped with .wp-list-table to (0,4,1) so it outranks the zeroing rule, and
the gap is 4px (the user's 3-5px range — same rhythm the moneyflow tab
uses since v1.0.0). inline-START keeps the gap BETWEEN siblings and the
cluster edge flush in RTL and LTR alike. */
.wp-list-table.farasync-invoices-table td.farasync-inv-col-actions > * + * {
margin-inline-start: 4px !important;
}
/* ====================================================================
* v1.0.0/v1.0.0 (user request) — the invoices tab note indicator.
* v1.0.0: the indicator is a FLOATING 12px badge pinned to the eye
* button's START corner (the RIGHT side in the RTL admin — the user's
* «سمت راست دکمه ی چشم»). The eye button sits inside a relative
* .farasync-inv-view-wrap and the badge hangs off its start-top corner;
* a soft drop-shadow keeps the glyph readable where it crosses the
* button edge. Amber while unread, muted gray once read; hovering it
* shows the native tooltip «حاوی یادداشت». It forwards clicks to the
* eye's own .farasync-invoice-view handler, so the corner it covers is
* never a dead zone. The 4px sibling gap rule above still spaces
* [eye-wrap][print][trash] — the badge is absolute, outside the flow.
* The old .farasync-note-badge rules stay — the invoice modal's inline
* note pill still uses them.
* ==================================================================== */
.farasync-inv-view-wrap {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.farasync-inv-note-ic {
position: absolute;
top: -5px;
inset-inline-start: -5px; /* start side of the eye button = RIGHT in RTL */
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
cursor: pointer;
z-index: 2;
filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.30));
}
.farasync-inv-note-ic svg {
width: 12px;
height: 12px;
display: block;
}
.farasync-inv-note-ic.is-unread {
color: #d97706;
}
.farasync-inv-note-ic.is-read {
color: #94a3b8;
}
|