/* =====================================================================
   Limra ERP — Enterprise DataTable System (tables.css)
   Dynamics 365 / SAP Fiori / Oracle Fusion / Odoo Enterprise grade.
   - Applies AUTOMATICALLY to `table.quickgrid` (250+ pages, zero
     markup changes) and to hand-written `table.limra-table`.
   - typography.css owns FONTS & TEXT only; this file owns TABLE
     structure, spacing, states and components. No selector is
     defined in both files.
   - Colours come from css/tokens.css (--table-*, --text-*) and
     follow [data-theme="dark"] / [data-bs-theme="dark"] automatically.
   - Bootstrap 5 is never modified; overrides win by specificity and
     load order (this file loads after tokens.css, before the scoped
     bundle). No `!important` except inside the reduced-motion guard.
   Load order (Components/App.razor): … -> tokens.css ->
   typography.css -> tables.css -> scoped bundle.
   ===================================================================== */

/* ============ 1. Surface token (spec) ============ */
:root {
    --surface-primary: #ffffff;
}

:is([data-theme="dark"], [data-bs-theme="dark"]) {
    --surface-primary: #17191d;
}

/* ============ 2. Base grid — auto-applied ============ */
table.quickgrid,
table.limra-table {
    border-color: var(--table-border);
    background-color: var(--table-bg);
}

/* Consistent heights: header 52px / rows 48px (min-height semantics).
   Dense but comfortable. */
table.quickgrid > thead > tr,
table.limra-table > thead > tr {
    height: 52px;
}

table.quickgrid > tbody > tr,
table.limra-table > tbody > tr {
    height: 48px;
    transition: background-color .15s ease;
}

table.quickgrid > thead > tr > th,
table.quickgrid.table-sm > thead > tr > th,
table.limra-table > thead > tr > th {
    font-size: var(--table-header-size);
    font-weight: var(--table-header-weight);
    line-height: var(--lh-normal);
    color: var(--text-heading);
    white-space: nowrap;
    vertical-align: middle;
    padding: 10px;
    border-color: var(--table-border);
}

table.quickgrid > tbody > tr > td,
table.quickgrid.table-sm > tbody > tr > td,
table.limra-table > tbody > tr > td {
    font-size: var(--table-font-size);
    font-weight: var(--table-font-weight);
    line-height: var(--lh-normal);
    vertical-align: middle;
    padding: 9px 10px;
    border-color: var(--table-border);
    overflow-wrap: break-word;
}

/* Selected-row hook (opt-in: tr.selected). */
table.quickgrid > tbody > tr.selected,
table.limra-table > tbody > tr.selected {
    background: rgba(37, 99, 235, .08);
}

/* Table typeface follows the UI language (Arabic: Cairo). */
html[lang="ar"] table.quickgrid thead th,
html[dir="rtl"] table.quickgrid thead th,
html[data-dir="rtl"] table.quickgrid thead th,
html[lang="ar"] table.quickgrid tbody td,
html[dir="rtl"] table.quickgrid tbody td,
html[data-dir="rtl"] table.quickgrid tbody td,
html[lang="ar"] table.limra-table thead th,
html[dir="rtl"] table.limra-table thead th,
html[data-dir="rtl"] table.limra-table thead th,
html[lang="ar"] table.limra-table tbody td,
html[dir="rtl"] table.limra-table tbody td,
html[data-dir="rtl"] table.limra-table tbody td {
    font-family: var(--font-ar);
}

html[lang="en"] table.quickgrid thead th,
html[dir="ltr"] table.quickgrid thead th,
html[data-dir="ltr"] table.quickgrid thead th,
html[lang="en"] table.quickgrid tbody td,
html[dir="ltr"] table.quickgrid tbody td,
html[data-dir="ltr"] table.quickgrid tbody td,
html[lang="en"] table.limra-table thead th,
html[dir="ltr"] table.limra-table thead th,
html[data-dir="ltr"] table.limra-table thead th,
html[lang="en"] table.limra-table tbody td,
html[dir="ltr"] table.limra-table tbody td,
html[data-dir="ltr"] table.limra-table tbody td {
    font-family: var(--font-en);
}

/* ============ 3. Premium grid container (opt-in wrapper) ============
   Usage: <div class="limra-grid"><div class="limra-grid-scroll">
   <QuickGrid class="... limra-table">… — rounds corners, clips the
   table edge and lifts the grid off the page background. */
.limra-grid {
    background: var(--surface-primary);
    border: 1px solid var(--table-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .04),
        0 4px 12px rgba(0, 0, 0, .03);
}

:is([data-theme="dark"], [data-bs-theme="dark"]) .limra-grid {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .35),
        0 4px 12px rgba(0, 0, 0, .25);
}

.limra-grid-scroll {
    overflow-x: auto;
}

.limra-grid table.quickgrid,
.limra-grid table.limra-table {
    margin-bottom: 0;
}

/* ============ 4. Sticky enterprise header ============
   Harmless no-op until an ancestor scrolls; the solid background
   keeps rows from showing through while stuck. */
table.quickgrid > thead > tr > th,
table.limra-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--table-bg);
}

/* ============ 5. Sort indicators ============ */
.quickgrid .sort-indicator,
.limra-table .limra-table-sort-icon {
    font-size: var(--fs-xs);
    opacity: .65;
    margin-inline-start: 6px;
    transition: opacity .15s ease, color .15s ease;
}

