/* Import Tabulator Base CSS */
@import url('https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css');

/* ============================================
   Supports both Light and Dark themes
   ============================================ */

/* ===========================================
   LIGHT THEME (Default)
   =========================================== */

/* Main Container */
.tabulator {
    background-color: transparent;
    border: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.1rem;
}

/* Header Styling */
.tabulator .tabulator-header {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #2c3e50;
}

.tabulator .tabulator-header .tabulator-headers {
    margin-left: 0 !important;
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: none;
}

.tabulator .tabulator-header .tabulator-col-content {
    padding: 15px 12px !important;
    display: flex;
    align-items: center;
}

.tabulator .tabulator-header .tabulator-col-title {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Sortable header hover */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: rgb(110 110 110 / 4%) !important;
    cursor: pointer;
}

/* Row Styling */
.tabulator .tabulator-tableholder {
    background: transparent;
}

.tabulator .tabulator-tableholder .tabulator-table {
    background: transparent;
    color: #2c3e50;
}

.tabulator .tabulator-row {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
}

.tabulator .tabulator-row:hover {
    background-color: #f8f9fa;
}

.tabulator .tabulator-row.tabulator-row-even {
    background-color: #fafafa;
}

.tabulator .tabulator-row.tabulator-row-even:hover {
    background-color: #f8f9fa;
}

/* Cell Styling */
.tabulator .tabulator-cell {
    border-right: none;
    padding: 12px;
}

/* Pagination Styling */
.tabulator .tabulator-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 10px 15px;
}

.tabulator .tabulator-footer .tabulator-paginator {
    color: #2c3e50;
    font-size: 0.85rem;
}

.tabulator .tabulator-footer .tabulator-page {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #2c3e50;
    padding: 6px 12px;
    margin: 0 3px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tabulator .tabulator-footer .tabulator-page:hover:not([disabled]) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.tabulator .tabulator-footer .tabulator-page[disabled] {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder */
.tabulator .tabulator-placeholder {
    background: transparent;
    color: #6c757d;
    font-style: italic;
}

/* Success/Danger text colors */
.tabulator .text-success {
    color: #28a745;
}

.tabulator .text-danger {
    color: #dc3545;
}

.tabulator .font-weight-bold {
    font-weight: 700;
}

/* Frozen Columns */
.tabulator .tabulator-header .tabulator-frozen {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #f8f9fa;
}

.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
    border-left: none;
}

.tabulator .tabulator-row .tabulator-cell.tabulator-frozen {
    position: sticky;
    left: 0;
    z-index: 10;
}

.tabulator .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left: none;
}

/* Frozen cell backgrounds - solid colors to prevent scroll glitches */
.tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: #ffffff !important;
}

.tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
    background-color: #fafafa !important;
}

.tabulator-row:hover .tabulator-cell.tabulator-frozen {
    background-color: #f8f9fa !important;
}
.tabulator-row .tabulator-cell:first-child {
    border-left: 10px solid #3e4454;
}
.tabulator-row:nth-child(even) .tabulator-cell:first-child {
    border-left: 10px solid #585e76;
}
/* ===========================================
   DARK THEME
   =========================================== */

[data-theme="dark"] .tabulator,
body.dark-theme .tabulator,
.dark .tabulator,
html[data-skin="dark"] .tabulator,
body[data-skin="dark"] .tabulator {
    background-color: transparent;
}

