/* CL1: Soft mint *]
tr.odd.CL1_0 td.sorting_1 {
  background: #d8ede3;
  background: linear-gradient(to bottom, #d8ede3 0%, #eaf7f0 100%);
}
tr.even.CL1 td.sorting_1 {
  background: #eaf7f0;
  background: linear-gradient(to bottom, #eaf7f0 0%, #d8ede3 100%);
}

/* CL2: Pale gold *]
tr.odd.CL2 td.sorting_1 {
  background: #f6f2d5;
  background: linear-gradient(to bottom, #f6f2d5 0%, #fff4b8 100%);
}
tr.even.CL2_0 td.sorting_1 {
  background: #fff4b8;
  background: linear-gradient(to bottom, #fff4b8 0%, #f6f2d5 100%);
}

/* CL3: Blush rose *]
tr.odd.CL3 td.sorting_1 {
  background: #f5e2e2;
  background: linear-gradient(to bottom, #f5e2e2 0%, #ffd6d6 100%);
}
tr.even.CL3 td.sorting_1 {
  background: #ffd6d6;
  background: linear-gradient(to bottom, #ffd6d6 0%, #f5e2e2 100%);
}

/* CL4: Soft lime *]
tr.odd.CL4 td.sorting_1 {
  background: #d8f5d8;
  background: linear-gradient(to bottom, #d8f5d8 0%, #c6f8c6 100%);
}
tr.even.CL4 td.sorting_1 {
  background: #c6f8c6;
  background: linear-gradient(to bottom, #c6f8c6 0%, #d8f5d8 100%);
}

/* CL5: Muted coral *]
tr.odd.CL5 td.sorting_1 {
  background: #f5dada;
  background: linear-gradient(to bottom, #f5dada 0%, #f7bcbc 100%);
}
tr.even.CL5 td.sorting_1 {
  background: #f7bcbc;
  background: linear-gradient(to bottom, #f7bcbc 0%, #f5dada 100%);
}

/* CL6: Pastel chartreuse *]
tr.odd.CL6 td.sorting_1 {
  background: #f3f9d8;
  background: linear-gradient(to bottom, #f3f9d8 0%, #e2fca2 100%);
}
tr.even.CL6 td.sorting_1 {
  background: #e2fca2;
  background: linear-gradient(to bottom, #e2fca2 0%, #f3f9d8 100%);
}

/* CL7: Misty blue *]
tr.odd.CL7 td.sorting_1 {
  background: #d6e4f2;
  background: linear-gradient(to bottom, #d6e4f2 0%, #b8d0ea 100%);
}
tr.even.CL7 td.sorting_1 {
  background: #b8d0ea;
  background: linear-gradient(to bottom, #b8d0ea 0%, #d6e4f2 100%);
}

/* CL8: Sage green *]
tr.odd.CL8 td.sorting_1 {
  background: #d8e8d8;
  background: linear-gradient(to bottom, #d8e8d8 0%, #bcd9bc 100%);
}
tr.even.CL8 td.sorting_1 {
  background: #bcd9bc;
  background: linear-gradient(to bottom, #bcd9bc 0%, #d8e8d8 100%);
}

/* CL9: Cool teal *]
tr.odd.CL9 td.sorting_1 {
  background: #d6edf7;
  background: linear-gradient(to bottom, #d6edf7 0%, #a8d4ea 100%);
}
tr.even.CL9 td.sorting_1 {
  background: #a8d4ea;
  background: linear-gradient(to bottom, #a8d4ea 0%, #d6edf7 100%);
}

/* CL10: Soft amber *]
tr.odd.CL10 td.sorting_1 {
  background: #f9f0d6;
  background: linear-gradient(to bottom, #f9f0d6 0%, #ffe0a8 100%);
}
tr.even.CL10 td.sorting_1 {
  background: #ffe0a8;
  background: linear-gradient(to bottom, #ffe0a8 0%, #f9f0d6 100%);
}

/* CL11: Lavender haze *]
tr.odd.CL11 td.sorting_1 {
  background: #e6dcf5;
  background: linear-gradient(to bottom, #e6dcf5 0%, #c8b3f0 100%);
}
tr.even.CL11 td.sorting_1 {
  background: #c8b3f0;
  background: linear-gradient(to bottom, #c8b3f0 0%, #e6dcf5 100%);
}
/* CL1: Soft mint *]
table.display tr.odd.CL1 {
  background: #e6f2ec;
  background: linear-gradient(to bottom, #e6f2ec 0%, #f4fbf7 100%);
}
table.display tr.even.CL1 {
  background: #f4fbf7;
  background: linear-gradient(to bottom, #f4fbf7 0%, #f0f0f0 100%);
}

/* CL2: Pale gold *]
table.display tr.odd.CL2 {
  background: #f5f3e6;
  background: linear-gradient(to bottom, #f5f3e6 0%, #fff9cc 100%);
}
table.display tr.even.CL2 {
  background: #fff9cc;
  background: linear-gradient(to bottom, #fff9cc 0%, #f0f0f0 100%);
}

/* CL3: Blush rose *]
table.display tr.odd.CL3 {
  background: #f3e6e6;
  background: linear-gradient(to bottom, #f3e6e6 0%, #ffecec 100%);
}
table.display tr.even.CL3 {
  background: #ffecec;
  background: linear-gradient(to bottom, #ffecec 0%, #f0f0f0 100%);
}

/* CL4: Soft lime *]
table.display tr.odd.CL4 {
  background: #e6f3e6;
  background: linear-gradient(to bottom, #e6f3e6 0%, #d6fcd6 100%);
}
table.display tr.even.CL4 {
  background: #d6fcd6;
  background: linear-gradient(to bottom, #d6fcd6 0%, #f0f0f0 100%);
}

/* CL5: Muted coral *]
table.display tr.odd.CL5 {
  background: #f2e6e6;
  background: linear-gradient(to bottom, #f2e6e6 0%, #f9c2c2 100%);
}
table.display tr.even.CL5 {
  background: #f9c2c2;
  background: linear-gradient(to bottom, #f9c2c2 0%, #f0f0f0 100%);
}

/* CL6: Pastel chartreuse *]
table.display tr.odd.CL6 {
  background: #f3f8e6;
  background: linear-gradient(to bottom, #f3f8e6 0%, #eafcae 100%);
}
table.display tr.even.CL6 {
  background: #eafcae;
  background: linear-gradient(to bottom, #eafcae 0%, #f0f0f0 100%);
}

/* CL7: Misty blue *]
table.display tr.odd.CL7 {
  background: #e6edf5;
  background: linear-gradient(to bottom, #e6edf5 0%, #cddff0 100%);
}
table.display tr.even.CL7_0 {
  background: #cddff0;
  background: linear-gradient(to bottom, #cddff0 0%, #f0f0f0 100%);
}

/* CL8: Sage green *]
table.display tr.odd.CL8 {
  background: #e6f0e6;
  background: linear-gradient(to bottom, #e6f0e6 0%, #cfe5cf 100%);
}
table.display tr.even.CL8 {
  background: #cfe5cf;
  background: linear-gradient(to bottom, #cfe5cf 0%, #f0f0f0 100%);
}

/* CL9: Cool teal *]
table.display tr.odd.CL9 {
  background: #e6f2f7;
  background: linear-gradient(to bottom, #e6f2f7 0%, #b3ddee 100%);
}
table.display tr.even.CL9 {
  background: #b3ddee;
  background: linear-gradient(to bottom, #b3ddee 0%, #f0f0f0 100%);
}

/* CL10: Soft amber *]
table.display tr.odd.CL10 {
  background: #f9f3e6;
  background: linear-gradient(to bottom, #f9f3e6 0%, #ffe5b3 100%);
}
table.display tr.even.CL10 {
  background: #ffe5b3;
  background: linear-gradient(to bottom, #ffe5b3 0%, #f0f0f0 100%);
}

/* CL11: Lavender haze *]
table.display tr.odd.CL11 {
  background: #ede6f5;
  background: linear-gradient(to bottom, #ede6f5 0%, #d6c2f0 100%);
}
table.display tr.even.CL11 {
  background: #d6c2f0;
  background: linear-gradient(to bottom, #d6c2f0 0%, #f0f0f0 100%);
}

/* Modern hover effect for all table cells *]
table.display tr:hover td {
  background: linear-gradient(to bottom, #f0f4f0 0%, #e0e0e0 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Sorting cell hover effect *]
table.display td.sorting_1:hover {
  background: linear-gradient(to bottom, #e0eaf5 0%, #d0dbe8 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}*]
/* ============================================================
   1) COLOR DEFINITIONS (ODD / EVEN)
   ============================================================ */

