/*
 * Panel dashboard v2 (Figma node 110:3860 — Profile)
 * Scoped under .panel-v2 so it can't leak into other account pages that
 * still use the legacy .content-box/.card styling.
 * Relies on the shared design tokens in zino-components.css.
 */

/* Layout (rows/cols/flex/gap/spacing) lives in the markup as Bootstrap utility
   classes per the project rule — this file holds only what Bootstrap can't do:
   component chrome, token colours/typography, shapes, hover states. */

/* ── Generic panel card ─────────────────────────────────────────────────── */
.panel-v2 .pv-card {
    background: #fff;
    border: 1px solid var(--zino-border);
    padding: var(--space-4);
}

/* Shaded variant (account + annual-analysis cards) */
.panel-v2 .pv-card--shade {
    background: var(--zino-surface-3);
}

.panel-v2 .pv-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.panel-v2 .pv-card-head .zi,
.panel-v2 .pv-card-head i {
    color: var(--zino-green);
    font-size: 1.25rem;
    width: 1.4em;
    height: 1.4em;
}

.panel-v2 .pv-card-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
}

/* ── Account summary cards (حساب اعتباری / حساب نقدی) ────────────────────── */
.panel-v2 .pv-account {
    background: var(--zino-surface-3);
    border: 1px solid var(--zino-border);
    padding: var(--space-3);
}

.panel-v2 .pv-account-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-v2 .pv-account-head i {
    color: var(--zino-green);
    font-size: 1.375rem;
}

.panel-v2 .pv-account-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .pv-account-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.panel-v2 .pv-account-amount b {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zino-green);
    line-height: 1.2;
    direction: ltr;
}

.panel-v2 .pv-account-amount span {
    font-size: 0.5rem;
    color: var(--zino-text);
}

.panel-v2 .pv-account-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zino-green);
    font-size: 0.75rem;
    font-weight: 600;
}

.panel-v2 .pv-account-action i {
    font-size: 1rem;
}

.panel-v2 .pv-account-action:hover {
    color: var(--zino-green-hover);
}

/* ── Annual analysis (تحلیل سالانه) ─────────────────────────────────────── */
.panel-v2 .pv-stat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.panel-v2 .pv-stat i {
    color: var(--zino-green);
    font-size: 1.125rem;
    margin-top: 2px;
}

.panel-v2 .pv-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.panel-v2 .pv-stat-label {
    font-size: 0.6875rem;
    color: #575756;
    line-height: 1.4;
}

.panel-v2 .pv-stat-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zino-green);
    direction: rtl;
    text-align: right;
}

.panel-v2 .pv-stat-value .unit {
    font-size: 0.5625rem;
    font-weight: 400;
    color: var(--zino-text-sub);
    margin-right: 2px;
}

.panel-v2 .pv-chart-head {
    margin: var(--space-2) 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--zino-border);
}

.panel-v2 .pv-chart-head i {
    color: var(--zino-green);
}

.panel-v2 .pv-chart-head span {
    font-size: 0.6875rem;
    color: #575756;
}

.panel-v2 .pv-chart-wrap {
    position: relative;
    width: 100%;
    height: 200px;
}

/* Taller chart on desktop, keep 200px on mobile */
@media (min-width: 992px) {
    .panel-v2 .pv-chart-wrap {
        height: 285px;
    }
}

/* ── Tables (سفارشهای من / فاکتورها / تغییر قیمت) ────────────────────────── */
.panel-v2 .pv-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--zino-border);
}

.panel-v2 .pv-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 var(--space-2);
    margin-bottom: -1px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zino-text-sub);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.panel-v2 .pv-tab i {
    font-size: 1.125rem;
}

.panel-v2 .pv-tab.active {
    color: var(--zino-green);
    border-bottom-color: var(--zino-green);
}

.panel-v2 table.pv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    color: var(--zino-text);
}

.panel-v2 .pv-table th {
    font-weight: 600;
    color: #575756;
    text-align: center;
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--zino-border);
    white-space: nowrap;
}

.panel-v2 .pv-table td {
    text-align: center;
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--zino-border);
    white-space: nowrap;
}

.panel-v2 .pv-table tbody tr:last-child td {
    border-bottom: none;
}

.panel-v2 .pv-table tbody tr:hover {
    background: #fafafa;
}

/* Excel-export variant of the slanted view button (PriceChangeDetail) —
   same shape, Excel-green fill so it reads apart from the grey/green back btn. */
.panel-v2 .pv-view-btn--excel {
    min-height: 32px;
    padding: 5px 16px 5px 20px;
    border: none;
    background: none;
    cursor: pointer;
}

.panel-v2 .pv-view-btn--excel::before {
    background: var(--zino-excel);
}

.panel-v2 .pv-view-btn--excel:hover::before {
    filter: brightness(1.1);
}

/* Softer header underline — the #eee line reads heavier than the row borders
   sitting directly under the bold header text (price-change list). */
.panel-v2 .pv-table--softhead thead th {
    border-bottom-color: var(--zino-border-soft);
}

/* Total row (جزئیات سفارش — مبلغ کل) */
.panel-v2 .pv-table tfoot td {
    padding: var(--space-3) var(--space-1);
    border-top: 2px solid var(--zino-text-sub);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .pv-table tfoot .pv-total {
    color: #575756;
    text-align: center;
}

/* مبلغ کل value stays dark (not green) in the orders table */
.panel-v2 .pv-table .pv-cell-total {
    color: #575756;
    font-weight: 700;
}

/* Green slanted "مشاهده" view button (matches the cart/header CTA shape) */
.panel-v2 .pv-view-btn {
    position: relative;
    isolation: isolate;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 26px;
    padding: 3px 12px 3px 16px;
    color: #fff !important;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.panel-v2 .pv-view-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.panel-v2 .pv-view-btn:hover::before {
    background: var(--zino-green-hover);
}

.panel-v2 .pv-view-btn i {
    font-size: 0.875rem;
}

/* ── Stacked-card variant for compact tables on phones (سفارش‌ها) ──────────
   <768px: drop the header and turn each row into a bordered card; every cell
   becomes a label/value row (label from the th text, carried in data-label).
   Scoped to .pv-table--stack so the other account tables keep scrolling. */
@media (max-width: 767.98px) {
    .panel-v2 .pv-table--stack thead {
        display: none;
    }

    .panel-v2 .pv-table--stack,
    .panel-v2 .pv-table--stack tbody,
    .panel-v2 .pv-table--stack tr,
    .panel-v2 .pv-table--stack td {
        display: block;
    }

    .panel-v2 .pv-table--stack tbody tr {
        border: 1px solid var(--zino-border);
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-3);
    }

    .panel-v2 .pv-table--stack tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        text-align: left;
        white-space: normal;
        border-bottom: 1px solid var(--zino-border);
    }

    .panel-v2 .pv-table--stack tbody tr td:last-child {
        border-bottom: none;
    }

    /* row label pulled from the column header */
    .panel-v2 .pv-table--stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--zino-text-sub);
        text-align: right;
        white-space: nowrap;
    }

    /* detail button sits at the row end (RTL: left) */
    .panel-v2 .pv-table--stack tbody td.pv-cell-action {
        justify-content: space-between;
    }
}

/* Wider-breakpoint variant for dense tables (price-change detail, 7 cols) that
   still overflow at tablet width — stack into label/value cards below lg. */
@media (max-width: 991.98px) {
    .panel-v2 .pv-table--stack-lg thead {
        display: none;
    }

    .panel-v2 .pv-table--stack-lg,
    .panel-v2 .pv-table--stack-lg tbody,
    .panel-v2 .pv-table--stack-lg tr,
    .panel-v2 .pv-table--stack-lg td {
        display: block;
    }

    .panel-v2 .pv-table--stack-lg tbody tr {
        border: 1px solid var(--zino-border);
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-3);
    }

    .panel-v2 .pv-table--stack-lg tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        text-align: left;
        white-space: normal;
        border-bottom: 1px solid var(--zino-border);
    }

    .panel-v2 .pv-table--stack-lg tbody tr td:last-child {
        border-bottom: none;
    }

    /* row label pulled from the column header */
    .panel-v2 .pv-table--stack-lg tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--zino-text-sub);
        text-align: right;
        white-space: nowrap;
    }

    /* Total row (tfoot) as its own card: label on the right, value on the left.
       The empty colspan spacer cell is dropped. */
    .panel-v2 .pv-table--stack-lg tfoot tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--zino-border);
        padding: var(--space-2) var(--space-3);
        margin-top: var(--space-3);
    }

    .panel-v2 .pv-table--stack-lg tfoot td {
        display: block;
        padding: 0;
        border: none;
    }

    .panel-v2 .pv-table--stack-lg tfoot td[colspan] {
        display: none;
    }
}

/* Agreement status cell (تفاهم‌نامه‌ها — Figma node 110:1809) */
.panel-v2 .ag-status {
    font-weight: 700;
    color: #575756;
}

.panel-v2 .ag-status--pending {
    font-weight: 400;
    color: var(--zino-text-sub);
}

/* Read / unread envelope marker in the price-change table */
.panel-v2 .pv-flag-read {
    color: var(--zino-green);
}

.panel-v2 .pv-flag-unread {
    color: var(--zino-warn);
}

