/* ========================================
   DUAL NAVBAR LAYOUT CSS
   TLOGic - Enhanced UI with Transaction Sidebar
   ======================================== */

:root {
    --tx-sidebar-width: 400px;
    --tx-sidebar-collapsed: 48px;
    --navbar-height: 56px;
    --subnav-height: 48px;
    --primary-navbar-z: 1040;
    --nav-navbar-z: 1030;
}

/* ========================================
   HIDE OLD SIDEBAR
   ======================================== */
.sidebar,
#appSidebar,
#sidebarToggle {
    display: none !important;
}

/* ========================================
   PRIMARY NAVBAR (Top bar)
   ======================================== */
.primary-navbar {
    height: var(--navbar-height);
    z-index: var(--primary-navbar-z);
}

/* ========================================
   NAVIGATION NAVBAR (Second row - horizontal tabs)
   ======================================== */
.nav-navbar {
    height: var(--subnav-height);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    z-index: var(--nav-navbar-z);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.nav-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-tab:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.nav-tab.active {
    background: var(--bs-body-bg);
    border-bottom-color: var(--redlist-primary);
    color: var(--redlist-primary);
    font-weight: 600;
}

.nav-tab i {
    font-size: 1rem;
}

/* Special styling for AI tab */
.nav-tab[data-page="ai"] {
    color: var(--redlist-primary);
}

.nav-tab[data-page="ai"].active {
    color: var(--redlist-primary);
}

/* ========================================
   MAIN LAYOUT
   ======================================== */
.app-container {
    display: flex;
    padding-top: calc(var(--navbar-height) + var(--subnav-height)) !important;
    min-height: 100vh;
}

.app-layout {
    display: flex;
    height: calc(100vh - var(--navbar-height) - var(--subnav-height));
    width: 100%;
    margin-top: calc(var(--navbar-height) + var(--subnav-height));
}

/* ========================================
   TRANSACTION SIDEBAR (Left panel on Raw Data page only)
   ======================================== */
.tx-sidebar {
    width: var(--tx-sidebar-width);
    flex-shrink: 0;
    background: var(--bs-body-bg);
    border-right: none;
    display: none; /* Hidden by default */
    flex-direction: column;
    transition: none;
    overflow: hidden;
    position: relative;
    min-width: 250px; /* Minimum width */
    max-width: 800px; /* Maximum width */
}

/* Show tx-sidebar only when on data page */
body[data-active-page="data"] .tx-sidebar {
    display: flex;
}

.tx-sidebar.collapsed {
    width: var(--tx-sidebar-collapsed);
}

/* Sidebar Header */
.sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    min-height: 56px;
}

/* Keep collapse chevron on the far right, even when chips/title are hidden */
.sidebar-header .collapse-btn {
    margin-left: auto;
}

/* Add a touch of breathing room on the right when collapsed */
.tx-sidebar.collapsed .collapse-btn {
    margin-right: .5rem;
}

/* Hide the palette button when collapsed to keep the header tidy */
.tx-sidebar.collapsed #trantypeColorSettings {
    display: none;
}

.tx-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.sidebar-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

.tx-sidebar.collapsed .sidebar-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Transaction count chip - replaces old badge */
.tx-count-chip {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    margin-right: auto;
}

.tx-sidebar.collapsed .tx-count-chip {
    display: none;
}

/* Legacy support */
.tx-count-badge {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    font-weight: normal;
}

.collapse-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--bs-body-color);
    transition: transform 0.3s;
    font-size: 0.9rem;
}

.collapse-btn:hover {
    color: var(--redlist-primary);
}

.tx-sidebar.collapsed .collapse-btn {
    transform: rotate(180deg);
}

/* ========================================
   SIDEBAR CONTROLS
   ======================================== */
.sidebar-controls {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--bs-body-bg);
}

.tx-sidebar.collapsed .sidebar-controls {
    padding: 0.5rem;
}

.control-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tx-sidebar.collapsed .control-row {
    flex-direction: column;
}

/* Search Row - Option 3 Style */
.search-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

.sidebar-search {
    flex: 1;
    min-width: 0;
    padding-right: 2rem; /* Make room for help icon */
}

.search-input-wrapper .search-help-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    z-index: 10;
}

