/* Axomify Marketplace Vendor Dashboard Premium Design System */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

.axmp-wrap {
    --ink: #0F0F0F;
    --ink-soft: #57534E;
    --ink-faint: #8C8681;
    --canvas: #FAF9F6;
    --surface: #FFFFFF;
    --border: #E8E4DC;
    --red: #F5B700;
    --red-dark: #8A6D00;
    --red-wash: #FFF8DE;
    --gold: #0F0F0F;
    --gold-wash: #F2F2F0;
    --green: #15803D;
    --green-wash: #F0FBF4;
    --blue: #2563EB;
    --blue-wash: #EFF6FF;
    --purple: #7C3AED;
    --purple-wash: #F5F3FF;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    box-sizing: border-box;
}

.axmp-wrap * {
    box-sizing: border-box;
}

.axmp-wrap h1,
.axmp-wrap h2,
.axmp-wrap h3,
.axmp-wrap h4 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.axmp-card {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #E8E4DC);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 12px -4px rgba(28, 25, 23, .06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.axmp-field {
    margin-bottom: 14px;
}

.axmp-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

.axmp-field input:not([type="radio"]):not([type="checkbox"]),
.axmp-field select,
.axmp-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--canvas);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.axmp-field input:not([type="radio"]):not([type="checkbox"]):focus,
.axmp-field select:focus,
.axmp-field textarea:focus {
    outline: none;
    border-color: var(--red);
    background: #fff;
    box-shadow: 0 0 0 3px var(--red-wash);
}

.axmp-field input[type="radio"],
.axmp-field input[type="checkbox"],
.axmp-radio-card input[type="radio"],
.axmp-checkbox-card input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    accent-color: var(--red-dark);
}

.axmp-hint {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 4px;
}

.axmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, #FFCF33, var(--red, #F5B700));
    color: #0F0F0F !important;
    border: none;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 22px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 18px -6px rgba(245, 183, 0, .5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.axmp-btn:hover {
    opacity: 0.95;
}

.axmp-btn:active {
    transform: scale(0.98);
}

.axmp-btn.gold {
    /* BUG FIXED: --gold is only defined inside .axmp-wrap above. This class is also used by
       maybe_show_customer_cancel_button() (frontend/class-checkout.php) on WooCommerce's own
       order-received/view-order page, which is NOT wrapped in .axmp-wrap -- so var(--gold)
       resolved to nothing there, invalidating the whole `background` shorthand and rendering
       the button with no background (transparent) behind its white text: an invisible button
       on the card's cream background. Fallback values here make this class safe both inside
       and outside .axmp-wrap, with no visual change wherever it already worked. */
    background: linear-gradient(180deg, #333333, var(--gold, #0F0F0F));
    color: #fff !important;
    box-shadow: 0 8px 18px -6px rgba(15, 15, 15, .4);
}

.axmp-btn.outline {
    background: var(--canvas, #FAF9F6);
    color: var(--ink-soft, #57534E) !important;
    border: 1px solid var(--border, #E8E4DC);
    box-shadow: none;
}

.axmp-btn.small {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
}

.axmp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
}

.axmp-badge.green {
    background: var(--green-wash);
    color: var(--green);
}

.axmp-badge.red {
    background: var(--red-wash);
    color: var(--red-dark);
}

.axmp-badge.gold {
    background: var(--gold-wash);
    color: var(--gold);
}

.axmp-badge.blue {
    background: var(--blue-wash);
    color: var(--blue);
}

.axmp-badge.purple {
    background: var(--purple-wash);
    color: var(--purple);
}

.axmp-badge.yellow {
    background: #FEF3C7;
    color: #92400E;
}

.axmp-msg {
    padding: 11px 15px;
    margin-bottom: 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}

.axmp-msg.success {
    background: var(--green-wash);
    color: var(--green);
    border: 1px solid #CBEBD6;
}

.axmp-msg.error {
    background: var(--red-wash);
    color: var(--red-dark);
    border: 1px solid #F5C6CB;
}

.axmp-msg.warning {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.axmp-msg.info {
    background: var(--blue-wash);
    color: var(--blue);
    border: 1px solid #BFDBFE;
}

.axmp-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.axmp-row-2 .axmp-field {
    min-width: 0;
}

.axmp-form-title {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 14px 0;
}

.axmp-textarea-sm {
    min-height: 60px !important;
    max-height: 100px;
}

/* Navigation Tabs Base System */
.axmp-nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.axmp-nav-tabs::-webkit-scrollbar {
    display: none;
}

.axmp-tab-item {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.axmp-tab-item.active {
    color: var(--red) !important;
    border-bottom-color: var(--red) !important;
}

/* Skeleton Loading State Animation */
.axmp-skeleton {
    background: linear-gradient(90deg, #f0ede6 25%, #e8e4dc 50%, #f0ede6 75%);
    background-size: 200% 100%;
    animation: axmp-skeleton-anim 1.5s infinite;
    border-radius: 6px;
    display: inline-block;
}

@keyframes axmp-skeleton-anim {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Modal Confirmation Box */
.axmp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.axmp-modal-box {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: axmp-modal-in 0.2s ease-out;
}

@keyframes axmp-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Component Extensions for Marketplace Dashboard UI */

/* 1. Radio Card Group (Product Configuration Type) */
.axmp-radio-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.axmp-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.axmp-radio-card:hover {
    border-color: var(--red);
    background: #FFFCF5;
}

.axmp-radio-card input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--red-dark);
    flex-shrink: 0;
}

.axmp-radio-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.axmp-radio-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    word-break: break-word;
}

.axmp-radio-card-desc {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
    line-height: 1.35;
    word-break: break-word;
}

.axmp-radio-card.active,
.axmp-radio-card:has(input[type="radio"]:checked) {
    border-color: var(--red);
    background: #FFF8DE;
    box-shadow: 0 2px 8px rgba(245, 183, 0, 0.15);
}

/* 2. Checkbox Card (Same-Day Delivery & Options) */
.axmp-checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #FAF9F6;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.axmp-checkbox-card:hover {
    border-color: var(--red);
    background: #ffffff;
}

.axmp-checkbox-card input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--red-dark);
    flex-shrink: 0;
}

.axmp-checkbox-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 3. Working Days Chips (Store Setup) */
.axmp-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.axmp-day-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap !important;
    transition: all 0.15s ease;
    user-select: none;
}

.axmp-day-chip:hover {
    border-color: var(--red);
    background: #FFFCF5;
}

.axmp-day-chip input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--red-dark);
    flex-shrink: 0;
}

.axmp-day-chip:has(input[type="checkbox"]:checked) {
    border-color: var(--red);
    background: #FFF8DE;
    color: var(--red-dark);
}

/* 4. Filter Pills & Search Container (Catalog Toolbar) */
.axmp-filter-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.axmp-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.axmp-filter-pills::-webkit-scrollbar {
    display: none;
}

.axmp-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--ink-soft);
    transition: all 0.15s ease;
}

.axmp-filter-pill:hover {
    border-color: var(--red);
    color: var(--ink);
}

.axmp-filter-pill.active {
    background: linear-gradient(180deg, #FFCF33, var(--red)) !important;
    color: #0F0F0F !important;
    border-color: var(--red) !important;
    box-shadow: 0 4px 10px rgba(245, 183, 0, 0.3);
}

.axmp-value-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #FFF8DE;
    border: 1px solid #F5B700;
    color: #8A6D00;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
}

.axmp-value-chip-remove {
    cursor: pointer;
    font-weight: 800;
    color: #C53030;
    font-size: 14px;
    line-height: 1;
}

.axmp-value-chip-remove:hover {
    color: #9B2C2C;
}

