/* ==========================================================================
   Farasync Command Center UI
   Final presentation layer for the admin dashboard and modal workflow.
   This file intentionally loads after the legacy admin styles so the visual
   system stays cohesive without changing dashboard markup or business logic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundation
   -------------------------------------------------------------------------- */

.farasync-command-center,
.farasync-modal {
    --farasync-bg: #f3f6fb;
    --farasync-surface: #ffffff;
    --farasync-border: #e2e8f0;
    --farasync-border-strong: #cbd5e1;
    --farasync-text: #172033;
    --farasync-text-muted: #64748b;
    --farasync-text-light: #94a3b8;
    --farasync-primary: #2563eb;
    --farasync-primary-hover: #1d4ed8;
    --farasync-primary-light: #eff6ff;
    --farasync-success: #059669;
    --farasync-success-bg: #ecfdf5;
    --farasync-success-border: #a7f3d0;
    --farasync-danger: #dc2626;
    --farasync-danger-bg: #fef2f2;
    --farasync-danger-border: #fecaca;
    --farasync-warning: #d97706;
    --farasync-radius-sm: 10px;
    --farasync-radius: 14px;
    --farasync-radius-lg: 20px;
    --farasync-radius-xl: 24px;
    --farasync-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --farasync-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --farasync-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.06);
    --farasync-shadow-card-hover: 0 18px 42px rgba(15, 23, 42, 0.13);
    --farasync-shadow-modal: 0 32px 90px rgba(15, 23, 42, 0.3);
    --farasync-gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%);
    --farasync-gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
    --farasync-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}

.farasync-command-center {
    max-width: 1540px !important;
    margin: 20px auto 32px !important;
    color: var(--farasync-text);
}

.farasync-command-center *,
.farasync-modal * {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

.farasync-command-center ::selection,
.farasync-modal ::selection {
    color: #ffffff;
    background: #4f46e5;
}

.farasync-command-center :focus-visible,
.farasync-modal :focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.32) !important;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Hero header and navigation
   -------------------------------------------------------------------------- */

.farasync-command-center .farasync-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 24px;
    min-height: 144px;
    padding: 28px 32px !important;
    margin: 0 !important;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 14%, rgba(129, 140, 248, 0.56), transparent 31%),
        radial-gradient(circle at 8% 118%, rgba(45, 212, 191, 0.2), transparent 39%),
        linear-gradient(121deg, #0f172a 0%, #172554 48%, #312e81 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 48px rgba(30, 41, 59, 0.22) !important;
}

.farasync-command-center .farasync-header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 76%);
    mask-image: linear-gradient(90deg, #000, transparent 76%);
}

.farasync-command-center .farasync-header::after {
    position: absolute;
    z-index: -1;
    width: 320px;
    height: 320px;
    inset-inline-end: -150px;
    top: -220px;
    content: '';
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.035), 0 0 0 84px rgba(255, 255, 255, 0.025);
}

.farasync-command-center .farasync-header-brand,
.farasync-command-center .farasync-header-actions {
    position: relative;
    z-index: 1;
}

.farasync-command-center .farasync-header-brand {
    gap: 18px;
    min-width: 0;
}

.farasync-command-center .farasync-logo {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.farasync-command-center .farasync-logo .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
}

.farasync-command-center .farasync-header-title h1 {
    margin: 0 0 7px !important;
    color: #ffffff !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.55px;
}

.farasync-command-center .farasync-subtitle {
    max-width: 690px;
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 13px !important;
    line-height: 1.9;
}

.farasync-command-center .farasync-copy-icon {
    opacity: 0.82;
}

/* v1.0.0: Active-mode badge — dark-glass variant matching the hero header.
   Colors per mode: distribution = green, receive = sky blue, both = amber. */
.farasync-command-center .farasync-mode-badge {
    align-self: flex-start;
    padding: 8px 16px !important;
    font-size: 12.5px;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.26) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.farasync-command-center .farasync-mode-badge .dashicons {
    color: #c7d2fe !important;
}

.farasync-command-center .farasync-mode-badge.mode-distribution {
    border-color: rgba(70, 180, 80, 0.55) !important;
    color: #bbf7d0;
}

.farasync-command-center .farasync-mode-badge.mode-distribution .dashicons {
    color: #4ade80 !important;
}

.farasync-command-center .farasync-mode-badge.mode-receive {
    border-color: rgba(114, 174, 230, 0.55) !important;
    color: #bfdbfe;
}

.farasync-command-center .farasync-mode-badge.mode-receive .dashicons {
    color: #93c5fd !important;
}

.farasync-command-center .farasync-mode-badge.mode-both {
    border-color: rgba(219, 166, 23, 0.55) !important;
    color: #fde68a;
}

.farasync-command-center .farasync-mode-badge.mode-both .dashicons {
    color: #fcd34d !important;
}

.farasync-command-center .farasync-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 7px !important;
    margin: 16px 0 0 !important;
    padding: 8px !important;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(203, 213, 225, 0.86) !important;
    border-radius: 17px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.farasync-command-center .farasync-tab {
    top: 0 !important;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px !important;
    color: #64748b !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.2;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.farasync-command-center .farasync-tab::after {
    display: none !important;
}

.farasync-command-center .farasync-tab:hover {
    color: #1e3a8a !important;
    background: #eef2ff !important;
    box-shadow: none !important;
    transform: none !important;
}

.farasync-command-center .farasync-tab.is-active {
    color: #ffffff !important;
    background: var(--farasync-gradient-primary) !important;
    box-shadow: 0 9px 18px rgba(79, 70, 229, 0.26) !important;
}

.farasync-command-center .farasync-tab.is-active .dashicons {
    color: #e0e7ff;
}

.farasync-command-center .farasync-tab-panels {
    min-height: 500px;
    margin-top: 12px;
    padding: 26px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(219, 234, 254, 0.58), transparent 28%),
        #f7f9fc !important;
    border: 1px solid rgba(203, 213, 225, 0.88) !important;
    border-radius: 20px !important;
    box-shadow: var(--farasync-shadow) !important;
}

/* v1.0.0 (Round Y5): short tabs (debug, settings…) — the ACTIVE panel
   stretches so the credit footer always sits on the box floor instead of
   floating mid-box under the 500px min-height. */
.farasync-command-center .farasync-tab-panels {
    display: flex;
    flex-direction: column;
}
.farasync-command-center .farasync-tab-panels .farasync-tab-panel.is-active {
    display: block;
    flex: 1 0 auto;
}

.farasync-command-center .farasync-tab-panel.is-active {
    animation: farasync-command-center-panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes farasync-command-center-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   3. Shared controls, settings and tables
   -------------------------------------------------------------------------- */

.farasync-command-center .button,
.farasync-command-center .farasync-btn,
.farasync-modal .button,
.farasync-modal .farasync-btn {
    min-height: 38px;
    margin: 0 !important;
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-family: var(--farasync-font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.farasync-command-center .button:hover:not(:disabled),
.farasync-command-center .farasync-btn:hover:not(:disabled),
.farasync-modal .button:hover:not(:disabled),
.farasync-modal .farasync-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.farasync-command-center .button-primary,
.farasync-command-center .farasync-btn-primary,
.farasync-modal .button-primary,
.farasync-modal .farasync-btn-primary {
    color: #ffffff !important;
    background: var(--farasync-gradient-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.22) !important;
}

.farasync-command-center .button-primary:hover:not(:disabled),
.farasync-command-center .farasync-btn-primary:hover:not(:disabled),
.farasync-modal .button-primary:hover:not(:disabled),
.farasync-modal .farasync-btn-primary:hover:not(:disabled) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 52%, #6d28d9 100%) !important;
    box-shadow: 0 12px 23px rgba(79, 70, 229, 0.3) !important;
}

.farasync-command-center .button-secondary,
.farasync-command-center .farasync-btn-ghost,
.farasync-modal .button-secondary,
.farasync-modal .farasync-btn-ghost {
    color: #334155 !important;
    background: #ffffff !important;
    border-color: #d8e0ec !important;
}

.farasync-command-center .button-secondary:hover:not(:disabled),
.farasync-command-center .farasync-btn-ghost:hover:not(:disabled),
.farasync-modal .button-secondary:hover:not(:disabled),
.farasync-modal .farasync-btn-ghost:hover:not(:disabled) {
    color: #1d4ed8 !important;
    background: #f8fbff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 7px 15px rgba(37, 99, 235, 0.1) !important;
}

.farasync-command-center .farasync-btn-accent,
.farasync-modal .farasync-btn-accent {
    color: #ffffff !important;
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.2) !important;
}

.farasync-command-center .button-link-delete,
.farasync-command-center .farasync-btn-danger,
.farasync-modal .button-link-delete,
.farasync-modal .farasync-btn-danger {
    color: #b91c1c !important;
    background: #fff5f5 !important;
    border-color: #fecaca !important;
}

.farasync-command-center .button-link-delete:hover:not(:disabled),
.farasync-command-center .farasync-btn-danger:hover:not(:disabled),
.farasync-modal .button-link-delete:hover:not(:disabled),
.farasync-modal .farasync-btn-danger:hover:not(:disabled) {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2) !important;
}