table.display tr.CL1  { --odd-start:#e6f2ec; --odd-end:#f4fbf7; --even-start:#f4fbf7; --even-end:#e6f2ec; --odd-bg-start:#e9ffd44f; --even-bg-start:#c6f6db4f; }
table.display tr.CL2  { --odd-start:#f5f3e6; --odd-end:#fff9cc; --even-start:#fff9cc; --even-end:#f5f3e6; --odd-bg-start:#f5f3e650; --even-bg-start:#fff9cc50; }
table.display tr.CL3  { --odd-start:#f3e6e6; --odd-end:#ffecec; --even-start:#ffecec; --even-end:#f3e6e6; --odd-bg-start:#f3e6e650; --even-bg-start:#fdd3d34f; }
table.display tr.CL4  { --odd-start:#e6f3e6; --odd-end:#d6fcd6; --even-start:#d6fcd6; --even-end:#e6f3e6; --odd-bg-start:#e6ffe64f; --even-bg-start:#acf4ac4f; }
table.display tr.CL5  { --odd-start:#f2e6e6; --odd-end:#f9c2c2; --even-start:#f9c2c2; --even-end:#f2e6e6; --odd-bg-start:#f2e6e650; --even-bg-start:#f9c2c250; }
table.display tr.CL6  { --odd-start:#f3f8e6; --odd-end:#eafcae; --even-start:#eafcae; --even-end:#f3f8e6; --odd-bg-start:#f3f8e650; --even-bg-start:#eafcae50; }
table.display tr.CL7  { --odd-start:#e6edf5; --odd-end:#cddff0; --even-start:#cddff0; --even-end:#e6edf5; --odd-bg-start:#edf4fbc7; --even-bg-start:#aaccec4f; }
table.display tr.CL8  { --odd-start:#e6f0e6; --odd-end:#cfe5cf; --even-start:#cfe5cf; --even-end:#e6f0e6; --odd-bg-start:#e6f0e650; --even-bg-start:#cfe5cf50; }
table.display tr.CL9  { --odd-start:#e6f2f7; --odd-end:#b3ddee; --even-start:#b3ddee; --even-end:#e6f2f7; --odd-bg-start:#e6f2f750; --even-bg-start:#b3ddee50; }
table.display tr.CL10 { --odd-start:#f9f3e6; --odd-end:#ffe5b3; --even-start:#ffe5b3; --even-end:#f9f3e6; --odd-bg-start:#f9f3e650; --even-bg-start:#ffe5b350; }
table.display tr.CL11 { --odd-start:#ede6f5; --odd-end:#d6c2f0; --even-start:#d6c2f0; --even-end:#ede6f5; --odd-bg-start:#ede6f550; --even-bg-start:#d6c2f050; }

/* Border thickness */
:root {
  --cl-border: 3px;
}

/* ============================================================
   2) BASE RESET
   ============================================================ */

table.display tbody tr[class*="CL"] td {
  background-color: transparent !important;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/* ============================================================
   3) VARIABLE SELECTION (ODD / EVEN)
   ============================================================ */

table.display tbody tr.odd[class*="CL"] {
  --cl-start: var(--odd-start);
  --cl-end:   var(--odd-end);
}

table.display tbody tr.even[class*="CL"] {
  --cl-start: var(--even-start);
  --cl-end:   var(--even-end);
}

/* ============================================================
   4) TOP + BOTTOM BORDERS (ALL CELLS)
   ============================================================ */

table.display tbody tr[class*="CL"] td {
  background:
    /* bottom gradient */
    linear-gradient(90deg, var(--cl-end), var(--cl-end))
      bottom / 100% var(--cl-border) no-repeat,

    /* top solid */
    linear-gradient(90deg, var(--cl-start), var(--cl-start))
      top / 100% var(--cl-border) no-repeat;
}

/* ============================================================
   5) LEFT BORDER (FIRST CELL)
   ============================================================ */

table.display tbody tr[class*="CL"] td:first-child {
  background:
    /* left vertical gradient */
    linear-gradient(180deg, var(--cl-start), var(--cl-end))
      left / var(--cl-border) 100% no-repeat,

    /* bottom */
    linear-gradient(90deg, var(--cl-end), var(--cl-end))
      bottom / 100% var(--cl-border) no-repeat,

    /* top */
    linear-gradient(90deg, var(--cl-start), var(--cl-start))
      top / 100% var(--cl-border) no-repeat;
}

/* ============================================================
   6) RIGHT BORDER (LAST CELL)
   ============================================================ */

table.display tbody tr[class*="CL"] td:last-child {
  background:
    /* right vertical gradient */
    linear-gradient(180deg, var(--cl-start), var(--cl-end))
      right / var(--cl-border) 100% no-repeat,

    /* bottom */
    linear-gradient(90deg, var(--cl-end), var(--cl-end))
      bottom / 100% var(--cl-border) no-repeat,

    /* top */
    linear-gradient(90deg, var(--cl-start), var(--cl-start))
      top / 100% var(--cl-border) no-repeat;
}

/* ============================================================
   7) ROW BACKGROUND FILL (SUBTLE)
   ============================================================ */

table.display tbody tr.odd[class*="CL"] {
  background: linear-gradient(to bottom, var(--odd-bg-start), var(--odd-bg-start));
}

table.display tbody tr.even[class*="CL"] {
  background: linear-gradient(to bottom, var(--even-bg-start), var(--even-bg-start));
}

/* ============================================================
   8) HOVER (SAFE)
   ============================================================ */

table.display tbody tr[class*="CL"]:hover td {
  background-color: rgba(0,0,0,0.03);
}
table.dataTable {
    border-collapse: collapse !important; /* merge cell edges */
    background-color: inherit;            /* unify background */
}
/*
table.dataTable td,
table.dataTable th {
    border: none !important;             
    box-shadow: none !important;         
}*/