/* ── News (اخبار) ───────────────────────────────────────────────────────── */
.panel-v2 .pv-news {
    background: #f6f6f6;
    border: 1px solid var(--zino-border);
    padding: var(--space-4);
}

.panel-v2 .pv-news-tag {
    display: inline-block;
    background: var(--zino-green-light);
    color: #575756;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 12px;
    margin-bottom: var(--space-3);
}

.panel-v2 .pv-news-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #575756;
    line-height: 1.7;
    margin: 0 0 var(--space-2);
}

.panel-v2 .pv-news-text {
    font-size: 0.625rem;
    color: var(--zino-text-sub);
    line-height: 1.8;
    margin: 0;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.panel-v2 .pv-empty {
    color: var(--zino-text-sub);
    font-size: 0.75rem;
    padding: var(--space-5) 0;
}

.panel-v2 .pv-empty i {
    display: block;
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
    color: var(--zino-text-muted);
}

/* ── Kept legacy blocks (delivery-time / sales expert / IZino) ───────────── */
.panel-v2 .pv-expert img {
    width: 67px;
    height: 67px;
    object-fit: cover;
    flex-shrink: 0;
}

.panel-v2 .pv-expert .pv-expert-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #575756;
    margin: 0 0 2px;
}

.panel-v2 .pv-expert .pv-expert-meta {
    font-size: 0.625rem;
    color: var(--zino-text-sub);
    margin: 0;
    direction: ltr;
}

.panel-v2 .pv-note-danger {
    color: var(--zino-warn);
    font-size: 0.6875rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.panel-v2 .pv-note-text {
    font-size: 0.6875rem;
    color: var(--zino-text);
    line-height: 1.7;
    margin: 0;
}

.panel-v2 .pv-note-text .pv-accent {
    color: var(--zino-green);
    font-weight: 700;
}

/* =========================================================================
   Sidebar v2 (Figma — grouped, collapsible account navigation)
   Used by Views/Shared/_PanelSide.cshtml on desktop (col-lg-3) and inside the
   mobile offcanvas (_PanelSideMobile). Self-contained — does NOT depend on the
   .panel-v2 wrapper, since most account pages render the side without it.
   Layout (gaps/spacing) is mostly utility-driven, but the nav chrome lives
   here because Bootstrap can't express it.
   ========================================================================= */
.panel-side-v2 {
    background: #fff;
    border-left: 2px solid var(--zino-border);
    padding: var(--space-4);
}

@media (min-width: 992px) {
    .panel-side-v2 {
        position: sticky;
        top: var(--space-4);
    }
}

/* ── User card ──────────────────────────────────────────────────────────── */
.panel-side-v2 .psv-user {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--zino-border);
}

.panel-side-v2 .psv-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* "سطح طلایی" tier tag — same green discount ribbon as .pc-badge--discount
   (light body + darker fold strip, slanted banner top). */
.panel-side-v2 .psv-level {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--zino-green-light);
    color: var(--zino-text);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 3px 14px 3px 8px;
    border-radius: 0;
    white-space: nowrap;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-side-v2 .psv-level::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-green-fold);
}

/* Gold tier (isCreditVIPCustomer) */
.panel-side-v2 .psv-level--gold {
    background: var(--zino-gold);
    color: var(--zino-gold-text);
}

.panel-side-v2 .psv-level--gold::after {
    background: var(--zino-gold-fold);
}

/* Silver tier (isCreditCustomer, not VIP) */
.panel-side-v2 .psv-level--silver {
    background: var(--zino-silver);
    color: var(--zino-silver-text);
}

.panel-side-v2 .psv-level--silver::after {
    background: var(--zino-silver-fold);
}

.panel-side-v2 .psv-name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-side-v2 .psv-status {
    font-size: 0.625rem;
    color: var(--zino-text-sub);
}

.panel-side-v2 .psv-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background: var(--zino-surface-3);
}

/* generic placeholder avatar (no user photo) */
.panel-side-v2 .psv-avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zino-text-sub);
    font-size: 1.75rem;
}

/* ── Group header (collapsible) ─────────────────────────────────────────── */
.panel-side-v2 .psv-group {
    border-bottom: 1px solid var(--zino-border);
}

.panel-side-v2 .psv-group:last-of-type {
    border-bottom: none;
}

.panel-side-v2 .psv-group-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) 0;
    background: none;
    border: none;
    color: #575756;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.panel-side-v2 .psv-group-head i {
    font-size: 0.875rem;
    color: var(--zino-text-sub);
    transition: transform 0.2s ease;
}

.panel-side-v2 .psv-group-head.collapsed i {
    transform: rotate(90deg);
}

/* ── Nav list ───────────────────────────────────────────────────────────── */
.panel-side-v2 .psv-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Our display:flex above out-specifies Bootstrap's `.collapse:not(.show)`
   hide rule, so re-assert it (higher specificity) — otherwise the submenu
   stays visible no matter the collapse state. `.collapsing` is excluded
   automatically, so the open/close height animation still works. */
.panel-side-v2 .psv-nav.collapse:not(.show) {
    display: none;
}

/* Standalone item (داشبورد) — no group header, divider below like a group */
.panel-side-v2 .psv-nav--solo {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--zino-border);
}

.panel-side-v2 .psv-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    color: var(--zino-text);
    font-size: 0.75rem;
    line-height: 1.5;
    /* Keep the trapezoid shape at rest (transparent bg) so only the colour
       fades on hover/active — no rectangle→trapezoid flash. */
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-side-v2 .psv-link i {
    font-size: 1.0625rem;
    color: var(--zino-text-sub);
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.panel-side-v2 .psv-label {
    flex: 1 1 auto;
    min-width: 0;
}

.panel-side-v2 .psv-link:hover {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    background: var(--zino-green);
    border-radius: 0px;
    color: #fff;
}

.panel-side-v2 .psv-link:hover i {
    color: #fff;
}

/* Active item — full-row green trapezoid, same as the hover state. */
.panel-side-v2 .psv-link.active {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    background: var(--zino-green);
    border-radius: 0;
    color: #fff;
    font-weight: 700;
}

.panel-side-v2 .psv-link.active i {
    color: #fff;
}

/* ── Item badges ────────────────────────────────────────────────────────── */
.panel-side-v2 .psv-badge {
    flex-shrink: 0;
    font-size: 0.6625rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* "جدید" tags — same ribbon shape as .psv-level (سطح طلایی), warm colour */
.panel-side-v2 .psv-badge--new,
.panel-side-v2 .psv-badge--hot {
    position: relative;
    padding: 2px 14px 2px 8px;
    border-radius: 0;
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-side-v2 .psv-badge--new::after,
.panel-side-v2 .psv-badge--hot::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-warn-border);
}

/* مبلغ badge — same slanted ribbon as the "جدید" tag (body + darker fold),
   but grey. Pushed to the far (left) end of the row. */
.panel-side-v2 .psv-badge--amount {
    position: relative;
    margin-inline-start: auto;
    padding: 2px 14px 2px 8px;
    border-radius: 0;
    background: var(--zino-surface-2);
    color: var(--zino-text);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-side-v2 .psv-badge--amount::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-disabled);
}

.panel-side-v2 .psv-link.active .psv-badge--amount {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.panel-side-v2 .psv-link.active .psv-badge--amount::after {
    background: rgba(255, 255, 255, 0.4);
}

/* =========================================================================
   Favorites (علاقه‌مندی‌ها) — Figma node 110:1170
   Horizontal wishlist cards. Reuses the ribbon/CTA language of the rest of v2
   (نقدی tag, discount badge, slanted green CTA). Scoped under .panel-v2.
   ========================================================================= */

/* ── Page header: heart + title + subtitle (right-aligned in RTL) ────────── */
.panel-v2 .fav-head {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    margin-top: var(--space-3);
}

.panel-v2 .fav-head i {
    font-size: 1.625rem;
/*    color: var(--zino-green);*/
}

.panel-v2 .fav-head-text {
    text-align: right;
}

.panel-v2 .fav-head-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .fav-head-sub {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
}

/* ── List + card ────────────────────────────────────────────────────────── */
.panel-v2 .fav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.panel-v2 .fav-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: #fff;
    border: 1px solid var(--zino-border);
    padding: var(--space-3) var(--space-4);
}

/* thumbnail (far right) */
.panel-v2 .fav-thumb-link {
    flex-shrink: 0;
    display: inline-flex;
}

.panel-v2 .fav-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.panel-v2 .fav-thumb--fallback {
    opacity: 0.5;
}

/* body: badge + name */
.panel-v2 .fav-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.panel-v2 .fav-name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--zino-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.panel-v2 .fav-name:hover {
    color: var(--zino-green);
}

/* discount ribbon (slanted top + darker fold), like the product-card badge */
.panel-v2 .fav-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px 2px 14px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-v2 .fav-badge::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-green-fold);
}

/* ── Price block (نقدی / اعتباری) ───────────────────────────────────────── */
.panel-v2 .fav-prices {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.panel-v2 .fav-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-2);
}

.panel-v2 .fav-price-val {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.panel-v2 .fav-price-num {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--zino-green);
    direction: ltr;
}

.panel-v2 .fav-price-cur {
    font-size: 0.625rem;
    color: var(--zino-text-muted);
}

