/*
 * Syncfusion EJ2 grid overlay — Metronic demo30 + TKA brand alignment.
 * Loaded after Syncfusion bootstrap5 theme and tka-brand.css.
 * Scope: .tka-ej-grid (all server-side grids).
 */

:root,
[data-bs-theme="light"] {
    --tka-grid-header-bg: var(--bs-card-bg, #ffffff);
    /* ADR-047: neutral header surface — data first, no primary tint on chrome. */
    --tka-grid-header-surface: var(--bs-gray-100, #f9f9fb);
    --tka-grid-header-color: var(--bs-gray-600, #78829d);
    --tka-grid-header-hover: rgba(var(--bs-primary-rgb), 0.06);
    --tka-grid-header-active: rgba(var(--bs-primary-rgb), 0.1);
    --tka-grid-header-divider: var(--bs-gray-200, #f1f1f4);
    --tka-grid-border: var(--bs-gray-300, #dbdfe9);
    --tka-grid-body-bg: var(--bs-card-bg, #ffffff);
    --tka-grid-row-hover: rgba(var(--bs-primary-rgb), 0.035);
    --tka-grid-alt-row: rgba(var(--bs-primary-rgb), 0.018);
    --color-sf-primary: 217, 10, 44;
}

[data-bs-theme="dark"] {
    --tka-grid-header-bg: var(--bs-card-bg, #1b1b1b);
    /* ADR-047: neutral header surface — subtle lift over the dark card body. */
    --tka-grid-header-surface: rgba(255, 255, 255, 0.03);
    --tka-grid-header-color: var(--bs-gray-500, #99a1b7);
    --tka-grid-header-hover: rgba(var(--bs-primary-rgb), 0.12);
    --tka-grid-header-active: rgba(var(--bs-primary-rgb), 0.18);
    --tka-grid-header-divider: rgba(255, 255, 255, 0.06);
    --tka-grid-border: #2a2e30; /* neutral charcoal border (reference-site dark) */
    --tka-grid-body-bg: var(--bs-card-bg, #1b1b1b);
    --tka-grid-row-hover: rgba(var(--bs-primary-rgb), 0.08);
    --tka-grid-alt-row: rgba(var(--bs-primary-rgb), 0.04);
    --color-sf-primary: 240, 62, 88;
}

.card-body .tka-ej-grid.e-grid {
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    font-family: Montserrat, Inter, Helvetica, "sans-serif";
    font-size: 0.925rem;
    color: var(--bs-gray-800, #252f4a);
    background: var(--tka-grid-body-bg);
}

.tka-ej-grid.e-grid .e-gridheader {
    border-bottom: 1px solid var(--tka-grid-border);
    background: var(--tka-grid-header-surface) !important;
}

.tka-ej-grid.e-grid .e-gridheader .e-headercontent,
.tka-ej-grid.e-grid .e-gridheader .e-table,
.tka-ej-grid.e-grid .e-gridheader .e-columnheader {
    background: transparent !important;
}

.tka-ej-grid.e-grid .e-gridheader.e-lib.e-droppable,
.tka-ej-grid.e-grid .e-frozenheader .e-headercontent,
.tka-ej-grid.e-grid .e-frozenheader .e-table {
    background: var(--tka-grid-header-surface) !important;
}

.tka-ej-grid.e-grid .e-gridcontent,
.tka-ej-grid.e-grid .e-gridcontent .e-content,
.tka-ej-grid.e-grid .e-gridcontent .e-table {
    background: var(--tka-grid-body-bg) !important;
}

.tka-ej-grid.e-grid .e-headercell {
    background: transparent !important;
    color: var(--tka-grid-header-color) !important;
    font-weight: 600;
    /* Reference-site table header: uppercase micro-label with letter-spacing. */
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-color: transparent !important;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tka-ej-grid.e-grid .e-headercell:not(:last-child) {
    border-right: 1px solid var(--tka-grid-header-divider) !important;
}

.card-body .tka-ej-grid.e-grid .e-gridheader tr.e-columnheader th.e-headercell:first-child {
    border-top-left-radius: 0.5rem;
}

.card-body .tka-ej-grid.e-grid .e-gridheader tr.e-columnheader th.e-headercell:last-child {
    border-top-right-radius: 0.5rem;
}

.tka-ej-grid.e-grid .e-headercell:hover {
    background: var(--tka-grid-header-hover) !important;
}

.tka-ej-grid.e-grid .e-headercell .e-headercelldiv {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.25rem;
}

.tka-ej-grid.e-grid .e-headercell .e-headertext {
    color: inherit;
    font-weight: 600;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.tka-ej-grid.e-grid .e-sortfilterdiv {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
    margin-left: 0.15rem;
}

.tka-ej-grid.e-grid .e-filtermenudiv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.tka-ej-grid.e-grid .e-filtermenudiv:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.tka-ej-grid.e-grid .e-filtermenudiv .e-icon-filter,
.tka-ej-grid.e-grid .e-filtermenudiv .e-icons {
    opacity: 0.45;
    font-size: 0.75rem;
    color: var(--tka-grid-header-color);
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tka-ej-grid.e-grid .e-filtermenudiv:hover .e-icon-filter,
.tka-ej-grid.e-grid .e-filtermenudiv:hover .e-icons {
    opacity: 0.9;
    color: var(--bs-primary);
}

.tka-ej-grid.e-grid .e-filtermenudiv .e-icon-filter.e-filtered,
.tka-ej-grid.e-grid .e-filtermenudiv .e-icons.e-filtered {
    opacity: 1;
    color: var(--bs-primary) !important;
}

.tka-ej-grid.e-grid .e-headercell:has(.e-icon-filter.e-filtered),
.tka-ej-grid.e-grid .e-headercell:has(.e-icons.e-filtered) {
    background: var(--tka-grid-header-active) !important;
}

.tka-ej-grid.e-grid .e-headercell:has(.e-icon-filter.e-filtered) .e-filtermenudiv,
.tka-ej-grid.e-grid .e-headercell:has(.e-icons.e-filtered) .e-filtermenudiv {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.tka-ej-grid.e-grid .e-sortfilterdiv .e-icon-ascending,
.tka-ej-grid.e-grid .e-sortfilterdiv .e-icon-descending {
    opacity: 0.35;
    font-size: 0.7rem;
    color: var(--tka-grid-header-color);
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tka-ej-grid.e-grid .e-headercell.e-ascending .e-icon-ascending,
.tka-ej-grid.e-grid .e-headercell.e-descending .e-icon-descending {
    opacity: 1;
    color: var(--bs-primary) !important;
}

.tka-ej-grid.e-grid .e-headercell.e-ascending,
.tka-ej-grid.e-grid .e-headercell.e-descending {
    color: var(--bs-gray-700, #4b5675) !important;
}

.tka-ej-grid.e-grid .e-headercell .e-rhandler {
    opacity: 0.35;
}

.tka-ej-grid.e-grid .e-headercell:hover .e-rhandler {
    opacity: 0.65;
}

.tka-ej-grid.e-grid .e-rowcell {
    border-color: transparent !important;
    border-bottom: 1px solid var(--tka-grid-border) !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--bs-gray-800, #252f4a);
    vertical-align: middle;
}

.tka-ej-grid.e-grid .e-row.e-altrow .e-rowcell {
    background-color: var(--tka-grid-alt-row) !important;
}

.tka-ej-grid.e-grid .e-row:hover .e-rowcell {
    background-color: var(--tka-grid-row-hover) !important;
}

.tka-ej-grid.e-grid .e-rowcell a.text-primary,
.tka-ej-grid.e-grid .e-rowcell a.fw-semibold {
    color: var(--bs-link-color) !important;
    font-weight: 600;
    text-decoration: none;
}

.tka-ej-grid.e-grid .e-rowcell a.text-primary:hover,
.tka-ej-grid.e-grid .e-rowcell a.fw-semibold:hover {
    color: var(--bs-link-hover-color) !important;
}

.tka-ej-grid.e-grid .e-toolbar {
    border: 0;
    background: transparent;
    padding: 0 0 0.85rem;
    border-bottom: 1px solid var(--tka-grid-border);
    margin-bottom: 0.85rem;
}

.tka-ej-grid.e-grid .e-toolbar .e-toolbar-items {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    gap: 0.35rem;
}

.tka-ej-grid.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bs-gray-700, #4b5675);
}

.tka-ej-grid.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: var(--bs-gray-100, #f9f9f9);
}

.tka-ej-grid.e-grid .e-toolbar .e-toolbar-item[id$="_excelexport"] .e-tbar-btn {
    color: var(--bs-primary);
}

.tka-ej-grid.e-grid .e-pager {
    border-top: 1px solid var(--tka-grid-border);
    background: transparent;
    padding-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600, #78829d);
}

.tka-ej-grid.e-grid .e-pager .e-numericitem,
.tka-ej-grid.e-grid .e-pager .e-link {
    border-radius: 0.45rem;
    font-weight: 600;
}

.tka-ej-grid.e-grid .e-pager .e-numericitem.e-currentitem {
    background: var(--bs-primary);
    color: var(--tka-brand-on, #fff);
}

.tka-ej-grid.e-grid .e-rowcell .btn {
    min-height: 2rem;
}

.tka-ej-grid.e-grid .e-rowcell .tka-grid-action.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    border-radius: 0.475rem;
}

.tka-ej-grid.e-grid .e-rowcell .tka-grid-actions {
    align-items: center;
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-rowcell {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-toolbar .e-toolbar-items {
    background: transparent;
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
    color: #d1d5db;
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-toolbar .e-toolbar-item[id$="_excelexport"] .e-tbar-btn {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-headercell.e-ascending,
[data-bs-theme="dark"] .tka-ej-grid.e-grid .e-headercell.e-descending {
    color: #e5e7eb !important;
}

/* Excel filter popup (appended to body by Syncfusion) */
body .e-excelfilter.e-dialog,
body .e-filter-popup.e-popup {
    border-radius: 0.75rem;
    border: 1px solid var(--tka-grid-border);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
    font-family: Montserrat, Inter, Helvetica, "sans-serif";
}

body .e-excelfilter .e-dlg-header-content,
body .e-filter-popup .e-popup-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-gray-800, #252f4a);
}

body .e-excelfilter .e-footer-content .e-btn.e-primary,
body .e-filter-popup .e-footer-content .e-btn.e-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] body .e-excelfilter.e-dialog,
[data-bs-theme="dark"] body .e-filter-popup.e-popup {
    border-color: #2b2f3d;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] body .e-excelfilter .e-dlg-header-content,
[data-bs-theme="dark"] body .e-filter-popup .e-popup-header {
    color: #e5e7eb;
}