/* ═══════════════════════════════════════════════════════════════════════════
   VPP DATA TABLE ENHANCEMENTS — Phase 9
   Card-style rows, hover effects, loading states
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DataGrid Row Enhancements ───────────────────────────────── */
.vpp-datagrid .rz-datatable-row {
    transition: background-color var(--vpp-transition-fast);
}

.vpp-datagrid .rz-datatable-row:hover {
    background-color: var(--vpp-bg-elevated);
}

/* Card-style row (thay table truyền thống) */
.vpp-datagrid-card .rz-datatable-row {
    background: var(--vpp-bg-elevated);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    margin-bottom: var(--vpp-space-3);
    padding: var(--vpp-space-3);
    box-shadow: var(--vpp-shadow-xs);
    transition: all var(--vpp-transition-fast);
}

.vpp-datagrid-card .rz-datatable-row:hover {
    border-color: var(--vpp-border-strong);
    box-shadow: var(--vpp-shadow-sm);
    transform: translateY(-1px);
}

.vpp-datagrid-card .rz-datatable-data {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vpp-space-4);
    align-items: center;
}

/* ── Table Header Styling ────────────────────────────────────── */
.vpp-datagrid .rz-datatable-thead th {
    background: var(--vpp-bg-surface);
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
    padding: var(--vpp-space-3) var(--vpp-space-4);
    border-bottom: 2px solid var(--vpp-border-default);
}

/* ── Loading Skeleton ────────────────────────────────────────── */
.vpp-dg-skeleton-row {
    display: flex;
    gap: var(--vpp-space-4);
    padding: var(--vpp-space-4);
    border-bottom: 1px solid var(--vpp-border-default);
}

.vpp-dg-skeleton-cell {
    height: 14px;
    border-radius: var(--vpp-radius-sm);
    animation: vpp-shimmer 1.5s infinite;
}

@keyframes vpp-shimmer {
    0%   { background: var(--vpp-bg-surface); }
    50%  { background: var(--vpp-bg-elevated); }
    100% { background: var(--vpp-bg-surface); }
}

/* ── Compact Density Override ────────────────────────────────── */
.vpp-datagrid .rz-datatable-tbody td {
    padding: var(--vpp-space-2) var(--vpp-space-4);
    font-size: var(--vpp-text-sm);
    vertical-align: middle;
}

/* ── Status Column ───────────────────────────────────────────── */
.vpp-datagrid .rz-datatable-tbody td .vpp-badge {
    white-space: nowrap;
}

/* ── Action Buttons in Grid ──────────────────────────────────── */
.vpp-datagrid .rz-datatable-tbody .rz-button-text {
    opacity: 0;
    transition: opacity var(--vpp-transition-fast);
}

.vpp-datagrid .rz-datatable-row:hover .rz-button-text {
    opacity: 1;
}

/* ── Pagination ──────────────────────────────────────────────── */
.vpp-datagrid .rz-paginator {
    padding: var(--vpp-space-3);
    background: transparent;
}

.vpp-datagrid .rz-paginator .rz-paginator-pages button:hover {
    background: var(--vpp-bg-elevated);
    border-radius: var(--vpp-radius-sm);
}

/* ── Empty Datagrid ──────────────────────────────────────────── */
.vpp-datagrid .rz-datatable-empty {
    padding: var(--vpp-space-12);
    text-align: center;
    color: var(--vpp-text-tertiary);
    font-size: var(--vpp-text-base);
}

/* ── F-41: Embedded order-detail grid ────────────────────────────
   Replaces the inline `Style="border: none !important; box-shadow: none !important; padding: 0;"`
   that lived on Tab_Orders.razor's inner RadzenDataGrid. The descendant
   selector (.vpp-data-card > grid) has specificity (0,2,0) which beats
   Radzen's single-class rules on .rz-data-grid (0,1,0) without !important. */
.vpp-data-card .vpp-order-grid,
.vpp-order-grid.vpp-order-grid-embedded {
    border: none;
    box-shadow: none;
    padding: 0;
}