.panel-v2 .fav-price-tag {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* نقدی tag — green ribbon */
.panel-v2 .fav-price-tag--cash {
    position: relative;
    padding-right: 14px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-v2 .fav-price-tag--cash::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background: var(--zino-green-fold);
}

.panel-v2 .fav-price-tag--credit {
    color: var(--zino-text-muted);
}

.panel-v2 .fav-unavailable {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zino-warn);
}

/* ── Actions: slanted green CTA + delete ────────────────────────────────── */
.panel-v2 .fav-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content:space-between;
    gap: var(--space-2);
}

.panel-v2 .fav-cta {
    position: relative;
    isolation: isolate;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 24px 6px 30px;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.panel-v2 .fav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.panel-v2 .fav-cta:hover::before {
    background: var(--zino-green-hover);
}

.panel-v2 .fav-cta i {
    font-size: 1rem;
}

.panel-v2 .fav-cta--supply::before {
    background: var(--zino-delay-text);
}

.panel-v2 .fav-cta--supply:hover::before {
    filter: brightness(0.92);
}

.panel-v2 .fav-del {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zino-warn-bg);
    color: var(--zino-warn);
    border: 1px solid var(--zino-warn-border);
    font-size: 1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.panel-v2 .fav-del:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

/* ── Mobile: image fills the full right column, everything else stacks left,
   buttons shrink so the action row fits the narrow content column ────────── */
@media (max-width: 991.98px) {
    .panel-v2 .fav-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "thumb body"
            "thumb prices"
            "thumb actions";
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        align-items: start;
    }

    /* thumb spans all three rows on the right, vertically centred */
    .panel-v2 .fav-thumb-link {
        grid-area: thumb;
        align-self: center;
    }

    .panel-v2 .fav-thumb {
        width: 84px;
        height: 84px;
    }

    .panel-v2 .fav-body {
        grid-area: body;
    }

    .panel-v2 .fav-name {
        font-size: 0.6875rem;
        line-height: 1.5;
    }

    .panel-v2 .fav-prices {
        grid-area: prices;
        align-items: stretch;
    }

    /* push the نقدی/اعتباری label and its value to opposite ends */
    .panel-v2 .fav-price {
        justify-content: space-between;
    }

    .panel-v2 .fav-actions {
        grid-area: actions;
    }

    /* smaller CTA + delete on phones */
    .panel-v2 .fav-cta {
        min-height: 30px;
        padding: 4px 16px 4px 22px;
        font-size: 0.6875rem;
    }

    .panel-v2 .fav-del {
        width: 30px;
        height: 30px;
        font-size: 0.875rem;
    }
}

/* =========================================================================
   Store location (مدیریت مکان فروشگاه) — Figma node 110:1520
   Map picker page. Reuses the .fav-head page header and the slanted green CTA
   language of the rest of v2. Scoped under .panel-v2.
   ========================================================================= */
.panel-v2 .loc-desc {
    margin: 0 0 var(--space-4);
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--zino-text);
}

.panel-v2 .loc-map {
    width: 100%;
    height: 420px;
    border: 1px solid var(--zino-border);
    z-index: 0; /* keep leaflet panes/controls below the site header */
}

/* Desaturated map like Figma — only the tiles, so the green marker stays green */
.panel-v2 .loc-map .leaflet-tile-pane {
    filter: grayscale(1);
}

/* Custom green pin (divIcon) — drop the leaflet default box, add a soft shadow */
.loc-marker {
    background: none;
    border: none;
}

.loc-marker svg {
    width: 32px;
    height: 42px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.panel-v2 .loc-status {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--zino-text-sub);
}

/* Slanted green CTA, same shape as .fav-cta / .pv-view-btn */
.panel-v2 .loc-save-btn {
    position: relative;
    isolation: isolate;
    z-index: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 28px 8px 34px;
    color: #fff !important;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
}

.panel-v2 .loc-save-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.panel-v2 .loc-save-btn:hover::before {
    background: var(--zino-green-hover);
}

.panel-v2 .loc-save-btn i {
    font-size: 1rem;
}

/* =========================================================================
   Annual purchase stats (خریدهای سال گذشته) — ThreeMonthLastYearStats
   Filter row (count + clear + category/brand/month selects) above the
   AJAX-loaded _MonthStats table. Reuses .pv-table plus the favourites-card
   badge/price/CTA language. Scoped under .panel-v2.
   ========================================================================= */

/* Filter bar: product count, clear button, three selects */
.panel-v2 .tms-count {
    font-size: 0.75rem;
    color: var(--zino-text-sub);
    white-space: nowrap;
}

.panel-v2 .tms-count b {
    font-weight: 700;
    color: #575756;
}

/* Funnel (open) / ✕ (close) icon buttons */
.panel-v2 .tms-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: #575756;
    font-size: 1rem;
    cursor: pointer;
}

.panel-v2 .tms-icon-btn i {
    -webkit-text-stroke: 0.4px currentColor;
}

.panel-v2 .tms-icon-btn:hover {
    color: var(--zino-green);
}

/* vertical divider between the count and the ✕ when filters are open */
.panel-v2 .tms-divider {
    width: 1px;
    height: 18px;
    background: var(--zino-border);
}

/* The three filter selects share a fixed-ish width and wrap on narrow widths */
.panel-v2 .tms-select {
    min-width: 140px;
    max-width: 200px;
    color: var(--zino-text-sub);
}

/* Loading spinner (green) shown while the table loads */
.panel-v2 .pv-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-6) 0;
}

.panel-v2 .pv-spinner::after {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--zino-green);
    border-color: var(--zino-green) transparent var(--zino-green) transparent;
    animation: pv-spin 1.1s linear infinite;
}

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

/* ── Stats table cells ──────────────────────────────────────────────────── */
/* Fixed layout so each column keeps its position regardless of the product
   name length (the name column absorbs the slack and truncates with an
   ellipsis) — matching the Figma spacing */
.panel-v2 table.tms-table {
    table-layout: fixed;
    /* each row is a bordered card with a gap between rows (Figma) */
    border-collapse: separate;
    border-spacing: 0 var(--space-2);
}

/* zero-height borderless spacer adding extra room between the header and the
   first row (one extra border-spacing gap), without touching inter-row gaps */
.panel-v2 .tms-table tbody .tms-head-gap td {
    height: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    border: none !important;
}

/* full border around every row + rounded ends */
.panel-v2 .tms-table tbody td {
    border-top: 1px solid var(--zino-border);
    border-bottom: 1px solid var(--zino-border);
}

/* RTL: first cell (image) is the right edge, last cell (button) the left edge */
.panel-v2 .tms-table tbody tr td:first-child {
    border-right: 1px solid var(--zino-border);
}

.panel-v2 .tms-table tbody tr td:last-child {
    border-left: 1px solid var(--zino-border);
}

/* keep the bottom border on the last row too (pv-table strips it) */
.panel-v2 .tms-table tbody tr:last-child td {
    border-bottom: 1px solid var(--zino-border);
}

/* Name and action are fixed-width; price/count take percentages so the spare
   table width spreads as even spacing around their centred content (instead of
   bloating the button column) — matching the Figma layout */
.panel-v2 .tms-table .tms-namecol {
    width: 240px;
}

.panel-v2 .tms-table .tms-pricecol {
    width: 22%;
}

.panel-v2 .tms-table .tms-countcol {
    width: 18%;
}

.panel-v2 .tms-table .tms-actioncol {
    width: 190px;
}

/* Image hugs the right edge (RTL start) instead of floating centred in a wide
   column, matching the Figma layout */
.panel-v2 .tms-table .tms-imgcol {
    width: 72px;
    text-align: right;
    padding-right: var(--space-2);
    white-space: nowrap;
}

.panel-v2 .tms-table .fav-thumb {
    width: 56px !important;
    height: 56px !important;
    max-width: none;
    object-fit: contain;
    vertical-align: middle;
}

/* Name column: right-aligned, badge above the product name */
.panel-v2 .tms-table .tms-namecol {
    text-align: right;
    white-space: normal;
}

.panel-v2 .tms-pinfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
}

/* Name truncates to one line with an ellipsis so a long title can't push the
   price/count columns out of place */
.panel-v2 .tms-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--zino-text);
}

.panel-v2 .tms-name:hover {
    color: var(--zino-green);
}

.panel-v2 .tms-sub {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.625rem;
    color: var(--zino-text-sub);
}

/* نقدی/اعتباری price block reused from the favourites card, centred in its cell */
.panel-v2 .tms-prices {
    display: inline-flex;
}

/* Purchased-count cell for the selected month */
.panel-v2 .tms-table td.tms-count {
    font-weight: 700;
    color: var(--zino-text);
}

/* Darker, slightly thicker header underline for this table */
.panel-v2 .tms-table thead th {
    border-bottom: 2px solid var(--zino-text-muted);
}

/* Buy/supply CTA sits to the left in its own column */
.panel-v2 .tms-table .fav-cta {
    min-height: 32px;
    padding: 5px 18px 5px 24px;
    font-size: 0.6875rem;
}

