/* ============================================
   Syncfusion DataGrid — Theme Overrides
   Aligns Syncfusion Fluent theme with app design tokens.
   ============================================ */

/* --- Header (all states) --- */
.e-grid .e-gridheader {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.e-grid th.e-headercell {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-light) !important;
}

/* Header text — wildcard all states via attribute + class combos */
.e-grid .e-headercell .e-headercelldiv,
.e-grid .e-headercell .e-headertext,
.e-grid th.e-headercell .e-headercelldiv,
.e-grid th.e-headercell .e-headertext,
.e-grid th[aria-sort] .e-headercelldiv,
.e-grid th[aria-sort] .e-headertext,
.e-grid th[aria-sort="ascending"] .e-headercelldiv,
.e-grid th[aria-sort="descending"] .e-headercelldiv,
.e-grid th[aria-sort="ascending"] .e-headertext,
.e-grid th[aria-sort="descending"] .e-headertext {
    color: var(--color-text-ui) !important;
    font-weight: 600;
}

/* Sort icons */
.e-grid .e-icon-ascending,
.e-grid .e-icon-descending,
.e-grid .e-sortnumber {
    color: var(--color-accent) !important;
}

.e-grid .e-sortfilterdiv,
.e-grid .e-sortfilterdiv .e-icons {
    color: var(--color-text-muted) !important;
}

/* Filter icon in header */
.e-grid .e-icon-filter,
.e-grid .e-filtermenudiv .e-icons {
    color: var(--color-text-muted) !important;
}

.e-grid .e-filtered .e-icon-filter {
    color: var(--color-accent) !important;
}

/* --- Data rows --- */
.e-grid .e-row td.e-rowcell,
.e-grid .e-rowcell,
.e-grid td.e-rowcell {
    color: var(--color-text) !important;
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border-light) !important;
}

.e-grid .e-altrow td.e-rowcell {
    background-color: var(--color-surface-alt) !important;
}

.e-grid .e-row:hover td.e-rowcell {
    background-color: var(--color-card-warm) !important;
    color: var(--color-text) !important;
}

/* Focus/select/active states on cells */
.e-grid td.e-selectionbackground,
.e-grid td.e-active,
.e-grid td.e-focused,
.e-grid .e-focused td.e-rowcell,
.e-grid td.e-rowcell.e-focus,
.e-grid td.e-rowcell:focus {
    background-color: var(--color-card-warm) !important;
    color: var(--color-text) !important;
}

/* --- Grid & content borders --- */
.e-grid {
    border-color: var(--color-border) !important;
}

.e-grid .e-gridcontent {
    border-color: var(--color-border) !important;
}

.e-grid .e-gridcontent .e-content {
    background-color: var(--color-card-bg) !important;
}

/* --- Pager --- */
.e-grid .e-gridpager,
.e-grid .e-pager,
.e-pager {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

.e-pager .e-numericitem,
.e-pager .e-numericcontainer a {
    color: var(--color-text) !important;
    background-color: transparent !important;
    border-color: var(--color-border-light) !important;
}

.e-pager .e-numericitem:hover,
.e-pager .e-numericcontainer a:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-surface) !important;
}

.e-pager .e-currentitem,
.e-pager .e-numericitem.e-currentitem {
    background-color: var(--color-accent) !important;
    color: #fff !important;
    border-color: var(--color-accent) !important;
}

/* Pager nav arrows — target both the button and the icon element inside */
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-firstpage,
.e-pager .e-lastpage,
.e-pager .e-prev,
.e-pager .e-next,
.e-pager .e-first,
.e-pager .e-last,
.e-pager .e-prevpage .e-icons,
.e-pager .e-nextpage .e-icons,
.e-pager .e-firstpage .e-icons,
.e-pager .e-lastpage .e-icons,
.e-pager .e-pagercontainer .e-icons,
.e-pager .e-icon-first,
.e-pager .e-icon-prev,
.e-pager .e-icon-next,
.e-pager .e-icon-last {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

.e-pager .e-prevpage:hover,
.e-pager .e-nextpage:hover,
.e-pager .e-firstpage:hover,
.e-pager .e-lastpage:hover,
.e-pager .e-prev:hover,
.e-pager .e-next:hover,
.e-pager .e-first:hover,
.e-pager .e-last:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-surface) !important;
}