.vpp-data-card-grid-shell {
    padding: 0;
    overflow: hidden;
    cursor: default;
}

.vpp-data-card-grid-shell .vpp-data-card-header {
    padding: var(--vpp-space-5) var(--vpp-space-5) var(--vpp-space-3);
    margin-bottom: 0;
}

.vpp-data-card.vpp-datagrid {
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    box-shadow: var(--vpp-shadow-xs);
    cursor: default;
}

.vpp-data-card.vpp-datagrid:hover {
    border-color: var(--vpp-border-default);
    box-shadow: var(--vpp-shadow-xs);
}

.vpp-order-grid.rz-datatable,
.vpp-order-grid.rz-data-grid,
.vpp-wizard-panel-card .rz-datatable,
.vpp-wizard-panel-card .rz-data-grid {
    --vpp-grid-cell-padding-y: 0.35rem;
    --vpp-grid-cell-padding-x: 0.5rem;
    --vpp-grid-filter-space: 1.45rem;
    --vpp-grid-expander-width: 32px;
    --vpp-grid-min-width: 1080px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.vpp-order-grid.vpp-order-grid-embedded,
.vpp-expand-detail > .vpp-order-grid {
    --vpp-grid-min-width: 840px;
}

.vpp-order-grid .rz-data-grid-data,
.vpp-order-grid .rz-datatable-scrollable-header,
.vpp-order-grid .rz-datatable-scrollable-body,
.vpp-order-grid .rz-datatable-scrollable-wrapper,
.vpp-order-grid .rz-datatable-tablewrapper,
.vpp-order-grid .rz-paginator,
.vpp-order-grid .rz-pager,
.vpp-wizard-panel-card .rz-data-grid-data,
.vpp-wizard-panel-card .rz-datatable-scrollable-header,
.vpp-wizard-panel-card .rz-datatable-scrollable-body,
.vpp-wizard-panel-card .rz-datatable-scrollable-wrapper,
.vpp-wizard-panel-card .rz-datatable-tablewrapper,
.vpp-wizard-panel-card .rz-paginator,
.vpp-wizard-panel-card .rz-pager {
    background: transparent;
    box-shadow: none;
    outline: none;
    border: 0;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-gutter: stable;
}

.vpp-order-grid .rz-grid-table,
.vpp-wizard-panel-card .rz-grid-table {
    border-spacing: 0;
    table-layout: fixed !important;
    min-width: var(--vpp-grid-min-width);
    width: 100% !important;
}

.vpp-order-grid .rz-cell-data,
.vpp-wizard-panel-card .rz-cell-data {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpp-order-grid .rz-grid-table thead th,
.vpp-wizard-panel-card .rz-grid-table thead th {
    background: var(--vpp-bg-surface);
    border-bottom-color: var(--vpp-border-default);
    padding: 0 !important;
}

.vpp-order-grid .rz-grid-table thead th > div:not(.rz-cell-filter),
.vpp-wizard-panel-card .rz-grid-table thead th > div:not(.rz-cell-filter) {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: var(--vpp-grid-cell-padding-y) var(--vpp-grid-cell-padding-x) !important;
    position: relative;
}

.vpp-order-grid .rz-grid-table thead th:has(.rz-grid-filter-icon) > div:not(.rz-cell-filter) {
    padding-inline-end: calc(var(--vpp-grid-cell-padding-x) + var(--vpp-grid-filter-space)) !important;
}

.vpp-order-grid .rz-grid-table thead th.rz-text-align-center:has(.rz-grid-filter-icon) > div:not(.rz-cell-filter) {
    padding-inline-start: calc(var(--vpp-grid-cell-padding-x) + var(--vpp-grid-filter-space)) !important;
}

.vpp-order-grid .rz-grid-table thead th:not(:last-child),
.vpp-wizard-panel-card .rz-grid-table thead th:not(:last-child) {
    border-inline-end: none;
}

.vpp-order-grid .rz-grid-table thead th .rz-column-drag,
.vpp-order-grid .rz-grid-table thead th .rz-column-resizer {
    display: none;
}

.vpp-order-grid .rz-grid-table thead th .rz-column-title {
    min-width: 0;
    padding-inline: 0 !important;
}

.vpp-order-grid .rz-grid-table thead th .rz-sortable-column-icon.rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) {
    display: none;
}

.vpp-order-grid .rz-grid-table thead th .rz-grid-filter-icon {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.72;
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    margin: 0;
    font-size: 1rem;
}

.vpp-order-grid .rz-grid-table thead th .rz-grid-filter-icon:hover,
.vpp-order-grid .rz-grid-table thead th .rz-grid-filter-icon.rz-state-active {
    opacity: 1;
    color: var(--vpp-primary-600);
}

.vpp-order-grid .rz-cell-filter,
.vpp-wizard-panel-card .rz-cell-filter {
    display: none !important;
}

/* Keep shared VPP grids visually consistent when header text and cell data
   are meant to follow the same left/center/right alignment. */
.vpp-order-grid .rz-grid-table thead th.rz-text-align-left .rz-column-title,
.vpp-wizard-panel-card .rz-grid-table thead th.rz-text-align-left .rz-column-title {
    justify-content: flex-start;
    text-align: left;
}

.vpp-order-grid .rz-grid-table thead th.rz-text-align-center .rz-column-title,
.vpp-wizard-panel-card .rz-grid-table thead th.rz-text-align-center .rz-column-title {
    justify-content: center;
    text-align: center;
}

.vpp-order-grid .rz-grid-table thead th.rz-text-align-right .rz-column-title,
.vpp-wizard-panel-card .rz-grid-table thead th.rz-text-align-right .rz-column-title {
    justify-content: flex-end;
    text-align: right;
}

.vpp-order-grid .rz-grid-table td,
.vpp-wizard-panel-card .rz-grid-table td {
    border-bottom-color: var(--vpp-border-default);
    padding: var(--vpp-grid-cell-padding-y) var(--vpp-grid-cell-padding-x) !important;
    vertical-align: middle;
}

.vpp-order-grid .rz-grid-table th.rz-col-icon,
.vpp-order-grid .rz-grid-table td.rz-col-icon,
.vpp-wizard-panel-card .rz-grid-table th.rz-col-icon,
.vpp-wizard-panel-card .rz-grid-table td.rz-col-icon {
    width: var(--vpp-grid-expander-width) !important;
    min-width: var(--vpp-grid-expander-width) !important;
    max-width: var(--vpp-grid-expander-width) !important;
    padding-inline: 0 !important;
    text-align: center;
}

.vpp-order-grid .rz-grid-table th.rz-col-icon > div:not(.rz-cell-filter),
.vpp-order-grid .rz-grid-table td.rz-col-icon .rz-cell-data,
.vpp-wizard-panel-card .rz-grid-table th.rz-col-icon > div:not(.rz-cell-filter),
.vpp-wizard-panel-card .rz-grid-table td.rz-col-icon .rz-cell-data {
    padding-inline: 0 !important;
    text-align: center;
}

.vpp-order-grid .rz-grid-table td.rz-text-align-left,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-left,
.vpp-order-grid .rz-grid-table td.rz-text-align-left .rz-cell-data,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-left .rz-cell-data {
    text-align: left;
}

.vpp-order-grid .rz-grid-table td.rz-text-align-center,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-center,
.vpp-order-grid .rz-grid-table td.rz-text-align-center .rz-cell-data,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-center .rz-cell-data {
    text-align: center;
}

.vpp-order-grid .rz-grid-table td.rz-text-align-right,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-right,
.vpp-order-grid .rz-grid-table td.rz-text-align-right .rz-cell-data,
.vpp-wizard-panel-card .rz-grid-table td.rz-text-align-right .rz-cell-data {
    text-align: right;
}

.vpp-order-code-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--vpp-space-2);
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.vpp-order-code-cell .vpp-order-code-link {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.35;
}