.search-help-btn:hover {
    color: var(--redlist-primary);
}

.search-help-btn i {
    font-size: 0.9rem;
}

/* Icon-only buttons - Option 3 Style */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.btn-icon i {
    font-size: 0.9rem;
}

/* Deep filter count badge */
.deep-filter-count {
    font-size: 0.6rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
}

/* Sort Row - Option 3 Style */
.sort-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sort-row .fa-sort {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tx-sidebar.collapsed .sidebar-search,
.tx-sidebar.collapsed .sort-dropdown,
.tx-sidebar.collapsed .search-row,
.tx-sidebar.collapsed .sort-row {
    display: none;
}

/* Legacy support */
.sort-dropdown {
    min-width: 140px;
    font-size: 0.875rem;
}

.filter-buttons {
    display: flex;
    gap: 0.25rem;
}

/* Advanced Filters Panel */
.advanced-filters-panel {
    padding: 0.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

/* ========================================
   COMPACT TRANSACTION LIST
   ======================================== */
.tx-list-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.tx-item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    min-height: 42px;
    position: relative;
    border-left: 3px solid transparent; /* Reserve space for active border */
}

.tx-item:hover {
    background: var(--bs-tertiary-bg);
}

.tx-item.active {
    background: var(--redlist-primary-light);
    border-left: 3px solid var(--redlist-primary) !important;
    font-weight: 500;
    padding-left: calc(0.75rem - 3px); /* Adjust padding to compensate for border */
}

.tx-item.row-selected {
    background: var(--bs-info-bg-subtle);
    border-left: 3px solid var(--bs-info) !important;
    padding-left: calc(0.75rem - 3px); /* Adjust padding to compensate for border */
}

/* If both active and selected, prioritize active (current transaction) */
.tx-item.active.row-selected {
    border-left: 3px solid var(--redlist-primary) !important;
}

.tx-item.expanded {
    background: var(--bs-secondary-bg);
    min-height: auto;
    flex-wrap: wrap;
}

/* Transaction Item Components */
.tx-item-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.tx-item-compact {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    transition: opacity 0.2s;
}

.tx-sidebar.collapsed .tx-item-compact {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.tx-sidebar.collapsed .tx-type {
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

.tx-index {
    font-family: monospace;
    font-weight: 600;
    color: var(--bs-secondary-color);
    min-width: 35px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tx-item.active .tx-index {
    color: var(--redlist-primary);
}

.tx-type {
    min-width: 70px;
    max-width: 85px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1.5px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}

.tx-item.active .tx-type {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--redlist-primary);
}

/* Transaction Details Container */
.tx-details {
    display: flex;
    gap: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.tx-details > span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.tx-details .detail-label {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.tx-details .detail-value {
    color: var(--bs-body-color);
    font-weight: 500;
}

/* Responsive Fields - Show/Hide based on sidebar width */
.tx-detail-wide,
.tx-detail-wider {
    display: none;
}

/* Show offset and size when sidebar is > 500px */
@media (min-width: 1px) {
    .tx-sidebar {
        /* Create a container query-like effect */
    }
}

/* Show offset and size when sidebar width > 500px */
.tx-sidebar[style*="width: 5"],
.tx-sidebar[style*="width: 6"],
.tx-sidebar[style*="width: 7"],
.tx-sidebar[style*="width: 8"] {
}

/* Better approach: Use CSS to show fields progressively */
.tx-details .tx-detail-wide {
    display: none;
}

.tx-details .tx-detail-wider {
    display: none;
}

/* Show fields when sidebar is wider - controlled by JavaScript */
.tx-sidebar.width-medium .tx-details .tx-detail-wide,
.tx-sidebar.width-large .tx-details .tx-detail-wide {
    display: flex;
}

.tx-sidebar.width-large .tx-details .tx-detail-wider {
    display: flex;
}

/* ===== Transaction Type Colors - Light Mode ===== */

.trantype-SALE {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745 !important;
}

.trantype-VOID {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #dc3545 !important;
}

.trantype-VOIDTRX {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #dc3545 !important;
}

.trantype-SOFF {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffc107 !important;
}

.trantype-TNDCASH {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8 !important;
}

.trantype-TNDNEX {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8 !important;
}

.trantype-LOAN {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-PICKUP {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-TNDLST {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8 !important;
}

.trantype-PRICVC {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-TRAIN {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-TRMXFER {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-TRMMON {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-TNDCNT {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8 !important;
}

.trantype-VPTR {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-WIC {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-RPRINT {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-STNDALN {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-INQY {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-WICINQY {
    background-color: #e7f3ff;
    color: #004085;
    border-color: #007bff !important;
}

.trantype-RCPN {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745 !important;
}

.trantype-RCIS {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745 !important;
}

.trantype-GRRP {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

.trantype-RSRVD {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d !important;
}

/* 20XX String Family */
.trantype-20XX {
    background-color: #e7d9ff;
    color: #5a2c7d;
    border-color: #9b59b6 !important;
}

/* Default/Unknown */
.trantype-UNKNOWN {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #adb5bd !important;
}

/* Expand Button */
.tx-expand-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.tx-item.expanded .tx-expand-btn {
    transform: rotate(180deg);
}

.tx-expand-btn:hover {
    color: var(--bs-body-color);
}

/* Expanded Details */
.tx-details-expanded {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.tx-item.expanded .tx-details-expanded {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
}

.detail-label {
    font-weight: 500;
}

.detail-value {
    font-family: monospace;
    color: var(--bs-body-color);
}

/* Collapsed sidebar state */
.tx-sidebar.collapsed .tx-item {
    justify-content: center;
    padding: 0.5rem;
}

.tx-sidebar.collapsed .tx-item-checkbox,
.tx-sidebar.collapsed .tx-expand-btn {
    display: none;
}

/* ========================================
   TRANSACTION PAGINATION
   ======================================== */
.tx-pagination {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    flex-shrink: 0;
}

.tx-sidebar.collapsed .tx-pagination {
    display: none;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */
.main-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.content-wrapper {
    padding-top: 0 !important;
}

.content-page {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
}

.content-page.active {
    display: flex;
}

/* ========================================
   RAW DATA PAGE SPECIFIC
   ======================================== */
#data-page {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Old Selection Toolbar
.selection-toolbar {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.selection-toolbar.active {
    opacity: 1;
    max-height: 60px;
}
*/
/* Selection Toolbar — default state should occupy zero space */
.selection-toolbar {
    padding: 0;                /* was ~0.75rem 1.5rem */
    border: 0;                 /* remove border when hidden */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Only add padding/border when active/visible */
.selection-toolbar.active {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    opacity: 1;
    max-height: 64px;
}

/* Nudge the controls closer to the header */
.sidebar-controls {
    padding-top: 0.25rem;     /* was 0.75rem */
}

/* Transaction View Container */
.tx-view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Important for flexbox children */
}

.tx-view-container .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.tx-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.tx-tab-content .tab-pane {
    height: 100%;
    overflow-y: auto;
}

.tx-view-header {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.tx-view-tabs {
    padding: 0 1.5rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.tx-view-content {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
}

/* ========================================
   TOOLTIP (for collapsed sidebar)
   ======================================== */
.tx-item-tooltip {
    position: fixed;
    background: var(--bs-dark);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    z-index: 1060;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.tx-item-tooltip.show {
    opacity: 1;
}

/* ========================================
   DARK MODE
   ======================================== */
[data-bs-theme="dark"] .nav-navbar {
    background: #1a1d20;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .sidebar-header {
    background: #1a1d20;
}

[data-bs-theme="dark"] .tx-sidebar {
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .tx-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .tx-item.expanded {
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .advanced-filters-panel {
    background: #1a1d20;
}

[data-bs-theme="dark"] .nav-tab.active {
    background: var(--bs-body-bg);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .nav-navbar {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .tx-sidebar {
        --tx-sidebar-width: 300px;
    }
    
    .primary-navbar .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 768px) {
    .nav-tab span {
        display: none;
    }
    
    .nav-tab {
        padding: 0.5rem 0.75rem;
    }
    
    .tx-sidebar {
        --tx-sidebar-width: 260px;
    }
    
    .tx-view-header {
        padding: 0.5rem 1rem;
    }
    
    .tx-view-tabs {
        padding: 0 1rem;
    }
    
    .tx-view-content {
        padding: 1rem;
    }
    
    .selection-toolbar {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .tx-sidebar {
        --tx-sidebar-width: 240px;
    }
    
    .nav-navbar {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }
    
    .nav-tab {
        padding: 0.5rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .sidebar-header {
        padding: 0.5rem;
    }
    
    .sidebar-controls {
        padding: 0.5rem;
    }
    
    .tx-view-header {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .tx-view-content {
        padding: 0.75rem;
    }
    
    .btn-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    /* On very small screens, consider collapsing sidebar by default */
    .tx-sidebar {
        --tx-sidebar-width: 48px;
    }
    
    /* Or completely hide it and show a toggle button */
    body[data-active-page="data"] .tx-sidebar {
        position: fixed;
        left: -100%;
        transition: left 0.3s ease;
        z-index: 1050;
        height: 100vh;
    }
    
    body[data-active-page="data"] .tx-sidebar.mobile-visible {
        left: 0;
        --tx-sidebar-width: 280px;
    }
    
    .primary-navbar .navbar-brand {
        font-size: 0.9rem;
    }
    
    #fileMeta {
        display: none !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.badge.bg-primary {
    background-color: var(--redlist-primary) !important;
}

.btn-outline-primary {
    color: var(--redlist-primary);
    border-color: var(--redlist-primary);
}

.btn-outline-primary:hover {
    background-color: var(--redlist-primary);
    border-color: var(--redlist-primary);
    color: white;
}

/* ========================================
   UPLOAD PAGE ADJUSTMENTS
   ======================================== */
#uploadPageOverlay {
    z-index: 1050;
}

/* ========================================
   HIDE OLD TABLE ELEMENTS
   ======================================== */
#txTable,
#filtersPane,
.split,
.gutter {
    display: none !important;
}

/* ========================================
   KEEP EXISTING FUNCTIONALITY
   ======================================== */
/* These classes maintain compatibility with existing scripts.js */
.table-primary {
    background-color: var(--redlist-primary-light) !important;
}

.row-selected {
    background-color: var(--bs-info-bg-subtle) !important;
}

/* ===== Transaction Type Colors - Dark Mode ===== */

[data-bs-theme="dark"] .trantype-SALE {
    background-color: #1e4620;
    color: #90ee90;
    border-color: #28a745 !important;
}

[data-bs-theme="dark"] .trantype-VOID {
    background-color: #4a1215;
    color: #ff6b6b;
    border-color: #dc3545 !important;
}

[data-bs-theme="dark"] .trantype-VOIDTRX {
    background-color: #4a1215;
    color: #ff6b6b;
    border-color: #dc3545 !important;
}

[data-bs-theme="dark"] .trantype-SOFF {
    background-color: #4a3a0a;
    color: #ffd700;
    border-color: #ffc107 !important;
}

[data-bs-theme="dark"] .trantype-TNDCASH,
[data-bs-theme="dark"] .trantype-TNDNEX,
[data-bs-theme="dark"] .trantype-TNDLST,
[data-bs-theme="dark"] .trantype-TNDCNT {
    background-color: #0d3a42;
    color: #5dade2;
    border-color: #17a2b8 !important;
}

[data-bs-theme="dark"] .trantype-LOAN,
[data-bs-theme="dark"] .trantype-PICKUP,
[data-bs-theme="dark"] .trantype-TRMXFER,
[data-bs-theme="dark"] .trantype-TRMMON,
[data-bs-theme="dark"] .trantype-RPRINT,
[data-bs-theme="dark"] .trantype-GRRP,
[data-bs-theme="dark"] .trantype-RSRVD {
    background-color: #2d3338;
    color: #adb5bd;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .trantype-PRICVC,
[data-bs-theme="dark"] .trantype-TRAIN,
[data-bs-theme="dark"] .trantype-VPTR,
[data-bs-theme="dark"] .trantype-WIC,
[data-bs-theme="dark"] .trantype-STNDALN,
[data-bs-theme="dark"] .trantype-INQY,
[data-bs-theme="dark"] .trantype-WICINQY {
    background-color: #0a2540;
    color: #66b3ff;
    border-color: #007bff !important;
}

[data-bs-theme="dark"] .trantype-RCPN,
[data-bs-theme="dark"] .trantype-RCIS {
    background-color: #1e4620;
    color: #90ee90;
    border-color: #28a745 !important;
}

[data-bs-theme="dark"] .trantype-20XX {
    background-color: #3a1e4a;
    color: #d8b5ff;
    border-color: #9b59b6 !important;
}

[data-bs-theme="dark"] .trantype-UNKNOWN {
    background-color: #2d3338;
    color: #adb5bd;
    border-color: #6c757d !important;
}
/* ============================================
   TRANSACTION TYPE COLOR MODAL CSS
   Add these styles to styles-dual-navbar.css
   ============================================ */

/* Transaction Type Color Picker Styles */
.trantype-color-item {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    transition: all 0.2s;
}

.trantype-color-item:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.1);
}

/* Live Preview Badge */
.trantype-preview {
    padding: 0.35rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1.5px solid;
    min-width: 85px;
    text-align: center;
    transition: all 0.2s;
}

/* Color picker input styling */
.form-control-color {
    width: 45px;
    height: 38px;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

/* Hex input field */
.trantype-color-item input[type="text"] {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Preset buttons */
#trantypeColorModal .btn-group button {
    position: relative;
}

#trantypeColorModal .btn-group button.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Scrollbar styling for color list */
#trantypeColorModal .modal-body > div[style*="overflow-y"] {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-secondary) var(--bs-body-bg);
}

#trantypeColorModal .modal-body > div[style*="overflow-y"]::-webkit-scrollbar {
    width: 8px;
}

#trantypeColorModal .modal-body > div[style*="overflow-y"]::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
    border-radius: 4px;
}

#trantypeColorModal .modal-body > div[style*="overflow-y"]::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 4px;
}

#trantypeColorModal .modal-body > div[style*="overflow-y"]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-secondary-color);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .trantype-color-item {
    background: var(--bs-secondary-bg);
}

/* Button to open settings - if added to sidebar */
.sidebar-header .btn-trantype-colors {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-header .btn-trantype-colors:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Spacing for modal sections */
#trantypeColorModal hr {
    margin: 1.5rem 0;
    opacity: 0.15;
}

/* Input group adjustments */
#trantypeColorModal .input-group-sm {
    font-size: 0.875rem;
}

#trantypeColorModal .input-group-sm .form-control {
    padding: 0.375rem 0.5rem;
}

/* Label styling */
#trantypeColorModal .small.text-muted {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}
/* ========================================
   UNIFIED FILTER DIALOG STYLING
   Add this to styles-dual-navbar.css
   ======================================== */

/* Shared filter dialog card styling */
.filter-dialog-card {
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 0.5rem;
}

.filter-dialog-header {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.12) 100%);
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-dialog-header .filter-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-emphasis-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-dialog-header .filter-title i {
    color: var(--bs-primary);
}

.filter-dialog-header .filter-title small {
    font-weight: 400;
    font-size: 0.8rem;
}

.filter-dialog-body {
    padding: 1rem 0.75rem 0.75rem 0.75rem;
}

/* Better input spacing for filter dialogs */
.filter-dialog-inputs .row {
    row-gap: 0.75rem;
}

.filter-dialog-inputs .form-label {
    margin-bottom: 0.375rem;
    font-weight: 500;
}

.filter-dialog-inputs .form-control,
.filter-dialog-inputs .form-select {
    font-size: 0.9rem;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .filter-dialog-card {
    border-color: rgba(13, 110, 253, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .filter-dialog-header {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.2) 100%);
    border-bottom-color: rgba(13, 110, 253, 0.3);
}

/* Keep old class for backward compatibility during transition */
.advanced-filters-panel {
    /* Legacy support - can be removed after update */
    padding: 0.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

/* Center the REDList logo on the main navbar */
.primary-navbar .container-fluid {
    position: relative;
}

.navbar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;  /* allows buttons behind to stay clickable */
    z-index: 2;
}

.navbar-center .navbar-brand {
    pointer-events: auto; /* make logo clickable */
}

.navbar-logo {
    height: 29px;
    vertical-align: middle;
}

/* Theme-aware logo toggle */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: inline-block; }

/* ========================================================================== */
/* String Field Table Copy Button Styles */
/* ========================================================================== */

.string-fields-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.copy-table-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-table-btn:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary);
}

.copy-table-btn i {
    font-size: 0.875em;
}

.copy-table-btn.copied {
    background-color: var(--bs-success);
    color: white;
    border-color: var(--bs-success);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .copy-table-btn {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color);
    color: var(--bs-light);
}

[data-bs-theme="dark"] .copy-table-btn:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* ========================================
   RESIZE HANDLE STYLES
   ======================================== */

/* Resize Handle */
.resize-handle {
    width: 8px;
    background: var(--bs-border-color);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.2s ease;
    z-index: 10;
    display: none; /* Hidden by default */
}

/* Show resize handle only when on data page and sidebar is not collapsed */
body[data-active-page="data"] .resize-handle {
    display: block;
}

body[data-active-page="data"] .tx-sidebar.collapsed ~ .resize-handle {
    display: none;
}

.resize-handle:hover {
    background: var(--redlist-primary);
}

.resize-handle:active {
    background: var(--redlist-primary-hover);
}

/* Visual indicator in the center of the handle */
.resize-handle-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 40px;
    background: var(--bs-body-bg);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.resize-handle:hover .resize-handle-indicator {
    opacity: 1;
}

/* Add visual feedback while resizing */
body.resizing .resize-handle {
    background: var(--redlist-primary);
}

body.resizing .resize-handle-indicator {
    opacity: 1;
}

/* Prevent text selection during resize */
body.resizing {
    user-select: none;
    cursor: col-resize !important;
}

body.resizing * {
    cursor: col-resize !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .resize-handle {
    background: var(--bs-border-color);
}

[data-bs-theme="dark"] .resize-handle:hover {
    background: var(--redlist-primary);
}

[data-bs-theme="dark"] .resize-handle-indicator {
    background: var(--bs-body-bg);
}
/* ========================================
   FILTER OFFCANVAS PANELS
   Styles for slide-out filter panels
   ======================================== */

/* Offcanvas sizing and positioning */
.filter-offcanvas {
    width: 400px;
    max-width: 90vw;
    --bs-offcanvas-backdrop-opacity: 0; /* No backdrop */
}

/* Custom header styling */
.filter-offcanvas .offcanvas-header {
    background: linear-gradient(135deg,
    rgba(13, 110, 253, 0.08) 0%,
    rgba(13, 110, 253, 0.12) 100%);
    padding: 1rem 1.25rem;
}

.filter-offcanvas .offcanvas-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.filter-offcanvas .offcanvas-title i {
    color: var(--bs-primary);
}

/* Body spacing */
.filter-offcanvas .offcanvas-body {
    padding: 1.25rem;
}

/* Footer styling */
.offcanvas-footer {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Form inputs in offcanvas */
.filter-offcanvas .form-control,
.filter-offcanvas .form-select {
    font-size: 0.9rem;
}

.filter-offcanvas .form-label {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.filter-offcanvas .form-text {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

/* Alert sizing */
.filter-offcanvas .alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* Criterion chips (for Deep Field Filter) */
.criterion-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.criterion-chip code {
    background: rgba(13, 110, 253, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: var(--bs-primary);
    font-size: 0.85rem;
}

.criterion-chip .criterion-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.criterion-chip .criterion-remove {
    margin-left: 0.5rem;
    padding: 0.125rem 0.25rem;
    opacity: 0.6;
}

.criterion-chip .criterion-remove:hover {
    opacity: 1;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .filter-offcanvas .offcanvas-header {
    background: linear-gradient(135deg,
    rgba(13, 110, 253, 0.15) 0%,
    rgba(13, 110, 253, 0.2) 100%);
    border-bottom-color: rgba(13, 110, 253, 0.3);
}

[data-bs-theme="dark"] .criterion-chip {
    background: var(--bs-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .criterion-chip code {
    background: rgba(13, 110, 253, 0.2);
}

/* Active filter button state */
.btn-icon.filter-active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.btn-icon.filter-active:hover {
    background-color: var(--bs-primary);
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-offcanvas {
        width: 100%;
        max-width: 100%;
    }
}

/* Smooth transitions */
.filter-offcanvas {
    transition: transform 0.3s ease-in-out;
}