/* Header */
[data-theme="dark"] .tabulator .tabulator-header,
body.dark-theme .tabulator .tabulator-header,
.dark .tabulator .tabulator-header,
html[data-skin="dark"] .tabulator .tabulator-header,
body[data-skin="dark"] .tabulator .tabulator-header {
    background: #1a1e27;
    border-bottom: 2px solid #3a3e49;
    color: #ecf0f1;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col-title,
body.dark-theme .tabulator .tabulator-header .tabulator-col-title,
.dark .tabulator .tabulator-header .tabulator-col-title,
html[data-skin="dark"] .tabulator .tabulator-header .tabulator-col-title,
body[data-skin="dark"] .tabulator .tabulator-header .tabulator-col-title {
    color: #ecf0f1;
}

/* Sortable header hover - Dark Theme */
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
body.dark-theme .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
.dark .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
html[data-skin="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
body[data-skin="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: rgb(151 151 151 / 17%) !important
}

/* Table */
[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table,
body.dark-theme .tabulator .tabulator-tableholder .tabulator-table,
.dark .tabulator .tabulator-tableholder .tabulator-table,
html[data-skin="dark"] .tabulator .tabulator-tableholder .tabulator-table,
body[data-skin="dark"] .tabulator .tabulator-tableholder .tabulator-table {
    color: #ecf0f1;
}

/* Rows */
[data-theme="dark"] .tabulator .tabulator-row,
body.dark-theme .tabulator .tabulator-row,
.dark .tabulator .tabulator-row,
html[data-skin="dark"] .tabulator .tabulator-row,
body[data-skin="dark"] .tabulator .tabulator-row {
    background-color: #2a2e39;
    border-bottom: 1px solid #3a3e49;
}

[data-theme="dark"] .tabulator .tabulator-row:hover,
body.dark-theme .tabulator .tabulator-row:hover,
.dark .tabulator .tabulator-row:hover,
html[data-skin="dark"] .tabulator .tabulator-row:hover,
body[data-skin="dark"] .tabulator .tabulator-row:hover {
    background-color: #1a1e27;
}

[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even,
body.dark-theme .tabulator .tabulator-row.tabulator-row-even,
.dark .tabulator .tabulator-row.tabulator-row-even,
html[data-skin="dark"] .tabulator .tabulator-row.tabulator-row-even,
body[data-skin="dark"] .tabulator .tabulator-row.tabulator-row-even {
    background-color: #2e323d;
}

[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even:hover,
body.dark-theme .tabulator .tabulator-row.tabulator-row-even:hover,
.dark .tabulator .tabulator-row.tabulator-row-even:hover,
html[data-skin="dark"] .tabulator .tabulator-row.tabulator-row-even:hover,
body[data-skin="dark"] .tabulator .tabulator-row.tabulator-row-even:hover {
    background-color: #1a1e27;
}

/* Footer/Pagination */
[data-theme="dark"] .tabulator .tabulator-footer,
body.dark-theme .tabulator .tabulator-footer,
.dark .tabulator .tabulator-footer,
html[data-skin="dark"] .tabulator .tabulator-footer,
body[data-skin="dark"] .tabulator .tabulator-footer {
    background: #1a1e27;
    border-top: 1px solid #3a3e49;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator,
body.dark-theme .tabulator .tabulator-footer .tabulator-paginator,
.dark .tabulator .tabulator-footer .tabulator-paginator,
html[data-skin="dark"] .tabulator .tabulator-footer .tabulator-paginator,
body[data-skin="dark"] .tabulator .tabulator-footer .tabulator-paginator {
    color: #ecf0f1;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
body.dark-theme .tabulator .tabulator-footer .tabulator-page,
.dark .tabulator .tabulator-footer .tabulator-page,
html[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page,
body[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page {
    background: #2a2e39;
    border: 1px solid #3a3e49;
    color: #ecf0f1;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page:hover:not([disabled]),
body.dark-theme .tabulator .tabulator-footer .tabulator-page:hover:not([disabled]),
.dark .tabulator .tabulator-footer .tabulator-page:hover:not([disabled]),
html[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page:hover:not([disabled]),
body[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page:hover:not([disabled]) {
    background: linear-gradient(135deg, #7c4dff 0%, #b47eff 100%);
    border-color: #7c4dff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.4);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active,
body.dark-theme .tabulator .tabulator-footer .tabulator-page.active,
.dark .tabulator .tabulator-footer .tabulator-page.active,
html[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page.active,
body[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page.active {
    background: linear-gradient(135deg, #7c4dff 0%, #b47eff 100%);
    border-color: #7c4dff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.4);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page[disabled],
body.dark-theme .tabulator .tabulator-footer .tabulator-page[disabled],
.dark .tabulator .tabulator-footer .tabulator-page[disabled],
html[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page[disabled],
body[data-skin="dark"] .tabulator .tabulator-footer .tabulator-page[disabled] {
    background: #1a1e27;
    border-color: #2a2e39;
    color: #6c757d;
}

/* Placeholder */
[data-theme="dark"] .tabulator .tabulator-placeholder,
body.dark-theme .tabulator .tabulator-placeholder,
.dark .tabulator .tabulator-placeholder,
html[data-skin="dark"] .tabulator .tabulator-placeholder,
body[data-skin="dark"] .tabulator .tabulator-placeholder {
    color: #9e9e9e;
}

/* Text colors */
[data-theme="dark"] .tabulator .text-success,
body.dark-theme .tabulator .text-success,
.dark .tabulator .text-success,
html[data-skin="dark"] .tabulator .text-success,
body[data-skin="dark"] .tabulator .text-success {
    color: #4caf50;
}

[data-theme="dark"] .tabulator .text-danger,
body.dark-theme .tabulator .text-danger,
.dark .tabulator .text-danger,
html[data-skin="dark"] .tabulator .text-danger,
body[data-skin="dark"] .tabulator .text-danger {
    color: #ff5252;
}

/* Frozen Columns - Dark Theme */
[data-theme="dark"] .tabulator .tabulator-header .tabulator-frozen,
body.dark-theme .tabulator .tabulator-header .tabulator-frozen,
.dark .tabulator .tabulator-header .tabulator-frozen,
html[data-skin="dark"] .tabulator .tabulator-header .tabulator-frozen,
body[data-skin="dark"] .tabulator .tabulator-header .tabulator-frozen {
    background: #1a1e27;
}

[data-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen,
body.dark-theme .tabulator-row .tabulator-cell.tabulator-frozen,
.dark .tabulator-row .tabulator-cell.tabulator-frozen,
html[data-skin="dark"] .tabulator-row .tabulator-cell.tabulator-frozen,
body[data-skin="dark"] .tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: #2a2e39 !important;
}

[data-theme="dark"] .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen,
body.dark-theme .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen,
.dark .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen,
html[data-skin="dark"] .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen,
body[data-skin="dark"] .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
    background-color: #2e323d !important;
}

[data-theme="dark"] .tabulator-row:hover .tabulator-cell.tabulator-frozen,
body.dark-theme .tabulator-row:hover .tabulator-cell.tabulator-frozen,
.dark .tabulator-row:hover .tabulator-cell.tabulator-frozen,
html[data-skin="dark"] .tabulator-row:hover .tabulator-cell.tabulator-frozen,
body[data-skin="dark"] .tabulator-row:hover .tabulator-cell.tabulator-frozen {
    background-color: #1a1e27 !important;
}