.axmp-suggestion-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #FAF9F6;
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.axmp-suggestion-chip:hover {
    border-color: var(--red);
    background: #FFF8DE;
    color: var(--red-dark);
}

.axmp-bulk-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #FAF9F6;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    align-items: center;
}

.axmp-search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 220px;
    max-width: 340px;
}

.axmp-search-input {
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--canvas);
    transition: all 0.15s ease;
}

.axmp-search-btn {
    white-space: nowrap !important;
    min-width: 90px;
    padding: 9px 16px !important;
    flex-shrink: 0 !important;
}

/* 5. Table Layout & Action Buttons Fix */
.axmp-btn.action-btn {
    white-space: nowrap !important;
    min-width: 72px;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    flex-shrink: 0 !important;
}

/* ==========================================================
 * PRO UI SYSTEM (v1.1.38) — App shell, shared list/table/badge
 * system, stat cards & dashboard panels.
 *
 * Everything below is deliberately hoisted into this ONE shared
 * stylesheet (loaded on every Vendor Dashboard tab) rather than
 * living in a per-tab <style> block. Two reasons:
 *   1. Consistency — every tab now draws from the exact same
 *      tokens/classes instead of three near-identical copies
 *      (Products, Support Desk, and whatever came before) slowly
 *      drifting apart.
 *   2. BUG FIX (found during this redesign): vendor/views/support.php
 *      used the classes `.axmp-table-styled` and `.axmp-badge-pill`
 *      on its ticket table/status pills, but NEVER DEFINED them
 *      anywhere -- Products was the only tab that happened to define
 *      them, and since each tab's markup is mutually exclusive
 *      (only one tab renders per page load), Support Desk's table and
 *      status pills were rendering with zero styling (default browser
 *      table borders, plain text status) any time a vendor opened
 *      that tab directly. Defining these classes once, here, fixes
 *      Support Desk automatically with no changes needed to
 *      support.php itself.
 * ========================================================== */

/* ---- App shell: sidebar + main content ----
   v1.1.39 HARDENED: on the live site, the sidebar (originally a <nav>, see dashboard.php's own
   comment on that change) was being hijacked by the theme's own global positioning rules for
   off-canvas/mobile menus and pinned as a fixed overlay instead of sitting in this flex row.
   Switching that tag to a plain <div> should remove the collision at its root, but every rule
   here is now ALSO qualified with the ".axmp-wrap" ancestor (this plugin's own unique wrapper,
   never styled by anything else) purely for extra selector specificity, and the layout-critical
   properties are marked !important so this shell wins the cascade even against a theme rule
   that matches by tag name or a loosely-scoped class. ---- */
.axmp-wrap .axmp-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 20px;
}

.axmp-wrap .axmp-sidebar {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0;
    background: #0F0F0F;
    border-radius: 16px;
    padding: 20px 14px;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

@media (min-width: 1101px) {
    .axmp-wrap .axmp-sidebar {
        position: sticky !important;
        top: 16px !important;
    }
}

.axmp-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 22px 8px;
}

.axmp-sidebar-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(180deg, #FFCF33, var(--red, #F5B700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0F0F0F;
    flex-shrink: 0;
    overflow: hidden;
}

/* v1.1.52 ADDED: when the Site Icon (favicon) is set, .axmp-sidebar-logo-mark renders an
   <img> instead of the plain "A" fallback text. Fill the same 32x32 rounded box completely so
   the swap is visually seamless -- the gradient background + centered bold "A" above stays
   exactly as-is for stores that haven't set a Site Icon yet. */
.axmp-sidebar-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.axmp-sidebar-logo-word {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.2px;
}

.axmp-sidebar-logo-word span {
    color: var(--red, #F5B700);
}

.axmp-sidebar-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B6660;
    padding: 14px 12px 7px 12px;
}

.axmp-sidebar-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: #C9C4BC !important;
    text-decoration: none !important;
    border-left: 3px solid transparent;
}