.e-pager .e-prevpage.e-disable,
.e-pager .e-nextpage.e-disable,
.e-pager .e-firstpage.e-disable,
.e-pager .e-lastpage.e-disable,
.e-pager .e-prev.e-disable,
.e-pager .e-next.e-disable,
.e-pager .e-first.e-disable,
.e-pager .e-last.e-disable,
.e-pager .e-disable .e-icons {
    color: var(--color-text-dim) !important;
    opacity: 0.5;
}

.e-pager .e-pagercontainer {
    background-color: transparent !important;
}

.e-pager .e-pagerdropdown,
.e-pager .e-pagesizes .e-dropdownlist,
.e-pager .e-pagesizes input {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text) !important;
}

.e-pager .e-parentmsgbar,
.e-pager .e-pagecountmsg,
.e-pager .e-pagesizes label,
.e-pager div.e-parentmsgbar {
    color: var(--color-text-muted) !important;
}

/* =============================================
   Filter / Dialog / Dropdown popups
   These render on <body>, NOT inside .e-grid
   ============================================= */

/* Filter dialog container */
.e-filter-popup,
.e-dialog.e-filter-popup,
.e-flmenu,
.e-grid-filter {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.e-filter-popup .e-dlg-header,
.e-filter-popup .e-dlg-header-content,
.e-filter-popup label,
.e-filter-popup span,
.e-flmenu label,
.e-flmenu span {
    color: var(--color-text) !important;
}

.e-filter-popup .e-dlg-content,
.e-flmenu .e-dlg-content {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

.e-filter-popup .e-footer-content,
.e-flmenu .e-footer-content {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
}

/* Filter inputs */
.e-filter-popup .e-input-group,
.e-filter-popup .e-input-group .e-input,
.e-filter-popup input.e-input,
.e-flmenu .e-input-group .e-input,
.e-flmenu input.e-input {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text) !important;
}

.e-filter-popup .e-input-group:focus-within,
.e-filter-popup .e-input-group.e-input-focus {
    border-color: var(--color-accent) !important;
}

/* Filter buttons */
.e-filter-popup .e-btn.e-primary,
.e-flmenu .e-btn.e-primary {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent-dark) !important;
    color: #fff !important;
}

.e-filter-popup .e-btn.e-primary:hover,
.e-flmenu .e-btn.e-primary:hover {
    background-color: var(--color-accent-dark) !important;
}

.e-filter-popup .e-btn.e-flat,
.e-flmenu .e-btn.e-flat {
    color: var(--color-text-muted) !important;
}

/* --- Dropdown / popup lists (filter operator, page size, etc.) --- */
/* These render as .e-popup on <body> */
.e-popup .e-dropdownbase .e-list-item,
.e-popup.e-popup-open .e-list-item,
.e-popup .e-list-item {
    color: var(--color-text) !important;
    background-color: var(--color-card-bg) !important;
}