.vpp-order-code-cell .vpp-order-code-link:focus-visible {
    outline: 2px solid var(--vpp-border-focus);
    outline-offset: 2px;
    border-radius: var(--vpp-radius-sm);
}

.vpp-order-code-cell .rz-button,
.vpp-order-code-cell .rz-badge {
    flex: 0 0 auto;
}

.vpp-order-code-popover {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + var(--vpp-space-1));
    z-index: 20;
    align-items: center;
    gap: var(--vpp-space-2);
    width: max-content;
    max-width: min(42rem, calc(100vw - 8rem));
    padding: var(--vpp-space-2) var(--vpp-space-3);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: var(--vpp-bg-elevated);
    box-shadow: var(--vpp-shadow-md);
    color: var(--vpp-text-primary);
}

.vpp-order-grid .rz-grid-table tbody > tr:nth-last-child(-n + 2) .vpp-order-code-popover {
    top: auto;
    bottom: calc(100% + var(--vpp-space-1));
}

@media (max-width: 768px) {
    .vpp-order-code-popover {
        max-width: calc(100vw - 2rem);
    }
}

.vpp-order-code-popover-text {
    min-width: 0;
    font-family: var(--vpp-font-mono);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-medium);
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    user-select: all;
}

.vpp-order-code-popover .rz-button {
    flex: 0 0 auto;
    color: var(--vpp-text-link) !important;
    opacity: 1;
}