.farasync-command-center input[type="text"],
.farasync-command-center input[type="number"],
.farasync-command-center input[type="url"],
.farasync-command-center input[type="email"],
.farasync-command-center input[type="password"],
.farasync-command-center input[type="search"],
.farasync-command-center input[type="date"],
.farasync-command-center select,
.farasync-command-center textarea,
.farasync-modal input[type="text"],
.farasync-modal input[type="number"],
.farasync-modal input[type="url"],
.farasync-modal input[type="email"],
.farasync-modal input[type="password"],
.farasync-modal input[type="search"],
.farasync-modal input[type="date"],
.farasync-modal select,
.farasync-modal textarea {
    min-height: 40px;
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #d7e0ec !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.farasync-command-center input:focus,
.farasync-command-center select:focus,
.farasync-command-center textarea:focus,
.farasync-modal input:focus,
.farasync-modal select:focus,
.farasync-modal textarea:focus {
    background: #ffffff !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}

.farasync-command-center input[type="checkbox"],
.farasync-command-center input[type="radio"],
.farasync-modal input[type="checkbox"],
.farasync-modal input[type="radio"] {
    accent-color: #4f46e5;
}

.farasync-command-center .farasync-form,
.farasync-command-center .farasync-keys-toolbar,
.farasync-command-center .farasync-imported-filters {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 7px 19px rgba(15, 23, 42, 0.035);
}

.farasync-command-center .farasync-form {
    padding: 8px 22px 20px;
}

.farasync-command-center .farasync-form .form-table {
    margin: 0;
}

.farasync-command-center .farasync-form .form-table tr {
    border-color: #edf2f7;
}

.farasync-command-center .farasync-form-actions {
    gap: 10px;
    margin: 18px -22px -20px;
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #e8eef6;
    border-radius: 0 0 16px 16px;
}

.farasync-command-center .farasync-divider {
    margin: 26px 0 !important;
    border-top-color: #dce5f0 !important;
}

.farasync-command-center .farasync-keys-toolbar {
    gap: 18px;
    min-height: 72px;
    margin: 0 0 15px !important;
    padding: 15px 17px !important;
    background: linear-gradient(105deg, #ffffff 0%, #f7faff 100%) !important;
}

.farasync-command-center .farasync-keys-desc {
    max-width: 820px;
    margin: 0 !important;
    color: #64748b !important;
    line-height: 1.85;
}

.farasync-command-center .farasync-imported-filters {
    gap: 10px !important;
    margin: 0 0 15px !important;
    padding: 14px !important;
}

.farasync-command-center .wp-list-table {
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 7px 19px rgba(15, 23, 42, 0.035);
}

.farasync-command-center .wp-list-table thead th {
    height: 48px;
    padding: 13px 14px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.farasync-command-center .wp-list-table tbody td {
    padding: 13px 14px !important;
    color: #334155;
    border-bottom-color: #edf2f7 !important;
    vertical-align: middle;
}

.farasync-command-center .wp-list-table tbody tr {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.farasync-command-center .wp-list-table tbody tr:hover {
    background: #f8fbff !important;
    box-shadow: inset 3px 0 0 #818cf8;
}

/* v1.0.0 (item 3, user report «ستون عملیات وقتی جدول خالیه سفید میشه»):
   on an EMPTY report table (the single .farasync-empty-row colspan state)
   a stray white strip appeared on the «عملیات» column plus the row-hover
   indigo inset line — per-column paint where one uniform surface belongs.
   Pin EVERY header cell (last/actions column explicitly) to the shared
   header background, and make the empty row fully inert: transparent, no
   hover chrome, no inset stripe, no per-cell background — whatever WP core,
   the admin theme or another plugin tries to restyle. Empty-state rows are
   the LAST row, so dropping their bottom border leaves the table's own
   rounded outer border to close the box. */
.farasync-command-center .wp-list-table thead th,
.farasync-command-center .wp-list-table thead th:last-child,
.farasync-command-center .wp-list-table thead th.farasync-imported-actions-col {
    background: #f8fafc !important;
}

.farasync-command-center .wp-list-table tbody tr.farasync-empty-row,
.farasync-command-center .wp-list-table tbody tr.farasync-empty-row:hover,
.farasync-command-center .wp-list-table tbody tr.farasync-empty-row td,
.farasync-command-center .wp-list-table tbody tr.farasync-empty-row:hover td {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

.farasync-command-center .wp-list-table code,
.farasync-modal code {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
}

/* v1.0.0 (Round Y8): the failed-items identifier is PLAIN TEXT — no chip
   box (user request). This scoped override beats the generic table code
   rule above (and matches the ident-first / unboxed column redesign). */
.farasync-command-center .farasync-issues-table .farasync-issue-ident code {
    color: #334155 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-weight: 700;
}

.farasync-command-center .farasync-empty-state {
    min-height: 210px;
    padding: 32px 20px;
    color: #64748b;
}

/* release polish: the big decorative empty-state icon is now
   scoped to the DIRECT child only — the old descendant selector also
   caught the «+» dashicon INSIDE the Add-Source button and blew the
   button up into a malformed 58px square with a near-invisible glyph. */
.farasync-command-center .farasync-empty-state > .dashicons {
    width: 58px;
    height: 58px;
    padding: 15px;
    color: #6366f1;
    background: #eef2ff;
    border-radius: 18px;
    opacity: 1;
}

/* release polish: buttons inside an empty state keep a compact,
   well-formed shape — white ground, black plus, small square. */
.farasync-command-center .farasync-empty-state .button,
.farasync-command-center .farasync-empty-state .button-primary {
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 1px solid #d8e0ec !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    padding: 4px 14px !important;
    min-height: 0 !important;
    line-height: 1.9 !important;
}
.farasync-command-center .farasync-empty-state .button:hover:not(:disabled),
.farasync-command-center .farasync-empty-state .button:focus-visible {
    color: #111827 !important;
    background: #f8fbff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.10) !important;
}
.farasync-command-center .farasync-empty-state .button .dashicons {
    width: 15px;
    height: 15px;
    font-size: 15px;
    padding: 0;
    margin-inline-start: 2px;
    color: #000000 !important;
    background: none !important;
    border-radius: 0 !important;
    opacity: 1;
}

.farasync-command-center .farasync-empty-state p {
    max-width: 460px;
    line-height: 1.8;
}

.farasync-command-center .farasync-badge,
.farasync-command-center .farasync-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. Dashboard command center
   -------------------------------------------------------------------------- */

.farasync-command-center .farasync-tab-panel[data-panel="dashboard"] .farasync-modules-grid {
    gap: 18px !important;
    margin-bottom: 20px;
}

.farasync-command-center .farasync-module-card {
    min-height: 220px;
    padding: 23px !important;
    background:
        radial-gradient(circle at 96% 10%, rgba(191, 219, 254, 0.65), transparent 34%),
        var(--farasync-gradient-card) !important;
    border: 1px solid #dce6f2 !important;
    border-radius: 18px !important;
    box-shadow: var(--farasync-shadow-card) !important;
}

.farasync-command-center .farasync-module-card::before {
    height: 4px !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, #60a5fa, #6366f1, #a78bfa) !important;
}

.farasync-command-center .farasync-module-card.is-disabled {
    color: #64748b;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-color: #e2e8f0 !important;
    opacity: 0.82;
}

.farasync-command-center .farasync-module-card.is-disabled::before {
    background: #cbd5e1 !important;
}

.farasync-command-center .farasync-module-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: var(--farasync-shadow-card-hover) !important;
    transform: translateY(-3px);
}

.farasync-command-center .farasync-module-header {
    gap: 13px;
}

.farasync-command-center .farasync-module-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
    background: var(--farasync-gradient-primary) !important;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.22);
}

.farasync-command-center .farasync-module-card.is-disabled .farasync-module-icon {
    background: #94a3b8 !important;
    box-shadow: none;
}

.farasync-command-center .farasync-module-info h3 {
    margin-bottom: 4px !important;
    color: #172033 !important;
    font-size: 17px !important;
}

.farasync-command-center .farasync-module-info p {
    color: #64748b !important;
    line-height: 1.75;
}

.farasync-command-center .farasync-module-status {
    width: max-content;
    margin-top: 17px;
    padding: 6px 10px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.farasync-command-center .farasync-status-dot {
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
}

.farasync-command-center .farasync-status-dot.farasync-status-on {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.farasync-command-center .farasync-module-stats {
    gap: 10px !important;
    margin-top: 16px;
}

.farasync-command-center .farasync-stat {
    min-height: 86px;
    padding: 14px 12px !important;
    color: #172033;
    text-align: start;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

.farasync-command-center .farasync-stat:hover {
    border-color: #bfdbfe !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
}

.farasync-command-center .farasync-stat-num {
    display: block;
    overflow: hidden;
    color: #1e293b !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 22px !important;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.farasync-command-center .farasync-stat-label {
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.farasync-command-center .farasync-dashboard-info,
.farasync-command-center .farasync-health-section {
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 7px 19px rgba(15, 23, 42, 0.035);
}

.farasync-command-center .farasync-dashboard-info h3,
.farasync-command-center .farasync-health-section h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px !important;
    color: #1e293b !important;
    font-size: 15px !important;
}

.farasync-command-center .farasync-dashboard-info h3::before,
.farasync-command-center .farasync-health-section h3::before {
    width: 9px;
    height: 9px;
    content: '';
    background: #6366f1;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #eef2ff;
}

.farasync-command-center .farasync-info-grid {
    gap: 12px;
}

.farasync-command-center .farasync-info-item {
    min-height: 80px;
    padding: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 13px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.farasync-command-center .farasync-info-item:hover {
    border-color: #bfdbfe !important;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
}

.farasync-command-center .farasync-info-item > .dashicons {
    width: 38px;
    height: 38px;
    padding: 9px;
    color: #4f46e5 !important;
    background: #eef2ff;
    border-radius: 12px;
}

.farasync-command-center .farasync-info-item strong {
    color: #334155 !important;
    font-size: 11px !important;
}

.farasync-command-center .farasync-info-item code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: #475569 !important;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.farasync-command-center .farasync-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px;
}

.farasync-command-center .farasync-health-card {
    position: relative;
    display: flex;
    gap: 11px;
    min-height: 96px;
    padding: 15px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}

.farasync-command-center .farasync-health-card::after {
    position: absolute;
    width: 90px;
    height: 90px;
    inset-inline-end: -48px;
    bottom: -54px;
    content: '';
    background: rgba(99, 102, 241, 0.08);
    border-radius: 50%;
}

.farasync-command-center .farasync-health-card.status-healthy {
    background: linear-gradient(145deg, #f0fdf4 0%, #f8fafc 100%);
    border-color: #bbf7d0;
}

.farasync-command-center .farasync-health-card.status-warning {
    background: linear-gradient(145deg, #fffbeb 0%, #f8fafc 100%);
    border-color: #fde68a;
}

.farasync-command-center .farasync-health-card.status-critical,
.farasync-command-center .farasync-health-card.status-error {
    background: linear-gradient(145deg, #fff1f2 0%, #f8fafc 100%);
    border-color: #fecdd3;
}

.farasync-command-center .farasync-health-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(148, 163, 184, 0.13);
}

.farasync-command-center .farasync-health-dot.healthy {
    background: #10b981;
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.13);
}

.farasync-command-center .farasync-health-dot.warning {
    background: #f59e0b;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.farasync-command-center .farasync-health-dot.critical,
.farasync-command-center .farasync-health-dot.error {
    background: #ef4444;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.13);
}

.farasync-command-center .farasync-health-name {
    color: #1e293b;
    font-weight: 700;
}

.farasync-command-center .farasync-health-msg,
.farasync-command-center .farasync-health-meta {
    margin-top: 4px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.75;
}

.farasync-command-center #farasync-stats-section .farasync-modules-grid,
.farasync-command-center #farasync-sales-stats.farasync-modules-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.farasync-command-center #farasync-stats-section .farasync-stat,
.farasync-command-center #farasync-sales-stats .farasync-stat {
    min-height: 104px;
    padding: 17px !important;
}

.farasync-command-center #farasync-stats-section .farasync-stat:nth-child(1),
.farasync-command-center #farasync-sales-stats .farasync-stat:nth-child(1) {
    border-top: 3px solid #6366f1 !important;
}

.farasync-command-center #farasync-stats-section .farasync-stat:nth-child(2),
.farasync-command-center #farasync-sales-stats .farasync-stat:nth-child(2) {
    border-top: 3px solid #10b981 !important;
}

.farasync-command-center #farasync-stats-section .farasync-stat:nth-child(3),
.farasync-command-center #farasync-sales-stats .farasync-stat:nth-child(3) {
    border-top: 3px solid #3b82f6 !important;
}

.farasync-command-center #farasync-stats-section .farasync-stat:nth-child(4),
.farasync-command-center #farasync-sales-stats .farasync-stat:nth-child(4) {
    border-top: 3px solid #f59e0b !important;
}

.farasync-command-center .farasync-stats-chart {
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.farasync-command-center .farasync-stats-chart > div:first-child {
    gap: 4px !important;
    padding: 0 6px 6px !important;
    border-bottom-color: #dce5f0 !important;
}

/* v1.0.0 (user request): chart bars are SQUARE — the 4px top-radius
   skin made every bar look beveled («پخ»); removed so the reservations
   / sales / profit charts all render flat-topped segments. */

/* v1.0.0 (Round Y11): the vertical date axis must mirror the canvas
   geometry EXACTLY (4px gap + 6px side padding) or the rotated dates
   drift away from their bars inside the command center. */
.farasync-command-center .farasync-stats-chart > .farasync-chart-axis {
    gap: 4px !important;
    padding: 0 6px !important;
}

/* v1.0.0 (Round Y11b): on phones the same geometry cannot hold — 30 columns
   at min-width 8px + 4px gaps overflow the canvas and the tall bars get
   clipped off-screen. Shrink BOTH rows in lockstep (same gap + side padding)
   so the rotated dates stay glued to their bars. Later in the file than the
   4px rules and equally specific → wins at ≤600px. */
@media (max-width: 600px) {
    .farasync-command-center .farasync-stats-chart > div:first-child {
        gap: 1px !important;
        padding: 0 2px 4px !important;
    }
    .farasync-command-center .farasync-stats-chart > .farasync-chart-axis {
        gap: 1px !important;
        padding: 0 2px !important;
    }
}

/* --------------------------------------------------------------------------
   5. Source cards, imported products, reports and notifications
   -------------------------------------------------------------------------- */

.farasync-command-center .farasync-sources-grid {
    gap: 17px;
}

.farasync-command-center .farasync-source-card {
    min-height: 250px;
    padding: 21px !important;
    background:
        radial-gradient(circle at 96% 8%, rgba(199, 210, 254, 0.55), transparent 35%),
        #ffffff !important;
    border: 1px solid #dce6f2 !important;
    border-radius: 18px !important;
    box-shadow: var(--farasync-shadow-card) !important;
}

.farasync-command-center .farasync-source-card::before {
    height: 4px !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, #2563eb, #6366f1, #a855f7) !important;
}

.farasync-command-center .farasync-source-card.is-disabled {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    opacity: 0.76;
}

.farasync-command-center .farasync-source-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: var(--farasync-shadow-card-hover) !important;
    transform: translateY(-3px);
}

.farasync-command-center .farasync-source-name {
    color: #172033 !important;
    font-size: 16px !important;
}

.farasync-command-center .farasync-source-url {
    display: inline-block;
    max-width: 100%;
    margin-top: 5px;
    padding: 3px 7px;
    overflow: hidden;
    color: #64748b !important;
    text-overflow: ellipsis;
    background: #f1f5f9 !important;
    border-radius: 6px;
    white-space: nowrap;
}

.farasync-command-center .farasync-source-card-meta {
    gap: 6px;
    margin: 17px 0 15px;
}

.farasync-command-center .farasync-source-card-actions {
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}

.farasync-command-center .farasync-source-action-btn {
    min-height: 33px;
    padding: 5px 10px !important;
}

.farasync-command-center .farasync-source-action-btn[data-action="bg-sync"] {
    flex: 1 1 136px;
}

.farasync-command-center .farasync-source-auto-sync,
.farasync-command-center .farasync-source-stop-selling {
    padding-top: 13px;
    border-top-color: #edf2f7;
}

.farasync-command-center .farasync-source-stop-selling-label {
    color: #64748b;
}

.farasync-command-center .farasync-source-down-notice,
.farasync-command-center .notice {
    border-radius: 14px !important;
    box-shadow: 0 7px 18px rgba(146, 64, 14, 0.06);
}

.farasync-command-center .tablenav {
    margin: 15px 0 0;
}

.farasync-command-center .tablenav-pages {
    display: flex;
    align-items: center;
    gap: 7px;
}

.farasync-command-center .farasync-imported-pagination .tablenav-pages,
.farasync-command-center #farasync-invoices-pagination .tablenav-pages,
.farasync-command-center #farasync-sales-pagination .tablenav-pages {
    float: none;
    justify-content: flex-end;
}

#farasync-toast-container {
    z-index: 100002 !important;
    gap: 10px;
    inset-inline-end: 26px !important;
    bottom: 26px !important;
}

.farasync-toast {
    min-width: min(360px, calc(100vw - 32px));
    max-width: 460px;
    padding: 14px 16px !important;
    color: #334155;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #e2e8f0 !important;
    border-inline-start: 4px solid #6366f1 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.17) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.farasync-toast.farasync-toast-success {
    border-inline-start-color: #10b981 !important;
}

.farasync-toast.farasync-toast-error {
    border-inline-start-color: #ef4444 !important;
}

.farasync-toast-message {
    line-height: 1.8 !important;
}

/* --------------------------------------------------------------------------
   6. Modals and the product import manager
   -------------------------------------------------------------------------- */

.farasync-modal {
    align-items: flex-start !important;
    justify-content: center;
    padding: clamp(18px, 4vh, 42px) 18px !important;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(11px) saturate(1.12);
    -webkit-backdrop-filter: blur(11px) saturate(1.12);
}

.farasync-modal[style*="display: flex"] {
    animation: farasync-command-center-modal-backdrop-in 0.2s ease-out;
}

@keyframes farasync-command-center-modal-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.farasync-modal-content {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 36px)) !important;
    max-width: none !important;
    max-height: calc(100vh - 52px);
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 22px !important;
    box-shadow: var(--farasync-shadow-modal) !important;
    /* v1.0.0 (user report #1): «scrollbar-gutter: stable» reserved a
       permanent gutter column on the inline-END side of the dialog. In RTL
       that is the LEFT edge — it punched a white strip through the gradient
       header, the footer bar AND behind the close button, so the hero bar
       never reached the modal edge. The inner .farasync-modal-body already
       reserves its own gutter for its own scrollbar; the outer content box
       never scrolls (overflow: hidden) so it must not reserve anything. */
    scrollbar-gutter: auto;
}

.farasync-modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.farasync-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

.farasync-modal-body::-webkit-scrollbar {
    width: 8px;
}

.farasync-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.farasync-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.farasync-modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
}

.farasync-modal-content > form > .farasync-modal-body {
    flex: 1 1 auto;
}

.farasync-modal-content > .farasync-modal-body {
    flex: 1 1 auto;
}

.farasync-modal-body > form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.farasync-modal-body > form > .submit,
.farasync-modal-body > form > p.submit,
.farasync-modal-body > .farasync-sm-actions {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
}

.farasync-modal-body > .farasync-sm-actions {
    margin-top: 20px !important;
}

.farasync-modal[style*="display: flex"] .farasync-modal-content {
    animation: farasync-command-center-modal-content-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes farasync-command-center-modal-content-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#farasync-key-modal .farasync-modal-content,
#farasync-source-modal .farasync-modal-content {
    width: min(1000px, calc(100vw - 36px)) !important;
}

.farasync-modal-content.farasync-modal-wide {
    width: min(1080px, calc(100vw - 36px)) !important;
}

.farasync-modal-content.farasync-modal-xwide,
.farasync-modal-content.farasync-sm-modal {
    width: min(1440px, calc(100vw - 36px)) !important;
}

.farasync-modal-content > h2,
.farasync-modal-content > h3,
.farasync-price-rules-title,
.farasync-sm-title {
    position: sticky !important;
    z-index: 3;
    top: 0;
    min-height: 76px;
    margin: 0 !important;
    padding: 22px 68px 19px 25px !important;
    color: #172033 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 231, 255, 0.95), transparent 42%),
        linear-gradient(120deg, #ffffff 0%, #f6f8ff 100%) !important;
    border-bottom: 1px solid #e5ebf3 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 1px 0 rgba(226, 232, 240, 0.7);
    font-size: 18px !important;
    line-height: 1.6;
}

.farasync-modal-content > h2::before,
.farasync-price-rules-title::before,
.farasync-sm-title::before {
    width: 5px !important;
    background: linear-gradient(180deg, #2563eb, #7c3aed) !important;
}

.farasync-modal-close {
    position: absolute !important;
    z-index: 5 !important;
    top: 18px !important;
    inset-inline-end: 19px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 35px !important;
    height: 35px !important;
    color: #64748b !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 11px !important;
    box-shadow: 0 3px 7px rgba(15, 23, 42, 0.06);
}

.farasync-modal-close:hover {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.24) !important;
    transform: rotate(90deg);
}

.farasync-modal-content > form,
.farasync-modal-content > .form-table,
.farasync-modal-content > div:not(.farasync-sm-actions),
.farasync-modal-content > fieldset {
    margin-inline: 0 !important;
}

.farasync-modal-content > form,
.farasync-modal-content > #farasync-preview-content,
.farasync-modal-content > #farasync-invoice-content,
.farasync-modal-content > .farasync-price-rules-list,
.farasync-modal-content > .farasync-price-rule-form-wrap {
    padding-inline: 24px !important;
}

.farasync-modal-content .form-table {
    margin: 14px 0 20px !important;
}

.farasync-modal-content .form-table th {
    width: 190px !important;
    padding: 13px 12px !important;
    color: #334155 !important;
    vertical-align: top;
}

.farasync-modal-content .form-table td {
    padding: 10px 12px !important;
}

.farasync-modal-content .description {
    color: #64748b !important;
    line-height: 1.8;
}

.farasync-modal-content .farasync-field-label,
.farasync-modal-content .farasync-field-chip {
    min-height: 42px;
    padding: 9px 11px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.farasync-modal-content .farasync-field-label:hover,
.farasync-modal-content .farasync-field-chip:hover {
    background: #f8fbff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 5px 10px rgba(37, 99, 235, 0.07);
}

.farasync-modal-content .farasync-field-chip.is-checked {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.farasync-modal-content > p.submit,
.farasync-modal-content > .submit,
.farasync-modal-content > .farasync-sm-actions,
.farasync-modal-content > form > p.submit,
.farasync-modal-content > form > .submit {
    position: sticky !important;
    z-index: 3;
    bottom: 0;
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    margin: 22px 0 0 !important;
    padding: 15px 24px !important;
    background: rgba(248, 250, 252, 0.96) !important;
    border-top: 1px solid #e5ebf3;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.035);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.farasync-modal-content > .farasync-sm-actions {
    margin-top: 20px !important;
}

.farasync-modal-content > form > p.submit,
.farasync-modal-content > form > .submit {
    margin-inline: -24px !important;
}

.farasync-sm-modal .farasync-sync-manager-summary,
.farasync-sm-modal .farasync-sync-manager-filters,
.farasync-sm-modal .farasync-sync-manager-selection,
.farasync-sm-modal .farasync-sync-manager-options,
.farasync-sm-modal .farasync-sync-manager-progress,
.farasync-sm-modal .farasync-sync-manager-summary-result {
    margin-inline: 24px !important;
    border-radius: 14px !important;
}

.farasync-sm-modal .farasync-sync-manager-summary {
    min-height: 52px;
    padding: 12px 15px !important;
    background: linear-gradient(100deg, #f8fafc 0%, #eef2ff 100%) !important;
    border-color: #dce5f4 !important;
}

.farasync-sm-modal .farasync-sync-manager-summary .farasync-sm-summary-item::after {
    color: #cbd5e1;
}

.farasync-sm-modal .farasync-sync-manager-filters {
    padding: 13px !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.farasync-sm-modal .farasync-sync-manager-selection {
    justify-content: space-between;
    padding: 11px 13px !important;
    color: #854d0e;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.farasync-sm-modal .farasync-sm-selected-count {
    color: #92400e !important;
}

.farasync-sm-modal .farasync-sync-manager-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 12px !important;
    max-height: min(460px, 52vh);
    margin-inline: 24px !important;
    padding: 12px !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    border-radius: 15px !important;
}

.farasync-sm-modal .farasync-sm-product-card {
    overflow: hidden;
    padding: 11px !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-radius: 13px !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.farasync-sm-modal .farasync-sm-product-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: 0 12px 21px rgba(79, 70, 229, 0.11);
    transform: translateY(-2px);
}

.farasync-sm-modal .farasync-sm-product-card.is-selected {
    background: #eef2ff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.13);
}

.farasync-sm-modal .farasync-sm-product-image,
.farasync-sm-modal .farasync-sm-product-image-placeholder {
    height: 132px;
    background: #eef2ff;
    border-radius: 10px;
}

.farasync-sm-modal .farasync-sm-product-name {
    margin-top: 10px;
    color: #1e293b;
    font-size: 12.5px;
    line-height: 1.65;
}

.farasync-sm-modal .farasync-sm-product-badge {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9.5px;
}

.farasync-sm-modal .farasync-sync-manager-pagination {
    margin: 14px 24px !important;
    padding: 0;
}

.farasync-sm-modal .farasync-sync-manager-options,
.farasync-sm-modal .farasync-sync-manager-progress,
.farasync-sm-modal .farasync-sync-manager-summary-result {
    padding: 18px !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.farasync-sm-modal .farasync-sm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #1e293b;
}

.farasync-sm-modal .farasync-sm-option-group {
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.farasync-sm-modal .farasync-sm-radio {
    padding: 7px 8px;
    border-radius: 8px;
}

.farasync-sm-modal .farasync-sm-radio:hover {
    background: #eef2ff;
}

.farasync-sm-modal .farasync-sm-progress-log,
.farasync-sm-modal .farasync-sm-item-results {
    padding: 10px;
    background: #f8fafc;
    border-color: #e2e8f0;
    border-radius: 11px;
}

.farasync-sm-modal .farasync-sm-summary-grid .farasync-stat {
    min-height: 98px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   7. Responsive and motion preferences
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
    .farasync-command-center .farasync-header {
        min-height: 0;
    }

    .farasync-command-center .farasync-header-actions {
        width: 100%;
    }

    .farasync-command-center #farasync-stats-section .farasync-modules-grid,
    .farasync-command-center #farasync-sales-stats.farasync-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .farasync-sm-modal .farasync-sm-options-grid {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 782px) {
    .farasync-command-center {
        margin: 12px 10px 24px !important;
    }

    .farasync-command-center .farasync-header {
        padding: 22px 19px !important;
        border-radius: 19px !important;
    }

    .farasync-command-center .farasync-header-brand {
        align-items: flex-start;
    }

    /* v1.0.0 (Round Y13): the tablet logo/title/subtitle rules that used to
       live here were moved into the Y13 section at the END of this file —
       keep the compact-header sizing in ONE place. */

    .farasync-command-center .farasync-tabs {
        margin-top: 12px !important;
        border-radius: 14px !important;
    }

    .farasync-command-center .farasync-tab {
        min-height: 39px;
        padding: 9px 12px !important;
        font-size: 12px !important;
    }

    .farasync-command-center .farasync-tab-panels {
        min-height: 360px;
        padding: 16px !important;
        border-radius: 17px !important;
    }

    .farasync-command-center .farasync-tab-panel[data-panel="dashboard"] .farasync-modules-grid {
        grid-template-columns: 1fr !important;
    }

    .farasync-command-center .farasync-keys-toolbar,
    .farasync-command-center .farasync-imported-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .farasync-command-center .farasync-keys-toolbar > .button,
    .farasync-command-center .farasync-imported-filters > .button {
        justify-content: center;
    }

    .farasync-command-center .farasync-form {
        padding-inline: 14px;
    }

    .farasync-command-center .farasync-form-actions {
        flex-wrap: wrap;
        margin-inline: -14px;
        padding-inline: 14px;
    }

    .farasync-command-center .farasync-form-actions .button {
        flex: 1 1 180px;
        justify-content: center;
    }

    .farasync-command-center .farasync-dashboard-info,
    .farasync-command-center .farasync-health-section {
        padding: 16px;
    }

    .farasync-modal {
        padding: 12px !important;
    }

    .farasync-modal-content,
    #farasync-key-modal .farasync-modal-content,
    #farasync-source-modal .farasync-modal-content,
    .farasync-modal-content.farasync-modal-wide,
    .farasync-modal-content.farasync-modal-xwide,
    .farasync-modal-content.farasync-sm-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px);
        border-radius: 17px !important;
    }

    .farasync-modal-content > h2,
    .farasync-modal-content > h3,
    .farasync-price-rules-title,
    .farasync-sm-title {
        min-height: 67px;
        padding: 17px 58px 15px 18px !important;
        border-radius: 17px 17px 0 0 !important;
        font-size: 16px !important;
    }

    .farasync-modal-close {
        top: 14px !important;
        inset-inline-end: 14px !important;
    }

    .farasync-modal-content > form,
    .farasync-modal-content > #farasync-preview-content,
    .farasync-modal-content > #farasync-invoice-content,
    .farasync-modal-content > .farasync-price-rules-list,
    .farasync-modal-content > .farasync-price-rule-form-wrap {
        padding-inline: 15px !important;
    }

    .farasync-modal-content .form-table,
    .farasync-modal-content .form-table tbody,
    .farasync-modal-content .form-table tr,
    .farasync-modal-content .form-table th,
    .farasync-modal-content .form-table td {
        display: block;
        width: 100% !important;
    }

    .farasync-modal-content .form-table th {
        padding-bottom: 4px !important;
    }

    .farasync-modal-content > p.submit,
    .farasync-modal-content > .submit,
    .farasync-modal-content > .farasync-sm-actions,
    .farasync-modal-content > form > p.submit,
    .farasync-modal-content > form > .submit {
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: stretch;
        padding: 12px 15px !important;
        border-radius: 0 0 17px 17px !important;
    }

    .farasync-modal-content > form > p.submit,
    .farasync-modal-content > form > .submit {
        margin-inline: -15px !important;
    }

    .farasync-modal-content > p.submit .button,
    .farasync-modal-content > .submit .button,
    .farasync-modal-content > .farasync-sm-actions .farasync-btn {
        flex: 1 1 150px;
        justify-content: center;
    }

    .farasync-sm-modal .farasync-sync-manager-summary,
    .farasync-sm-modal .farasync-sync-manager-filters,
    .farasync-sm-modal .farasync-sync-manager-selection,
    .farasync-sm-modal .farasync-sync-manager-options,
    .farasync-sm-modal .farasync-sync-manager-progress,
    .farasync-sm-modal .farasync-sync-manager-summary-result,
    .farasync-sm-modal .farasync-sync-manager-grid,
    .farasync-sm-modal .farasync-sync-manager-pagination {
        margin-inline: 15px !important;
    }

    .farasync-sm-modal .farasync-sync-manager-grid {
        grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)) !important;
        max-height: none;
    }
}

@media screen and (max-width: 480px) {
    .farasync-command-center .farasync-header-brand {
        gap: 12px;
    }

    /* v1.0.0 (Round Y13): the logo is NO LONGER hidden on phones — the
       compact header keeps a small mark with the brand name beneath it
       (see the Y13 section at the end of this file). */

    .farasync-command-center #farasync-stats-section .farasync-modules-grid,
    .farasync-command-center #farasync-sales-stats.farasync-modules-grid {
        grid-template-columns: 1fr !important;
    }

    .farasync-command-center .farasync-info-grid,
    .farasync-command-center .farasync-health-grid {
        grid-template-columns: 1fr;
    }

    .farasync-command-center .farasync-source-card-actions .button {
        flex: 1 1 calc(50% - 7px);
        justify-content: center;
    }

    #farasync-toast-container {
        right: 12px;
        left: 12px;
        bottom: 12px !important;
    }

    .farasync-toast {
        min-width: 0;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   8. Precision refinements — compact controls, SVG icons and local dates
   -------------------------------------------------------------------------- */

.farasync-command-center,
.farasync-command-center *,
.farasync-modal,
.farasync-modal *,
.farasync-date-picker,
.farasync-toast {
    --farasync-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    font-family: var(--farasync-font) !important;
}

.farasync-command-center .dashicons,
.farasync-modal .dashicons {
    font-family: dashicons !important;
}

.farasync-command-center,
.farasync-modal {
    --farasync-radius-sm: 6px;
    --farasync-radius: 9px;
    --farasync-radius-lg: 13px;
    --farasync-radius-xl: 15px;
}

.farasync-command-center .farasync-header {
    border-radius: 16px !important;
}

.farasync-command-center .farasync-logo {
    border-radius: 12px;
}

.farasync-command-center .farasync-tabs {
    border-radius: 12px !important;
}

.farasync-command-center .farasync-tab {
    border-radius: 7px !important;
}

.farasync-command-center .farasync-tab-panels {
    border-radius: 14px !important;
}

.farasync-command-center .farasync-module-card,
.farasync-command-center .farasync-source-card,
.farasync-command-center .farasync-dashboard-info,
.farasync-command-center .farasync-health-section,
.farasync-command-center .farasync-form,
.farasync-command-center .farasync-keys-toolbar,
.farasync-command-center .farasync-imported-filters,
.farasync-command-center .wp-list-table {
    border-radius: 12px !important;
}

.farasync-command-center .farasync-module-card,
.farasync-command-center .farasync-source-card,
.farasync-command-center .farasync-info-item,
.farasync-command-center .farasync-health-card,
.farasync-sm-modal .farasync-sm-product-card {
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms ease,
        background-color 220ms ease !important;
}

.farasync-command-center .farasync-module-card:hover,
.farasync-command-center .farasync-source-card:hover,
.farasync-command-center .farasync-info-item:hover,
.farasync-sm-modal .farasync-sm-product-card:hover {
    transform: translate3d(0, -3px, 0);
}

.farasync-command-center .farasync-health-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.075);
}