/* Active sorted column is highlighted with the brand primary. */
table.quickgrid > thead > tr > th[aria-sort="ascending"] .sort-indicator,
table.quickgrid > thead > tr > th[aria-sort="descending"] .sort-indicator,
table.limra-table > thead > tr > th[aria-sort="ascending"] .limra-table-sort-icon,
table.limra-table > thead > tr > th[aria-sort="descending"] .limra-table-sort-icon {
    color: var(--primary);
    opacity: 1;
}

/* ============ 6. Action columns ============
   TemplateColumns render Edit/Delete <button>s directly, so the
   cell itself is centered via :has() — zero markup changes, and
   older browsers simply keep the previous alignment. */
table.quickgrid > tbody > tr > td:has(> button),
table.limra-table > tbody > tr > td:has(> button) {
    text-align: center;
    white-space: nowrap;
}

/* Opt-in group + button for hand-written cells (mirrors the
   existing BtnEditEx/BtnDeleteEx 36px design). */
.limra-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.limra-action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 0;
    transition: transform .15s ease, background-color .15s ease;
}

.limra-action-btn i {
    font-size: var(--fs-base);
}

.limra-action-btn:hover {
    transform: translateY(-1px);
}

/* ============ 7. Financial columns — always Inter ============
   ID / amount / quantity / price / code / barcode / currency /
   reference numbers. Font + tabular figures live on the span so
   they never fight the column Align setting; put the class on the
   <td>/<th> itself to also right-align that column. */
.limra-money,
.limra-number,
.limra-qty {
    font-family: var(--font-en);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

td.limra-money,
td.limra-number,
td.limra-qty,
th.limra-money,
th.limra-number,
th.limra-qty {
    text-align: right;
}

/* ============ 8. GUID rendering — Inter ============
   <span class="limra-guid" title="full value">…</span>
   Native `title` keeps the tooltip; ellipsis keeps the layout. */
.limra-guid {
    font-family: var(--font-code);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: plaintext;
    display: inline-block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* ============ 9. Status badges ============ */
.limra-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    white-space: nowrap;
}

.limra-status-success {
    color: #15803d;
    background: rgba(21, 128, 61, .12);
}

.limra-status-danger {
    color: #b91c1c;
    background: rgba(185, 28, 28, .1);
}

.limra-status-warning {
    color: #b45309;
    background: rgba(180, 83, 9, .12);
}

.limra-status-info {
    color: #1d4ed8;
    background: rgba(29, 78, 216, .1);
}

:is([data-theme="dark"], [data-bs-theme="dark"]) .limra-status-success {
    color: #4ade80;
    background: rgba(74, 222, 128, .14);
}

:is([data-theme="dark"], [data-bs-theme="dark"]) .limra-status-danger {
    color: #f87171;
    background: rgba(248, 113, 113, .14);
}

:is([data-theme="dark"], [data-bs-theme="dark"]) .limra-status-warning {
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

:is([data-theme="dark"], [data-bs-theme="dark"]) .limra-status-info {
    color: #60a5fa;
    background: rgba(96, 165, 250, .14);
}

/* ============ 10. Empty state ============ */
.limra-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.limra-empty-state .limra-empty-icon {
    font-size: 32px;
    opacity: .5;
}

.limra-empty-state .limra-empty-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.limra-empty-state .limra-empty-text {
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
}

/* Loading / empty placeholder rows: visually secondary. */
.limra-table-placeholder {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    opacity: .7;
}

/* ============ 11. Skeleton loading (shimmer) ============ */
.limra-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--table-striped-bg);
    border-radius: 6px;
    min-height: 14px;
    color: transparent;
    user-select: none;
}

.limra-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(148, 163, 184, .25),
        transparent
    );
    animation: limra-shimmer 1.4s ease-in-out infinite;
}

@keyframes limra-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============ 12. Pagination (QuickGrid Paginator) ============ */
.paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.paginator button {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--table-border);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-family: var(--font-en);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.paginator button:hover:not([disabled]) {
    border-color: var(--primary);
    color: var(--primary);
}

.paginator button[disabled] {
    opacity: .45;
    cursor: default;
}

/* ============ 13. Helper column widths (opt-in, per page) ============ */
.limra-col-id { max-width: 240px; }
.limra-col-code { min-width: 120px; }
.limra-col-name { min-width: 150px; }
.limra-col-status { width: 120px; }
.limra-col-actions { width: 90px; }

/* ============ 14. Responsive (< 768px) ============
   Never reflow the table into cards: enforce a minimum width and
   let the page scroll horizontally, keeping type readable. */
@media (max-width: 767.98px) {
    table.quickgrid,
    table.limra-table {
        min-width: 640px;
    }

    table.quickgrid thead th,
    table.quickgrid tbody td,
    table.limra-table thead th,
    table.limra-table tbody td {
        font-size: var(--fs-md);
    }
}

/* ============ 15. Accessibility ============ */
/* Keyboard: visible focus inside grids, paginator and actions. */
table.quickgrid th:focus-visible,
table.quickgrid td:focus-visible,
table.limra-table th:focus-visible,
table.limra-table td:focus-visible,
.limra-action-btn:focus-visible,
.limra-actions button:focus-visible,
.paginator button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Reduced motion: shimmer, transitions and hover animation off.
   Scoped !important is the accepted pattern inside this guard. */
@media (prefers-reduced-motion: reduce) {
    table.quickgrid *,
    table.limra-table *,
    .limra-skeleton::after {
        transition: none !important;
        animation: none !important;
    }
}