```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM TABLE SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/table.css
   Full Path:
   /public_html/assets/css/components/table.css

   Version: 1.0

   Used For:
   - Product Specifications
   - Product Details
   - Packing Information
   - Export Information
   - Quality Parameters
   - Technical Data
   - Future Dynamic PHP Data

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - badges.css
   ============================================================ */


/* ============================================================
   01. TABLE WRAPPER
   ============================================================ */

.table-wrapper {
    position: relative;

    width: 100%;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 16px 48px rgba(11, 43, 32, 0.055);

    overflow: hidden;
}


/* ============================================================
   02. TABLE RESPONSIVE
   ============================================================ */

.table-responsive {
    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(183, 138, 61, 0.32)
        transparent;
}


/* ============================================================
   03. TABLE SCROLLBAR
   ============================================================ */

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    border-radius:
        var(--radius-pill);

    background:
        rgba(183, 138, 61, 0.32);
}


/* ============================================================
   04. BASE TABLE
   ============================================================ */

.table {
    width: 100%;

    min-width: 680px;

    margin: 0;

    border-collapse: separate;

    border-spacing: 0;

    color: var(--text-body);

    background: transparent;

    font-family: var(--font-ui);

    font-size: 0.62rem;

    line-height: 1.6;
}


/* ============================================================
   05. TABLE CAPTION
   ============================================================ */

.table caption {
    padding:
        var(--space-4)
        var(--space-5);

    color: var(--text-muted);

    background:
        var(--bg-soft);

    font-size: 0.54rem;

    font-weight: var(--font-medium);

    text-align: left;

    caption-side: bottom;
}


/* ============================================================
   06. TABLE HEAD
   ============================================================ */

.table thead {
    position: relative;

    z-index: 2;
}


/* ============================================================
   07. TABLE HEAD ROW
   ============================================================ */

.table thead tr {
    background:
        linear-gradient(
            135deg,
            var(--color-primary-deep),
            var(--color-primary)
        );
}


/* ============================================================
   08. TABLE HEAD CELL
   ============================================================ */

.table thead th {
    position: relative;

    padding:
        17px
        20px;

    border: 0;

    border-right:
        1px solid rgba(255, 255, 255, 0.07);

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    line-height: 1.4;

    letter-spacing: 0.075em;

    text-align: left;

    text-transform: uppercase;

    vertical-align: middle;

    white-space: nowrap;
}


/* ============================================================
   09. LAST HEAD CELL
   ============================================================ */

.table thead th:last-child {
    border-right: 0;
}


/* ============================================================
   10. GOLD HEAD ACCENT
   ============================================================ */

.table thead::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    background:
        var(--gradient-gold);

    pointer-events: none;
}


/* ============================================================
   11. TABLE BODY ROW
   ============================================================ */

.table tbody tr {
    background:
        rgba(255, 255, 255, 0.94);

    transition:
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   12. TABLE BODY ROW HOVER
   ============================================================ */

.table-hover tbody tr:hover {
    background:
        rgba(183, 138, 61, 0.045);

    box-shadow:
        inset 3px 0 0 var(--color-secondary);
}


/* ============================================================
   13. TABLE BODY CELL
   ============================================================ */

.table tbody td,
.table tbody th {
    padding:
        16px
        20px;

    border: 0;

    border-bottom:
        1px solid var(--border-light);

    color: var(--text-body);

    text-align: left;

    vertical-align: middle;
}


/* ============================================================
   14. BODY HEADER CELL
   ============================================================ */

.table tbody th {
    color: var(--color-primary-deep);

    font-weight: var(--font-semibold);
}


/* ============================================================
   15. LAST BODY ROW
   ============================================================ */

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: 0;
}


/* ============================================================
   16. TABLE FOOT
   ============================================================ */

.table tfoot {
    background:
        var(--bg-soft);
}


/* ============================================================
   17. TABLE FOOT CELL
   ============================================================ */

.table tfoot td,
.table tfoot th {
    padding:
        16px
        20px;

    border-top:
        1px solid var(--border-light);

    color: var(--color-primary-deep);

    font-weight: var(--font-semibold);

    vertical-align: middle;
}


/* ============================================================
   18. STRIPED TABLE
   ============================================================ */

.table-striped
tbody tr:nth-child(even) {
    background:
        rgba(11, 43, 32, 0.022);
}


/* ============================================================
   19. STRIPED TABLE HOVER
   ============================================================ */

.table-striped.table-hover
tbody tr:hover {
    background:
        rgba(183, 138, 61, 0.055);
}


/* ============================================================
   20. BORDERED TABLE
   ============================================================ */

.table-bordered
th,
.table-bordered
td {
    border-right:
        1px solid var(--border-light);
}


/* ============================================================
   21. BORDERED LAST CELL
   ============================================================ */

.table-bordered
tr > *:last-child {
    border-right: 0;
}


/* ============================================================
   22. BORDERLESS TABLE
   ============================================================ */

.table-borderless
tbody td,

.table-borderless
tbody th,

.table-borderless
tfoot td,

.table-borderless
tfoot th {
    border: 0;
}


/* ============================================================
   23. COMPACT TABLE
   ============================================================ */

.table-compact
thead th {
    padding:
        12px
        15px;
}

.table-compact
tbody td,
.table-compact
tbody th {
    padding:
        12px
        15px;
}


/* ============================================================
   24. LARGE TABLE
   ============================================================ */

.table-lg
thead th {
    padding:
        20px
        24px;
}

.table-lg
tbody td,
.table-lg
tbody th {
    padding:
        20px
        24px;
}


/* ============================================================
   25. TABLE CELL TITLE
   ============================================================ */

.table-cell-title {
    display: block;

    color: var(--color-primary-deep);

    font-family: var(--font-ui);

    font-size: 0.62rem;

    font-weight: var(--font-semibold);

    line-height: 1.45;
}


/* ============================================================
   26. TABLE CELL SUBTITLE
   ============================================================ */

.table-cell-subtitle {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 0.49rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   27. TABLE CELL ICON
   ============================================================ */

.table-cell-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin-right:
        var(--space-2);

    border:
        1px solid var(--border-gold);

    border-radius:
        10px;

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    vertical-align: middle;
}


/* ============================================================
   28. TABLE CELL WITH ICON
   ============================================================ */

.table-cell-with-icon {
    display: flex;

    align-items: center;

    gap: var(--space-3);
}


/* ============================================================
   29. TABLE VALUE
   ============================================================ */

.table-value {
    color: var(--color-primary-deep);

    font-weight: var(--font-semibold);
}


/* ============================================================
   30. TABLE MUTED VALUE
   ============================================================ */

.table-value-muted {
    color: var(--text-muted);
}


/* ============================================================
   31. TABLE GOLD VALUE
   ============================================================ */

.table-value-gold {
    color: var(--color-secondary-dark);

    font-weight: var(--font-bold);
}


/* ============================================================
   32. TABLE STATUS
   ============================================================ */

.table-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 27px;

    padding:
        0
        10px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    color: var(--text-muted);

    background:
        var(--bg-soft);

    font-size: 0.47rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.04em;

    white-space: nowrap;
}


/* ============================================================
   33. STATUS DOT
   ============================================================ */

.table-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius:
        var(--radius-circle);

    background: currentColor;
}


/* ============================================================
   34. STATUS SUCCESS
   ============================================================ */

.table-status-success {
    color: #17633b;

    border-color:
        rgba(23, 99, 59, 0.14);

    background:
        rgba(23, 99, 59, 0.055);
}


/* ============================================================
   35. STATUS GOLD
   ============================================================ */

.table-status-gold {
    color: var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   36. STATUS WARNING
   ============================================================ */

.table-status-warning {
    color: #8a641c;

    border-color:
        rgba(138, 100, 28, 0.16);

    background:
        rgba(183, 138, 61, 0.07);
}


/* ============================================================
   37. STATUS DANGER
   ============================================================ */

.table-status-danger {
    color: #a13b3b;

    border-color:
        rgba(161, 59, 59, 0.14);

    background:
        rgba(161, 59, 59, 0.055);
}


/* ============================================================
   38. TABLE ACTIONS
   ============================================================ */

.table-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: var(--space-2);
}


/* ============================================================
   39. TABLE ACTION BUTTON
   ============================================================ */

.table-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border:
        1px solid var(--border-light);

    border-radius:
        10px;

    color: var(--color-primary);

    background:
        #ffffff;

    cursor: pointer;

    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition);
}


/* ============================================================
   40. ACTION HOVER
   ============================================================ */

.table-action:hover {
    color: var(--color-primary-deep);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    transform:
        translateY(-2px);
}


/* ============================================================
   41. TABLE TOOLBAR
   ============================================================ */

.table-toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    padding:
        var(--space-5);

    border-bottom:
        1px solid var(--border-light);

    background:
        rgba(250, 248, 242, 0.55);
}


/* ============================================================
   42. TABLE TOOLBAR CONTENT
   ============================================================ */

.table-toolbar-content {
    min-width: 0;
}


/* ============================================================
   43. TOOLBAR TITLE
   ============================================================ */

.table-toolbar-title {
    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: var(--font-semibold);

    line-height: 1.3;
}


/* ============================================================
   44. TOOLBAR TEXT
   ============================================================ */

.table-toolbar-text {
    margin:
        4px
        0
        0;

    color: var(--text-muted);

    font-size: 0.52rem;

    line-height: 1.5;
}


/* ============================================================
   45. TOOLBAR ACTIONS
   ============================================================ */

.table-toolbar-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2);

    flex: 0 0 auto;
}


/* ============================================================
   46. PRODUCT SPECIFICATION TABLE
   ============================================================ */

.product-spec-table
tbody th {
    width: 34%;

    color: var(--color-primary-deep);

    background:
        rgba(250, 248, 242, 0.60);
}


/* ============================================================
   47. SPECIFICATION VALUE
   ============================================================ */

.product-spec-table
tbody td {
    color: var(--text-body);

    font-weight: var(--font-medium);
}


/* ============================================================
   48. TWO COLUMN SPEC TABLE
   ============================================================ */

.table-spec {
    min-width: 560px;
}


/* ============================================================
   49. TABLE GOLD
   ============================================================ */

.table-gold-wrapper {
    border-color:
        rgba(183, 138, 61, 0.22);

    box-shadow:
        0 18px 50px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   50. GOLD TABLE HEAD
   ============================================================ */

.table-gold
thead tr {
    background:
        linear-gradient(
            120deg,
            #a87930,
            #c99b4f,
            #b78a3d
        );
}


/* ============================================================
   51. GOLD TABLE HEAD TEXT
   ============================================================ */

.table-gold
thead th {
    color: var(--color-primary-deep);

    border-right-color:
        rgba(4, 19, 14, 0.08);
}


/* ============================================================
   52. GOLD TABLE HEAD LINE
   ============================================================ */

.table-gold
thead::after {
    background:
        var(--color-primary-deep);
}


/* ============================================================
   53. DARK TABLE WRAPPER
   ============================================================ */

.table-dark-wrapper {
    border-color:
        rgba(212, 175, 104, 0.12);

    background:
        linear-gradient(
            145deg,
            var(--color-primary-deep),
            var(--color-primary)
        );

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.16);
}


/* ============================================================
   54. DARK TABLE
   ============================================================ */

.table-dark {
    color:
        rgba(255, 255, 255, 0.60);
}


/* ============================================================
   55. DARK TABLE HEAD
   ============================================================ */

.table-dark
thead tr {
    background:
        rgba(255, 255, 255, 0.045);
}


/* ============================================================
   56. DARK HEAD CELL
   ============================================================ */

.table-dark
thead th {
    color: var(--color-secondary-light);

    border-right-color:
        rgba(255, 255, 255, 0.07);
}


/* ============================================================
   57. DARK BODY ROW
   ============================================================ */

.table-dark
tbody tr {
    background:
        transparent;
}


/* ============================================================
   58. DARK BODY CELL
   ============================================================ */

.table-dark
tbody td,
.table-dark
tbody th {
    color:
        rgba(255, 255, 255, 0.62);

    border-bottom-color:
        rgba(255, 255, 255, 0.07);
}


/* ============================================================
   59. DARK BODY HEADER
   ============================================================ */

.table-dark
tbody th {
    color: #ffffff;
}


/* ============================================================
   60. DARK HOVER
   ============================================================ */

.table-dark.table-hover
tbody tr:hover {
    background:
        rgba(212, 175, 104, 0.055);
}


/* ============================================================
   61. DARK CELL TITLE
   ============================================================ */

.table-dark
.table-cell-title,
.table-dark
.table-value {
    color: #ffffff;
}


/* ============================================================
   62. DARK CELL SUBTITLE
   ============================================================ */

.table-dark
.table-cell-subtitle,
.table-dark
.table-value-muted {
    color:
        rgba(255, 255, 255, 0.42);
}


/* ============================================================
   63. DARK FOOT
   ============================================================ */

.table-dark
tfoot {
    background:
        rgba(255, 255, 255, 0.035);
}


/* ============================================================
   64. DARK FOOT CELL
   ============================================================ */

.table-dark
tfoot td,
.table-dark
tfoot th {
    color: #ffffff;

    border-top-color:
        rgba(255, 255, 255, 0.08);
}


/* ============================================================
   65. TABLE EMPTY STATE
   ============================================================ */

.table-empty {
    padding:
        clamp(2.5rem, 6vw, 5rem)
        var(--space-5);

    text-align: center;
}


/* ============================================================
   66. EMPTY ICON
   ============================================================ */

.table-empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom:
        var(--space-4);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 1rem;
}


/* ============================================================
   67. EMPTY TITLE
   ============================================================ */

.table-empty-title {
    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 1.35rem;

    font-weight: var(--font-semibold);
}


/* ============================================================
   68. EMPTY TEXT
   ============================================================ */

.table-empty-text {
    max-width: 420px;

    margin:
        var(--space-3)
        auto
        0;

    color: var(--text-muted);

    font-size: 0.58rem;

    line-height: 1.7;
}


/* ============================================================
   69. TABLE NOTE
   ============================================================ */

.table-note {
    display: flex;

    align-items: flex-start;

    gap: var(--space-3);

    padding:
        var(--space-4)
        var(--space-5);

    border-top:
        1px solid var(--border-light);

    color: var(--text-muted);

    background:
        var(--bg-soft);

    font-size: 0.52rem;

    line-height: 1.65;
}


/* ============================================================
   70. TABLE NOTE ICON
   ============================================================ */

.table-note-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.48rem;
}


/* ============================================================
   71. TEXT ALIGNMENTS
   ============================================================ */

.table .text-center {
    text-align: center;
}

.table .text-right {
    text-align: right;
}

.table .text-left {
    text-align: left;
}


/* ============================================================
   72. VERTICAL ALIGNMENTS
   ============================================================ */

.table .align-top {
    vertical-align: top;
}

.table .align-middle {
    vertical-align: middle;
}

.table .align-bottom {
    vertical-align: bottom;
}


/* ============================================================
   73. NOWRAP
   ============================================================ */

.table-nowrap {
    white-space: nowrap;
}


/* ============================================================
   74. TABLE LINK
   ============================================================ */

.table-link {
    color: var(--color-secondary-dark);

    font-weight: var(--font-semibold);

    text-decoration: none;

    transition:
        color var(--transition);
}

.table-link:hover {
    color: var(--color-primary-deep);

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ============================================================
   75. SORTABLE HEADER
   ============================================================ */

.table-sortable {
    cursor: pointer;

    user-select: none;
}


/* ============================================================
   76. SORT ICON
   ============================================================ */

.table-sort-icon {
    display: inline-flex;

    margin-left: 6px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.45rem;

    vertical-align: middle;
}


/* ============================================================
   77. SORT ACTIVE
   ============================================================ */

.table-sortable.is-active
.table-sort-icon {
    color: var(--color-secondary-light);
}


/* ============================================================
   78. STICKY HEADER
   ============================================================ */

.table-sticky
thead th {
    position: sticky;

    top: 0;

    z-index: 5;
}


/* ============================================================
   79. STICKY FIRST COLUMN
   ============================================================ */

.table-sticky-first
tr > *:first-child {
    position: sticky;

    left: 0;

    z-index: 3;

    background: #ffffff;

    box-shadow:
        1px 0 0 var(--border-light);
}


/* ============================================================
   80. STICKY FIRST HEAD CELL
   ============================================================ */

.table-sticky-first
thead tr > *:first-child {
    z-index: 6;

    background:
        var(--color-primary-deep);
}


/* ============================================================
   81. TABLE FOCUS
   ============================================================ */

.table-action:focus-visible,
.table-link:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   82. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .table {
        min-width: 640px;
    }

    .table-toolbar {
        align-items: flex-start;
    }

}


/* ============================================================
   83. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .table-wrapper {
        border-radius:
            var(--radius-lg);
    }

    .table {
        min-width: 620px;

        font-size: 0.59rem;
    }

    .table thead th {
        padding:
            14px
            16px;

        font-size: 0.49rem;
    }

    .table tbody td,
    .table tbody th,
    .table tfoot td,
    .table tfoot th {
        padding:
            14px
            16px;
    }

    .table-toolbar {
        align-items: stretch;

        flex-direction: column;

        padding:
            var(--space-4);
    }

    .table-toolbar-actions {
        width: 100%;
    }

}


/* ============================================================
   84. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .table {
        min-width: 580px;
    }

    .table thead th {
        padding:
            13px
            14px;
    }

    .table tbody td,
    .table tbody th,
    .table tfoot td,
    .table tfoot th {
        padding:
            13px
            14px;
    }

    .table-toolbar-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .table-toolbar-actions
    .btn {
        width: 100%;
    }

    .table-note {
        padding:
            var(--space-4);
    }

}


/* ============================================================
   85. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .table-action:hover {
        transform: none;
    }

}


/* ============================================================
   86. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .table tbody tr,
    .table-action,
    .table-link {
        transition: none;
    }

    .table-action:hover {
        transform: none;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM TABLE SYSTEM
   ============================================================ */
```