/* =========================================
    THEME VARIABLES FOR TABLES
    Light by default, override when data-color starts with "dark-"
========================================== */

html {
    /* Light mode stays exactly like your original (white table design) */
    --dmu-table-card-bg: #ffffff;
    --dmu-table-card-border: rgba(148, 163, 184, 0.24);

    --dmu-table-wrapper-bg: #ffffff;
    --dmu-table-wrapper-border: rgba(148, 163, 184, 0.24);

    --dmu-table-header-bg: #f3f4f6;
    --dmu-table-header-text: #6b7280;

    --dmu-table-row-bg: #ffffff;
    --dmu-table-row-hover-bg: #f9fafb;

    --dmu-table-cell-text: #0f172a;
    --dmu-table-subtle-text: #9ca3af;
    --dmu-table-divider: rgba(148, 163, 184, 0.24);

    --dmu-table-mobile-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

    --dmu-seg-pill-base: transparent;
    --dmu-seg-pill-text: var(--secondary-color, #6c757d);
    --dmu-seg-pill-count-bg: rgba(0, 0, 0, 0.04);
    --dmu-seg-pill-hover-bg: rgba(0, 0, 0, 0.03);
    --dmu-seg-pill-hover-border: rgba(0, 0, 0, 0.04);

    --dmu-seg-scroll-thumb: rgba(0, 0, 0, 0.12);
}


html[data-color^="dark-"] {
    --dmu-table-card-bg: var(--foreground, #1d1d1d);
    --dmu-table-card-border: rgba(var(--separator-rgb, 71, 71, 71), 1);

    --dmu-table-wrapper-bg: var(--foreground, #1d1d1d);
    --dmu-table-wrapper-border: rgba(var(--separator-rgb, 71, 71, 71), 1);

    --dmu-table-header-bg: var(--background-light, #292929);
    --dmu-table-header-text: var(--light-text, #f0f0f0);

    --dmu-table-row-bg: var(--foreground, #1d1d1d);
    --dmu-table-row-hover-bg: var(--background-light, #292929);

    --dmu-table-cell-text: var(--light-text, #f0f0f0);
    --dmu-table-subtle-text: var(--muted, #727272);

    --dmu-table-divider: rgba(var(--separator-light-rgb, 46, 46, 46), 1);

    --dmu-table-mobile-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);

    --dmu-seg-pill-base: transparent;
    --dmu-seg-pill-text: var(--light-text, #f0f0f0);

    --dmu-seg-pill-count-bg: rgba(var(--light-text-rgb, 240, 240, 240), 0.12);
    --dmu-seg-pill-hover-bg: rgba(var(--light-text-rgb, 240, 240, 240), 0.08);
    --dmu-seg-pill-hover-border: rgba(var(--separator-light-rgb, 46, 46, 46), 0.7);

    --dmu-seg-scroll-thumb: rgba(var(--separator-light-rgb, 46, 46, 46), 0.8);
}


/* =========================================
       DMU TABLE CARD & WRAPPER
    ========================================== */

.dmu-table-card {
    border-radius: 1.25rem;
    border: 1px solid var(--dmu-table-card-border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    background: var(--dmu-table-card-bg);
    width: 100%;
    overflow: hidden;
}

.dmu-table-toolbar,
.dmu-table-footer {
    font-size: 0.75rem;
}

.dmu-table-wrapper {
    background: var(--dmu-table-wrapper-bg);
    border-bottom: 1px solid var(--dmu-table-wrapper-border);
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
}

.dmu-table-col {
    min-width: 0;
}

/* =========================================
       BASE TABLE (DESKTOP / DEFAULT)
    ========================================== */

.dmu-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    width: auto;
    min-width: 1200px;
}

.dmu-table thead tr {
    background: var(--dmu-table-header-bg);
}

.dmu-table thead th {
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--dmu-table-divider);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--dmu-table-header-text);
}

.dmu-table tbody td {
    padding: 0.65rem 1.1rem;
    vertical-align: middle;
    color: var(--dmu-table-cell-text);
}

@media (min-width: 768px) {
    .dmu-table tbody tr:last-child td {
        border-bottom: none !important;
    }
}

.dmu-table tbody tr {
    background-color: var(--dmu-table-row-bg);
    transition:
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.dmu-table tbody tr:hover {
    background: var(--dmu-table-row-hover-bg);
}

@media (min-width: 768px) {

    .dmu-table th,
    .dmu-table td {
        white-space: nowrap;
    }
}

.dmu-table-checkbox {
    width: 40px;
    text-align: center;
}

.dmu-table-checkbox .form-check-input {
    cursor: pointer;
}

tr.dmu-row-clickable:hover {
    cursor: pointer;
    background-color: var(--dmu-table-row-hover-bg);
}

.dmu-table-primary {
    font-weight: 500;
    color: var(--dmu-table-cell-text);
}

.dmu-table-subtle {
    font-size: 0.7rem;
    color: var(--dmu-table-subtle-text);
}

/* =========================================
       AVATAR (TABLE VERSION)
    ========================================== */

.dmu-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(160deg,
            var(--gradient-1),
            var(--gradient-1),
            var(--gradient-1-lighter)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline: auto;
}

.dmu-avatar-initial {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    user-select: none;
}

/* =========================================
       SEGMENT PILLS + DROPDOWN (TOOLBAR)
    ========================================== */

.dmu-table-toolbar .dmu-seg-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.dmu-table-toolbar .dmu-seg-dropdown {
    display: none;
}

.dmu-seg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid transparent;
    background: var(--dmu-seg-pill-base);
    color: var(--dmu-seg-pill-text);
    transition:
        background-color 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease;
    text-decoration: none;
}

.dmu-seg-link .dmu-seg-label {
    white-space: nowrap;
}

.dmu-seg-link .dmu-seg-count {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--dmu-seg-pill-count-bg);
}

.dmu-seg-link:not(.active):hover {
    background-color: var(--dmu-seg-pill-hover-bg);
    border-color: var(--dmu-seg-pill-hover-border);
}

.dmu-seg-link-primary {
    color: var(--primary);
}

.dmu-seg-link-primary.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.dmu-seg-link-primary.active .dmu-seg-count {
    background-color: rgba(255, 255, 255, 0.18);
}

.dmu-seg-link-success {
    color: var(--success);
}

.dmu-seg-link-success.active {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

.dmu-seg-link-success.active .dmu-seg-count {
    background-color: rgba(255, 255, 255, 0.18);
}

.dmu-seg-link-warning {
    color: var(--warning);
}

.dmu-seg-link-warning.active {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.dmu-seg-link-warning.active .dmu-seg-count {
    background-color: rgba(0, 0, 0, 0.15);
}

.dmu-seg-link-danger {
    color: var(--danger);
}

.dmu-seg-link-danger.active {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.dmu-seg-link-danger.active .dmu-seg-count {
    background-color: rgba(255, 255, 255, 0.18);
}

.dmu-seg-link-info {
    color: var(--info);
}

.dmu-seg-link-info.active {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
}

.dmu-seg-link-info.active .dmu-seg-count {
    background-color: rgba(255, 255, 255, 0.18);
}

.dmu-seg-link-secondary {
    color: var(--secondary);
}

.dmu-seg-link-secondary.active {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.dmu-seg-link-secondary.active .dmu-seg-count {
    background-color: rgba(255, 255, 255, 0.18);
}

/* =========================================
       BREAKPOINT: switch to DROPDOWN ONLY
    ========================================== */

@media (max-width: 1618px) {
    .dmu-table-toolbar .dmu-seg-nav {
        display: none !important;
    }

    .dmu-table-toolbar .dmu-seg-dropdown {
        display: inline-flex !important;
    }
}

@media (max-width: 767.98px) {
    .dmu-table-toolbar .dmu-seg-nav::-webkit-scrollbar {
        height: 4px;
    }

    .dmu-table-toolbar .dmu-seg-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .dmu-table-toolbar .dmu-seg-nav::-webkit-scrollbar-thumb {
        background: var(--dmu-seg-scroll-thumb);
        border-radius: 999px;
    }
}

/* =========================================
       STATUS PILLS
    ========================================== */

.dmu-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dmu-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.dmu-status-pill.is-success {
    background: rgba(var(--success-rgb), 0.10);
    color: var(--success-darker);
    border-color: rgba(var(--success-rgb), 0.35);
}

.dmu-status-pill.is-success .dmu-status-dot {
    background: var(--success);
}

.dmu-status-pill.is-warning {
    background: rgba(var(--warning-rgb), 0.10);
    color: var(--warning-darker);
    border-color: rgba(var(--warning-rgb), 0.35);
}

.dmu-status-pill.is-warning .dmu-status-dot {
    background: var(--warning);
}

.dmu-status-pill.is-danger {
    background: rgba(var(--danger-rgb), 0.10);
    color: var(--danger-darker);
    border-color: rgba(var(--danger-rgb), 0.35);
}

.dmu-status-pill.is-danger .dmu-status-dot {
    background: var(--danger);
}

.dmu-status-pill.is-info {
    background: rgba(var(--info-rgb), 0.10);
    color: var(--info-darker);
    border-color: rgba(var(--info-rgb), 0.35);
}

.dmu-status-pill.is-info .dmu-status-dot {
    background: var(--info);
}

.dmu-status-pill.is-primary {
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary-darker);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.dmu-status-pill.is-primary .dmu-status-dot {
    background: var(--primary);
}

.dmu-status-pill.is-secondary {
    background: rgba(var(--secondary-rgb), 0.10);
    color: var(--secondary-darker);
    border-color: rgba(var(--secondary-rgb), 0.35);
}

.dmu-status-pill.is-secondary .dmu-status-dot {
    background: var(--secondary);
}

.dmu-status-pill.is-tertiary {
    background: rgba(var(--tertiary-rgb), 0.10);
    color: var(--tertiary-darker);
    border-color: rgba(var(--tertiary-rgb), 0.35);
}

.dmu-status-pill.is-tertiary .dmu-status-dot {
    background: var(--tertiary);
}

.dmu-status-pill.is-quaternary {
    background: rgba(var(--quaternary-rgb), 0.10);
    color: var(--quaternary-darker);
    border-color: rgba(var(--quaternary-rgb), 0.35);
}

.dmu-status-pill.is-quaternary .dmu-status-dot {
    background: var(--quaternary);
}

.dmu-status-pill.is-dark {
    background: rgba(var(--dark-rgb), 0.10);
    color: var(--dark-darker);
    border-color: rgba(var(--dark-rgb), 0.35);
}

.dmu-status-pill.is-dark .dmu-status-dot {
    background: var(--dark);
}

/* ─── Status pills: dark-mode overrides ─── */

html[data-color^="dark-"] .dmu-status-pill.is-success {
    background: rgba(var(--success-rgb), 0.18);
    color: var(--success);
    border-color: rgba(var(--success-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-warning {
    background: rgba(var(--warning-rgb), 0.18);
    color: var(--warning);
    border-color: rgba(var(--warning-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-danger {
    background: rgba(var(--danger-rgb), 0.18);
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-info {
    background: rgba(var(--info-rgb), 0.18);
    color: var(--info);
    border-color: rgba(var(--info-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-primary {
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-secondary {
    background: rgba(var(--secondary-rgb), 0.18);
    color: var(--secondary);
    border-color: rgba(var(--secondary-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-tertiary {
    background: rgba(var(--tertiary-rgb), 0.18);
    color: var(--tertiary);
    border-color: rgba(var(--tertiary-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-quaternary {
    background: rgba(var(--quaternary-rgb), 0.18);
    color: var(--quaternary);
    border-color: rgba(var(--quaternary-rgb), 0.30);
}

html[data-color^="dark-"] .dmu-status-pill.is-dark {
    background: rgba(var(--dark-rgb), 0.18);
    color: var(--light-text, #f0f0f0);
    border-color: rgba(var(--dark-rgb), 0.30);
}

/* =========================================
       LINKS INSIDE TABLE
    ========================================== */

.dmu-table-link {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-darker);
    text-decoration: none;
}

.dmu-table-link:hover {
    text-decoration: underline;
    color: var(--secondary);
}

.dmu-table-link .icon {
    color: var(--primary) !important;
}

.dmu-date-cell .icon {
    opacity: 0.7;
}

.dmu-date-cell span {
    font-weight: 400;
}

/* =========================================
       MOBILE CARD MODE
    ========================================== */

@media (max-width: 767.98px) {
    .dmu-table-wrapper {
        margin: 0;
        border-radius: inherit;
        overflow: hidden !important;
        padding: 0.5rem;
    }

    .dmu-table thead {
        display: none;
    }

    .dmu-table,
    .dmu-table tbody,
    .dmu-table tr,
    .dmu-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .dmu-table tbody tr {
        margin-bottom: 0.75rem;
        background: var(--dmu-table-card-bg);
        border: 1px solid var(--dmu-table-divider);
        overflow: hidden;
        border-radius: 0.75rem;
    }

    .dmu-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .dmu-table tbody td {
        padding: 0.75rem 0.95rem;
        border-top: none !important;
        border-bottom: 1px solid var(--dmu-table-divider);
        position: relative;
        text-align: left !important;
        box-sizing: border-box;
        line-height: 1.35;
        white-space: normal;
    }

    .dmu-table tbody tr td:last-child {
        border-bottom: none;
    }

    .dmu-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        color: var(--muted);
    }

    .dmu-table tbody td:not([data-label])::before {
        display: none;
    }

    .dmu-table tbody td.dmu-table-checkbox::before {
        content: '';
        margin: 0;
    }

    .dmu-table tbody td:has(.dmu-actions-cell)::before {
        display: none;
    }

    .dmu-table tbody td:has(.dmu-actions-cell) {
        text-align: left !important;
        border-bottom: none;
    }

    .dmu-table tbody td .dmu-table-primary {
        display: block;
    }

    .dmu-table tbody td .dmu-table-subtle {
        display: block;
        margin-top: 0.15rem;
    }

    .dmu-table tbody td .dmu-avatar {
        margin-left: 0;
    }

    .dmu-table-toolbar > .row > .col {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .dmu-table-footer {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }
}

/* =========================================
       DROPDOWNS / ACTIONS FLYOUT
    ========================================== */

@media (min-width: 768px) {
    .dmu-table-card {
        overflow: visible;
    }

    .dmu-table-wrapper {
        overflow-y: visible;
        overflow-x: auto;
    }
}

.dmu-actions-flyout {
    position: fixed;
    z-index: 1085;
}

.dmu-actions-flyout.dmu-dropdown {
    position: fixed;
    margin-top: 0;
}

.dmu-actions-flyout.is-hidden {
    display: none !important;
}

.dmu-actions-flyout.dropdown-menu {
    display: block;
    position: fixed !important;
    max-width: 260px;
    will-change: top, left;
}

@media (min-width: 768px) {
    .dmu-table-card {
        overflow: visible;
    }

    .dmu-table-wrapper {
        overflow-y: visible;
        overflow-x: auto;
    }
}

/* =============================================================================
   DMU TABLE — sort, filter builder, toolbar dropdowns
   ============================================================================= */


/* ── Sortable headers ────────────────────────────────────────────────────────── */

.dmu-th-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.dmu-th-sortable {
    cursor: pointer;
    white-space: nowrap;
}

.dmu-th-sortable:hover {
    background-color: var(--foreground-quaternary, rgba(0, 0, 0, 0.04));
}

.dmu-sort-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--muted);
    opacity: 0.4;
    transition: opacity 0.15s;
}

.dmu-th-sortable:hover .dmu-sort-icon,
.dmu-sort-icon.is-active {
    opacity: 1;
    color: var(--primary);
}


/* ── Toolbar shared ──────────────────────────────────────────────────────────── */

.dmu-filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.dmu-filter-count {
    opacity: 0.85;
    font-size: 0.85em;
}

.dmu-toolbar-dropdown-wrap {
    position: relative;
    z-index: 1;
}

.dmu-toolbar-dropdown-wrap.dmu-dropdown-active {
    z-index: 1200;
}


/* ── Toolbar dropdowns (segments + results) ──────────────────────────────────── */

.dmu-seg-dropdown-panel,
.dmu-results-dropdown-panel {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 4px);
}

.dmu-seg-dropdown-panel {
    min-width: 200px;
}

.dmu-results-dropdown-panel {
    min-width: 160px;
}

/* Row highlight on back-navigation */
@keyframes dmu-row-flash {
    0%   { background-color: rgba(var(--primary-rgb, 151, 103, 183), 0.18); }
    100% { background-color: var(--dmu-table-row-bg); }
}

tr.dmu-row-highlight {
    animation: dmu-row-flash 1.5s ease-out;
}

.dmu-seg-dropdown-panel .dmu-dropdown-link:hover,
.dmu-seg-dropdown-panel .dmu-dropdown-link:focus,
.dmu-results-dropdown-panel .dmu-dropdown-link:hover,
.dmu-results-dropdown-panel .dmu-dropdown-link:focus {
    background-color: var(--dmu-dropdown-hover-bg, rgba(0, 0, 0, 0.06)) !important;
    color: var(--dmu-dropdown-hover-text, var(--dark, #1a1a2e)) !important;
}


/* ── Segment dropdown ────────────────────────────────────────────────────────── */

.dmu-seg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dmu-seg-dot-primary {
    background: var(--primary);
}

.dmu-seg-dot-success {
    background: var(--success);
}

.dmu-seg-dot-info {
    background: var(--info);
}

.dmu-seg-dot-warning {
    background: var(--warning);
}

.dmu-seg-dot-danger {
    background: var(--danger);
}

.dmu-seg-dot-secondary {
    background: var(--secondary);
}

.dmu-seg-dot-dark {
    background: var(--dark);
}

.dmu-seg-badge {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--muted);
    background: var(--foreground-quaternary, rgba(0, 0, 0, 0.06));
    border-radius: 999px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.dmu-seg-btn .dmu-seg-chevron {
    transition: transform 0.18s ease;
}


/* ── Filter builder panel ────────────────────────────────────────────────────── */

.dmu-filter-builder-panel {
    position: fixed;
    z-index: 1080;
    width: 640px;
    max-width: calc(100vw - 32px);
    background: var(--foreground);
    border: 1px solid var(--separator);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: none;
    overflow: visible;
}

.dmu-filter-builder-panel.is-open {
    display: block;
}


/* ── Filter builder header ───────────────────────────────────────────────────── */

.dmu-fb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--separator);
}

.dmu-fb-title {
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dmu-fb-title-icon {
    width: 15px;
    height: 15px;
    color: var(--primary);
}

.dmu-fb-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--muted);
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-sm);
    transition: color 0.15s;
}

.dmu-fb-close:hover {
    color: var(--body);
}

.dmu-fb-close svg {
    width: 16px;
    height: 16px;
}


/* ── Filter builder body ─────────────────────────────────────────────────────── */

.dmu-fb-body {
    padding: 12px 16px;
}

.dmu-fb-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dmu-fb-rule-prefix {
    font-size: 0.78rem;
    color: var(--muted);
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Col + cond selects: fixed width */
.dmu-fb-col-select,
.dmu-fb-cond-select,
.ts-wrapper.dmu-fb-col-select,
.ts-wrapper.dmu-fb-cond-select {
    flex: 0 0 150px;
    min-width: 0;
}

/* Value wrap: fills remaining space, flex for date_between layout */
.dmu-fb-value-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.dmu-fb-value-wrap .ts-wrapper,
.dmu-fb-value-wrap input,
.dmu-fb-value-wrap select {
    width: 100%;
}

/* Date between inputs */
.dmu-fb-date-from,
.dmu-fb-date-to {
    flex: 1;
    min-width: 0;
}

.dmu-fb-date-sep {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

/* TomSelect — sizing + alignment */
.dmu-fb-rule .ts-wrapper {
    flex-shrink: 0;
}

.dmu-fb-rule .ts-wrapper .ts-control {
    min-height: 31px;
    height: 31px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    border-radius: var(--border-radius-sm, 0.375rem);
}

.dmu-fb-rule .ts-wrapper .ts-control .item {
    line-height: 1;
    padding: 0;
    margin: 0;
}

.dmu-fb-rule .ts-wrapper .ts-control input {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* TomSelect dropdown — must sit above the panel */
.dmu-fb-ts-dropdown {
    z-index: 9999 !important;
}

/* Remove button */
.dmu-fb-remove-rule {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.dmu-fb-remove-rule:hover {
    color: var(--danger);
}

.dmu-fb-remove-rule svg {
    width: 14px;
    height: 14px;
}

/* Add filter button */
.dmu-fb-add-rule {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 0.8rem;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    transition: opacity 0.15s;
}

.dmu-fb-add-rule:hover {
    opacity: 0.75;
}

.dmu-fb-add-rule svg {
    width: 14px;
    height: 14px;
}


/* ── Filter builder footer ───────────────────────────────────────────────────── */

.dmu-fb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--separator);
}


/* Sticky header clone — background must match thead */
.dmu-sticky-header {
    background: var(--foreground);
}

.dmu-sticky-header table {
    border-collapse: collapse;
    table-layout: fixed;
}

.dmu-sticky-header th {
    background: inherit;
    white-space: nowrap;
}


/* ── Table empty state ───────────────────────────────────────────────────────── */

.dmu-table-empty-row td {
    padding: 0 !important;
    border: none !important;
}

.dmu-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.dmu-table-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--foreground-quaternary, rgba(0, 0, 0, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--muted);
}

.dmu-table-empty-icon svg {
    width: 22px;
    height: 22px;
}

.dmu-table-empty-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--body);
    margin-bottom: 4px;
}

.dmu-table-empty-text {
    font-size: 0.82rem;
    color: var(--muted);
    max-width: 320px;
}

.dmu-seg-dropdown-panel,
.dmu-results-dropdown-panel {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 4px);
    display: none;
    /* ← hidden by default */
}

.dmu-seg-dropdown-panel.show,
.dmu-results-dropdown-panel.show {
    display: block;
}

.dmu-seg-dropdown-panel {
    min-width: 200px;
}

.dmu-results-dropdown-panel {
    min-width: 160px;
}


/* ── Persistent row highlights ───────────────────────────────────────────────
   Different from `tr.dmu-row-highlight` (a one-shot flash on back-nav). The
   .dmu-row-hl-* classes are applied/persisted by datatable-row-highlight.js
   and survive page reloads via localStorage. They work on:

   - Card-based rows: <div class="col-12 mb-2 dmu-row" id="..."><div class="card">...
   - Table rows:      <tr class="dmu-row-clickable" id="..." data-row-href="...">

   For card rows we tint the wrapper and let the inner .card show through; for
   <tr> rows we tint each <td> cell, since some browsers ignore <tr>
   background-color in tables with collapsed borders. */

.dmu-row-hl-primary,
.dmu-row-hl-secondary,
.dmu-row-hl-tertiary,
.dmu-row-hl-quaternary,
.dmu-row-hl-success,
.dmu-row-hl-info,
.dmu-row-hl-warning,
.dmu-row-hl-danger {
    border-radius: 0.75rem;
    transition: background-color 0.18s ease;
}

.dmu-row-hl-primary    { background-color: rgba(var(--primary-rgb),    0.12) !important; }
.dmu-row-hl-secondary  { background-color: rgba(var(--secondary-rgb),  0.18) !important; }
.dmu-row-hl-tertiary   { background-color: rgba(var(--tertiary-rgb),   0.18) !important; }
.dmu-row-hl-quaternary { background-color: rgba(var(--quaternary-rgb), 0.14) !important; }
.dmu-row-hl-success    { background-color: rgba(var(--success-rgb),    0.13) !important; }
.dmu-row-hl-info       { background-color: rgba(var(--info-rgb),       0.13) !important; }
.dmu-row-hl-warning    { background-color: rgba(var(--warning-rgb),    0.20) !important; }
.dmu-row-hl-danger     { background-color: rgba(var(--danger-rgb),     0.13) !important; }

.dmu-row-hl-primary    > .card,
.dmu-row-hl-secondary  > .card,
.dmu-row-hl-tertiary   > .card,
.dmu-row-hl-quaternary > .card,
.dmu-row-hl-success    > .card,
.dmu-row-hl-info       > .card,
.dmu-row-hl-warning    > .card,
.dmu-row-hl-danger     > .card {
    background-color: transparent !important;
}

tr.dmu-row-hl-primary    > td { background-color: rgba(var(--primary-rgb),    0.12) !important; }
tr.dmu-row-hl-secondary  > td { background-color: rgba(var(--secondary-rgb),  0.18) !important; }
tr.dmu-row-hl-tertiary   > td { background-color: rgba(var(--tertiary-rgb),   0.18) !important; }
tr.dmu-row-hl-quaternary > td { background-color: rgba(var(--quaternary-rgb), 0.14) !important; }
tr.dmu-row-hl-success    > td { background-color: rgba(var(--success-rgb),    0.13) !important; }
tr.dmu-row-hl-info       > td { background-color: rgba(var(--info-rgb),       0.13) !important; }
tr.dmu-row-hl-warning    > td { background-color: rgba(var(--warning-rgb),    0.20) !important; }
tr.dmu-row-hl-danger     > td { background-color: rgba(var(--danger-rgb),     0.13) !important; }


/* Color swatches used in the highlight context-menu submenu. */
.dmu-row-hl-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dmu-row-hl-swatch.is-primary    { background: var(--primary); }
.dmu-row-hl-swatch.is-secondary  { background: var(--secondary); }
.dmu-row-hl-swatch.is-tertiary   { background: var(--tertiary); }
.dmu-row-hl-swatch.is-quaternary { background: var(--quaternary); }
.dmu-row-hl-swatch.is-success    { background: var(--success); }
.dmu-row-hl-swatch.is-info       { background: var(--info); }
.dmu-row-hl-swatch.is-warning    { background: var(--warning); }
.dmu-row-hl-swatch.is-danger     { background: var(--danger); }