.farasync-command-center .button,
.farasync-command-center .farasync-btn,
.farasync-modal .button,
.farasync-modal .farasync-btn {
    border-radius: 7px !important;
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms ease,
        border-color 180ms ease !important;
}

.farasync-command-center .button:hover:not(:disabled),
.farasync-command-center .farasync-btn:hover:not(:disabled),
.farasync-modal .button:hover:not(:disabled),
.farasync-modal .farasync-btn:hover:not(:disabled) {
    transform: translate3d(0, -1px, 0);
}

/* Compact, explicit checkbox and radio states. */
.farasync-modal-content .form-table input[type="checkbox"],
.farasync-modal-content .farasync-field-label input[type="checkbox"],
.farasync-modal-content .farasync-field-chip input[type="checkbox"],
.farasync-command-center .farasync-field-label input[type="checkbox"],
.farasync-command-center .farasync-field-chip input[type="checkbox"],
.farasync-command-center .farasync-imported-field-label input[type="checkbox"],
.farasync-command-center .farasync-master-col input[type="checkbox"],
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"],
.farasync-command-center .farasync-sm-product-checkbox,
.farasync-modal .farasync-sm-product-checkbox,
.farasync-command-center .farasync-source-stop-selling-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px 11px !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.05);
    display: inline-block !important;
    position: relative !important;
    z-index: 1;
    pointer-events: auto !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.farasync-modal-content .form-table input[type="checkbox"]:checked,
.farasync-modal-content .farasync-field-label input[type="checkbox"]:checked,
.farasync-modal-content .farasync-field-chip input[type="checkbox"]:checked,
.farasync-command-center .farasync-field-label input[type="checkbox"]:checked,
.farasync-command-center .farasync-field-chip input[type="checkbox"]:checked,
.farasync-command-center .farasync-imported-field-label input[type="checkbox"]:checked,
.farasync-command-center .farasync-master-col input[type="checkbox"]:checked,
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"]:checked,
.farasync-command-center .farasync-sm-product-checkbox:checked,
.farasync-modal .farasync-sm-product-checkbox:checked,
.farasync-command-center .farasync-source-stop-selling-label input[type="checkbox"]:checked {
    background-color: #4f46e5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='m3 8 3 3 7-7'/%3E%3C/svg%3E") !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 3px 7px rgba(79, 70, 229, 0.22) !important;
}

.farasync-modal-content .form-table input[type="checkbox"]:hover,
.farasync-modal-content .farasync-field-label input[type="checkbox"]:hover,
.farasync-modal-content .farasync-field-chip input[type="checkbox"]:hover,
.farasync-command-center .farasync-field-label input[type="checkbox"]:hover,
.farasync-command-center .farasync-field-chip input[type="checkbox"]:hover,
.farasync-command-center .farasync-imported-field-label input[type="checkbox"]:hover,
.farasync-command-center .farasync-master-col input[type="checkbox"]:hover,
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"]:hover,
.farasync-command-center .farasync-sm-product-checkbox:hover,
.farasync-modal .farasync-sm-product-checkbox:hover,
.farasync-command-center .farasync-source-stop-selling-label input[type="checkbox"]:hover {
    border-color: #6366f1 !important;
    transform: scale(1.06);
}

.farasync-modal-content .farasync-sm-radio input[type="radio"],
.farasync-modal-content .form-table input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 5px 0 0 !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.05);
}

.farasync-modal-content .farasync-sm-radio input[type="radio"]:checked,
.farasync-modal-content .form-table input[type="radio"]:checked {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    box-shadow: inset 0 0 0 4px #ffffff, 0 2px 6px rgba(79, 70, 229, 0.2) !important;
}

/* The global stock-filter radios use the same deterministic visual state. */
.farasync-command-center .farasync-radio-option-inline input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 1;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    accent-color: transparent !important;
    background: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.05) !important;
}

.farasync-command-center .farasync-radio-option-inline input[type="radio"]:checked {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    box-shadow: inset 0 0 0 4px #ffffff, 0 2px 6px rgba(79, 70, 229, 0.2) !important;
}

/*
 * WordPress admin adds a second tick through input::before. The plugin draws
 * its own single tick with background-image, so suppress both pseudo layers.
 * This is intentionally scoped to plugin controls and does not affect WP UI.
 */
.farasync-modal-content .form-table input[type="checkbox"]::before,
.farasync-modal-content .form-table input[type="checkbox"]::after,
.farasync-modal-content .farasync-field-label input[type="checkbox"]::before,
.farasync-modal-content .farasync-field-label input[type="checkbox"]::after,
.farasync-modal-content .farasync-field-chip input[type="checkbox"]::before,
.farasync-modal-content .farasync-field-chip input[type="checkbox"]::after,
.farasync-command-center .farasync-field-label input[type="checkbox"]::before,
.farasync-command-center .farasync-field-label input[type="checkbox"]::after,
.farasync-command-center .farasync-field-chip input[type="checkbox"]::before,
.farasync-command-center .farasync-field-chip input[type="checkbox"]::after,
.farasync-command-center .farasync-imported-field-label input[type="checkbox"]::before,
.farasync-command-center .farasync-imported-field-label input[type="checkbox"]::after,
.farasync-command-center .farasync-master-col input[type="checkbox"]::before,
.farasync-command-center .farasync-master-col input[type="checkbox"]::after,
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"]::before,
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"]::after,
.farasync-command-center .farasync-sm-product-checkbox::before,
.farasync-command-center .farasync-sm-product-checkbox::after,
.farasync-modal .farasync-sm-product-checkbox::before,
.farasync-modal .farasync-sm-product-checkbox::after,
.farasync-command-center .farasync-radio-option-inline input[type="radio"]::before,
.farasync-command-center .farasync-radio-option-inline input[type="radio"]::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Compact selectable fields inside all modals. */
.farasync-modal-content #farasync-key-fields-list,
.farasync-modal-content #farasync-source-fields-list,
.farasync-modal-content .farasync-fields-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.farasync-modal-content .farasync-field-label,
.farasync-modal-content .farasync-field-chip {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #dbe4ef !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.farasync-modal-content .farasync-field-label:hover,
.farasync-modal-content .farasync-field-chip:hover {
    background: #f8fbff !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 4px 9px rgba(79, 70, 229, 0.08) !important;
}

.farasync-modal-content .farasync-field-label.is-checked,
.farasync-modal-content .farasync-field-chip.is-checked {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.farasync-modal-content .farasync-field-label .farasync-field-note,
.farasync-modal-content .farasync-field-chip .farasync-field-note {
    font-size: 9px;
}

.farasync-modal-content .farasync-chip-label,
.farasync-modal-content .farasync-field-label-text {
    line-height: 1.35;
}

/* Wider dialogs with a modest, reliable inset around their inner content. */
.farasync-modal-content {
    width: min(850px, calc(100vw - 38px)) !important;
    border-radius: 15px !important;
}

#farasync-key-modal .farasync-modal-content,
#farasync-source-modal .farasync-modal-content {
    width: min(1160px, calc(100vw - 38px)) !important;
}

.farasync-modal-content.farasync-modal-wide {
    width: min(1240px, calc(100vw - 38px)) !important;
}

.farasync-modal-content.farasync-modal-xwide,
.farasync-modal-content.farasync-sm-modal {
    width: min(1540px, calc(100vw - 38px)) !important;
}

.farasync-modal-content > h2,
.farasync-modal-content > h3,
.farasync-price-rules-title,
.farasync-sm-title {
    min-height: 68px;
    padding: 18px 62px 16px 23px !important;
    border-radius: 15px 15px 0 0 !important;
}

.farasync-modal-close {
    top: 15px !important;
    inset-inline-end: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
}

.farasync-modal-content > form,
.farasync-modal-content > #farasync-preview-content,
.farasync-modal-content > #farasync-invoice-content,
.farasync-modal-content > .farasync-price-rules-list,
.farasync-modal-content > .farasync-price-rule-form-wrap {
    margin: 18px 26px 0 !important;
    padding: 0 !important;
}

.farasync-modal-content > form > p.submit,
.farasync-modal-content > form > .submit {
    margin: 20px -26px 0 !important;
}

.farasync-modal-content > p.submit,
.farasync-modal-content > .submit,
.farasync-modal-content > .farasync-sm-actions,
.farasync-modal-content > form > p.submit,
.farasync-modal-content > form > .submit {
    padding: 12px 22px !important;
    border-radius: 0 0 15px 15px !important;
}

.farasync-sm-modal .farasync-sync-manager-summary,
.farasync-sm-modal .farasync-sync-manager-filters,
.farasync-sm-modal .farasync-sync-manager-selection,
.farasync-sm-modal .farasync-sync-manager-options,
.farasync-sm-modal .farasync-sync-manager-progress,
.farasync-sm-modal .farasync-sync-manager-summary-result,
.farasync-sm-modal .farasync-sync-manager-grid,
.farasync-sm-modal .farasync-sync-manager-pagination {
    margin-inline: 26px !important;
}

.farasync-sm-modal .farasync-sync-manager-summary,
.farasync-sm-modal .farasync-sync-manager-filters,
.farasync-sm-modal .farasync-sync-manager-selection,
.farasync-sm-modal .farasync-sync-manager-options,
.farasync-sm-modal .farasync-sync-manager-progress,
.farasync-sm-modal .farasync-sync-manager-summary-result,
.farasync-sm-modal .farasync-sync-manager-grid {
    border-radius: 10px !important;
}

/* Toasts now size themselves to the message and expose a quiet life indicator. */
#farasync-toast-container {
    align-items: flex-end;
    gap: 9px;
}

.farasync-toast {
    position: relative;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 10px;
    width: fit-content;
    min-width: 0;
    max-width: min(520px, calc(100vw - 34px));
    padding: 11px 10px 12px 11px !important;
    overflow: hidden;
    color: #334155;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dce5f0 !important;
    border-inline-start: 3px solid #6366f1 !important;
    border-radius: 10px !important;
    box-shadow: 0 15px 33px rgba(15, 23, 42, 0.18), 0 2px 5px rgba(15, 23, 42, 0.05) !important;
    animation: farasync-toast-enter 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.farasync-toast::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: '';
    background: currentColor;
    opacity: 0.2;
    transform: scaleX(1);
    transform-origin: right center;
    animation: farasync-toast-progress var(--farasync-toast-duration, 4000ms) linear forwards;
}

.farasync-toast.farasync-toast-success {
    color: #047857;
    border-inline-start-color: #10b981 !important;
}

.farasync-toast.farasync-toast-error {
    color: #b91c1c;
    border-inline-start-color: #ef4444 !important;
}

.farasync-toast.farasync-toast-info {
    color: #3730a3;
    border-inline-start-color: #6366f1 !important;
}

.farasync-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 8px;
}

.farasync-toast-success .farasync-toast-icon {
    color: #047857;
    background: #ecfdf5;
}

.farasync-toast-error .farasync-toast-icon {
    color: #b91c1c;
    background: #fef2f2;
}

.farasync-toast-icon svg,
.farasync-toast-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.farasync-toast-message {
    align-self: center;
    min-width: 0;
    color: inherit;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere;
}

.farasync-toast-close {
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: currentColor;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 5px;
    opacity: 0.56;
    transition: opacity 160ms ease, background-color 160ms ease;
}

.farasync-toast-close:hover {
    background: rgba(15, 23, 42, 0.07);
    opacity: 1;
}

.farasync-toast.is-leaving {
    animation: farasync-toast-exit 240ms ease forwards !important;
}

@keyframes farasync-toast-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes farasync-toast-exit {
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.98);
    }
}