/* the cart icon is only shown on phones (desktop CTA is text-only) */
.panel-v2 .tms-table .tms-cta-ico {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Mobile/tablet (<992px): turn the table into stacked cards like the Favourites
   page — thumbnail on the right spanning the card, name/price/count/CTA stacked
   on the left. Pure CSS over the same markup (the desktop table is unchanged). */
@media (max-width: 991.98px) {
    .panel-v2 table.tms-table {
        table-layout: auto;
        border-collapse: collapse;
        min-width: 0;
    }

    .panel-v2 .tms-table thead,
    .panel-v2 .tms-table .tms-head-gap {
        display: none;
    }

    .panel-v2 .tms-table tbody {
        display: block;
    }

    /* each row → a bordered card with the thumb spanning the right side */
    .panel-v2 .tms-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "thumb name"
            "thumb price"
            "thumb count"
            "thumb action";
        align-items: center;
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        border: 1px solid var(--zino-border);
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .panel-v2 .tms-table tbody td {
        display: block;
        border: none !important;
        padding: 0;
        text-align: right;
        white-space: normal;
    }

    .panel-v2 .tms-table .tms-imgcol {
        grid-area: thumb;
        align-self: center;
        text-align: center;
        padding: 0;
    }

    .panel-v2 .tms-table .tms-namecol { grid-area: name; }
    .panel-v2 .tms-table .tms-pricecol { grid-area: price; }
    .panel-v2 .tms-table .tms-countcol { grid-area: count; }
    .panel-v2 .tms-table .tms-actioncol { grid-area: action; }

    .panel-v2 .tms-table .fav-thumb {
        width: 84px !important;
        height: 84px !important;
    }

    /* name can use the full card width on mobile */
    .panel-v2 .tms-name,
    .panel-v2 .tms-sub {
        max-width: 100%;
    }

    .panel-v2 .tms-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* prices align to the start (right) of the card body */
    .panel-v2 .tms-table .tms-prices {
        display: flex;
    }

    /* the header is hidden, so label the bare count value */
    .panel-v2 .tms-table td.tms-count::before {
        content: "تعداد خرید: ";
        font-weight: 400;
        color: var(--zino-text-sub);
    }
}

/* Tablet: two product cards per row + roomier filters */
@media (min-width: 576px) and (max-width: 991.98px) {
    .panel-v2 .tms-filters {
        justify-content: flex-start;
        gap: var(--space-3);
    }

    .panel-v2 .tms-filters .tms-select {
        flex: 1 1 calc(50% - var(--space-2));
        min-width: 10rem;
        max-width: none;
        font-size: 0.8125rem;
    }

    .panel-v2 .tms-icon-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.0625rem;
    }

    .panel-v2 .table-responsive:has(.tms-table) {
        overflow: visible;
    }

    .panel-v2 .tms-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .panel-v2 .tms-table tbody tr:not(.tms-head-gap) {
        margin-bottom: 0;
    }

    .panel-v2 .tms-table .fav-cta {
        width: 100%;
        justify-content: center;
    }

    /* favourites + فرصت‌های فروش از‌دست‌رفته — two cards per row */
    .panel-v2 .fav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .panel-v2 .fav-list .fav-cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

/* Phones: each filter select takes a full row so the open panel stacks cleanly */
@media (max-width: 575.98px) {
    .panel-v2 .tms-filters .tms-select {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ── Logout ─────────────────────────────────────────────────────────────── */
.panel-side-v2 .psv-logout {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2);
    border-radius: 6px;
    color: var(--zino-warn);
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.18s ease;
}

.panel-side-v2 .psv-logout i {
    font-size: 1.0625rem;
}

.panel-side-v2 .psv-logout:hover {
    background: var(--zino-warn-bg);
    color: var(--zino-warn-hover);
}

/* =========================================================================
   Supply requests (درخواست‌های تامین) — Views/Account/OrderSupplys.cshtml
   Each product card (the shared .pc-card) is wrapped with a "transferred from
   cart" tag above and a cancel footer below, merged into one card. The inner
   .pc-card gives up its own border/shadow so .os-card owns the chrome.
   Scoped under .panel-v2.
   ========================================================================= */

/* "منتقل شده از سبد خرید قبلی" tag above each card */
.panel-v2 .os-tag {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
}

.panel-v2 .os-tag-date {
    margin-right: 4px;
    color: var(--zino-text-muted);
}

.panel-v2 .os-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--zino-border-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.panel-v2 .os-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* green bar tucked BEHIND the card; on hover it slides down to sit under it
   (same pattern as .geo-card::after) */
.panel-v2 .os-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80%;
    height: 6px;
    background: var(--zino-green);
    z-index: -1;
    transition: bottom 0.2s ease;
}

.panel-v2 .os-card:hover::after {
    bottom: -6px;
}

/* the inner product card supplies the body only — os-card owns the chrome */
.panel-v2 .os-card .product-box.pc-card {
    flex: 1 1 auto;
    border: none;
    box-shadow: none;
    transform: none;
    transition: none;
}

/* cancel footer (انصراف) — pink bar flush with the card sides */
.panel-v2 .os-cancel {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 6px;
    padding: var(--space-3);
    padding-inline-end: var(--space-6);
    border-top: 1px solid var(--zino-border-strong);
    background: var(--zino-warn-bg);
    color: #575756;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .os-cancel:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

.panel-v2 .os-cancel i {
    font-size: 0.8125rem;
}

/* Supply cards are full-width on phones (unlike the home slider's 2.3-per-view),
   so there's room to keep the CTA + similar-pill labels instead of collapsing
   them to icon-only as the shared mobile rule does. */
@media (max-width: 575.98px) {
    .panel-v2 .os-card .pc-card .pc-cart-btn {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .panel-v2 .os-card .pc-card .pc-cart-btn > span {
        display: inline;
    }

    .panel-v2 .os-card .pc-card .pc-similar-text,
    .panel-v2 .os-card .pc-card .pc-similar-count {
        display: inline;
    }
}

/* =========================================================================
   Notification settings (تنظیمات اعلان‌ها) — Views/NotificationSettings/Index
   Header (reuses .fav-head) + a shaded "my channels" panel, then per-category
   blocks where each event is a tab and the channels show as toggle cards.
   Scoped under .panel-v2.
   ========================================================================= */

/* ── Shaded panel wrapping "کانال‌های ارتباطی من" ───────────────────────── */
.panel-v2 .ns-channels-panel {
    background: var(--zino-surface-3);
    padding: var(--space-5);
}

/* the add-recipient CTA is a <button> here (the favourites page uses an <a>),
   so strip the user-agent border/background that peeks around the slanted edge */
.panel-v2 button.fav-cta {
    border: none;
    background: none;
}

/* Section / category titles (right-aligned, bold grey) */
.panel-v2 .ns-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #575756;
}

/* Category header: icon on the right (RTL) + title */
/* Each category block is divided by a full-width bottom border (the tab strip
   itself has none — only the active tab carries its own short green underline) */
.panel-v2 .ns-cat {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--zino-border-strong);
}

.panel-v2 .ns-cat-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-v2 .ns-cat-head i {
    font-size: 1.375rem;
}

/* ── Channel / recipient card (also the base for toggle cards) ───────────── */
.panel-v2 .ns-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 100%;
    background: #fff;
    border: 1px solid var(--zino-border);
    padding: var(--space-3) var(--space-4);
}

/* Toggle cards under an event tab sit on the page (not in the grey panel), so
   they take the grey fill themselves — the "my channels" cards stay white. */
.panel-v2 .ns-panel .ns-channel {
    background: var(--zino-surface-3);
}

.panel-v2 .ns-channel-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.panel-v2 .ns-channel-body {
    min-width: 0;
    text-align: right;
}

.panel-v2 .ns-channel-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-v2 .ns-channel-value {
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
    direction: ltr;
    text-align: right;
}

.panel-v2 .ns-channel-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--zino-text-sub);
}

/* edit / delete icon buttons (far end = left in RTL) */
.panel-v2 .ns-channel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.panel-v2 .ns-icon-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--zino-text-sub);
    cursor: pointer;
    transition: color 0.18s ease;
}

.panel-v2 .ns-icon-btn:hover {
    color: var(--zino-green);
}

.panel-v2 .ns-icon-btn--del:hover {
    color: var(--zino-warn);
}

/* ── Event tabs (one per event within a category) ───────────────────────── */
.panel-v2 .ns-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    overflow-x: auto;
    /* keep touch-scroll for the overflow case, but never show a scrollbar
       (it would sit under the tabs on desktop even when they all fit) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.panel-v2 .ns-tabs::-webkit-scrollbar {
    display: none;
}

.panel-v2 .ns-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 var(--space-3);
    margin-bottom: -1px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--zino-text-sub);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease;
}

.panel-v2 .ns-tab i {
    font-size: 1rem;
}

.panel-v2 .ns-tab:hover {
    color: #575756;
}

.panel-v2 .ns-tab.active {
    color: var(--zino-green);
    border-bottom-color: var(--zino-green);
}

/* thin vertical divider between tabs */
.panel-v2 .ns-tab-sep {
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 16px;
    margin-bottom: var(--space-3);
    background: var(--zino-border);
}

/* per-event description line under the tabs */
.panel-v2 .ns-desc {
    margin: var(--space-3) 0 var(--space-4);
    font-size: 0.75rem;
    line-height: 1.9;
    color: var(--zino-text-sub);
    text-align: right;
}

/* ── v2 toggle switch (green = on, knob slides left in RTL) ──────────────── */
.panel-v2 .ns-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 42px;
    height: 22px;
}

