/* Override design-system rules that break sticky header/column alignment */
.smart-table-root .smart-table-grid {
    overflow: visible !important;
}
.smart-table-root .smart-table-grid thead {
    position: static !important; /* stick cells, not the whole thead */
}

/* Card shell: never clip the scroll area (main.css negative margins break first column) */
.smart-table-card {
    padding: 0;
    overflow: visible;
}

.smart-table-card > .smart-table-wrap,
.smart-table-card > .history-table-wrap,
.smart-table-card > .table-scroll {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(70vh, 720px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: 0;
    scroll-padding-inline-start: 0;
}

.smart-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-muted, #f9fafb);
}
.smart-table-toolbar-left, .smart-table-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.smart-table-client-search {
    min-width: 200px;
    padding: 0.4rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
}
.smart-table-per-page label { font-size: 0.75rem; margin-right: 0.35rem; color: var(--text-muted); }
.smart-table-per-page select { padding: 0.35rem 0.5rem; border-radius: 6px; border: 1px solid #d1d5db; }

/* Table: separate borders required for sticky columns + header alignment */
.smart-table-grid.data-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

/* Sticky header row — always above body cells */
.smart-table-wrap .smart-table-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--gray-800, #1f2937) !important;
    color: #f8fafc;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

.smart-table-wrap .smart-table-grid thead th[data-sortable="0"] { cursor: default; }
.smart-table-wrap .smart-table-grid thead th.smart-sort-asc::after { content: " ▲"; font-size: 0.65rem; opacity: 0.6; }
.smart-table-wrap .smart-table-grid thead th.smart-sort-desc::after { content: " ▼"; font-size: 0.65rem; opacity: 0.6; }

.smart-table-grid th,
.smart-table-grid td {
    padding: 11px 14px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* First visible column always has safe left inset */
.smart-table-grid thead tr th:first-child,
.smart-table-grid tbody tr td:first-child {
    padding-left: 16px;
}

.smart-col-hidden { display: none !important; }

/*
 * Sticky first column.
 * Body cells must stay BELOW the header (lower z-index), otherwise
 * Return ID / Invoice values paint over the heading row.
 */
.smart-table-grid tbody td.smart-col-pinned {
    position: sticky;
    left: 0;
    top: auto;
    z-index: 1;
    background: #ffffff;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.08);
}

.smart-table-grid thead th.smart-col-pinned {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5; /* corner cell: above header row and body pin */
    background: var(--gray-800, #1f2937) !important;
    color: #f8fafc;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.12);
}

.smart-table-grid tbody tr:nth-child(even) td.smart-col-pinned {
    background: var(--gray-50, #f8fafc);
}

.smart-table-grid tbody tr:hover td.smart-col-pinned,
.smart-table-grid tbody tr.smart-table-row-selectable:hover td.smart-col-pinned,
.smart-table-grid tbody tr.smart-table-row-selected td.smart-col-pinned {
    background: var(--primary-soft, #eff6ff);
}

/* ——— Auto-size important identifier columns (no fixed truncate widths) ——— */
.smart-col-order_id,
.smart-col-return_id,
.smart-col-invoice,
.smart-col-cancellation_id,
.smart-col-bill,
.smart-col-product,
.smart-col-name,
.smart-col-sku,
.smart-col-title {
    min-width: 9rem;
    width: auto;
    max-width: 22rem;
}

.smart-col-customer,
.smart-col-supplier,
.smart-col-entity {
    min-width: 7rem;
    max-width: 18rem;
}

/* Ellipsis + full value on hover via title (JS sets title) */
.smart-col-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22rem;
}

.smart-col-clip .badge,
.smart-col-clip .return-status-pill,
.smart-col-clip .status-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Row selection only — never navigates. Open records via Action buttons. */
.smart-table-row-selectable { cursor: default; }
.smart-table-row-selectable:hover td:not(.smart-col-pinned) {
    background: rgba(37, 99, 235, 0.05);
}
.smart-table-row-selected td:not(.smart-col-pinned) {
    background: rgba(37, 99, 235, 0.12) !important;
}
.smart-table-row-selected td {
    box-shadow: inset 3px 0 0 #2563eb;
}
.smart-table-row:focus,
.smart-table-row-selectable:focus {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.smart-table-row.smart-table-row-hidden { display: none; }

.smart-table-pagination { padding: 0.75rem 1rem; border-top: 1px solid #e5e7eb; }
.dropdown-wrap { position: relative; }
.smart-table-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 120px;
    z-index: 20;
    padding: 0.35rem 0;
}
.smart-table-dropdown a {
    display: block;
    padding: 0.45rem 0.85rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}
.smart-table-dropdown a:hover { background: #f3f4f6; }

.smart-table-column-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.smart-table-column-panel[hidden] { display: none !important; }
.smart-table-column-panel-inner {
    background: #fff;
    border-radius: 12px;
    width: min(360px, 100%);
    max-height: 80vh;
    overflow: auto;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.smart-table-column-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.smart-table-column-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.smart-table-column-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.smart-table-column-list button {
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    font-size: 0.75rem;
}
.smart-table-column-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.smart-table-loading tbody { opacity: 0.5; pointer-events: none; }
.smart-table-actions {
    white-space: nowrap;
    min-width: 6rem;
}
.smart-table-actions .btn, .smart-table-actions a { margin-right: 0.25rem; }

/* Tablet / mobile: no negative bleed; pinned col still works when scrolling */
@media (max-width: 1024px) {
    .smart-table-card > .smart-table-wrap,
    .smart-table-card > .history-table-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .smart-table-grid.data-table {
        min-width: 640px;
    }
}

@media (max-width: 768px) {
    .smart-table-toolbar { flex-direction: column; align-items: stretch; }
    .smart-table-client-search { width: 100%; min-width: 0; }

    .smart-table-card > .smart-table-wrap {
        max-height: none;
    }

    /* Mobile card mode: disable sticky pin (table-responsive.js) */
    .smart-table-wrap.table-mobile-cards .smart-table-grid th.smart-col-pinned,
    .smart-table-wrap.table-mobile-cards .smart-table-grid td.smart-col-pinned {
        position: static;
        box-shadow: none;
    }
}