.vpp-order-code-cell.is-open .vpp-order-code-popover {
    display: flex;
}

.vpp-order-grid .rz-grid-table tr:has(.vpp-order-code-cell.is-open) {
    position: relative;
    z-index: 3;
}

.vpp-data-card:has(.vpp-order-code-cell.is-open) {
    position: relative;
    z-index: 3;
}

.vpp-order-grid .rz-grid-table td:has(.vpp-order-code-cell),
.vpp-order-grid .rz-grid-table td:has(.vpp-order-code-cell) .rz-cell-data {
    overflow: visible;
}

.vpp-order-grid .rz-grid-table td:not(:last-child),
.vpp-wizard-panel-card .rz-grid-table td:not(:last-child) {
    border-inline-end: none;
}

.vpp-order-grid .rz-expanded-row-content > td {
    padding: 0 !important;
    background: var(--vpp-bg-surface) !important;
}

.vpp-expand-detail > .rz-data-grid,
.vpp-expand-detail > .rz-datatable {
    border: 0 !important;
    border-top: 1px solid var(--vpp-border-default) !important;
    border-radius: 0 !important;
    background: var(--vpp-bg-elevated) !important;
    overflow: hidden;
}

.vpp-expand-detail > .rz-data-grid .rz-grid-table,
.vpp-expand-detail > .rz-datatable .rz-grid-table {
    width: 100% !important;
}

.vpp-expand-detail-header {
    display: none;
}

.vpp-order-grid .rz-paginator,
.vpp-wizard-panel-card .rz-paginator {
    border-top: 1px solid var(--vpp-border-default);
    padding: var(--vpp-space-3) var(--vpp-space-4);
}

@media (max-width: 1440px) {
    .vpp-order-grid.rz-datatable,
    .vpp-order-grid.rz-data-grid,
    .vpp-wizard-panel-card .rz-datatable,
    .vpp-wizard-panel-card .rz-data-grid {
        --vpp-grid-cell-padding-x: 0.5rem;
        --vpp-grid-cell-padding-y: 0.32rem;
        --vpp-grid-filter-space: 1.35rem;
    }
}

@media (max-width: 1100px) {
    .vpp-order-grid.rz-datatable,
    .vpp-order-grid.rz-data-grid,
    .vpp-wizard-panel-card .rz-datatable,
    .vpp-wizard-panel-card .rz-data-grid {
        --vpp-grid-cell-padding-x: 0.4rem;
        --vpp-grid-filter-space: 1.25rem;
    }
}