.e-popup .e-dropdownbase .e-list-item:hover,
.e-popup.e-popup-open .e-list-item:hover,
.e-popup .e-list-item:hover,
.e-popup .e-list-item.e-hover {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.e-popup .e-dropdownbase .e-list-item.e-active,
.e-popup.e-popup-open .e-list-item.e-active,
.e-popup .e-list-item.e-active {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

.e-popup.e-popup-open,
.e-popup .e-dropdownbase {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
}

/* Dropdown input inside filter */
.e-popup .e-input,
.e-ddl.e-input-group .e-input,
.e-ddl.e-input-group input.e-input {
    color: var(--color-text) !important;
}

/* --- Checkbox column --- */
.e-grid .e-checkbox-wrapper .e-frame.e-check,
.e-grid .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

.e-grid .e-checkbox-wrapper .e-frame,
.e-grid .e-css.e-checkbox-wrapper .e-frame {
    border-color: var(--color-border) !important;
}

/* --- No records --- */
.e-grid .e-emptyrow td {
    color: var(--color-text-muted) !important;
    background-color: var(--color-card-bg) !important;
}

/* --- Links inside grid --- */
.e-grid .e-rowcell a {
    color: var(--color-link) !important;
}

.e-grid .e-rowcell a:hover {
    color: var(--color-accent) !important;
}

/* ============================================
   Vertical / Adaptive (Card) Mode
   rowRenderingMode: 'Vertical' renders each row as a card
   ============================================ */

/* Vertical row labels (field names on left side of card) */
.e-grid .e-rowcell .e-label,
.e-grid.e-row-responsive .e-rowcell .e-label {
    color: var(--color-text-ui) !important;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Transparent grid chrome in vertical mode so page bg shows between cards */
.e-grid.e-row-responsive,
.e-grid.e-row-responsive .e-gridcontent,
.e-grid.e-row-responsive .e-gridcontent .e-content,
.e-grid.e-row-responsive .e-gridcontent .e-content .e-table {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Card-like row separators in vertical mode */
.e-grid.e-row-responsive .e-row {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md, 6px);
    margin-bottom: 0.75rem;
    background-color: var(--color-card-bg) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Remove individual cell borders in vertical card mode */
.e-grid.e-row-responsive .e-row td.e-rowcell {
    border-bottom: 1px solid var(--color-border-light) !important;
    border-left: none !important;
    border-right: none !important;
}

.e-grid.e-row-responsive .e-row td.e-rowcell:last-child {
    border-bottom: none !important;
}

/* Vertical mode hover on entire card row */
.e-grid.e-row-responsive .e-row:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Adaptive dialog (sort/filter on mobile) */
.e-adaptive-dialog,
.e-responsive-dialog {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

.e-adaptive-dialog .e-dlg-header,
.e-responsive-dialog .e-dlg-header,
.e-adaptive-dialog .e-dlg-header-content,
.e-responsive-dialog .e-dlg-header-content {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.e-adaptive-dialog .e-dlg-content,
.e-responsive-dialog .e-dlg-content {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

.e-adaptive-dialog .e-btn.e-primary,
.e-responsive-dialog .e-btn.e-primary {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent-dark) !important;
    color: #fff !important;
}

/* Dark mode — adaptive/vertical */
[data-theme="dark"] .e-grid .e-rowcell .e-label,
[data-theme="dark"] .e-grid.e-row-responsive .e-rowcell .e-label {
    color: var(--color-text-ui) !important;
}

[data-theme="dark"] .e-grid.e-row-responsive .e-row {
    border-color: var(--color-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .e-adaptive-dialog,
[data-theme="dark"] .e-responsive-dialog {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-adaptive-dialog .e-dlg-header,
[data-theme="dark"] .e-responsive-dialog .e-dlg-header,
[data-theme="dark"] .e-adaptive-dialog .e-dlg-header-content,
[data-theme="dark"] .e-responsive-dialog .e-dlg-header-content {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-adaptive-dialog .e-dlg-content,
[data-theme="dark"] .e-responsive-dialog .e-dlg-content {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */

[data-theme="dark"] .e-grid .e-gridheader {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-grid th.e-headercell {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-grid .e-headercell .e-headercelldiv,
[data-theme="dark"] .e-grid .e-headercell .e-headertext,
[data-theme="dark"] .e-grid th[aria-sort] .e-headercelldiv,
[data-theme="dark"] .e-grid th[aria-sort] .e-headertext {
    color: var(--color-text-ui) !important;
}

[data-theme="dark"] .e-grid .e-row td.e-rowcell,
[data-theme="dark"] .e-grid td.e-rowcell {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-grid .e-altrow td.e-rowcell {
    background-color: var(--color-surface-alt) !important;
}

[data-theme="dark"] .e-grid .e-row:hover td.e-rowcell {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-grid td.e-selectionbackground,
[data-theme="dark"] .e-grid td.e-active,
[data-theme="dark"] .e-grid .e-focused td.e-rowcell {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-grid {
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-grid .e-gridcontent .e-content {
    background-color: var(--color-card-bg) !important;
}

/* Dark pager */
[data-theme="dark"] .e-pager,
[data-theme="dark"] .e-grid .e-pager {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-pager .e-numericitem {
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-pager .e-prevpage,
[data-theme="dark"] .e-pager .e-nextpage,
[data-theme="dark"] .e-pager .e-firstpage,
[data-theme="dark"] .e-pager .e-lastpage,
[data-theme="dark"] .e-pager .e-icons {
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-pager .e-parentmsgbar {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .e-pager .e-pagerdropdown,
[data-theme="dark"] .e-pager .e-pagesizes input {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text) !important;
}

/* Dark filter / dialog popups */
[data-theme="dark"] .e-filter-popup,
[data-theme="dark"] .e-flmenu {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-filter-popup .e-dlg-content,
[data-theme="dark"] .e-filter-popup .e-footer-content {
    background-color: var(--color-card-bg) !important;
}

[data-theme="dark"] .e-filter-popup label,
[data-theme="dark"] .e-filter-popup span,
[data-theme="dark"] .e-filter-popup .e-dlg-header {
    color: var(--color-text) !important;
}

[data-theme="dark"] .e-filter-popup .e-input,
[data-theme="dark"] .e-filter-popup .e-input-group .e-input {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text) !important;
}

/* Dark dropdown popups */
[data-theme="dark"] .e-popup.e-popup-open,
[data-theme="dark"] .e-popup .e-dropdownbase {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .e-popup .e-list-item {
    color: var(--color-text) !important;
    background-color: var(--color-card-bg) !important;
}

[data-theme="dark"] .e-popup .e-list-item:hover,
[data-theme="dark"] .e-popup .e-list-item.e-hover {
    background-color: var(--color-surface) !important;
}

[data-theme="dark"] .e-popup .e-list-item.e-active {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

/* Dark links */
[data-theme="dark"] .e-grid .e-rowcell a {
    color: var(--color-link) !important;
}

/* Dark dropdown input text */
[data-theme="dark"] .e-ddl.e-input-group .e-input,
[data-theme="dark"] .e-ddl.e-input-group input.e-input,
[data-theme="dark"] .e-popup .e-input {
    color: var(--color-text) !important;
}

/* --- Compact action buttons in grid cells --- */
.e-grid .btn.btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* ============================================
   TreeGrid — Revision Nesting Overrides
   TreeGrid renders with both .e-treegrid and .e-grid,
   so existing .e-grid theme rules apply automatically.
   ============================================ */

.e-treegrid .e-treegridexpand,
.e-treegrid .e-treegridcollapse {
    color: var(--color-text-muted) !important;
}

.e-treegrid .e-treegridexpand:hover,
.e-treegrid .e-treegridcollapse:hover {
    color: var(--color-accent) !important;
}

[data-theme="dark"] .e-treegrid .e-treegridexpand,
[data-theme="dark"] .e-treegrid .e-treegridcollapse {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .e-treegrid .e-treegridexpand:hover,
[data-theme="dark"] .e-treegrid .e-treegridcollapse:hover {
    color: var(--color-accent) !important;
}

/* Revision badge */
.badge.bg-info.text-dark {
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
}

/* ============================================
   Mobile Revision Nesting
   ============================================ */

.mobile-li-revisions-toggle {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--color-border-light);
    font-size: 0.85rem;
    color: var(--color-accent);
    cursor: pointer;
    font-weight: 500;
}

.mobile-li-revisions-toggle:hover {
    color: var(--color-accent-dark);
}

.mobile-li-revisions-list {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-border-light);
}

.mobile-li-revision-child {
    margin-bottom: 0.5rem !important;
    padding: 0.75rem !important;
    background-color: var(--color-surface-alt) !important;
    font-size: 0.9rem;
}

.mobile-li-revision-child .mobile-li-title {
    font-size: 0.9rem;
}