@keyframes farasync-toast-progress {
    to {
        transform: scaleX(0);
    }
}

/* Localized date control. The hidden source continues to submit ISO dates. */
.farasync-date-control {
    position: relative;
    width: min(100%, 410px);
}

/*
 * v1.0.0 FIX (user report): the "from date / to date + CSV" toolbar in the
 * Logs, Invoices and Sales tabs wrapped onto THREE rows because each date
 * control reserved min(100%, 410px) of the flex row. Inside the filter
 * toolbar the controls must stay compact so label + two dates + both
 * buttons fit on a single line.
 */
.farasync-logs-filter .farasync-date-control {
    width: 200px;
    min-width: 160px;
    flex: 0 1 200px;
}

.farasync-logs-filter .farasync-date-trigger {
    min-height: 32px;
    padding: 4px 8px 4px 10px;
}

/* The nested GET/POST forms inside the toolbar must not break the line. */
.farasync-logs-filter form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}

.farasync-logs-filter .button,
.farasync-logs-filter label {
    white-space: nowrap;
}

.farasync-date-source {
    display: none !important;
}

.farasync-date-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px 7px 12px;
    color: #94a3b8;
    text-align: start;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.farasync-date-trigger.has-value {
    color: #334155;
}

.farasync-date-trigger:hover,
.farasync-date-trigger[aria-expanded="true"] {
    border-color: #818cf8;
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.farasync-date-trigger-value {
    font-size: 12.5px;
}

.farasync-date-trigger-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #6366f1;
}