.panel-v2 .ns-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.panel-v2 .ns-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--zino-text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.panel-v2 .ns-switch-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.panel-v2 .ns-switch input:checked + .ns-switch-slider {
    background: var(--zino-green);
}

.panel-v2 .ns-switch input:checked + .ns-switch-slider::before {
    transform: translateX(-20px);
}

.panel-v2 .ns-switch input:disabled + .ns-switch-slider {
    opacity: 0.6;
    cursor: default;
}

/* =========================================================================
   Add / edit recipient modal (تنظیمات اعلان‌ها). Scoped to .ns-modal because
   the modals render outside .panel-v2. Same v2 language: square white card,
   green bottom bar, underline-style inputs, slanted green CTA. Fields kept
   exactly as the markup ships — this is styling only.
   ========================================================================= */
.ns-modal .modal-dialog {
    max-width: 440px;
}

.ns-modal .modal-content {
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* green bar across the bottom edge (v2 card accent) */
.ns-modal .modal-content::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90%;
    height: 5px;
    background: var(--zino-green);
}

.ns-modal .modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--zino-border);
}

.ns-modal .modal-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #575756;
}

/* X close (kept floated left by the page's RTL rule) */
.ns-modal .modal-header .close {
    margin: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: #575756;
    opacity: 1;
    text-shadow: none;
    background: none;
    border: none;
    cursor: pointer;
}

.ns-modal .modal-header .close:hover {
    color: var(--zino-warn);
}

.ns-modal .modal-body {
    padding: var(--space-5);
}

.ns-modal .form-group {
    margin-bottom: var(--space-5);
}

.ns-modal .form-group:last-child {
    margin-bottom: 0;
}

.ns-modal label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #575756;
    text-align: right;
}

/* underline-style fields (no box) */
.ns-modal .form-control {
    width: 100%;
    height: auto;
    padding: var(--space-2) 0;
    border: none;
    border-bottom: 1px solid var(--zino-border-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--zino-text);
    font-size: 0.8125rem;
    text-align: right;
    direction: rtl;
    transition: border-color 0.18s ease;
}

.ns-modal .form-control::placeholder {
    color: var(--zino-text-muted);
}

.ns-modal .form-control:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--zino-green);
}

.ns-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: none;
}

/* green slanted save (ذخیره) */
.ns-modal .modal-footer .btn-primary {
    min-width: 110px;
    min-height: 40px;
    padding: 8px 24px;
    border: none;
    border-radius: 0;
    background: var(--zino-green);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.ns-modal .modal-footer .btn-primary:hover {
    background: var(--zino-green-hover);
}

/* grey cancel (انصراف) */
.ns-modal .modal-footer .btn-default {
    min-width: 90px;
    min-height: 40px;
    padding: 8px 20px;
    border: none;
    border-radius: 0;
    background: var(--zino-text-muted);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: filter 0.2s ease;
}

.ns-modal .modal-footer .btn-default:hover {
    filter: brightness(0.95);
}

/* =========================================================================
   Account/panel pages sit in a .dashboard-panel wrapper with no styling of
   its own — give it breathing room before the footer (every panel page was
   sitting flush against it).
   ========================================================================= */
.dashboard-panel {
    margin-bottom: var(--space-10); /* 48px */
}

/* Mobile floating "منو" toggle for the account panel — v2 green (it was still
   on the old blue main-color-two accent). */
.psv-fab {
    background: var(--zino-green);
    transition: background 0.2s ease;
}

.psv-fab:hover,
.psv-fab:focus {
    background: var(--zino-green-hover);
}

/* =========================================================================
   Wallet charge (شارژ کیف پول نقدی) — Views/Account/Wallet.cshtml
   Grey form panel holding an amount stepper + quick-add chips + gateway
   picker cards, then a history table. Scoped under .panel-v2; reuses the
   shared .fav-head (page header), .fav-cta (pay button) and .pv-table.
   ========================================================================= */
.panel-v2 .wlt-form {
    background: var(--zino-surface-3);
    padding: var(--space-6);
}

/* ── Amount stepper (− [تومان] input [+]) — forced LTR so the controls keep a
   numeric left-to-right order regardless of the RTL page ──────────────────── */
.panel-v2 .wlt-stepper {
    direction: ltr;
}

.panel-v2 .wlt-step-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--zino-green);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease;
}

.panel-v2 .wlt-step-btn:hover {
    color: var(--zino-green-hover);
}

.panel-v2 .wlt-unit {
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
    white-space: nowrap;
}

/* underline-only amount input, centred value, native spinners removed */
.panel-v2 .wlt-amount {
    width: 220px;
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-bottom: 1px solid var(--zino-border-strong);
    border-radius: 0;
    background: transparent;
    color: #575756;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center !important;
    direction: ltr;
    transition: border-color 0.18s ease;
    -moz-appearance: textfield;
}

.panel-v2 .wlt-amount:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--zino-green);
}

.panel-v2 .wlt-amount::-webkit-outer-spin-button,
.panel-v2 .wlt-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Quick-add chips (۱۰+ میلیون …) ──────────────────────────────────────── */
.panel-v2 .wlt-chip {
    padding: var(--space-2) var(--space-4);
    border: none;
    background: var(--zino-surface-2);
    color: #575756;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .wlt-chip:hover,
.panel-v2 .wlt-chip:focus {
    background: var(--zino-green);
    color: #fff;
}

/* ── Gateway picker cards ─────────────────────────────────────────────────── */
.panel-v2 .wlt-gateway {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border: 1px solid var(--zino-border);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.panel-v2 .wlt-gateway:hover {
    border-color: var(--zino-green-light);
}

/* selected state carried by the contained radio (native control is hidden) */
.panel-v2 .wlt-gateway:has(.wlt-gateway-radio:checked) {
    border-color: var(--zino-green);
    box-shadow: 0 0 0 1px var(--zino-green);
}

.panel-v2 .wlt-gateway-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.panel-v2 .wlt-gateway-body {
    min-width: 0;
    text-align: right;
}

.panel-v2 .wlt-gateway-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
    white-space: nowrap; /* keep the gateway title on a single line */
}

.panel-v2 .wlt-gateway-sub {
    margin-top: 2px;
    font-size: 0.625rem;
    line-height: 1.6;
    color: var(--zino-text-sub);
}

.panel-v2 .wlt-gateway-sub--fee {
    color: var(--zino-warn);
}

.panel-v2 .wlt-gateway-logo {
    flex-shrink: 0;
    width: 56px;
    height: 44px;
    object-fit: contain;
}

/* ── Pay button: capped width when stacked; content-width from lg ─────────── */
.panel-v2 .wlt-pay {
    width: 100%;
    max-width: 14rem;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .panel-v2 .wlt-pay {
        width: auto;
        max-width: none;
        margin-inline: 0;
    }
}

/* History section title */
.panel-v2 .wlt-history-title {
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    font-weight: 700;
    color: #575756;
}

/* transaction type cell — direction arrow + label, coloured with the redesign's
   own tokens (green = increase / coral = decrease), not Bootstrap text-* utils */
.panel-v2 .wlt-trx {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
}

.panel-v2 .wlt-trx i {
    font-size: 1.25rem;
    line-height: 1;
}

.panel-v2 .wlt-trx--up {
    color: var(--zino-green);
}

.panel-v2 .wlt-trx--down {
    color: var(--zino-warn);
}

/* =========================================================================
   Return requests (مرجوعی) — Index / InvoiceItems / Create
   ========================================================================= */

/* Seasonal "can't submit this month" notice */
.panel-v2 .rr-season {
    background: var(--zino-delay-bg);
    border: 1px solid var(--zino-delay-fold);
    color: var(--zino-delay-text);
    padding: var(--space-4);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.9;
    text-align: center;
}

/* ── Submitted-request group card (Index) ───────────────────────────────── */
.panel-v2 .rr-group {
    border: 1px solid var(--zino-border);
    margin-bottom: var(--space-4);
}

.panel-v2 .rr-group-head {
    background: var(--zino-surface-3);
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-3) var(--space-4);
}

.panel-v2 .rr-group-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .rr-group-body {
    padding: 0 var(--space-4);
}

/* Small outline print button */
.panel-v2 .rr-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--zino-text-sub);
    background: #fff;
    border: 1px solid var(--zino-border-strong);
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.panel-v2 .rr-print:hover {
    color: var(--zino-green);
    border-color: var(--zino-green);
}

/* Fixed column widths so every group's table lines up with the next.
   Only at lg+ where they're real tables — below lg they stack into cards. */
@media (min-width: 992px) {
    .panel-v2 .rr-table {
        table-layout: fixed;
    }

    .panel-v2 .rr-table th,
    .panel-v2 .rr-table td {
        white-space: normal;
        word-break: break-word;
    }

    .panel-v2 .rr-table th:nth-child(1),
    .panel-v2 .rr-table td:nth-child(1) { width: 5%; }
    .panel-v2 .rr-table th:nth-child(2),
    .panel-v2 .rr-table td:nth-child(2) { width: 12%; }
    .panel-v2 .rr-table th:nth-child(3),
    .panel-v2 .rr-table td:nth-child(3) { width: 12%; }
    .panel-v2 .rr-table th:nth-child(4),
    .panel-v2 .rr-table td:nth-child(4) { width: 12%; }
    .panel-v2 .rr-table th:nth-child(5),
    .panel-v2 .rr-table td:nth-child(5) { width: 24%; }
    .panel-v2 .rr-table th:nth-child(6),
    .panel-v2 .rr-table td:nth-child(6) { width: 7%; }
    .panel-v2 .rr-table th:nth-child(7),
    .panel-v2 .rr-table td:nth-child(7) { width: 16%; }
    .panel-v2 .rr-table th:nth-child(8),
    .panel-v2 .rr-table td:nth-child(8) { width: 12%; }
}