.axmp-sidebar-nav-item .ic {
    width: 17px;
    text-align: center;
    font-size: 14px;
    opacity: 0.85;
    flex-shrink: 0;
}

.axmp-sidebar-nav-item.active {
    background: rgba(245, 183, 0, 0.13);
    color: #fff !important;
    border-left: 3px solid var(--red, #F5B700);
}

.axmp-sidebar-nav-item.active .ic {
    opacity: 1;
}

.axmp-sidebar-nav-item .badge-dot {
    margin-left: auto;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
}

.axmp-sidebar-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.axmp-sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--green-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: var(--green);
    flex-shrink: 0;
}

/* v1.1.40 ADDED: shows the vendor's own uploaded store logo instead of plain initials, when
   one is set (see dashboard.php). */
.axmp-sidebar-avatar-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* v1.1.40 FIXED (owner's report, live screenshot): the name + "View storefront" line were
   inheriting a much taller line-height than their own 12px/10.5px font sizes needed (likely
   from the surrounding page/theme's own body line-height), reading as an oversized gap between
   two short lines that should sit close together. Pinned a tight line-height on both, and
   wrapped them in their own flex column with an explicit small gap instead of relying on
   whatever spacing the browser default happened to produce. */
.axmp-sidebar-foot-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.axmp-sidebar-foot-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.axmp-sidebar-foot-link {
    font-size: 10.5px;
    line-height: 1.25;
    color: var(--red, #F5B700);
    text-decoration: none;
    font-weight: 600;
    margin: 0;
}

.axmp-wrap .axmp-main-col {
    flex: 1 1 0% !important;
    min-width: 0;
    width: auto !important;
    position: static !important;
    float: none !important;
}

/* ---- Top bar (sits above tab content, inside main column) ---- */
.axmp-topbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.axmp-topbar-title {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.axmp-topbar-sub {
    color: var(--ink-soft);
    font-size: 12.5px;
    margin-top: 3px;
}

.axmp-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---- Page head (title + subtitle + optional primary action), used
   at the top of every tab's own content for a consistent rhythm ---- */
.axmp-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.axmp-page-head h2,
.axmp-page-head h3 {
    font-size: 20px;
    letter-spacing: -0.3px;
    margin: 0;
}

.axmp-page-head p {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    margin: 4px 0 0 0;
}

/* ---- Shared header-bar (title + subtitle + primary CTA button),
   the pattern Products already used -- generalized for reuse. ---- */
.axmp-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.axmp-header-title {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
}

.axmp-header-sub {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.axmp-btn-add-new {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    background: linear-gradient(135deg, var(--red, #F5B700) 0%, #E6A100 100%) !important;
    color: #0F0F0F !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(245, 183, 0, 0.35) !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.axmp-btn-add-new:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(245, 183, 0, 0.45) !important;
}

/* ---- Stat cards (Overview financial/summary cards) ---- */
.axmp-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.axmp-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 12px -4px rgba(28, 25, 23, .06);
}

.axmp-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.axmp-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.axmp-stat-icon.green { background: var(--green-wash); }
.axmp-stat-icon.gold { background: var(--red-wash); }
.axmp-stat-icon.ink { background: #F2F2F0; }

.axmp-trend-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
}

.axmp-trend-chip.flat { background: #F2F2F0; color: var(--ink-soft); }

.axmp-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.axmp-stat-value {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 26px;
    margin-top: 6px;
    letter-spacing: -0.5px;
}

.axmp-stat-note {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 5px;
    font-weight: 500;
}

/* ---- Dashboard panels (Overview: analytics + verification) ---- */
.axmp-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 12px -4px rgba(28, 25, 23, .06);
}

.axmp-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.axmp-panel-head h3 { font-size: 15px; }

.axmp-panel-sub {
    font-size: 11.5px;
    color: var(--ink-faint);
    font-weight: 500;
    margin-bottom: 18px;
}

.axmp-chart-wrap {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 140px;
    padding: 0 4px;
    margin-bottom: 10px;
}

.axmp-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    justify-content: flex-end;
}

.axmp-bar {
    width: 100%;
    max-width: 34px;
    min-height: 3px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #FFCF33, var(--red, #F5B700));
}

.axmp-bar.low { background: #F0EDE6; }

.axmp-bar-day {
    font-size: 10px;
    color: var(--ink-faint);
    font-weight: 600;
}

.axmp-kpi-strip {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 6px;
}

.axmp-kpi { flex: 1; }

.axmp-kpi-num {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 20px;
}

.axmp-kpi-num.red { color: #DC2626; }

.axmp-kpi-label {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 600;
    margin-top: 2px;
}

.axmp-ring-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.axmp-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.axmp-ring-inner {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 13px;
}

.axmp-ring-text-title { font-size: 14px; font-weight: 700; }
.axmp-ring-text-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; font-weight: 500; }

.axmp-check-list { display: flex; flex-direction: column; gap: 2px; }

.axmp-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid #F1EEE7;
}

.axmp-check-item:last-child { border-bottom: none; }

.axmp-check-left { display: flex; align-items: center; gap: 10px; }

.axmp-check-ic {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.axmp-check-ic.ok { background: var(--green-wash); color: var(--green); }
.axmp-check-ic.pending { background: #FEF3C7; color: #92400E; }

.axmp-check-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.axmp-check-status { font-size: 11px; font-weight: 700; }
.axmp-check-status.ok { color: var(--green); }
.axmp-check-status.pending { color: #92400E; }

/* ---- Metrics deck (small stat chips e.g. Products, Earnings) ---- */
.axmp-metrics-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.axmp-metric-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
}

.axmp-metric-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    border-color: #CBD5E1;
}

.axmp-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.axmp-metric-num {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
}

/* ---- Toolbar & filter pills (Products already used this shape) ---- */
.axmp-toolbar-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.axmp-toolbar-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.axmp-filter-pills-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.axmp-tab-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: var(--canvas) !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--border) !important;
    transition: all 0.15s ease !important;
    line-height: 1.2 !important;
}

.axmp-tab-pill:hover {
    border-color: var(--red, #F5B700) !important;
    color: var(--ink) !important;
}

.axmp-tab-pill.active {
    background: var(--ink) !important;
    color: #FFFFFF !important;
    border-color: var(--ink) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

.axmp-tab-count {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(15, 23, 42, 0.08);
    color: var(--ink-soft);
}

.axmp-tab-pill.active .axmp-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.axmp-search-form-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 340px;
    min-width: 240px;
}

.axmp-search-input-box { position: relative; width: 100%; }

.axmp-search-input-field {
    width: 100% !important;
    padding: 9px 14px 9px 36px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.axmp-search-input-field:focus {
    border-color: var(--red, #F5B700) !important;
    box-shadow: 0 0 0 3px var(--red-wash, #FFF8DE) !important;
}

.axmp-search-icon-svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}

.axmp-btn-search-submit {
    white-space: nowrap !important;
    height: 38px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    background: var(--canvas) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ink-soft) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.axmp-btn-search-submit:hover {
    background: #EFEBE2 !important;
    color: var(--ink) !important;
}

/* ---- Data table card (Products' table shape, now shared) ---- */
.axmp-table-card-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.axmp-table-styled {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
}

.axmp-table-styled th {
    background: #FBFAF7;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.axmp-table-styled td {
    padding: 16px 18px;
    border-bottom: 1px solid #F1EEE7;
    vertical-align: middle;
    color: var(--ink);
}

.axmp-table-styled tr:last-child td { border-bottom: none; }
.axmp-table-styled tr:hover td { background: #FAF9F5; }

/* BUG FIXED (2026-09-10, owner-reported): "Action ka Edit aur View button bhi
   border ki bahaar jaa raha hai" -- on any dashboard viewport narrower than
   roughly 900-950px, this table's un-pinned columns (Selling Price/Stock
   Level/Status/Actions all use white-space:nowrap, so none of them can
   actually shrink) were fighting over the same space as the Image and
   Product Name columns under plain `table-layout: auto`. The browser's
   auto-layout algorithm doesn't treat an inline `style="width:..."` hint as
   a hard floor when columns are squeezed -- it can still shrink the Actions
   column's cell below what the Edit/View button group physically needs, so
   the button group overflowed ITS OWN cell and visually hung off the right
   edge of the rounded .axmp-table-card-wrap card, reading exactly like a
   button "escaping" the card's border. (Confirmed by reproducing it locally
   at a handful of realistic dashboard widths before/after this change.)
   Scoped ONLY to Products (`.axmp-products-table`, added alongside the
   shared `.axmp-table-styled` class on vendor/views/products.php's table) --
   NOT applied to `.axmp-table-styled` itself, which Earnings, Withdrawal,
   Orders, and Support Desk's tables all also use, and which the v1.1.18
   changelog entry already documents one past regression from editing
   shared table CSS for a single tab's problem. `table-layout: fixed` makes
   every column's specified `width` authoritative -- Actions (and the other
   nowrap columns) can never be squeezed below their set width again; only
   the flexible Product Name & SKU column (deliberately left unset here so
   it absorbs 100% of whatever space remains) gives, and it already wraps
   product names onto multiple lines without breaking anything. Below the
   table's own min-width the whole table now scrolls as one unit inside the
   existing overflow-x:auto wrapper instead of deforming individual columns. */
.axmp-products-table {
    table-layout: fixed;
}

/* ---- v1.1.59: Orders & Support Desk mobile fix -- dedicated, narrowly-scoped
   horizontal-scroll wrapper. This class is used ONLY by vendor/views/orders.php
   and vendor/views/support.php (grep the plugin tree to confirm) -- it is NOT
   applied to Earnings, Withdrawal, Products, Overview, or Store Setup, and it
   does not touch `.axmp-table-styled` / `.axmp-table-card-wrap` / the existing
   `.axmp-table-responsive` rule those other tabs still rely on.
   Lesson from the v1.1.18 attempt (see readme.txt 1.1.59 entry): that fix
   changed the SHARED `.axmp-table-responsive` mobile rule and silently broke
   Earnings' and Withdrawal's already-fine mobile layout as a side effect. This
   class exists so the exact same mistake is structurally impossible to repeat --
   a table not wrapped in `.axmp-table-scroll` is completely unaffected by it. ---- */
.axmp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.axmp-table-scroll table {
    min-width: 640px;
}

/* ---- Status badges (pill shape, used across tables) ---- */
.axmp-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.axmp-badge-pill.green { background: var(--green-wash); color: var(--green); border: 1px solid #BBF7D0; }
.axmp-badge-pill.yellow { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.axmp-badge-pill.red { background: var(--red-wash, #FEF2F2); color: #B91C1C; border: 1px solid #FCA5A5; }
.axmp-badge-pill.gray { background: #F2F2F0; color: var(--ink-soft); border: 1px solid var(--border); }
.axmp-badge-pill.blue { background: var(--blue-wash); color: var(--blue); border: 1px solid #BFDBFE; }

/* ---- Row action buttons ---- */
.axmp-action-btn-group { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }

/* BUG FIXED (2026-09-10, owner-reported): "Action ka Edit aur View button bhi
   thoda thik kijiye dikhne mein" -- the two pills sat directly against each
   other with no visual weight (transparent border color on .view, no shadow
   on either), so on the actual storefront they read as flat, low-contrast
   text links rather than clickable buttons. Gave both a real border color,
   a light resting shadow so they read as raised buttons, a fixed min-width
   so "Edit" and "View" line up to the same pill size instead of each hugging
   its own label width, and centered their icon+label so the emoji doesn't
   sit slightly off the text baseline. */
.axmp-btn-act {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 74px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    white-space: nowrap !important;
}

.axmp-btn-act.edit { background: #FFFBEB !important; border-color: #FCD34D !important; color: #B45309 !important; }
.axmp-btn-act.edit:hover { background: #FDE68A !important; color: #78350F !important; border-color: #F59E0B !important; box-shadow: 0 3px 8px rgba(180, 83, 9, 0.18) !important; transform: translateY(-1px); }
.axmp-btn-act.view { background: var(--canvas) !important; border-color: #CBD5E1 !important; color: var(--ink-soft) !important; }
.axmp-btn-act.view:hover { background: #EFEBE2 !important; color: var(--ink) !important; border-color: #94A3B8 !important; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1) !important; transform: translateY(-1px); }

/* ---- Sidebar collapses to the existing horizontal tab bar below
   1100px, where there isn't room for a fixed side column. The
   .axmp-nav-tabs / .axmp-tab-item pattern this replaces on desktop
   was already carefully tuned for small screens (touch scroll,
   no visible scrollbar), so mobile simply keeps using it. ---- */
.axmp-wrap .axmp-mobile-nav { display: none !important; }

@media (max-width: 1100px) {
    .axmp-wrap .axmp-sidebar { display: none !important; }
    .axmp-wrap .axmp-mobile-nav { display: flex !important; }
    .axmp-stat-row { grid-template-columns: repeat(3, 1fr); }
    .two-col-fallback { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .axmp-stat-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .axmp-stat-row { grid-template-columns: 1fr; }
    .axmp-topbar { padding: 14px 16px; }
}

/* Responsive Mobile Cards for Data Tables (320px to 768px) */
@media (max-width: 768px) {
    .axmp-wrap {
        padding: 4px;
    }

    .axmp-card {
        padding: 14px;
        border-radius: 12px;
    }

    .axmp-search-container {
        max-width: 100%;
        width: 100%;
    }

    .axmp-radio-card-group {
        grid-template-columns: 1fr;
    }

    /* Input iOS Auto Zoom fix */
    .axmp-field input,
    .axmp-field select,
    .axmp-field textarea {
        font-size: 16px !important;
        padding: 10px 10px;
    }

    /* Tab navigation touch scroll bar */
    .axmp-nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px !important;
        margin-bottom: 16px !important;
    }

    .axmp-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .axmp-tab-item {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    /* Mobile Header Layout */
    .axmp-dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .axmp-dashboard-header>div {
        width: 100%;
    }

    .axmp-dashboard-header button {
        width: 100% !important;
        margin-top: 4px;
    }

    /* Grid layout scaling on mobile */
    .axmp-overview-grid,
    .axmp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .axmp-row-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Touch Friendly Buttons */
    .axmp-btn {
        min-height: 42px;
        padding: 10px 18px !important;
        font-size: 13px !important;
    }

    /* Modal dialog mobile fitting */
    #axmp-product-modal>div,
    .axmp-modal-box {
        max-width: 96% !important;
        margin: 10px auto !important;
        padding: 16px !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Table Mobile Card Transformation */
    .axmp-table-responsive {
        border: 0;
    }

    .axmp-table-responsive thead {
        display: none;
    }

    .axmp-table-responsive tr {
        display: block;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
    }

    .axmp-table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 6px 0;
        border-bottom: 1px solid #F1F5F9;
        font-size: 13px;
    }

    .axmp-table-responsive td:last-child {
        border-bottom: none;
    }

    .axmp-table-responsive td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--ink-soft);
        text-align: left;
    }

    .axmp-table-responsive td.axmp-items-cell {
        display: block;
        text-align: left;
    }

    .axmp-table-responsive td.axmp-items-cell::before {
        content: none;
    }
}

@media (max-width: 480px) {

    .axmp-overview-grid,
    .axmp-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .axmp-row-2 {
        grid-template-columns: 1fr !important;
    }
}