.farasync-date-trigger-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.farasync-date-picker {
    position: fixed;
    z-index: 100004;
    display: none;
    width: min(320px, calc(100vw - 18px));
    padding: 10px;
    color: #334155;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5f0;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.06);
    direction: inherit;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.farasync-date-picker.is-open {
    display: block;
    animation: farasync-date-picker-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes farasync-date-picker-in {
    from {
        opacity: 0;
        transform: translate3d(0, -5px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.farasync-date-picker-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 6px;
    padding: 2px 1px 9px;
    border-bottom: 1px solid #e8eef6;
}

.farasync-date-picker-title {
    color: #1e293b;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.farasync-date-picker-title strong {
    color: #4f46e5;
    font-weight: 700;
}

.farasync-date-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    color: #475569;
    cursor: pointer;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.farasync-date-nav:hover {
    color: #4338ca;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.farasync-date-nav:disabled,
.farasync-date-picker-footer button:disabled {
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    border-color: #edf2f7 !important;
    box-shadow: none !important;
    opacity: 0.7;
}

.farasync-date-nav svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.farasync-date-weekdays,
.farasync-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.farasync-date-weekdays {
    padding: 9px 2px 4px;
    color: #94a3b8;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}

.farasync-date-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    color: #475569;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11.5px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

button.farasync-date-day:hover {
    color: #3730a3;
    background: #eef2ff;
    border-color: #c7d2fe;
    transform: translate3d(0, -1px, 0);
}

.farasync-date-day.is-today {
    color: #4f46e5;
    border-color: #a5b4fc;
    font-weight: 700;
}

.farasync-date-day.is-selected {
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-color: #4f46e5;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.22);
}

.farasync-date-day.is-empty {
    cursor: default;
}

.farasync-date-picker-footer {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    margin-top: 9px;
    padding: 9px 1px 1px;
    border-top: 1px solid #e8eef6;
}

.farasync-date-picker-footer button {
    min-height: 30px;
    padding: 5px 9px;
    color: #475569;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 6px;
    font-size: 11px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.farasync-date-picker-footer button:hover {
    color: #3730a3;
    background: #f8faff;
    border-color: #a5b4fc;
}

.farasync-date-picker-footer button.is-primary {
    color: #ffffff;
    background: #4f46e5;
    border-color: #4f46e5;
}

/* CSS masks replace legacy Dashicons with consistent SVG silhouettes. */
@supports ((-webkit-mask-image: url("data:image/svg+xml,%3Csvg/%3E")) or (mask-image: url("data:image/svg+xml,%3Csvg/%3E"))) {
    .farasync-command-center :is(
        .dashicons-admin-generic, .dashicons-arrow-left-alt2, .dashicons-arrow-right-alt2,
        .dashicons-bell, .dashicons-cart, .dashicons-chart-bar, .dashicons-clipboard,
        .dashicons-controls-play, .dashicons-dashboard, .dashicons-download, .dashicons-edit,
        .dashicons-external, .dashicons-info, .dashicons-key,
        .dashicons-lock, .dashicons-media-code, .dashicons-minus,
        .dashicons-money-alt, .dashicons-no, .dashicons-no-alt, .dashicons-plus-alt2,
        .dashicons-products, .dashicons-saved, .dashicons-search,
        .dashicons-tag, .dashicons-trash, .dashicons-update, .dashicons-upload,
        .dashicons-visibility, .dashicons-warning, .dashicons-yes, .dashicons-yes-alt
    ),
    .farasync-modal :is(
        .dashicons-admin-generic, .dashicons-arrow-left-alt2, .dashicons-arrow-right-alt2,
        .dashicons-bell, .dashicons-cart, .dashicons-chart-bar, .dashicons-clipboard,
        .dashicons-controls-play, .dashicons-dashboard, .dashicons-download, .dashicons-edit,
        .dashicons-external, .dashicons-info, .dashicons-key,
        .dashicons-lock, .dashicons-media-code, .dashicons-minus,
        .dashicons-money-alt, .dashicons-no, .dashicons-no-alt, .dashicons-plus-alt2,
        .dashicons-products, .dashicons-saved, .dashicons-search,
        .dashicons-tag, .dashicons-trash, .dashicons-update, .dashicons-upload,
        .dashicons-visibility, .dashicons-warning, .dashicons-yes, .dashicons-yes-alt
    ) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .farasync-command-center :is(
        .dashicons-admin-generic, .dashicons-arrow-left-alt2, .dashicons-arrow-right-alt2,
        .dashicons-bell, .dashicons-cart, .dashicons-chart-bar, .dashicons-clipboard,
        .dashicons-controls-play, .dashicons-dashboard, .dashicons-download, .dashicons-edit,
        .dashicons-external, .dashicons-info, .dashicons-key,
        .dashicons-lock, .dashicons-media-code, .dashicons-minus,
        .dashicons-money-alt, .dashicons-no, .dashicons-no-alt, .dashicons-plus-alt2,
        .dashicons-products, .dashicons-saved, .dashicons-search,
        .dashicons-tag, .dashicons-trash, .dashicons-update, .dashicons-upload,
        .dashicons-visibility, .dashicons-warning, .dashicons-yes, .dashicons-yes-alt
    )::before,
    .farasync-modal :is(
        .dashicons-admin-generic, .dashicons-arrow-left-alt2, .dashicons-arrow-right-alt2,
        .dashicons-bell, .dashicons-cart, .dashicons-chart-bar, .dashicons-clipboard,
        .dashicons-controls-play, .dashicons-dashboard, .dashicons-download, .dashicons-edit,
        .dashicons-external, .dashicons-info, .dashicons-key,
        .dashicons-lock, .dashicons-media-code, .dashicons-minus,
        .dashicons-money-alt, .dashicons-no, .dashicons-no-alt, .dashicons-plus-alt2,
        .dashicons-products, .dashicons-saved, .dashicons-search,
        .dashicons-tag, .dashicons-trash, .dashicons-update, .dashicons-upload,
        .dashicons-visibility, .dashicons-warning, .dashicons-yes, .dashicons-yes-alt
    )::before {
        display: block !important;
        width: 1em !important;
        height: 1em !important;
        content: '' !important;
        background: currentColor;
        -webkit-mask: var(--farasync-svg-mask) center / contain no-repeat;
        mask: var(--farasync-svg-mask) center / contain no-repeat;
    }

    .farasync-command-center .dashicons-dashboard,
    .farasync-modal .dashicons-dashboard {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 13h8V3H3v10Zm0 8h8v-6H3v6Zm10 0h8V11h-8v10Zm0-18v6h8V3h-8Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-upload,
    .farasync-modal .dashicons-upload {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 5.5 8.5 5.5 5.5 0 0 0 6 19h13a4.5 4.5 0 0 0 .35-8.96ZM13 12v4h-2v-4H8l4-4 4 4h-3Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-download,
    .farasync-modal .dashicons-download {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 5.5 8.5 5.5 5.5 0 0 0 6 19h13a4.5 4.5 0 0 0 .35-8.96ZM13 8v4h3l-4 4-4-4h3V8h2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-media-code,
    .farasync-modal .dashicons-media-code {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.6 16.6 4 12l4.6-4.6L7.2 6 1.2 12l6 6 1.4-1.4ZM16.8 18l6-6-6-6-1.4 1.4L20 12l-4.6 4.6 1.4 1.4ZM14.4 3 9.6 21h-2L12.4 3h2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-products,
    .farasync-modal .dashicons-products {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 8.5 12 3 3 8.5v7l9 5.5 9-5.5v-7ZM12 5.3l5.4 3.2L12 11.7 6.6 8.5 12 5.3Zm-7 5 6 3.6v4.5l-6-3.6v-4.5Zm8 8.1v-4.5l6-3.6v4.5l-6 3.6Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-chart-bar,
    .farasync-modal .dashicons-chart-bar {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20h16v-2H4v2Zm2-4h3v-6H6v6Zm5 0h3V4h-3v12Zm5 0h3V8h-3v8Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-plus-alt2,
    .farasync-modal .dashicons-plus-alt2 {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-minus,
    .farasync-modal .dashicons-minus {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-yes,
    .farasync-command-center .dashicons-yes-alt,
    .farasync-command-center .dashicons-saved,
    .farasync-modal .dashicons-yes,
    .farasync-modal .dashicons-yes-alt,
    .farasync-modal .dashicons-saved {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9 16.2-3.5-3.5L4.1 14 9 18.9 20 7.9 18.6 6.5 9 16.2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-no,
    .farasync-command-center .dashicons-no-alt,
    .farasync-modal .dashicons-no,
    .farasync-modal .dashicons-no-alt {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 12.6 12.6-1.4 1.4L5 6.4 6.4 5Zm12.6 1.4L6.4 19 5 17.6 17.6 5 19 6.4Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-trash,
    .farasync-modal .dashicons-trash {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Zm4 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-edit,
    .farasync-modal .dashicons-edit {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m4 16.7 9.8-9.8 3.3 3.3L7.3 20H4v-3.3Zm11.2-11.2 1.4-1.4a2 2 0 0 1 2.8 2.8L18 8.3l-2.8-2.8Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-search,
    .farasync-modal .dashicons-search {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 4a6.5 6.5 0 1 0 4.1 11.55L20 21l1.4-1.4-5.45-5.4A6.5 6.5 0 0 0 10.5 4Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-update,
    .farasync-modal .dashicons-update {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.7-4.3L13 11h7V4l-2.3 2.3Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-warning,
    .farasync-modal .dashicons-warning {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 1.8 20h20.4L12 3Zm1 13h-2v-2h2v2Zm0-4h-2V8h2v4Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-info,
    .farasync-modal .dashicons-info {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-lock,
    .farasync-modal .dashicons-lock {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Zm3 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-visibility,
    .farasync-modal .dashicons-visibility {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-5.2 0-9.3 4.1-10.5 7 1.2 2.9 5.3 7 10.5 7s9.3-4.1 10.5-7C21.3 9.1 17.2 5 12 5Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-tag,
    .farasync-modal .dashicons-tag {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 13.4 12.4 21 3 11.6V4h7.6L20 13.4ZM7.5 8A1.5 1.5 0 1 0 7.5 5a1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-key,
    .farasync-modal .dashicons-key {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 13A5.5 5.5 0 1 1 12 10.6L21 10v3h-2v2h-2v2h-3l-2.1-2.1A5.4 5.4 0 0 1 7.5 13Zm0-2A3.5 3.5 0 1 0 7.5 4a3.5 3.5 0 0 0 0 7Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-bell,
    .farasync-modal .dashicons-bell {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Zm-8 12h4v-2h-4v2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-cart,
    .farasync-modal .dashicons-cart {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM5.2 4 4 2H1v2h1.7l3.6 8.1L5 14.5A2 2 0 0 0 6.8 17H19v-2H7.2l1.1-2h7.5a2 2 0 0 0 1.8-1.1L21 5H5.2Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-clipboard,
    .farasync-modal .dashicons-clipboard {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 4h-1.2A3 3 0 0 0 9.2 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm-4 0a1 1 0 0 1 1 1h-2a1 1 0 0 1 1-1Zm4 16H8V6h1v2h6V6h1v14Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-arrow-left-alt2,
    .farasync-modal .dashicons-arrow-left-alt2 {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m14.7 5.3-6.7 6.7 6.7 6.7 1.4-1.4L10.8 12l5.3-5.3-1.4-1.4Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-arrow-right-alt2,
    .farasync-modal .dashicons-arrow-right-alt2 {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 18.7 6.7-6.7-6.7-6.7-1.4 1.4 5.3 5.3-5.3 5.3 1.4 1.4Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-controls-play,
    .farasync-modal .dashicons-controls-play {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-external,
    .farasync-modal .dashicons-external {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3ZM5 5h7v2H7v10h10v-5h2v7H5V5Z'/%3E%3C/svg%3E");
    }

    .farasync-command-center .dashicons-money-alt,
    .farasync-modal .dashicons-money-alt,
    .farasync-command-center .dashicons-admin-generic,
    .farasync-modal .dashicons-admin-generic {
        --farasync-svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2H9v-2h2v-2H9V9h2V7h2v2h2v2h-2v2h2v2h-2v2Z'/%3E%3C/svg%3E");
    }
}

@media screen and (max-width: 1024px) {
    .farasync-modal-content #farasync-key-fields-list,
    .farasync-modal-content #farasync-source-fields-list,
    .farasync-modal-content .farasync-fields-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .farasync-command-center .farasync-keys-table,
    .farasync-command-center .farasync-logs-table,
    .farasync-command-center .farasync-imported-table,
    .farasync-command-center .farasync-invoices-table,
    .farasync-command-center .farasync-sales-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 782px) {
    .farasync-command-center .farasync-header,
    .farasync-command-center .farasync-tabs,
    .farasync-command-center .farasync-tab-panels {
        border-radius: 11px !important;
    }

    .farasync-command-center .farasync-sources-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .farasync-command-center .farasync-source-card-actions .button {
        flex: 1 1 auto;
    }

    .farasync-modal-content,
    #farasync-key-modal .farasync-modal-content,
    #farasync-source-modal .farasync-modal-content,
    .farasync-modal-content.farasync-modal-wide,
    .farasync-modal-content.farasync-modal-xwide,
    .farasync-modal-content.farasync-sm-modal {
        width: calc(100vw - 24px) !important;
        border-radius: 12px !important;
    }

    .farasync-modal-content > h2,
    .farasync-modal-content > h3,
    .farasync-price-rules-title,
    .farasync-sm-title {
        border-radius: 12px 12px 0 0 !important;
    }

    .farasync-modal-content > form,
    .farasync-modal-content > #farasync-preview-content,
    .farasync-modal-content > #farasync-invoice-content,
    .farasync-modal-content > .farasync-price-rules-list,
    .farasync-modal-content > .farasync-price-rule-form-wrap {
        margin: 15px 16px 0 !important;
    }

    .farasync-modal-content > form > p.submit,
    .farasync-modal-content > form > .submit {
        margin-inline: -16px !important;
    }

    .farasync-sm-modal .farasync-sync-manager-summary,
    .farasync-sm-modal .farasync-sync-manager-filters,
    .farasync-sm-modal .farasync-sync-manager-selection,
    .farasync-sm-modal .farasync-sync-manager-options,
    .farasync-sm-modal .farasync-sync-manager-progress,
    .farasync-sm-modal .farasync-sync-manager-summary-result,
    .farasync-sm-modal .farasync-sync-manager-grid,
    .farasync-sm-modal .farasync-sync-manager-pagination {
        margin-inline: 16px !important;
    }

    .farasync-modal-content #farasync-key-fields-list,
    .farasync-modal-content #farasync-source-fields-list,
    .farasync-modal-content .farasync-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .farasync-date-control {
        width: 100%;
    }
}

@media screen and (max-width: 460px) {
    .farasync-modal-content #farasync-key-fields-list,
    .farasync-modal-content #farasync-source-fields-list,
    .farasync-modal-content .farasync-fields-grid {
        grid-template-columns: 1fr !important;
    }

    .farasync-command-center .farasync-tabs {
        gap: 4px !important;
        padding: 5px !important;
    }

    .farasync-command-center .farasync-tab {
        padding: 8px 10px !important;
    }

    .farasync-toast {
        grid-template-columns: 32px minmax(0, 1fr) 22px;
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   9. Final interaction polish — popup hero headers, loaders and calendar UX
   -------------------------------------------------------------------------- */

/* Give every popup the same visual language as the main command-center hero. */
.farasync-modal-content > h2,
.farasync-modal-content > h3,
.farasync-price-rules-title,
.farasync-sm-title {
    position: sticky !important;
    isolation: isolate;
    overflow: hidden;
    min-height: 78px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 28px 18px !important; /* v1.0.0: logical reserve below */
    padding-inline-start: 28px !important;
    padding-inline-end: 72px !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 90% -16%, rgba(129, 140, 248, 0.58), transparent 35%),
        radial-gradient(circle at 4% 120%, rgba(45, 212, 191, 0.2), transparent 34%),
        linear-gradient(120deg, #0f172a 0%, #172554 52%, #312e81 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 15px 15px 0 0 !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18) !important;
    font-weight: 700 !important;
}

.farasync-modal-content > h2::before,
.farasync-modal-content > h3::before,
.farasync-price-rules-title::before,
.farasync-sm-title::before {
    top: 16px !important;
    bottom: 16px !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #67e8f9, #818cf8, #c084fc) !important;
}

.farasync-modal-content > h2::after,
.farasync-modal-content > h3::after,
.farasync-price-rules-title::after,
.farasync-sm-title::after {
    position: absolute;
    z-index: -1;
    inset-inline-end: -44px;
    bottom: -54px;
    width: 180px;
    height: 130px;
    content: '';
    pointer-events: none;
    background: radial-gradient(circle, rgba(165, 180, 252, 0.28), transparent 67%);
}

.farasync-modal-content > h2 .dashicons,
.farasync-modal-content > h3 .dashicons,
.farasync-price-rules-title .dashicons,
.farasync-sm-title .dashicons,
.farasync-sm-title-icon {
    color: #e0e7ff !important;
}

.farasync-modal-close {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}

.farasync-modal-close:hover {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #fecaca !important;
}

/* Loading states are deliberately centered and visually singular. */
.farasync-sm-loading-state {
    position: relative;
    display: flex;
    min-height: 104px;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    overflow: hidden;
    text-align: center !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(224, 231, 255, 0.8), transparent 64%),
        linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.farasync-sm-loading-state-large {
    min-height: 300px;
    padding: 54px 20px !important;
}

.farasync-sm-loading-state::before {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.62) 44%,
        transparent 67%
    );
    transform: translateX(-110%);
    animation: farasync-loader-sheen 2.3s ease-in-out infinite;
}

.farasync-sm-loading-state > * {
    position: relative;
    z-index: 1;
}

.farasync-sm-spinner {
    position: relative;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto;
    border: 3px solid rgba(99, 102, 241, 0.16) !important;
    border-top-color: #4f46e5 !important;
    border-inline-end-color: #06b6d4 !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.16);
    animation: farasync-loader-spin 0.95s linear infinite !important;
}

.farasync-sm-spinner::after {
    position: absolute;
    inset: 7px;
    content: '';
    border: 2px solid rgba(79, 70, 229, 0.14);
    border-bottom-color: #a855f7;
    border-radius: 50%;
    animation: farasync-loader-spin-reverse 1.35s linear infinite;
}

.farasync-sm-spinner-lg {
    width: 58px !important;
    height: 58px !important;
    border-width: 4px !important;
}

@keyframes farasync-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes farasync-loader-spin-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes farasync-loader-sheen {
    0%, 18% { transform: translateX(-110%); }
    65%, 100% { transform: translateX(110%); }
}

.farasync-inline-loader {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: farasync-loader-spin 0.72s linear infinite;
}

#farasync-sm-import-selected.is-loading,
#farasync-sm-select-all-pages.is-loading {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 184px;
    cursor: wait;
}

/* Explicitly disable the browser's second native check rendering. */
.farasync-modal-content .form-table input[type="checkbox"],
.farasync-modal-content .farasync-field-label input[type="checkbox"],
.farasync-modal-content .farasync-field-chip input[type="checkbox"],
.farasync-command-center .farasync-field-label input[type="checkbox"],
.farasync-command-center .farasync-field-chip input[type="checkbox"],
.farasync-command-center .farasync-imported-field-label input[type="checkbox"],
.farasync-command-center .farasync-master-col input[type="checkbox"],
.farasync-command-center .farasync-imported-fields-grid input[type="checkbox"],
.farasync-command-center .farasync-sm-product-checkbox,
.farasync-modal .farasync-sm-product-checkbox,
.farasync-command-center .farasync-source-stop-selling-label input[type="checkbox"] {
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    accent-color: transparent !important;
    background-clip: padding-box !important;
}

/* Calendar header, year selector and quick date shortcuts. */
.farasync-date-picker[dir="rtl"] {
    direction: rtl;
}

.farasync-date-picker[dir="ltr"] {
    direction: ltr;
}

.farasync-date-picker-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.farasync-date-month-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.farasync-date-month-name {
    min-width: 0;
    max-width: 150px;
    padding: 4px 6px !important;
    color: #3730a3 !important;
    cursor: pointer;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font: inherit !important;
    font-weight: 700 !important;
}

.farasync-date-month-name:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.farasync-date-year-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 72px;
    min-height: 30px;
    padding: 4px 7px;
    color: #3730a3;
    cursor: pointer;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.farasync-date-year-trigger:hover,
.farasync-date-year-trigger.is-active {
    color: #312e81;
    background: #e0e7ff;
    border-color: #a5b4fc;
    transform: translate3d(0, -1px, 0);
}

.farasync-date-year-trigger svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.farasync-date-view-hint {
    padding: 10px 4px 4px;
    color: #64748b;
    text-align: center;
    font-size: 11px;
}

.farasync-date-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 2px 4px;
}

.farasync-date-month {
    min-height: 38px;
    padding: 6px 5px;
    color: #475569;
    cursor: pointer;
    background: #f8fafc;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    font-size: 11px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.farasync-date-month:hover:not(:disabled) {
    color: #3730a3;
    background: #eef2ff;
    border-color: #a5b4fc;
    transform: translate3d(0, -1px, 0);
}

.farasync-date-month.is-selected {
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-color: #4f46e5;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.18);
}

.farasync-date-back-to-days {
    width: 100%;
    min-height: 30px;
    margin-top: 4px;
    padding: 5px 8px;
    color: #4338ca;
    cursor: pointer;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    font-size: 11px;
}

.farasync-date-back-to-days:hover {
    background: #e0e7ff;
}

.farasync-date-year-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    /*
     * Six initial years are rendered in two columns. Keep the viewport just
     * shorter than those three rows so touch/trackpad scrolling also has a
     * real scroll boundary that can trigger the next batch.
     */
    max-height: 122px;
    margin: 2px 1px 0;
    padding: 8px 4px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overscroll-behavior: contain;
    scrollbar-color: #c7d2fe transparent;
    scrollbar-width: thin;
}

.farasync-date-year {
    min-height: 34px;
    padding: 5px 6px;
    color: #475569;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.farasync-date-year:hover:not(:disabled) {
    color: #3730a3;
    background: #eef2ff;
    border-color: #a5b4fc;
    transform: translate3d(0, -1px, 0);
}

.farasync-date-year.is-selected {
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-color: #4f46e5;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.18);
}

.farasync-date-year-scroll-hint {
    padding: 5px 4px 1px;
    color: #94a3b8;
    text-align: center;
    font-size: 10px;
}

.farasync-date-year-scroll-hint.is-complete {
    opacity: 0.45;
}

.farasync-date-day.is-disabled,
.farasync-date-month.is-disabled,
.farasync-date-year.is-disabled,
.farasync-date-day:disabled,
.farasync-date-month:disabled,
.farasync-date-year:disabled {
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    border-color: #edf2f7 !important;
    box-shadow: none !important;
    opacity: 0.75;
    transform: none !important;
}

button.farasync-date-day:disabled,
button.farasync-date-month:disabled,
button.farasync-date-year:disabled {
    pointer-events: none;
}

.farasync-date-picker-footer {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.farasync-date-primary-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ==========================================================================
   v1.0.0 — THEME ARMOR (both copies; decisive on the front-end rep panel)
   Store themes style bare <button> elements (the Digikala-style theme paints
   them red). The rules above already win on specificity, but themes often use
   classed selectors such as ".sidebar button". This layer re-asserts the
   exact palette with !important. Every base rule carries :not(:disabled) /
   :not(:hover) guards so the gray disabled states above keep winning.
   Keep the VALUES identical to the sections above when the palette changes.
   ========================================================================== */
.farasync-date-picker,
.farasync-date-picker *,
.farasync-date-control,
.farasync-date-control * {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif !important;
}

.farasync-date-picker button {
    appearance: none !important;
    -webkit-appearance: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.35 !important;
}

.farasync-date-picker,
.farasync-date-picker *,
.farasync-date-control,
.farasync-date-control * {
    box-sizing: border-box;
}

.farasync-date-picker button.farasync-date-nav:not(:disabled) {
    padding: 0 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
}

.farasync-date-picker button.farasync-date-nav:hover:not(:disabled) {
    color: #4338ca !important;
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.farasync-date-picker button.farasync-date-day:not(:disabled) {
    padding: 0 !important;
    color: #475569 !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
}

.farasync-date-picker button.farasync-date-day:hover:not(:disabled) {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.farasync-date-picker button.farasync-date-day.is-today:not(:disabled) {
    color: #4f46e5 !important;
    border-color: #a5b4fc !important;
    font-weight: 700 !important;
}

.farasync-date-picker button.farasync-date-day.is-selected:not(:disabled) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.22) !important;
}

.farasync-date-picker button.farasync-date-month:not(:disabled) {
    padding: 6px 5px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #dce5f0 !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

.farasync-date-picker button.farasync-date-month:hover:not(:disabled) {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.farasync-date-picker button.farasync-date-month.is-selected:not(:disabled) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.18) !important;
}

.farasync-date-picker button.farasync-date-year:not(:disabled) {
    padding: 5px 6px !important;
    color: #475569 !important;
    background: #ffffff !important;
    border-color: #dce5f0 !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

.farasync-date-picker button.farasync-date-year:hover:not(:disabled) {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.farasync-date-picker button.farasync-date-year.is-selected:not(:disabled) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.18) !important;
}

.farasync-date-picker button.farasync-date-year-trigger {
    color: #3730a3 !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.farasync-date-picker button.farasync-date-year-trigger:hover,
.farasync-date-picker button.farasync-date-year-trigger.is-active {
    color: #312e81 !important;
    background: #e0e7ff !important;
    border-color: #a5b4fc !important;
}

.farasync-date-picker button.farasync-date-back-to-days {
    color: #4338ca !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

.farasync-date-picker .farasync-date-picker-footer button:not(:disabled) {
    color: #475569 !important;
    background: #ffffff !important;
    border-color: #dce5f0 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

.farasync-date-picker .farasync-date-picker-footer button:hover:not(:disabled) {
    color: #3730a3 !important;
    background: #f8faff !important;
    border-color: #a5b4fc !important;
}

.farasync-date-picker .farasync-date-picker-footer button.is-primary:not(:disabled) {
    color: #ffffff !important;
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

@media screen and (max-width: 782px) {
    .farasync-modal-content > h2,
    .farasync-modal-content > h3,
    .farasync-price-rules-title,
    .farasync-sm-title {
        min-height: 68px !important;
        padding: 16px 56px 15px 18px !important;
        border-radius: 12px 12px 0 0 !important;
        font-size: 16px !important;
    }

    .farasync-date-picker-footer {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .farasync-date-primary-actions {
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .farasync-command-center *,
    .farasync-modal *,
    .farasync-toast,
    .farasync-date-picker,
    .farasync-date-picker * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   v1.0.0 — Import result clarity, loader balance and contrast polish
   -------------------------------------------------------------------------- */

/* Loading feedback should float in the layout instead of looking like a
 * second card nested inside the modal. */
.farasync-sm-modal .farasync-sync-manager-summary.is-loading,
.farasync-sm-modal .farasync-sync-manager-grid.is-loading {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.farasync-sm-modal .farasync-sm-loading-state {
    min-height: 132px !important;
    padding: 34px 18px !important;
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.farasync-sm-modal .farasync-sm-loading-state-large {
    min-height: 270px !important;
    padding: 48px 18px !important;
}

.farasync-sm-modal .farasync-sm-loading-state::before {
    display: none !important;
}

.farasync-sm-modal .farasync-sm-loading-state > span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500;
}

/* Keep both initial import loaders centered in the full available panel. */
.farasync-sm-modal .farasync-sync-manager-summary.is-loading,
.farasync-sm-modal .farasync-sync-manager-grid.is-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.farasync-sm-modal .farasync-sync-manager-summary.is-loading {
    min-height: 118px !important;
}

.farasync-sm-modal .farasync-sync-manager-grid.is-loading {
    min-height: min(250px, 52vh) !important;
}

.farasync-sm-modal .farasync-sync-manager-summary.is-loading .farasync-sm-loading-state,
.farasync-sm-modal .farasync-sync-manager-grid.is-loading .farasync-sm-loading-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Themed replacement for browser alert/confirm/prompt dialogs. */
.farasync-action-dialog {
    position: fixed;
    z-index: 100006;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.farasync-action-dialog.is-open {
    display: flex;
    animation: farasync-action-dialog-fade 180ms ease-out;
}

.farasync-action-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.farasync-action-dialog-card {
    position: relative;
    z-index: 1;
    width: min(460px, calc(100vw - 34px));
    padding: 29px 28px 24px;
    color: #334155;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(224, 231, 255, 0.8), transparent 52%),
        #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.28), 0 5px 16px rgba(15, 23, 42, 0.12);
    animation: farasync-action-dialog-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
    /* v1.0.0: Force Vazirmatn font on the action dialog (confirm/prompt). */
    font-family: 'Vazirmatn', sans-serif;
}

/* v1.0.0: Vazirmatn override for all children of the action dialog card. */
.farasync-action-dialog-card *,
.farasync-action-dialog-card h3,
.farasync-action-dialog-card .farasync-action-dialog-message,
.farasync-action-dialog-card .farasync-action-dialog-input,
.farasync-action-dialog-card .farasync-btn {
    font-family: 'Vazirmatn', sans-serif;
}

.farasync-action-dialog-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    cursor: pointer;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.farasync-action-dialog-close:hover {
    color: #ffffff;
    background: #ef4444;
    border-color: #ef4444;
}

.farasync-action-dialog-close svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.farasync-action-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 15px;
}

.farasync-action-dialog-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.farasync-action-dialog-card h3 {
    margin: 0 0 9px;
    color: #172033;
    font-size: 17px;
    font-weight: 750;
}

.farasync-action-dialog-message {
    max-height: 180px;
    overflow-y: auto;
    color: #64748b;
    font-size: 13px;
    line-height: 1.9;
}

.farasync-action-dialog-input {
    display: none;
    width: 100%;
    min-height: 42px;
    margin: 17px 0 0;
    padding: 9px 12px;
    color: #172033;
    text-align: start;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.farasync-action-dialog.is-prompt .farasync-action-dialog-input {
    display: block;
}

.farasync-action-dialog-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.farasync-action-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.farasync-action-dialog-actions .farasync-btn {
    min-width: 96px;
    justify-content: center;
}

@keyframes farasync-action-dialog-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes farasync-action-dialog-pop {
    from { opacity: 0; transform: translateY(9px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media screen and (max-width: 480px) {
    .farasync-action-dialog {
        padding: 14px;
    }

    .farasync-action-dialog-card {
        padding: 27px 18px 19px;
    }
}

/* One readable item log: each result gets a real status badge rather than a
 * code-looking token such as "[skipped]". */
.farasync-sm-modal .farasync-sm-progress-log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px !important;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #dbe4ef !important;
}

.farasync-sm-modal .farasync-sm-progress-log-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 9px !important;
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e5ebf3 !important;
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);
}

.farasync-sm-modal .farasync-sm-progress-log-item + .farasync-sm-progress-log-item {
    border-top: 1px solid #e5ebf3 !important;
}

.farasync-import-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 7px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.farasync-import-status-badge .dashicons {
    width: 14px;
    height: 14px;
    color: currentColor !important;
    font-size: 14px;
    line-height: 14px;
}

.farasync-import-status-badge.is-created {
    color: #047857 !important;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.farasync-import-status-badge.is-updated {
    color: #1d4ed8 !important;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.farasync-import-status-badge.is-skipped {
    color: #475569 !important;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.farasync-import-status-badge.is-failed {
    color: #b91c1c !important;
    background: #fef2f2;
    border-color: #fecaca;
}

.farasync-import-status-badge.is-info {
    color: #4338ca !important;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.farasync-sm-progress-log-detail {
    min-width: 0;
    color: #334155;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.farasync-sm-progress-log-name {
    display: block;
    color: #1e293b;
    font-size: 11px;
    font-weight: 600;
}

.farasync-sm-progress-log-message {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.5px;
}

/* The summary contains counters only; guard against legacy markup re-adding
 * a second copy of the item list. */
#farasync-sm-item-results {
    display: none !important;
}

.farasync-sm-modal .farasync-sync-manager-progress.is-complete .farasync-sm-progress-log {
    border-color: #cbd5e1 !important;
}

/* Keep notices/toasts in the same visual language as the command center. */
.farasync-command-center .notice,
.farasync-command-center .farasync-source-down-notice {
    color: #334155 !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: #dbe4ef !important;
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.08) !important;
}

.farasync-toast {
    border-radius: 12px !important;
    border-color: #dbe4ef !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.17), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

.farasync-toast-info .farasync-toast-icon {
    color: #4338ca !important;
    background: #eef2ff !important;
}

.farasync-toast-message {
    font-weight: 500;
}

/* Source cards are easier to scan as two columns on desktop. */
@media screen and (min-width: 1025px) {
    .farasync-command-center .farasync-sources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 1024px) {
    .farasync-command-center .farasync-sources-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.farasync-command-center .farasync-source-card-actions [data-action="bg-sync"] {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 190px;
    min-width: 0 !important;
    white-space: normal;
    justify-content: center;
}

/* Restore contrast for values and icons placed on dark modal headers. */
.farasync-modal-content > h2 > span:not(.farasync-modal-close),
.farasync-modal-content > h3 > span:not(.farasync-modal-close),
.farasync-modal-content > h2 code,
.farasync-modal-content > h3 code {
    color: #f8fafc !important;
}

.farasync-invoice-modal-num {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin-inline-start: 4px;
    padding: 2px 8px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    direction: ltr;
    font-size: 0.86em;
    font-weight: 700 !important;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
    unicode-bidi: isolate;
}

#farasync-invoice-mark-shipped.farasync-invoice-mark-shipped-btn,
#farasync-invoice-mark-shipped.farasync-invoice-mark-shipped-btn .dashicons,
#farasync-invoice-mark-shipped.farasync-invoice-mark-shipped-btn .dashicons::before {
    color: #ffffff !important;
}

#farasync-invoice-mark-shipped.farasync-invoice-mark-shipped-btn svg,
#farasync-invoice-mark-shipped.farasync-invoice-mark-shipped-btn svg *,
.farasync-invoice-mark-shipped-btn .dashicons {
    opacity: 1 !important;
    fill: none;
    stroke: currentColor;
}

@media screen and (max-width: 782px) {
    .farasync-command-center .farasync-source-card-actions [data-action="bg-sync"] {
        max-width: none;
    }

    .farasync-sm-modal .farasync-sm-progress-log-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .farasync-import-status-badge {
        justify-self: start;
    }
}

/* Modal bodies own the scroll area. The body itself must not add a second
 * horizontal gutter; each modal section controls its own inner spacing. */
.farasync-modal-content > .farasync-modal-body {
    margin: 0 !important;
    padding-inline: 0 !important;
}

.farasync-modal-content > form > .farasync-modal-body {
    margin: 0 !important;
    padding-inline: 0 !important;
}

.farasync-sm-modal > .farasync-modal-body {
    margin: 0 !important;
    padding-inline: 0 !important;
}

@media screen and (max-width: 782px) {
    .farasync-modal-content > .farasync-modal-body {
        margin: 0 !important;
    }

    .farasync-modal-content > form > .farasync-modal-body,
    .farasync-sm-modal > .farasync-modal-body {
        margin: 0 !important;
    }
}

/* Final visual alignment and compact modal chrome. */
.farasync-modal-content > .farasync-modal-body {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.farasync-modal-content > form > .farasync-modal-body {
    flex: 1 1 auto !important;
    width: auto !important;
}

.farasync-sm-modal > .farasync-modal-body {
    flex: 1 1 auto !important;
}

.farasync-modal-content > p.submit,
.farasync-modal-content > .submit,
.farasync-modal-content > .farasync-sm-actions,
.farasync-modal-body > form > p.submit,
.farasync-modal-body > form > .submit,
.farasync-modal-body > .farasync-sm-actions {
    background: #f8fafc !important;
    opacity: 1 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 8px 18px !important;
}

#farasync-price-rules-modal .farasync-modal-body {
    padding-inline: 24px !important;
}

#farasync-price-rules-modal #farasync-price-rules-desc {
    width: 90%;
    max-width: none;
    margin: 10px 70px 10px 0px !important;
    padding: 0 !important;
    text-align: right !important;
    line-height: 1.65 !important;
}

#farasync-price-rules-modal #farasync-price-rules-list,
#farasync-price-rules-modal .farasync-price-rule-form-wrap {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

#farasync-price-rules-modal .farasync-price-rule-form-wrap {
    margin-top: 8px !important;
}

/* Center the values and labels in dashboard/module statistic cards. */
.farasync-command-center .farasync-stat {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.farasync-command-center .farasync-stat-num,
.farasync-command-center .farasync-stat-label {
    width: 100%;
    text-align: center !important;
}

.farasync-sm-modal .farasync-sm-summary-grid .farasync-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Radio buttons: show a clearly filled selected state instead of only
 * changing the outline color. */
.farasync-modal-content .farasync-sm-radio input[type="radio"]:checked,
.farasync-modal-content .form-table input[type="radio"]:checked,
.farasync-command-center .farasync-radio-option-inline input[type="radio"]:checked {
    background: radial-gradient(circle, #4f46e5 0 4px, #ffffff 4.5px 100%) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12) !important;
}

/* Remove the duplicate outer gutter that was being added by legacy
 * sync-manager section rules. */
.farasync-sm-modal .farasync-sync-manager-summary,
.farasync-sm-modal .farasync-sync-manager-filters,
.farasync-sm-modal .farasync-sync-manager-selection,
.farasync-sm-modal .farasync-sync-manager-options,
.farasync-sm-modal .farasync-sync-manager-progress,
.farasync-sm-modal .farasync-sync-manager-summary-result,
.farasync-sm-modal .farasync-sync-manager-grid,
.farasync-sm-modal .farasync-sync-manager-pagination {
    margin-inline: 0 !important;
}

.farasync-sm-modal > .farasync-modal-body {
    padding-inline: 0 !important;
}

/* Price-rules intro text starts exactly at the modal's accent edge and the
 * form no longer reserves a large empty flex area below its controls. */
#farasync-price-rules-modal .farasync-modal-content {
    height: auto !important;
    min-height: 0 !important;
}

#farasync-price-rules-modal .farasync-modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 150px) !important;
    padding-inline: 20px !important;
}

#farasync-price-rules-modal #farasync-price-rules-desc {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: right !important;
    text-indent: 0 !important;
}

#farasync-price-rules-modal #farasync-price-rule-form-wrap {
    min-height: 0 !important;
    margin: 4px 50px 0 !important;
    padding: 0 !important;
}

/* ====================================================================
 * v1.0.0 (#3) — Source dashboard de-crowding
 * The Keys Health / Distribution Statistics / Reservations Trend
 * sections used the generic auto-fit grid (min 360px per card), which
 * wrapped 2×2 and looked crowded. All their stat cards now share ONE
 * row, and each card gets its own light color theme instead of the
 * flat white tile.
 * ==================================================================== */
.farasync-command-center #farasync-keys-health-section .farasync-modules-grid,
.farasync-command-center #farasync-dist-stats-section .farasync-modules-grid,
.farasync-command-center #farasync-res-stats-section .farasync-modules-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
/* The reservations-trend section only carries 3 cards. */
.farasync-command-center #farasync-res-stats-section .farasync-modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
    .farasync-command-center #farasync-keys-health-section .farasync-modules-grid,
    .farasync-command-center #farasync-dist-stats-section .farasync-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --- light per-card themes: tinted surface + accent bar + colored
 *     number, one hue per card (light = pastel backgrounds) -------- */
.farasync-command-center #farasync-keys-health-section .farasync-stat,
.farasync-command-center #farasync-dist-stats-section .farasync-stat,
.farasync-command-center #farasync-res-stats-section .farasync-stat {
    position: relative;
    overflow: hidden;
    padding-top: 15px !important;
    border-top: none !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat::before,
.farasync-command-center #farasync-dist-stats-section .farasync-stat::before,
.farasync-command-center #farasync-res-stats-section .farasync-stat::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    border-radius: 999px;
}

/* hue 1 — indigo (active keys / reservations / new) */
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(1),
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(1),
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(1) {
    background: #eef2ff !important;
    border-color: #dbe3fb !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(1)::before,
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(1)::before,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(1)::before {
    background: #6366f1;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(1) .farasync-stat-num,
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(1) .farasync-stat-num,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(1) .farasync-stat-num {
    color: #4338ca !important;
}

/* hue 2 — amber (near limit) / green (confirmed) */
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(2) {
    background: #fffbeb !important;
    border-color: #fdeec6 !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(2)::before {
    background: #f59e0b;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(2) .farasync-stat-num {
    color: #b45309 !important;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(2),
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(2) {
    background: #ecfdf5 !important;
    border-color: #c8ecdb !important;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(2)::before,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(2)::before {
    background: #10b981;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(2) .farasync-stat-num,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(2) .farasync-stat-num {
    color: #047857 !important;
}

/* hue 3 — sky (open) / red (expired / closed) */
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(3) {
    background: #eff6ff !important;
    border-color: #d3e4fb !important;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(3)::before {
    background: #3b82f6;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(3) .farasync-stat-num {
    color: #1d4ed8 !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(3),
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(3) {
    background: #fef2f2 !important;
    border-color: #fadcdc !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(3)::before,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(3)::before {
    background: #ef4444;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(3) .farasync-stat-num,
.farasync-command-center #farasync-res-stats-section .farasync-stat:nth-child(3) .farasync-stat-num {
    color: #b91c1c !important;
}

/* hue 4 — slate (never used) / red (released-expired) */
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(4) {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(4)::before {
    background: #94a3b8;
}
.farasync-command-center #farasync-keys-health-section .farasync-stat:nth-child(4) .farasync-stat-num {
    color: #475569 !important;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(4) {
    background: #fef2f2 !important;
    border-color: #fadcdc !important;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(4)::before {
    background: #ef4444;
}
.farasync-command-center #farasync-dist-stats-section .farasync-stat:nth-child(4) .farasync-stat-num {
    color: #b91c1c !important;
}

/* labels stay muted but inherit slightly darker tone per theme */
.farasync-command-center #farasync-keys-health-section .farasync-stat .farasync-stat-label,
.farasync-command-center #farasync-dist-stats-section .farasync-stat .farasync-stat-label,
.farasync-command-center #farasync-res-stats-section .farasync-stat .farasync-stat-label {
    color: #64748b !important;
}

/* ====================================================================
 * v1.0.0 (#4) — unified printer buttons: constant height, icon dead
 * center. The sales/invoices bulk print button rendered taller than
 * the other toolbar buttons on some admin color schemes (RTL line-
 * height quirk), with the dashicons glyph off the vertical middle.
 * ==================================================================== */
.farasync-command-center .farasync-print-btn,
.farasync-modal .farasync-print-btn,
.farasync-command-center button.farasync-print-btn,
.farasync-command-center a.farasync-print-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* v1.0.0: was 32px tall × 38px wide — the exact toolbar/row mismatch
       the user circled. ONE canon now: 30×30 like every other icon square. */
    height: 30px !important;
    min-height: 30px !important;
    width: 30px;
    padding: 0 !important;
    margin: 0;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box;
}
.farasync-command-center .farasync-print-btn .dashicons,
.farasync-modal .farasync-print-btn .dashicons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: translateY(0.5px);
}

/* ====================================================================
 * v1.0.0 (#5) — white icons inside the purple-gradient buttons
 * The primary/accent/success buttons paint their background with the
 * indigo→violet gradient and white TEXT, but the dashicons glyph kept
 * a bluish color (admin color scheme inheritance), which made it
 * nearly invisible on the dark gradient. Force white.
 * ==================================================================== */
.farasync-command-center .button-primary .dashicons,
.farasync-command-center .farasync-btn-primary .dashicons,
.farasync-command-center .farasync-btn-accent .dashicons,
.farasync-modal .button-primary .dashicons,
.farasync-modal .farasync-btn-primary .dashicons,
.farasync-modal .farasync-btn-accent .dashicons,
.farasync-command-center .button-primary .dashicons::before,
.farasync-command-center .farasync-btn-primary .dashicons::before,
.farasync-command-center .farasync-btn-accent .dashicons::before,
.farasync-modal .button-primary .dashicons::before,
.farasync-modal .farasync-btn-primary .dashicons::before,
.farasync-modal .farasync-btn-accent .dashicons::before {
    color: #ffffff !important;
}

/* ================================================================
   v1.0.0 (Round T) — bundled brand imagery
   ================================================================ */

/* Header logo: the real brand mark (fa/en variant) inside the glass box */
.farasync-command-center .farasync-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
    box-sizing: border-box;
}

/* Credit footer logo */
.farasync-credit-footer .farasync-credit-logo {
    display: block;
    height: 16px;
    width: auto;
    border-radius: 3px;
}
/* ================================================================
   v1.0.0 (Round U) — header logo refresh: NO box, larger, subtle glow
   ================================================================ */

.farasync-command-center .farasync-logo {
    width: 84px;
    height: 84px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farasync-command-center .farasync-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    filter:
        drop-shadow(0 0 7px rgba(147, 197, 253, 0.38))
        drop-shadow(0 0 18px rgba(124, 58, 237, 0.22));
}

/* credit footer logo (v1.0.0, Round Y4): 25px, NO pedestal rectangle —
   just the mark with its soft glow on the gradient footer */
.farasync-credit-footer .farasync-credit-logo {
    display: block;
    height: 25px;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    border-radius: 4px;
    filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.45));
    position: relative;
    z-index: 1;
}

/* ================================================================
   v1.0.0 (Round Y4) — credit footer INSIDE the dashboard box:
   purple→blue gradient + SVG grid/ring pattern, echoing the header.
   ================================================================ */
.farasync-command-center .farasync-credit-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 20px -26px -26px !important;
    padding: 15px 26px 17px !important;
    border-top: none !important;
    border-radius: 0 0 13px 13px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(167, 139, 250, 0.35), transparent 32%),
        radial-gradient(circle at 6% 120%, rgba(56, 189, 248, 0.22), transparent 42%),
        linear-gradient(121deg, #312e81 0%, #5b21b6 46%, #1d4ed8 100%) !important;
}

/* SVG-style grid pattern (same recipe as the header), fading to the end */
.farasync-command-center .farasync-credit-footer::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}

/* Decorative ring, echoing the header's circle */
.farasync-command-center .farasync-credit-footer::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 150px;
    height: 150px;
    inset-inline-end: -55px;
    top: -95px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.045), 0 0 0 48px rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.farasync-command-center .farasync-credit-footer > * {
    position: relative;
    z-index: 1;
}

.farasync-command-center .farasync-credit-footer .farasync-credit-brand {
    color: #e0e7ff;
    background: linear-gradient(135deg, #e0e7ff 0%, #f5d0fe 55%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.farasync-command-center .farasync-credit-footer .farasync-credit-sep {
    background: rgba(255, 255, 255, 0.55);
}

.farasync-command-center .farasync-credit-footer .farasync-credit-text {
    color: rgba(255, 255, 255, 0.80);
}

.farasync-command-center .farasync-credit-footer .farasync-credit-labs {
    color: #e0e7ff;
}

/* v1.0.0: footer bleed follows the box padding on small screens */
@media (max-width: 782px) {
    .farasync-command-center .farasync-credit-footer {
        margin: 14px -16px -16px !important;
        border-radius: 0 0 12px 12px !important;
        padding: 13px 16px 15px !important;
    }
}

/* ================================================================
   v1.0.0 (Round Y5) — failed-items rows: name+ID on ONE line and
   a bare, ~2.5× bigger × (no WP button square behind it).
   ================================================================ */
.farasync-command-center .farasync-issues-table .farasync-issue-col-title {
    min-width: 0;
}
.farasync-command-center .farasync-issue-titleline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.farasync-command-center .farasync-issues-table .farasync-issue-title {
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.farasync-command-center .farasync-issues-table .farasync-issue-ident {
    flex: 0 0 auto;
}
.farasync-command-center .farasync-issues-table .farasync-issue-col-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.farasync-command-center .farasync-issues-table .farasync-issue-x {
    appearance: none;
    background: none !important;
    border: none !important;
    box-shadow: none !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;
    color: #b32d2e !important;
    border-radius: 0 !important;
}
.farasync-command-center .farasync-issues-table .farasync-issue-x:hover {
    background: none !important;
    border: none !important;
    color: #7f1d1d !important;
}

/* ================================================================
   v1.0.0 (Round Y6) — ENGLISH UI inside an RTL admin: the command
   center carries dir="ltr" when the plugin runs its English UI, so
   the layout reads left-to-right even on Arabic/RTL WordPress sites.
   These overrides neutralize the RTL admin's physical alignments.
   ================================================================ */
.farasync-wrap.farasync-command-center[dir="ltr"] {
    text-align: left;
}
.farasync-wrap.farasync-command-center[dir="ltr"] .wp-list-table th,
.farasync-wrap.farasync-command-center[dir="ltr"] .wp-list-table td,
.farasync-wrap.farasync-command-center[dir="ltr"] .farasync-issues-table th,
.farasync-wrap.farasync-command-center[dir="ltr"] .farasync-issues-table td {
    text-align: left;
}
.farasync-wrap.farasync-command-center[dir="ltr"] .form-table th,
.farasync-wrap.farasync-command-center[dir="ltr"] .form-table td {
    text-align: left;
}
.farasync-wrap.farasync-command-center[dir="ltr"] .farasync-logs-filter,
.farasync-wrap.farasync-command-center[dir="ltr"] .farasync-keys-toolbar,
.farasync-wrap.farasync-command-center[dir="ltr"] .farasync-toolbar-actions {
    direction: ltr;
}

/* ================================================================
   v1.0.0 (Round Y13) — MOBILE/TABLET REDESIGN: compact hero header,
   brand name under the logo, bare active-site pill with a pulsing
   dot, smaller bell, and a single-row scrolling tab bar.
   Desktop (>782px) is untouched: this section only adds rules.
   ================================================================ */

/* -- desktop defaults: the Y13 variants stay hidden ----------------
   v1.0.0: the compact mobile title (beside the logo) joins them —
   the long h1 + subtitle own the desktop header. */
.farasync-command-center .farasync-logo-name,
.farasync-command-center .farasync-header-mtitle,
.farasync-command-center .farasync-mode-badge-label,
.farasync-command-center .farasync-mode-dot {
    display: none;
}

/* -- desktop (≥783px): the bell pins to the FAR-TOP corner of the hero
   header — top-left under the Persian (RTL) admin, top-right under an
   English (LTR) one — one step smaller. v1.0.0 user request. ------- */
@media screen and (min-width: 783px) {

    /* re-anchor: the actions div stops being the bell's containing block
       so the bell can pin to the header itself (brand stays where it is) */
    .farasync-command-center .farasync-header-actions {
        position: static;
    }

    .farasync-command-center .farasync-header-actions .farasync-bell {
        position: absolute;
        top: 14px;
        inset-inline-end: 18px;
        z-index: 6;
    }
}

/* -- tablet + phone (≤782px): compact two-part header -------------- */
@media screen and (max-width: 782px) {

    /* Header: one tidy row — [logo + name] … [bell + site pill] —
       the long h1/subtitle are a desktop luxury and vanish here. */
    .farasync-command-center .farasync-header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px;
        min-height: 0 !important;
        padding: 14px 16px 16px !important;
    }

    /* the big decorative corner circle is sized for the desktop hero */
    .farasync-command-center .farasync-header::after {
        display: none;
    }

    .farasync-command-center .farasync-header-title {
        display: none !important;
    }

    .farasync-command-center .farasync-header-brand {
        /* v1.0.0: 0 0 auto → 0 1 auto + min-width:0 — the compact title
           beside the logo may shrink/wrap on narrow phones instead of
           pushing the header row wider than the viewport. */
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Logo column: smaller mark + «فراسینک» / «Farasync» beneath it */
    .farasync-command-center .farasync-logo {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: auto !important;
        height: auto !important;
    }

    .farasync-command-center .farasync-logo img {
        width: 48px !important;
        height: 48px !important;
    }

    .farasync-command-center .farasync-logo-name {
        display: block;
        color: #dbeafe;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1;
        white-space: nowrap;
        text-shadow: 0 1px 6px rgba(15, 23, 42, 0.55);
    }

    .farasync-command-center .farasync-header-actions {
        display: flex;
        /* v1.0.0: re-anchor — the bell + campaign coin stop using this
           div as their containing block so they can pin to the header
           itself (same trick the ≥783px rules already use). */
        position: static;
        width: auto !important;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* v1.0.0 (user request): on MOBILE too the bell pins to the far-TOP
       corner of the hero header — top-LEFT under the Persian (RTL) admin,
       top-RIGHT under an English (LTR) one — the exact placement the
       desktop has had since v1.0.0. It used to sit inline in the row
       (vertically centered); now it is a true corner button at every
       width. The mode badge keeps its pinned BOTTOM corner (v1.0.0),
       so the two never meet. */
    .farasync-header-actions .farasync-bell {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        z-index: 6;
    }

    /* v1.0.0 (user request): both header chips — bell + campaign $ — are
       the SAME 30px size now and ~25% smaller than the 3.9.88 bell (40px).
       The chip box itself shrinks 34 → 30 (the base 34px lives in admin.css)
       and re-pins against the 30px bell: 12px + 30px + 6px gap = 48px from
       the corner, tops aligned (equal heights → top 12px). */
    .farasync-command-center .farasync-camp-head-icon {
        position: absolute;
        top: 12px;
        inset-inline-end: 48px;
        z-index: 6;
        margin: 0;
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
    }

    /* the $ glyph follows the chip down: 18px attribute → 15px box fill
       (the same 50% glyph/box ratio as the bell: 15px in a 30px box) */
    .farasync-command-center .farasync-camp-head-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* v1.0.0 (user request): the SHORT product title sits BESIDE the
       logo — «همگام‌سازی هوشمند محصولات» under a fa admin, "Smart
       Product Sync" under an en one — centered against the logo column
       like a proper app header. It wraps (never overflows) on the
       narrowest phones. */
    .farasync-command-center .farasync-header-mtitle {
        display: block;
        flex: 0 1 auto;
        align-self: center;
        min-width: 0;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.55;
        letter-spacing: -0.2px;
        text-shadow: 0 1px 6px rgba(15, 23, 42, 0.55);
    }

    .farasync-command-center .farasync-mode-badge {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* v1.0.0 (user request): bell shrinks 40 → 30px (≈25% down) and
       matches the campaign $ chip EXACTLY. The glyph/badge scale with it
       (15px glyph = the desktop 50% ratio; 15px badge). */
    .farasync-header-actions .farasync-bell-btn {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
    }

    .farasync-header-actions .farasync-bell-btn .dashicons {
        font-size: 15px !important;
        width: 15px !important;
        height: 15px !important;
    }

    .farasync-header-actions .farasync-bell-badge {
        top: -4px !important;
        inset-inline-end: -4px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 4px !important;
        font-size: 9.5px !important;
        line-height: 15px !important;
    }

    /* Site pill: slightly smaller, keeps the full «حالت فعال: …» text
       on tablets (there is room) */
    .farasync-command-center .farasync-mode-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 12px !important;
        font-size: 12px;
        white-space: nowrap;
    }

    .farasync-command-center .farasync-mode-badge .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    /* Tab bar: ONE horizontally scrollable row of compact chips —
       kills admin.css's flex-wrap/flex:1 multi-row stretch */
    .farasync-command-center .farasync-tabs {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin-top: 10px !important;
        padding: 6px !important;
        scrollbar-width: none;
    }

    .farasync-command-center .farasync-tabs::-webkit-scrollbar {
        display: none;
    }

    .farasync-command-center .farasync-tab {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        gap: 6px;
        min-height: 34px !important;
        padding: 7px 11px !important;
        font-size: 12px !important;
        line-height: 1.1;
        white-space: nowrap !important;
    }

    .farasync-command-center .farasync-tab .dashicons {
        display: inline-flex !important;
        /* admin-luxury.css locks 16px with !important — beat it here */
        font-size: 15px !important;
        width: 15px !important;
        height: 15px !important;
    }
}

/* -- phone (≤600px): the user's compact spec ------------------------ */
@media screen and (max-width: 600px) {

    .farasync-command-center .farasync-logo img {
        width: 44px !important;
        height: 44px !important;
    }

    /* v1.0.0 (user request): phones use the SAME 30px bell + $ chips as
       tablets — one compact size for every mobile width (the 3.9.88
       40px spec superseded by the user's «۲۵٪ کوچکتر» request). */
    .farasync-header-actions .farasync-bell-btn {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
    }

    .farasync-header-actions .farasync-bell-btn .dashicons {
        font-size: 15px !important;
        width: 15px !important;
        height: 15px !important;
    }

    .farasync-header-actions .farasync-bell-badge {
        top: -4px !important;
        inset-inline-end: -4px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 4px !important;
        font-size: 9.5px !important;
        line-height: 15px !important;
    }

    .farasync-command-center .farasync-logo-name {
        font-size: 10.5px;
    }

    /* v1.0.0: the compact title takes one step down with the logo */
    .farasync-command-center .farasync-header-mtitle {
        font-size: 12.5px;
    }

    /* v1.0.0: the $ chip aligns with the 30px bell — equal heights so
       tops match at 12px (the 3.9.88 15px/58px centering is obsolete). */
    .farasync-command-center .farasync-camp-head-icon {
        top: 12px;
    }

    /* Bare site label + pulsing live dot — «فعال:» prefix dropped */
    .farasync-command-center .farasync-mode-badge {
        padding: 6px 11px !important;
        font-size: 11.5px;
        gap: 6px;
    }

    .farasync-command-center .farasync-mode-badge .dashicons,
    .farasync-command-center .farasync-mode-badge .farasync-mode-badge-full {
        display: none !important;
    }

    .farasync-command-center .farasync-mode-badge .farasync-mode-badge-label {
        display: inline;
    }

    .farasync-command-center .farasync-mode-dot {
        display: inline-block;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        animation: farasync-mode-pulse 1.8s ease-out infinite;
    }

    .farasync-command-center .farasync-mode-badge.mode-distribution .farasync-mode-dot {
        background: #4ade80;
        --farasync-pulse: rgba(74, 222, 128, 0.55);
    }

    .farasync-command-center .farasync-mode-badge.mode-receive .farasync-mode-dot {
        background: #60a5fa;
        --farasync-pulse: rgba(96, 165, 250, 0.55);
    }

    .farasync-command-center .farasync-mode-badge.mode-both .farasync-mode-dot {
        background: #fbbf24;
        --farasync-pulse: rgba(251, 191, 36, 0.55);
    }

    .farasync-command-center .farasync-mode-badge.mode-none .farasync-mode-dot {
        background: #94a3b8;
        animation: none;
    }

    /* Tabs: tighter still */
    .farasync-command-center .farasync-tabs {
        gap: 5px !important;
        padding: 5px !important;
    }

    .farasync-command-center .farasync-tab {
        min-height: 31px !important;
        padding: 6px 9px !important;
        font-size: 11.5px !important;
        gap: 5px;
    }

    .farasync-command-center .farasync-tab .dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    /* Panels: a touch more breathing room for stacked content */
    .farasync-command-center .farasync-tab-panels {
        padding: 13px !important;
    }

    /* Data-table headers must never stack word-by-word inside the
       horizontal-scroll wrappers (Y12) */
    .farasync-command-center .farasync-table-scroll th {
        white-space: nowrap;
    }
}

@keyframes farasync-mode-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--farasync-pulse, rgba(74, 222, 128, 0.55));
    }

    70% {
        box-shadow: 0 0 0 7px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .farasync-command-center .farasync-mode-dot {
        animation: none;
    }
}

/* ==========================================================================
   v1.0.0 (Round Y15): mobile tidy-up — report filter rows, imported-tab
   filter, and FULLSCREEN modals
   ========================================================================== */

/* --- base structure for the Y15 filter markup (desktop == old look) ------
   admin-page.php now wraps each label+date pair into .farasync-lf-row and
   the logs tab's submit button references its GET form via form="…".
   Rows are inline flex boxes, so the desktop toolbar still reads
   [از تاریخ ctrl][تا تاریخ ctrl][اعمال فیلتر][خروجی CSV] on ONE line. */
.farasync-logs-filter .farasync-lf-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.farasync-logs-filter .farasync-lf-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 600px) {
    /* --- Y15a: گزارش‌ها/فاکتورها/فروش — the user's exact phone layout:
       از تاریخ: [کنترل تاریخ]
       تا تاریخ:  [کنترل تاریخ]
       [اعمال فیلتر]                [خروجی CSV]                        */
    .farasync-logs-filter {
        row-gap: 10px;
        justify-content: space-between;
    }
    /* the logs tab's GET form carries both rows — stack them */
    .farasync-logs-filter > .farasync-lf-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        flex: 1 1 100%;
    }
    /* invoices/sales rows are direct children — one full row each */
    .farasync-logs-filter > .farasync-lf-row {
        flex: 1 1 100%;
    }
    /* the Jalali date-control (200px desktop box) stretches with the row */
    .farasync-lf-row .farasync-date-control {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .farasync-lf-row label {
        white-space: nowrap;
    }
    /* [اعمال فیلتر] … [خروجی CSV] share the last line, spread apart */
    .farasync-logs-filter > .button,
    .farasync-logs-filter > form {
        margin: 0;
    }

    /* --- Y15b: محصولات واردشده — search on its own row, then the source
       select + فیلتر button sharing ONE row (the ≤782px column stack
       above made three separate rows) */
    .farasync-command-center .farasync-imported-filters {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 8px;
        align-items: center;
    }
    #farasync-imported-search {
        min-width: 100% !important; /* beats the inline min-width:220px */
        flex: 1 1 100%;
    }
    #farasync-imported-source-filter {
        flex: 1 1 auto;
        min-width: 0 !important;    /* beats the inline min-width:200px */
        width: auto;
    }
    #farasync-imported-search-btn {
        flex: 0 0 auto;
    }

    /* --- Y15c: EVERY admin popup goes fullscreen on phones — the same
       sheet treatment as the notifications panel (Y14): no floating
       card margins, no rounded corners, full viewport height. The
       overlay keeps overflow-y:auto so tall forms scroll. */
    .farasync-modal {
        padding: 0 !important;
    }
    .farasync-modal .farasync-modal-content,
    .farasync-modal .farasync-modal-content.farasync-modal-wide,
    .farasync-modal .farasync-modal-content.farasync-modal-xwide,
    .farasync-modal .farasync-modal-content.farasync-sm-modal,
    #farasync-key-modal .farasync-modal-content,
    #farasync-key-reveal-modal .farasync-modal-content,
    #farasync-source-modal .farasync-modal-content,
    #farasync-price-rules-modal .farasync-modal-content,
    #farasync-preview-modal .farasync-modal-content,
    #farasync-invoice-modal .farasync-modal-content,
    #farasync-global-sync-modal .farasync-modal-content,
    #farasync-sync-manager-modal .farasync-modal-content {
        width: 100vw !important;
        max-width: none !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none !important;
        margin: 0 !important;       /* beats luxury's 8px card margins */
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* the command-center modal header bars lose their floating radius */
    .farasync-modal-content > h2,
    .farasync-modal-content > h3,
    .farasync-price-rules-title,
    .farasync-sm-title {
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   v1.0.0 (Round Y16): mobile popup shell — FIXED header, FIXED dashboard
   credit footer, zero content overflow. Y15 made the popups fullscreen but
   let the sheet itself scroll (min-height:100dvh + max-height:none), so the
   hero header scrolled away with the form. On phones the popup becomes an
   app-frame again: exactly one screen tall, the dark hero bar pinned on top,
   the .farasync-modal-body scrolling INSIDE (the command-center desktop
   layout already does this — the frame just needed its height back), and
   the branded credit footer riding the frame floor.
   ========================================================================== */

/* Base: the credit footer rides inside every popup markup but stays
   invisible on desktop/tablet, where popups remain centered cards. */
.farasync-modal .farasync-credit-footer {
    display: none !important;
}

@media (max-width: 600px) {
    /* --- Y16a: the app-frame — one exact screen, no sheet scrolling -----
       The ID list matters: #farasync-price-rules-modal .farasync-modal-content
       carries a desktop `height:auto !important` (1,1,0) further up this file
       that would leave that sheet at its natural height mid-air; the same
       (1,1,0) asserted again down here wins the tie by order. */
    .farasync-modal {
        overscroll-behavior: contain;
    }
    .farasync-modal .farasync-modal-content,
    #farasync-key-modal .farasync-modal-content,
    #farasync-key-reveal-modal .farasync-modal-content,
    #farasync-source-modal .farasync-modal-content,
    #farasync-price-rules-modal .farasync-modal-content,
    #farasync-preview-modal .farasync-modal-content,
    #farasync-invoice-modal .farasync-modal-content,
    #farasync-global-sync-modal .farasync-modal-content,
    #farasync-sync-manager-modal .farasync-modal-content {
        height: 100vh !important;
        height: 100dvh !important;   /* beats Y15's min-height — the frame
                                        no longer grows past the screen, so
                                        the header never scrolls away */
    }
    /* price-rules body fills the frame between header and footer (its
       desktop cap `max-height: calc(100vh - 150px) !important` would leave
       a dead gap above the credit footer) */
    #farasync-price-rules-modal .farasync-modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
    }
    /* direct-child bodies GROW to the floor — the desktop "compact chrome"
       rule (`.farasync-modal-content > .farasync-modal-body { flex: 0 1
       auto !important }`) left the preview/invoice/key-reveal sheets with
       the credit footer floating right under a short body instead of
       pinned at the screen floor */
    .farasync-modal-content > .farasync-modal-body {
        flex: 1 1 auto !important;
    }

    /* --- Y16b: the hero header band — explicit 56px + notch safe-area,
       single line. An explicit height makes the band deterministic so the
       X can be centered in it exactly (below). flex-shrink:0 — inside the
       one-screen frame the default shrink would squash the band (live QA:
       56px collapsed to 43px) instead of letting the form absorb it. */
    .farasync-modal .farasync-modal-content > h2 {
        flex: 0 0 auto;
        box-sizing: border-box;      /* live QA: the band rendered 81px (the
                                        theme left the h2 content-box, so the
                                        24px padding stacked on top of the 56px
                                        height and the X sat 12px off-center) */
        height: calc(56px + env(safe-area-inset-top, 0px));
        min-height: 0 !important;
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 12px !important;
        padding-inline-start: 18px !important;
        padding-inline-end: 60px !important;
        font-size: 15.5px !important;
        white-space: nowrap;         /* the band height must never grow */
        overflow: hidden;            /* v1.0.0: long titles get an … */
        text-overflow: ellipsis;     /* instead of running under the X */
    }

    /* --- Y16c: the X — vertically centered in the header band (user ask).
       32px pill ⇒ center = 28px + safe-area/2 ⇒ top = center − 16px. */
    .farasync-modal .farasync-modal-close {
        top: calc((56px + env(safe-area-inset-top, 0px)) / 2 - 16px) !important;
        inset-inline-end: 12px !important;
    }

    /* --- Y16d: the dashboard credit footer — fixed bottom bar of the
       frame (same strip as the dashboard floor: gradient + logo + FaraLabs).
       It is the LAST flex child, so action rows stay visible above it. */
    .farasync-modal .farasync-credit-footer {
        display: flex !important;
        flex: 0 0 auto;
        margin: 0 !important;        /* kills the dashboard's negative bleed */
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0;
    }

    /* --- Y16e: nothing pokes out of the frame — the body scrolls its own
       horizontal overflow INSIDE the sheet, and wide native controls shrink
       to their container instead of stretching past the screen. */
    .farasync-modal .farasync-modal-body,
    .farasync-modal .farasync-global-sync-body {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    .farasync-modal .farasync-modal-content input[type="text"],
    .farasync-modal .farasync-modal-content input[type="url"],
    .farasync-modal .farasync-modal-content input[type="password"],
    .farasync-modal .farasync-modal-content input[type="number"],
    .farasync-modal .farasync-modal-content input[type="date"],
    .farasync-modal .farasync-modal-content input[type="email"],
    .farasync-modal .farasync-modal-content select,
    .farasync-modal .farasync-modal-content textarea,
    .farasync-modal .farasync-modal-content .form-table th,
    .farasync-modal .farasync-modal-content .form-table td,
    .farasync-modal .farasync-modal-content img,
    .farasync-modal .farasync-modal-content svg,
    .farasync-modal .farasync-modal-content table {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Y16f: global-sync progress — its body fills the frame instead of
       the desktop 80vh cap (its log keeps scrolling internally). */
    .farasync-modal .farasync-global-sync-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
    }
}

/* ============================================================
   v1.0.0 (Round Y17): mobile tables + debug entries
   — the distribution tab's keys table and the key-rotation
   history become stacked cards on phones (the old ≤782px rule
   squeezed every key into one nowrap "train row"), and the
   debug-log entries stack their meta above a full-width
   message line. v1.0.0: extended to ≤782px — the 601–782px
   band used to fall back to the old "flatten" hack that
   misaligned columns, so cards now cover the whole tablet
   band too.
   ============================================================ */
@media (max-width: 782px) {
    /* --- Y17a: keys table → one card per key.
       Beats admin.css ≤782px (.farasync-keys-table = 0,1,0 / cells
       display:table-cell) and command-center ≤1024px scroll with the
       higher (0,3,x) selectors here + the later file position. */
    .farasync-command-center .farasync-keys-table {
        display: block;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none;
        margin: 0;
        overflow-x: visible;
        white-space: normal;
    }
    .farasync-command-center .farasync-keys-table thead {
        display: none;
    }
    .farasync-command-center .farasync-keys-table tbody {
        display: block;
    }
    .farasync-command-center .farasync-keys-table tbody tr {
        display: block;
        margin: 0 0 12px;
        background: #fff !important;      /* beats WP .striped row stripes */
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    }
    .farasync-command-center .farasync-keys-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .farasync-command-center .farasync-keys-table tbody td {
        display: block;
        width: auto !important;
        padding: 8px 14px;
        border: 0 !important;             /* beats WP .widefat cell rules */
        border-bottom: 1px solid #f1f5f9 !important;
        white-space: normal;
        text-align: start;
    }
    /* label chip from the cell's own translated data-label.
       (0,4,3) — must OUTRANK WP-core's ≤782px responsive-table rule
       .wp-list-table … td:not(.check-column)::before { content:attr(data-colname);
       display:block } = (0,4,2), which empties the label (we have
       data-label, not data-colname). The extra table/.striped classes win it. */
    .farasync-command-center table.farasync-keys-table.striped tbody td[data-label]::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        position: static !important;   /* WP-core's responsive ::before is position:absolute */
        margin-inline-end: 8px;
        min-width: 88px;
        color: #64748b;
        font-size: 11.5px;
        font-weight: 600;
        vertical-align: middle;
    }
    /* the key name becomes the card title (no label chip) */
    .farasync-command-center .farasync-keys-table tbody td.farasync-key-name {
        background: #f8fafc;
        font-weight: 700;
        font-size: 14px;
        border-bottom: 1px solid #eef2f7 !important;
    }
    /* actions = the card's footer toolbar (kills the ≤782px column stack) */
    .farasync-command-center .farasync-keys-table tbody td.farasync-row-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 14px;
        background: #f8fafc;
        border-bottom: 0 !important;
    }
    .farasync-command-center .farasync-keys-table tbody td.farasync-row-actions .farasync-action-btn {
        width: auto;
        text-align: center;
    }
    /* v1.0.0 (user report): the ON/OFF switch must sit BESIDE its
       neighbors, vertically centered to the adjacent button — grouped
       toolbar (RTL start) instead of the space-between spread that sent
       the switch floating to the far edge of the card footer. */
    .farasync-command-center .farasync-keys-table tbody td.farasync-row-actions {
        justify-content: flex-start;
        gap: 6px;
    }
    /* empty-state row stays a plain block (no card chrome) */
    .farasync-command-center .farasync-keys-table tbody tr.farasync-empty-row {
        border: 0 !important;
        box-shadow: none;
        background: transparent !important;
    }
    .farasync-command-center .farasync-keys-table tbody tr.farasync-empty-row td {
        border: 0 !important;
        padding: 16px 0;
    }

    /* --- Y17b: rotation history → the same card treatment */
    .farasync-command-center .farasync-rotations-table {
        display: block;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none;
        margin: 0;
        overflow-x: visible;
        white-space: normal;
    }
    .farasync-command-center .farasync-rotations-table thead {
        display: none;
    }
    .farasync-command-center .farasync-rotations-table tbody {
        display: block;
    }
    .farasync-command-center .farasync-rotations-table tbody tr {
        display: block;
        margin: 0 0 12px;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    }
    .farasync-command-center .farasync-rotations-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .farasync-command-center .farasync-rotations-table tbody td {
        display: block;
        width: auto !important;
        padding: 8px 14px;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        white-space: normal;
        text-align: start;
    }
    .farasync-command-center table.farasync-rotations-table.striped tbody td[data-label]::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        position: static !important;
        margin-inline-end: 8px;
        min-width: 88px;
        color: #64748b;
        font-size: 11.5px;
        font-weight: 600;
        vertical-align: middle;
    }
    /* the new/old key chips wrap inside the card, never sideways-scroll */
    .farasync-command-center .farasync-rotations-table .farasync-rot-key {
        max-width: 100%;
    }
    .farasync-command-center .farasync-rotations-table .farasync-key-code {
        word-break: break-all;
    }

    /* --- Y17c: debug-log entries — meta wraps on the first line(s),
       the message takes the FULL next line (was flex-1 squeezed to
       ~10px beside time+level+type). Beats admin-luxury.css (0,1,0)
       by file order; same selectors, later cascade. */
    .farasync-debug-log-container {
        padding: 10px 12px;
    }
    .farasync-debug-log-entry {
        flex-wrap: wrap;
        row-gap: 2px;
        padding: 6px 0;
    }
    .farasync-debug-log-level,
    .farasync-debug-log-type {
        min-width: 0;
    }
    .farasync-debug-log-msg {
        flex: 1 1 100%;
        min-width: 100%;
        line-height: 1.6;
    }
    .farasync-debug-log-details {
        word-break: break-word;
    }
}

/* ================================================================
   v1.0.0 — the Source-Health card is EXPANDABLE now (chevron head
   + collapsible body with the real error rows / recovery banner /
   fix guidance / action buttons). The flex-row card above predates
   that structure and would place the head and the body SIDE BY SIDE,
   so these same-specificity rules — later in this file — turn the
   card back into a vertical head-over-body stack.
   ================================================================ */
.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 {
    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-command-center .farasync-health-card .farasync-hc-head:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: -2px;
}
.farasync-command-center .farasync-health-card .farasync-hc-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.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: the WHOLE CARD is the click target (it opens
   the «خطاهای اخیر این مبدأ» modal), so every cursor:default exception
   above is reverted; + the restored info row, the friendly summary line
   and the dialog scroll contract (mirrors of the admin.css v1.0.0
   block, command-center-specificity where needed).
   ===================================================================== */
.farasync-command-center .farasync-health-card {
    cursor: pointer;
}
.farasync-command-center .farasync-health-card .farasync-hc-head {
    cursor: pointer;
}
.farasync-command-center .farasync-health-card.status-healthy .farasync-hc-head,
.farasync-command-center .farasync-health-card.status-unknown .farasync-hc-head {
    cursor: pointer;
}
/* v1.0.0: the labeled stat tiles — the command-center mirror of the
   admin.css block (icon + label on top, bold value below). */
.farasync-command-center .farasync-health-card .farasync-hc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12.5px;
}
.farasync-command-center .farasync-health-card .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-command-center .farasync-health-card .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-command-center .farasync-health-card .farasync-hc-stat-lbl svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #94a3b8;
}
.farasync-command-center .farasync-health-card .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;
}
.farasync-command-center .farasync-hc-act-result.ok {
    color: #14532d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.farasync-command-center .farasync-hc-act-result.err {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}
.farasync-command-center .farasync-hc-recovery.is-history {
    border-style: dashed;
    color: #166534;
}
.farasync-command-center .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-command-center .farasync-hc-sumdot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 7px;
}
.farasync-command-center .farasync-hc-summary.tone-ok {
    color: #14532d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.farasync-command-center .farasync-hc-summary.tone-ok .farasync-hc-sumdot {
    background: #22c55e;
}
.farasync-command-center .farasync-hc-summary.tone-warn {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.farasync-command-center .farasync-hc-summary.tone-warn .farasync-hc-sumdot {
    background: #f59e0b;
}
.farasync-command-center .farasync-hc-summary.tone-crit {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.farasync-command-center .farasync-hc-summary.tone-crit .farasync-hc-sumdot {
    background: #ef4444;
}
.farasync-command-center .farasync-hc-err-type {
    direction: inherit;
    unicode-bidi: plaintext;
}
#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 — currency notice mirror (kept in sync with admin.css). */
.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 — item 3 + item 7 (header surfaces; this file loads LAST so
   these rules win the cascade over the base styles in admin.css)
   ===================================================================== */

/* ITEM 3 — the header campaign icon is now GOLD (a stacked golden-coin
   pair), matching the campaign/reward semantics. */
.farasync-command-center .farasync-camp-head-icon {
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f0c96b;
    box-shadow: 0 1px 3px rgba(180, 83, 9, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.farasync-command-center .farasync-camp-head-icon:hover,
.farasync-command-center .farasync-camp-head-icon:focus {
    color: #92400e;
    box-shadow: 0 3px 8px rgba(180, 83, 9, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* =====================================================================
   v1.0.0 (user feedback round, items 1)
   ===================================================================== */

/* ITEM 1 — the campaign icon MUST sit ON THE SAME LINE as the bell,
   immediately beside it (the user marked the exact spot with the red
   arrow). On desktop (≥783px) the bell is ABSOLUTELY pinned to the
   header's far corner (top:14px, inset-inline-end:18px), which used to
   leave the in-flow coin to wrap underneath it. The icon now pins the
   SAME way: 34px bell + 8px gap = 60px from the same corner, one row
   with the bell, never wrapping. (Mobile ≤782px keeps the flex row —
   the icon already lands beside the bell there.) */
@media screen and (min-width: 783px) {
    .farasync-command-center .farasync-camp-head-icon {
        position: absolute;
        top: 14px;
        inset-inline-end: 60px;
        z-index: 6;
        margin: 0;
    }
}

/* ITEM 1 — the active-mode badge: the v1.0.0 corner glue (right:0 /
   bottom:0, radius 12px 0 0 0) pushed the pill onto the header's outer
   edge and it visually poked OUT of the frame (user report + the green
   arrow). It now floats FULLY INSIDE the header at the bottom corner
   with a 12px inset, as a smaller fully-rounded pill. The corner-side
   border strips are restored (it no longer touches the edges).
   v1.0.0 (user request): the pill must sit at the BOTTOM-LEFT corner
   under a Persian (RTL) admin and at the BOTTOM-RIGHT corner under an
   English (LTR) one. The physical right/bottom offsets glued it to the
   RIGHT corner in BOTH languages — swapped to the logical
   inset-inline-end (left under RTL, right under LTR); the border strip
   flips with it via border-inline-end. */
.farasync-command-center .farasync-mode-badge.farasync-mode-corner {
    position: absolute;
    z-index: 3;
    inset-inline-end: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px !important;
    font-size: 10.5px;
    line-height: 1.6;
    border-radius: 999px !important;
    border-inline-end: 1px solid var(--farasync-border, #e2e8f0) !important;
    border-bottom: 1px solid var(--farasync-border, #e2e8f0) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
@media (max-width: 600px) {
    .farasync-command-center .farasync-mode-badge.farasync-mode-corner {
        inset-inline-end: 8px;
        bottom: 8px;
        padding: 2px 8px !important;
        font-size: 9.5px;
    }
}
/* v1.0.0 (item 2, user request): the corner pill shows the SHORT mode
   word («مبدأ» / «مقصد») beside the pulsing dot at EVERY width — the
   old desktop rule hid the label entirely, leaving a bare dot. The dot
   keeps its place as the pill's far-side anchor: label first in the DOM
   puts the text on the reading-start side (right under RTL / left under
   LTR) and the dot on the OPPOSITE side — left of the text in Persian,
   right of it in English. */
.farasync-command-center .farasync-mode-badge.farasync-mode-corner .farasync-mode-badge-label {
    display: inline-block;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
}
.farasync-command-center .farasync-mode-badge.farasync-mode-corner .farasync-mode-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: farasync-mode-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes farasync-mode-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}
.farasync-command-center .farasync-mode-badge.farasync-mode-corner.mode-receive .farasync-mode-dot {
    background: #93c5fd;
}
.farasync-command-center .farasync-mode-badge.farasync-mode-corner.mode-both .farasync-mode-dot {
    background: #fcd34d;
}
.farasync-command-center .farasync-mode-badge.farasync-mode-corner.mode-none .farasync-mode-dot {
    background: #94a3b8;
    animation: none;
}

/* =====================================================================
   v1.0.0 (item 3, user report): the ROW-selection tick squares of the
   invoices / sales tables «don't take the tick» / act jumbled. On this
   user's setup the NATIVE checkbox tick famously repaints late (the same
   browser behaviour that already forced the v1.0.0 LED on the filter
   chips). The row checkboxes now use the SAME deterministic CSS-painted
   skin as the modal checkboxes: the tick is a background-image on
   :checked — it paints on the same task as the click, it can never
   «fall off» and it cannot double-draw (pseudo layers suppressed).
   Covers the header select-all AND every row checkbox of both tables.
   ===================================================================== */
.farasync-inv-col-check input[type="checkbox"],
.farasync-sales-col-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    accent-color: transparent !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px 11px !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.05);
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 1;
    pointer-events: auto !important;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}
.farasync-inv-col-check input[type="checkbox"]:checked,
.farasync-sales-col-check input[type="checkbox"]:checked {
    background-color: #4f46e5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='m3 8 3 3 7-7'/%3E%3C/svg%3E") !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28) !important;
}
.farasync-inv-col-check input[type="checkbox"]:hover,
.farasync-sales-col-check input[type="checkbox"]:hover {
    border-color: #6366f1 !important;
}
.farasync-inv-col-check input[type="checkbox"]:indeterminate,
.farasync-sales-col-check input[type="checkbox"]:indeterminate {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E") !important;
}
.farasync-inv-col-check input[type="checkbox"]::before,
.farasync-inv-col-check input[type="checkbox"]::after,
.farasync-sales-col-check input[type="checkbox"]::before,
.farasync-sales-col-check input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   v1.0.0 (UI audit) — mobile touch targets + RTL hover + motion
   ============================================================ */
/* v1.0.0: the v1.0.0 bell touch-target floors (min-width/min-height:
   40px) are fully REMOVED — the user asked the mobile chips ~25% smaller,
   and the explicit 30px boxes above now own the size at every width. */
@media (max-width: 600px) {
    /* Tab chips were 31px tall on phones — below tap-target guidelines. */
    .farasync-command-center .farasync-tab,
    .farasync-tab {
        min-height: 40px;
    }
}
/* Row-hover inset bar: the +3px offset paints on the physical LEFT edge,
   which is the END side in RTL — mirror it for RTL admins.
   v1.0.0 (user report: the rewards «کمپین جدید» form rows lit a blue bar
   on hover): the mirror used to hit EVERY tbody tr under the command
   center — including the campaign FORM rows and the editable tiers table,
   which are not data tables. It now rides the SAME .wp-list-table scope as
   the LTR rule above; plain form rows lose the bar, real tables keep it. */
.farasync-command-center[dir="rtl"] .wp-list-table tbody tr:hover,
[dir="rtl"] .farasync-command-center .wp-list-table tbody tr:hover {
    box-shadow: inset -3px 0 0 #818cf8;
}

/* v1.0.0 (UI audit): stat-tile color modifiers, command-center scope —
   the base num/label colors are !important, so the semantic classes must be
   re-asserted at higher specificity to stay visible. */
.farasync-command-center .farasync-stat.farasync-stat--ok .farasync-stat-num { color: #46b450 !important; }
.farasync-command-center .farasync-stat.farasync-stat--info .farasync-stat-num { color: #007cba !important; }
.farasync-command-center .farasync-stat.farasync-stat--warn .farasync-stat-num { color: #dba617 !important; }
.farasync-command-center .farasync-stat.farasync-stat--bad .farasync-stat-num { color: #d63638 !important; }
.farasync-command-center .farasync-stat.farasync-stat--muted .farasync-stat-num { color: #94a3b8 !important; }

/* ============================================================
   v1.0.0 (X55 UI audit) — §12: close-control family + spacing
   normalization. One look for every X, one gap scale (4/8/12).
   Appended last so it settles every cross-file cascade tie.
   ============================================================ */

/* ---- 12a. Close-control family: one size, one radius, one hover ---- */
.farasync-modal-close,
.farasync-action-dialog-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease !important;
}
.farasync-modal-close:hover,
.farasync-modal-close:focus-visible,
.farasync-action-dialog-close:hover,
.farasync-action-dialog-close:focus-visible {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
    transform: none !important;
}
.farasync-toast-close { border-radius: 6px !important; }

/* the red row dismiss joins the family (was a bare 32px glyph) */
.farasync-issue-dismiss.farasync-issue-x {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    text-align: center;
}
.farasync-issue-dismiss.farasync-issue-x:hover {
    background: rgba(220, 38, 38, .12) !important;
}

/* chip remove is a real <button> now — strip UA chrome */
button.farasync-pr-multiselect-chip-remove {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

/* ---- 12b. Spacing normalization: tight 4px / standard 8px / loose 12px ---- */
/* v1.0.0 (user report — STILL open): the inline-flex cell above shrank
   the td to its CONTENT box (56px) while taller rows ran to 85px — the
   striping/amber paint stopped short and a WHITE band showed under the
   print/trash icons (row colors on tds could never cover it, because the
   box itself was not the cell). The cell is a real table-cell again:
   full row height, striping/amber/hover cover it edge to edge, and the
   buttons center through the cell's own vertical-align. The 4px glue fix
   from v1.0.0 is preserved by restoring the 6px inline margin below
   (margin beats the zeroed rule — same layer, later source order). */
.farasync-command-center .farasync-table-scroll table.farasync-invoices-table td.farasync-inv-print-cell {
    display: table-cell !important;
    vertical-align: middle !important;
}
.farasync-command-center .farasync-table-scroll table.farasync-invoices-table td.farasync-inv-print-cell .farasync-print-btn + .farasync-del-btn {
    margin-inline-start: 6px !important;
}
.farasync-row-actions,
.farasync-price-rule-actions,
.farasync-issue-col-actions,
.farasync-sales-row-actions,
.farasync-sm-selection-actions,
.farasync-inv-print-cell { gap: 4px !important; }
.farasync-inv-print-cell .farasync-print-btn + .farasync-del-btn { margin-inline-start: 0 !important; }

.farasync-toolbar,
.farasync-toolbar-actions,
.farasync-logs-actions,
.farasync-form-actions,
.farasync-reveal-actions,
.farasync-debug-toolbar,
.farasync-sm-filter-actions,
.farasync-sm-actions,
.farasync-action-dialog-actions,
.farasync-hc-actions,
.farasync-tpl-actions,
.farasync-tpl-side-actions,
.farasync-rw-actions,
.farasync-global-sync-footer,
.farasync-notify-save-row,
.farasync-tz-row,
.farasync-backup-row,
.farasync-msgs-actions,
.farasync-notify-foot-row,
.farasync-logs-filter .farasync-lf-form,
.farasync-logs-filter .farasync-lf-row { gap: 8px !important; }

.farasync-imported-filters { gap: 8px !important; }
.farasync-source-card-actions { gap: 4px !important; padding-top: 10px !important; }

.farasync-modal-content > p.submit,
.farasync-modal-content > .submit,
.farasync-modal-content > .farasync-sm-actions { gap: 8px !important; }
#farasync-toast-container { gap: 8px !important; }

.tablenav-pages { display: flex; align-items: center; gap: 8px !important; flex-wrap: wrap; }
.tablenav-pages .button { margin: 0 !important; }

.farasync-fchip-btn { padding: 4px 8px !important; }

/* ---- 12c. Mobile: 40px targets, stacked modal tables, no edge pokes ---- */
@media (max-width: 782px) {
    .farasync-modal-close,
    .farasync-action-dialog-close,
    .farasync-rw-cmodal-x {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    .farasync-bell-close {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
    }
    .tablenav-pages .button { min-height: 40px; min-width: 40px; }
    .farasync-date-nav { min-width: 40px !important; min-height: 40px !important; }
    #farasync-toast-container { inset-inline-start: 12px !important; inset-inline-end: 12px !important; }
    .farasync-pr-value-input, .farasync-pr-profit-input { max-width: 100% !important; }
    .farasync-sm-modal { padding: 16px !important; }
    .farasync-modal-content .form-table,
    .farasync-modal-content .form-table tbody { display: block; }
    .farasync-modal-content .form-table tr { display: block; margin: 0 0 12px; }
    .farasync-modal-content .form-table th,
    .farasync-modal-content .form-table td { display: block; width: 100% !important; box-sizing: border-box; }
    .farasync-modal-content .form-table th { padding-bottom: 2px !important; }
    .farasync-form .regular-text,
    .farasync-modal-content .regular-text { max-width: 100% !important; }
}
@media (max-width: 600px) {
    .farasync-sm-modal { padding: 0 !important; }
}