/* ── Status text (plain, just slightly bold) ────────────────────────────── */
.panel-v2 .rr-status {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #575756;
    white-space: nowrap;
}

.panel-v2 .rr-reject {
    display: block;
    margin-top: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--zino-warn);
}

/* Message modal body — unscoped because Bootstrap may move the modal out of
   the .panel-v2 wrapper when it appends a backdrop */
.rr-modal-body {
    font-size: 0.8125rem;
    color: var(--zino-text);
    line-height: 2;
}

/* Plain coloured state text (InvoiceItems وضعیت مرجوعی) */
.panel-v2 .rr-state--on {
    color: var(--zino-green);
    font-weight: 700;
}

.panel-v2 .rr-state--off {
    color: var(--zino-warn);
    font-weight: 700;
}

/* Cancel (انصراف) link in the submitted table */
.panel-v2 .rr-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--zino-warn);
    background: var(--zino-warn-bg);
    border: 1px solid var(--zino-warn-border);
    transition: background 0.2s ease, color 0.2s ease;
}

.panel-v2 .rr-cancel:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

/* Selectable checkbox in the choose-items table */
.panel-v2 .rr-check {
    width: 18px;
    height: 18px;
    accent-color: var(--zino-green);
    cursor: pointer;
}

.panel-v2 .rr-check:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Toolbar: search + next-step button — equal width, opposite ends on desktop,
   stacked (button on top) on mobile */
.panel-v2 .rr-toolbar .rr-search,
.panel-v2 .rr-toolbar .fav-cta {
    width: 100%;
}

@media (min-width: 768px) {
    .panel-v2 .rr-toolbar .rr-search,
    .panel-v2 .rr-toolbar .fav-cta {
        width: 260px;
        flex: 0 0 260px;
    }
}

/* Search box (InvoiceItems) */
.panel-v2 .rr-search {
    position: relative;
}

.panel-v2 .rr-search i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--zino-text-sub);
    font-size: 0.875rem;
    pointer-events: none;
}

.panel-v2 .rr-search input {
    width: 100%;
    padding: 8px 36px 8px 14px;
    font-size: 0.75rem;
    color: var(--zino-text);
    background: var(--zino-surface-3);
    border: 1px solid var(--zino-border);
}

.panel-v2 .rr-search input::placeholder {
    color: var(--zino-text-sub);
}

.panel-v2 .rr-search input:focus {
    outline: none;
    border-color: var(--zino-green);
    background: #fff;
}

/* clickable rows in the choose-items table */
.panel-v2 #invoice-tabel tbody tr {
    cursor: pointer;
}

/* ── Create form ────────────────────────────────────────────────────────── */
.panel-v2 .rr-intro {
    font-size: 0.8125rem;
    color: var(--zino-text);
    line-height: 1.9;
    margin-bottom: var(--space-4);
}

.panel-v2 .rr-item {
    border: 1px solid var(--zino-border);
    background: var(--zino-surface-3);
    padding: var(--space-4);
}

.panel-v2 .rr-item-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .rr-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #575756;
    margin-bottom: var(--space-1);
}

.panel-v2 .rr-field-label .rr-req {
    color: var(--zino-warn);
    font-weight: 700;
}

.panel-v2 .rr-prompt {
    font-size: 0.75rem;
    color: var(--zino-text-sub);
    margin-bottom: var(--space-2);
}

/* reason as a selectable chip */
.panel-v2 .rr-reason {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--zino-border);
    background: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--zino-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.panel-v2 .rr-reason:hover {
    border-color: var(--zino-green-light);
}

.panel-v2 .rr-reason:has(input:checked) {
    border-color: var(--zino-green);
    background: var(--zino-green-light);
    color: #575756;
    font-weight: 600;
}

.panel-v2 .rr-reason input {
    width: 16px;
    height: 16px;
    accent-color: var(--zino-green);
    cursor: pointer;
}

.panel-v2 .rr-form .form-control {
    font-size: 0.8125rem;
}

.panel-v2 .rr-form .form-control:focus {
    border-color: var(--zino-green);
    box-shadow: 0 0 0 0.15rem rgba(0, 174, 94, 0.12);
}

/* =========================================================================
   Invoices (فاکتورها) — Views/Account/Invoices.cshtml
   Reuses .fav-head, the .rr-toolbar/.rr-search search box and .fav-cta (excel
   button) and .pv-table. Adds only the green fiscal-year dropdown, the plain
   type labels and the repeat-order icon button. Scoped under .panel-v2.
   ========================================================================= */

/* ── Green fiscal-year dropdown (سال مالی ۱۴۰۵ ▾) ────────────────────────── */
.panel-v2 .inv-year {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.panel-v2 .inv-year i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zino-green);
    font-size: 0.875rem;
    pointer-events: none;
}

.panel-v2 .inv-year select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 16px 8px 38px;
    background: var(--zino-green-tint);
    color: var(--zino-green);
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

/* DataTables auto-detects numeric columns and right-aligns them with a more
   specific selector than .pv-table — re-assert centre on every cell (the last
   action column keeps its Bootstrap .text-end !important). */
.panel-v2 table.pv-table.dataTable th,
.panel-v2 table.pv-table.dataTable td {
    text-align: center;
}

/* DataTables reserves padding-right:30px on sortable headers for the sort
   arrow, which shoves the centred title off to the side. Drop it back to the
   normal cell padding — the arrow is absolutely positioned and just floats
   over the trailing whitespace. */
.panel-v2 table.pv-table.dataTable thead > tr > th {
    padding-right: var(--space-1);
}

/* Keep the DataTables wrapper + table within the viewport so the page doesn't
   gain a horizontal scrollbar on mobile (the table is card-stacked there). */
.panel-v2 .dt-container {
    width: 100%;
    max-width: 100%;
}

.panel-v2 table.pv-table.dataTable {
    width: 100% !important;
    max-width: 100%;
}

/* Excel button: no icon, sized to its text (narrower than the wide fav-cta) */
.panel-v2 .inv-excel {
    min-height: 34px;
    padding: 6px 22px 6px 28px;
    font-size: 0.6875rem;
}

@media (min-width: 768px) {
    .panel-v2 .rr-toolbar .inv-excel {
        width: auto;
        flex: 0 0 auto;
    }
}

.panel-v2 .inv-year select:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--zino-green);
}

/* ── Plain type label (فروش / مرجوعی) ────────────────────────────────────── */
.panel-v2 .inv-type {
    font-weight: 700;
    white-space: nowrap;
}

.panel-v2 .inv-type--sale {
    color: var(--zino-green);
}

.panel-v2 .inv-type--return {
    color: var(--zino-warn);
}

/* ── Repeat-order icon button (تکرار سفارش) ──────────────────────────────── */
.panel-v2 .inv-repeat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 14px;
    color: var(--zino-warn);
    background: var(--zino-warn-bg);
    border: 1px solid var(--zino-warn-border);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .inv-repeat i {
    font-size: 0.875rem;
}

.panel-v2 .inv-repeat:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

/* =========================================================================
   Support tickets (تیکت‌های پشتیبانی) — Views/Tickets/Index, Create, Details
   Reuses .fav-head (page header), .fav-cta (new-ticket CTA), .pv-view-btn
   (back / view) and .pv-table (list). Adds the coloured status text, the
   underline form fields and the chat conversation chrome. Scoped under
   .panel-v2.
   ========================================================================= */

/* Create ticket — inset page body so form fields don't sit flush on viewport edges */
.panel-v2.tk-page {
    padding-inline: var(--space-4);
}

@media (min-width: 992px) {
    .panel-v2.tk-page {
        padding-inline: 0;
    }
}

.panel-v2.tk-page .tk-page-body {
    padding: var(--space-6);
    background: #fff;
    border-color: var(--zino-border);
    overflow: visible;
}

.panel-v2.tk-page .tk-form,
.panel-v2.tk-page .tk-field {
    overflow: visible;
    min-width: 0;
}

/* Custom department picker — native select menu overflowed the card in RTL */
.panel-v2 .tk-picker {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.panel-v2 .tk-picker-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.panel-v2 .tk-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: 1px solid var(--zino-border-strong);
    background: var(--zino-surface-3);
    color: var(--zino-text);
    font-size: 0.8125rem;
    text-align: right;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.panel-v2 .tk-picker-trigger:focus {
    outline: none;
    border-bottom-color: var(--zino-green);
}

.panel-v2 .tk-picker-trigger i {
    color: var(--zino-green);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.panel-v2 .tk-picker-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-v2 .tk-picker-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--zino-border-strong);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.panel-v2 .tk-picker-menu[hidden] {
    display: none;
}

.panel-v2 .tk-picker-option {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    color: var(--zino-text);
    cursor: pointer;
    text-align: right;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .tk-picker-option:hover,
.panel-v2 .tk-picker-option.is-selected {
    background: var(--zino-green-tint);
    color: var(--zino-green);
}

.panel-v2 .tk-picker-option.is-selected {
    font-weight: 700;
}

.panel-v2 .tk-picker.is-open .tk-picker-trigger {
    border-bottom-color: var(--zino-green);
}

@media (max-width: 575.98px) {
    .panel-v2.tk-page .tk-page-body {
        padding: var(--space-4);
    }
}

/* ── Status text (Index list / Details meta) ────────────────────────────── */
.panel-v2 .tk-status {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.panel-v2 .tk-status--pending {
    color: var(--zino-delay-text);
}

.panel-v2 .tk-status--answered {
    color: var(--zino-green);
}

.panel-v2 .tk-status--closed {
    color: var(--zino-warn);
}

/* Close-ticket link in the list (pink outline pill, like .rr-cancel) */
.panel-v2 .tk-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--zino-warn);
    background: var(--zino-warn-bg);
    border: 1px solid var(--zino-warn-border);
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .tk-close:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

/* ── Create form (underline fields, no boxes) ───────────────────────────── */
.panel-v2 .tk-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.panel-v2 .tk-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.panel-v2 .tk-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .tk-label .tk-req {
    color: var(--zino-warn);
    font-weight: 700;
}

.panel-v2 .tk-form .form-control,
.panel-v2 .tk-form textarea.form-control,
.panel-v2 .tk-form select.form-control {
    width: 100%;
    padding: var(--space-2) 0;
    border: none;
    border-bottom: 1px solid var(--zino-border-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--zino-text);
    font-size: 0.8125rem;
    transition: border-color 0.18s ease;
}

.panel-v2 .tk-form .form-control::placeholder {
    color: var(--zino-text-muted);
}

.panel-v2 .tk-form .form-control:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--zino-green);
}

.panel-v2 .tk-form textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

/* shaded select so the dropdown reads as a control, with a green chevron */
.panel-v2 .tk-select {
    position: relative;
    width: 100%;
    max-width: 240px;
}

.panel-v2 .tk-select i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zino-green);
    font-size: 0.875rem;
    pointer-events: none;
}

.panel-v2 .tk-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    background: var(--zino-surface-3);
    padding-right: var(--space-3);
    border-bottom: 1px solid var(--zino-border-strong);
    cursor: pointer;
}

.panel-v2 .tk-file {
    font-size: 0.75rem;
    color: var(--zino-text);
}

.panel-v2 .tk-file::-webkit-file-upload-button,
.panel-v2 .tk-file::file-selector-button {
    margin-inline-end: var(--space-3);
    padding: 6px 16px;
    border: 1px solid var(--zino-border-strong);
    background: var(--zino-surface-3);
    color: #575756;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.panel-v2 .tk-file::-webkit-file-upload-button:hover,
.panel-v2 .tk-file::file-selector-button:hover {
    border-color: var(--zino-green);
    color: var(--zino-green);
}

.panel-v2 .tk-hint {
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
}

/* ── Details: conversation card ─────────────────────────────────────────── */
.panel-v2 .tk-chat {
    border: 1px solid var(--zino-border);
    background: #fff;
}

.panel-v2 .tk-chat-head {
    background: var(--zino-surface-3);
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .tk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--zino-border);
    background: #fafafa;
    font-size: 0.75rem;
    color: var(--zino-text-sub);
}

.panel-v2 .tk-meta b {
    color: #575756;
    font-weight: 700;
}

.panel-v2 .tk-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

.panel-v2 .tk-msg {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.panel-v2 .tk-msg--customer {
    align-items: flex-start;
    align-self: flex-start;
}

.panel-v2 .tk-msg--operator {
    align-items: flex-end;
    align-self: flex-end;
}

.panel-v2 .tk-msg-info {
    margin-bottom: 4px;
    font-size: 0.625rem;
    color: var(--zino-text-sub);
}

.panel-v2 .tk-bubble {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    line-height: 1.8;
    white-space: pre-line;
    border-radius: 12px;
}

.panel-v2 .tk-msg--customer .tk-bubble {
    background: var(--zino-surface-2);
    color: var(--zino-text);
    border-top-right-radius: 2px;
}

.panel-v2 .tk-msg--operator .tk-bubble {
    background: var(--zino-green);
    color: #fff;
    border-top-left-radius: 2px;
}

/* attachment thumbnail + file chip inside a bubble */
.panel-v2 .tk-thumb {
    margin-top: var(--space-2);
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 1px solid var(--zino-border);
    cursor: pointer;
}

.panel-v2 .tk-video {
    margin-top: var(--space-2);
    max-width: 260px;
    max-height: 260px;
    border: 1px solid var(--zino-border);
}

.panel-v2 .tk-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
    padding: 8px 12px;
    background: var(--zino-surface-3);
    border: 1px solid var(--zino-border);
    color: #575756;
    font-size: 0.75rem;
    transition: background 0.18s ease;
}

.panel-v2 .tk-file-chip:hover {
    background: var(--zino-surface-2);
    color: var(--zino-green);
}

/* ── Details: reply composer ────────────────────────────────────────────── */
.panel-v2 .tk-reply {
    border-top: 1px solid var(--zino-border);
    padding: var(--space-4);
    background: var(--zino-surface-3);
}

.panel-v2 .tk-reply textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--zino-border-strong);
    border-radius: 0;
    background: #fff;
    color: var(--zino-text);
    font-size: 0.8125rem;
    resize: none;
    transition: border-color 0.18s ease;
}

.panel-v2 .tk-reply textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--zino-green);
}

.panel-v2 .tk-reply-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* icon-style emoji + file buttons */
.panel-v2 .tk-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--zino-border-strong);
    color: #575756;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.panel-v2 .tk-tool-btn:hover {
    border-color: var(--zino-green);
    color: var(--zino-green);
}

/* send (ارسال) — slanted green CTA, sits at the row end (left in RTL) */
.panel-v2 .tk-send {
    position: relative;
    isolation: isolate;
    z-index: 0;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 22px 6px 28px;
    border: none;
    background: none;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.panel-v2 .tk-send::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.panel-v2 .tk-send:hover::before {
    background: var(--zino-green-hover);
}

/* ── Annual analysis page (YearlyReport — Figma 110:10178) ────────────────
   Layout/spacing live in markup (Bootstrap utilities). This block covers
   chart toggles, brand-row highlight, not-bought brand chips, and chart
   height — what Bootstrap can't express. Reuses .pv-card / .pv-tabs /
   .pv-table / .fav-head / .inv-year. */
.panel-v2 .yr-chart-toggle {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Shared card header title — brands + chart toggles (same type scale). */
.panel-v2 .yr-card-head {
    gap: 0.375rem;
}

.panel-v2 .yr-card-head i {
    font-size: 1.125rem;
    color: #575756;
    width: auto;
    height: auto;
}

.panel-v2 .yr-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #575756;
    line-height: 1.4;
}

.panel-v2 .yr-chart-toggle:not(.active) .yr-card-title {
    font-weight: 400;
}

.panel-v2 .yr-chart-sep {
    width: 1px;
    height: 1.5rem;
    background: #cfcfcf;
    flex: 0 0 auto;
}

.panel-v2 .yr-year-filter {
    justify-content: flex-start;
}

.panel-v2 .yr-year-check {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.panel-v2 .yr-year-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.panel-v2 .yr-year-box {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--yr-year-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panel-v2 .yr-year-box::after {
    content: "";
    width: 0.5rem;
    height: 0.875rem;
    border-right: 2px solid #575756;
    border-bottom: 2px solid #575756;
    transform: rotate(40deg) translate(-1px, -1px);
    transform-origin: center;
}

.panel-v2 .yr-year-check.is-off .yr-year-box::after,
.panel-v2 .yr-year-check input:not(:checked) + .yr-year-box::after {
    opacity: 0;
}

.panel-v2 .yr-year-check.is-off,
.panel-v2 .yr-year-check:has(input:not(:checked)) {
    opacity: 0.45;
}

.panel-v2 .yr-year-label {
    font-size: 0.75rem;
    color: var(--zino-text);
    line-height: 1;
}

.panel-v2 .yr-chart-stack {
    position: relative;
    width: 100%;
    height: 260px;
}

.panel-v2 .yr-chart-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.panel-v2 .yr-chart-wrap.is-hidden {
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}

.panel-v2 .yr-chart-wrap:not(.is-hidden) {
    z-index: 1;
}

@media (min-width: 992px) {
    .panel-v2 .yr-chart-stack {
        height: 320px;
    }
}

/* Brand year select sits on the shaded card — white fill (Figma), not the
   green inv-year tint used on the invoices toolbar. */
.panel-v2 .yr-brand-year select {
    background: #fff;
    color: var(--zino-text);
    font-size: 0.8125rem;
    padding: 6px 14px 6px 32px;
}

.panel-v2 .yr-brand-year i {
    color: var(--zino-text);
}

.panel-v2.yr-page .pv-card--shade {
    background: #fbfbfb;
}

.panel-v2 .yr-brands-wrap {
    overflow-x: hidden; /* wrap long brands instead of sideways scroll */
}

.panel-v2 .yr-brands-table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

.panel-v2 .yr-brands-table thead th {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--zino-text);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom-color: #cfcfcf;
}

.panel-v2 .yr-brands-table th:nth-child(1),
.panel-v2 .yr-brands-table td:nth-child(1) {
    width: 4.5rem;
    white-space: nowrap;
}

.panel-v2 .yr-brands-table th:nth-child(3),
.panel-v2 .yr-brands-table td:nth-child(3) {
    width: 6.5rem;
    white-space: nowrap;
}

.panel-v2 .yr-brands-table th,
.panel-v2 .yr-brands-table td {
    border-bottom: 1px solid var(--zino-border);
}

.panel-v2 .yr-brands-table td {
    font-size: 0.875rem;
    color: var(--zino-text);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* Override .pv-table nowrap — long brand names wrap inside the card. */
.panel-v2 .yr-brands-table th:nth-child(2),
.panel-v2 .yr-brands-table td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
    text-align: right;
}

/* All rows same by default; green only on hover (beats .pv-table #fafafa). */
.panel-v2 .yr-brands-table tbody tr:hover td {
    background-color: var(--zino-green-tint);
}

.panel-v2 .yr-brand-pct b {
    font-weight: 700;
    font-size: 1rem;
}

.panel-v2 .yr-tabs {
    gap: 0;
    overflow-x: clip;
    flex-wrap: nowrap;
}

.panel-v2 .yr-tabs .pv-tab {
    white-space: nowrap;
    flex: 0 0 auto;
    padding-inline: var(--space-4);
    position: relative;
}

.panel-v2 .yr-tabs .pv-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0.15rem;
    bottom: calc(var(--space-2) + 0.15rem);
    width: 1px;
    background: #cfcfcf;
}

.panel-v2 .yr-tabs .pv-tab i {
    color: inherit;
}

.panel-v2 .yr-nb-brand {
    appearance: none;
    border: none;
    background: #fff;
    color: var(--zino-text);
    font-size: 0.8125rem;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    text-align: right;
}

.panel-v2 .yr-nb-brand:hover,
.panel-v2 .yr-nb-brand.active {
    background: var(--zino-green-tint);
    color: var(--zino-green);
}

.panel-v2 .yr-nb-count {
    font-size: 0.6875rem;
    color: var(--zino-text-sub);
    background: var(--zino-search-bg);
    padding: 2px 8px;
}

/* Not-bought products — min card width, max 2 per row beside brand sidebar */
.panel-v2 .yr-nb-products > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .panel-v2 .yr-nb-products > .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(12rem, 1fr));
        column-gap: var(--space-3);
        row-gap: var(--space-3);
    }

    .panel-v2 .yr-nb-products > .row > [class*="col-"] {
        width: 100%;
        max-width: none;
        flex: none;
        padding-inline: 0;
    }

    .panel-v2 .yr-nb-products > .row > [class*="col-"] > .product-box.pc-card {
        width: 100%;
        min-width: 12rem;
        max-width: 22.5rem;
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .panel-v2 .yr-chart-stack {
        height: 220px;
    }

    .panel-v2 .yr-chart-toggles {
        gap: var(--space-2);
    }

    .panel-v2 .yr-chart-sep {
        display: none;
    }

    .panel-v2 .yr-card-title {
        font-size: 0.875rem;
    }

    .panel-v2 .yr-brands-table thead th,
    .panel-v2 .yr-brands-table td {
        font-size: 0.75rem;
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .panel-v2 .yr-brands-table th:nth-child(1),
    .panel-v2 .yr-brands-table td:nth-child(1) {
        width: 3.25rem;
    }

    .panel-v2 .yr-brands-table th:nth-child(3),
    .panel-v2 .yr-brands-table td:nth-child(3) {
        width: 5.25rem;
    }

    .panel-v2 .yr-tabs {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .panel-v2 .yr-tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .panel-v2 .yr-tabs .pv-tab {
        padding-inline: var(--space-3);
    }

    .panel-v2 .yr-nb-brands {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-v2 .yr-nb-brands > .d-flex {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .panel-v2 .yr-nb-brand {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ── Bills page (Bills.cshtml — Figma 110:7798) ─────────────────────────── */
.panel-v2.bl-page .pv-card--shade,
.panel-v2.bl-page .bl-top-card {
    background: #f7f7f7;
}

.panel-v2 .bl-notice {
    background: #fff8e1;
    border: 1px solid #ffe0b2;
    padding: var(--space-4);
    color: var(--zino-text);
    line-height: 2;
}

.panel-v2 .bl-notice strong {
    color: var(--zino-warn);
}

.panel-v2 .bl-notice--danger {
    background: #fff1ee;
    border-color: var(--zino-warn-border);
}

.panel-v2 .bl-balance-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.panel-v2 .bl-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--zino-border);
}

.panel-v2 .bl-balance-row:last-child {
    border-bottom: none;
}

.panel-v2 .bl-balance-row--total {
    margin-top: var(--space-1);
    padding-top: var(--space-4);
}

.panel-v2 .bl-balance-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.panel-v2 .bl-balance-meta i {
    color: var(--zino-text);
    font-size: 1rem;
}

.panel-v2 .bl-balance-label {
    font-size: 0.8125rem;
    color: #575756;
}

.panel-v2 .bl-balance-value,
.panel-v2 .bl-balance-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zino-green);
    white-space: nowrap;
}

.panel-v2 .bl-balance-total {
    font-size: 1.125rem;
}

.panel-v2 .bl-unit {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--zino-text-sub);
    margin-right: 2px;
}

/* Summary pair on راس سررسید — inset from card edges like Figma (not flush col-6). */
.panel-v2 .bl-ras-head {
    padding-inline: clamp(1.25rem, 10%, 4.5rem);
}

.panel-v2 .bl-ras-stat {
    flex: 0 1 auto;
}

.panel-v2 .bl-summary-label {
    font-size: 0.6875rem;
    color: var(--zino-text);
    font-weight: 500;
    margin-bottom: 2px;
}

.panel-v2 .bl-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zino-green);
}

.panel-v2 .bl-summary-date {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--zino-warn);
}

.panel-v2 .bl-summary-meta,
.panel-v2 .bl-helper {
    font-size: 0.75rem;
    color: var(--zino-text-sub);
}

.panel-v2 .bl-ras-table th,
.panel-v2 .bl-ras-table td {
    font-size: 0.75rem;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.panel-v2 .bl-ras-table .bl-balance-value {
    font-size: 0.875rem;
    color: var(--zino-text);
}

.panel-v2 .bl-defer-banner {
    background: #fff1ee;
    padding: var(--space-4);
}

.panel-v2 .bl-defer-banner .pv-card-head i,
.panel-v2 .bl-defer-total-label i {
    color: var(--zino-text);
}

.panel-v2 .bl-defer-copy {
    max-width: 40rem;
}

.panel-v2 .bl-defer-total-label .bl-summary-label {
    margin-bottom: 0;
}

.panel-v2 .bl-defer-banner .bl-summary-value {
    color: var(--zino-warn);
    font-size: 1.5rem;
}

.panel-v2 .bl-month-card .pv-card-head i {
    color: var(--zino-text);
}

.panel-v2 .bl-settlement-table .bl-due-date {
    color: var(--zino-warn);
    font-weight: 600;
}

.panel-v2 tr.bill-settlement-ras-row td {
    background-color: #fff1ee;
    color: var(--zino-warn);
    font-weight: 700;
    border-top: 2px solid var(--zino-warn-border);
}

.panel-v2 .bl-note-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: #eef7fb;
    color: var(--zino-text);
}

.panel-v2 .bl-note-info i {
    color: var(--zino-blue);
    font-size: 1rem;
}

.panel-v2 .bl-tabs {
    margin-bottom: 0;
}

.panel-v2 .bl-search {
    position: relative;
    min-width: min(100%, 14rem);
}

.panel-v2 .bl-search i {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zino-text-sub);
    font-size: 0.875rem;
    pointer-events: none;
}

.panel-v2 .bl-search-input {
    width: 100%;
    height: 2.25rem;
    padding-block: 0.375rem;
    padding-inline: 0.75rem 0.75rem;
    padding-inline-start: 2.25rem;
    border: none;
    background: var(--zino-search-bg);
    color: var(--zino-text);
    font-size: 0.8125rem;
    outline: none;
}

.panel-v2 .bl-search-input::placeholder {
    color: var(--zino-text-sub);
}

.panel-v2 .bl-cardex-table td {
    color: var(--zino-text);
    font-weight: 500;
}

.panel-v2 .bl-cardex-table .bl-desc {
    max-width: 18rem;
    width: 18rem;
    white-space: normal;
    text-align: center;
    overflow: visible;
    display: table-cell;
}

.panel-v2 .bl-cardex-table .pv-view-btn {
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0.25rem 0.625rem 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.panel-v2 .bl-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.75rem;
    color: var(--zino-text-sub);
}

.panel-v2 .bl-pager-btns {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-v2 .bl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--zino-border);
    background: #fff;
    color: var(--zino-text);
    border-radius: 0.25rem;
    padding: 0;
}

.panel-v2 .bl-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.panel-v2 .bl-pager-page {
    min-width: 3.5rem;
    text-align: center;
    color: var(--zino-text);
    font-weight: 600;
}

.panel-v2 .bl-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}