.accordion-node-row {
    font-weight: bold;
    text-align: left;
}

.accordion-node-td {
    text-align: right;;
}

.accordion-node-th {
    text-align: right;
}

.accordion-node-table {
    margin: 0;
    font-size: 15px;
    width: 100%;
    border-collapse: collapse
}

.accordion-title-div {
    margin-left: 16px;
    margin-top: 4px;
    padding-right: 1rem;
}

.accordion-leaf-content > div {
    padding: 1rem 0;
}

.accordion-leaf-table {
    margin: 0;
    font-size: 15px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.accordion-leaf-table,
.accordion-node-table {
    table-layout: fixed;
    width: 100%;
}

.accordion-leaf-table th,
.accordion-leaf-table td,
.accordion-node-table th,
.accordion-node-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-button {
    border-radius: 8px !important;
}

.accordion-item {
    border-radius: 8px !important;
    margin-bottom: 8px;
}

.accordion-body {
    border-radius: 0 0 8px 8px !important;
    padding: 0.5rem 0 0.5rem 1rem !important;
}

/* Ensure zebra striping applies to accordion item titles */
.accordion-leaf-item.even-row .accordion-button,
.accordion-node-item.even-row .accordion-button {
    background-color: rgb(248, 248, 248) !important;
}
.accordion-leaf-item.odd-row .accordion-button,
.accordion-node-item.odd-row .accordion-button {
    background-color: white !important;
}

/* Color overrides */
.accordion-leaf-item.even-row.firm .accordion-button,
.accordion-node-item.even-row.firm .accordion-button {
    background-color: rgb(248, 248, 252) !important; /* faint lavender */
}
.accordion-leaf-item.odd-row.firm .accordion-button,
.accordion-node-item.odd-row.firm .accordion-button {
    background-color: rgb(252, 248, 250) !important; /* faint lavenderblush */
}

.accordion-leaf-item.even-row.strategy .accordion-button,
.accordion-node-item.even-row.strategy .accordion-button {
    background-color: rgb(252, 252, 245) !important; /* faint golden yellow */
}
.accordion-leaf-item.odd-row.strategy .accordion-button,
.accordion-node-item.odd-row.strategy .accordion-button {
    background-color: rgb(255, 255, 250) !important; /* faint light yellow */
}

.accordion-leaf-item.even-row.substrategy .accordion-button,
.accordion-node-item.even-row.substrategy .accordion-button {
    background-color: rgb(245, 252, 245) !important; /* faint light green */
}
.accordion-leaf-item.odd-row.substrategy .accordion-button,
.accordion-node-item.odd-row.substrategy .accordion-button {
    background-color: rgb(250, 255, 250) !important; /* faint pale green */
}

/* Apply zebra striping to accordion content */
.accordion-leaf-content.even-row,
.accordion-leaf-content.odd-row {
    background-color: inherit; /* Inherit from parent accordion item */
}

/* Ensure table inside accordion title respects background */
.accordion-leaf-item .accordion-node-table,
.accordion-node-item .accordion-node-table {
    background: transparent; /* Prevent table from overriding accordion-button background */
}

/* Optional: Adjust padding for consistency with original table */
.accordion-leaf-item.accordion-item {
    margin: 0;
}

.accordion-leaf-item .accordion-button {
    padding: 0.25rem !important; /* Match table's tight padding */
}
.accordion-leaf-item .accordion-button .accordion-node-table {
    margin: 0;
    width: 100%;
}

.filters-panel {
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    padding: 24px 24px 18px 24px;
    width: 320px;
    font-family: 'Inter', sans-serif;
}

.filter-row {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.filter-label {
    flex-grow: 1;
    font-weight: 700;
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
}

.filter-zone-label {
    padding-left: 24px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.filter-checkbox-container {
    width: 30px; 
    display: flex;
    justify-content: center;
}

.filter-checkbox input[type="checkbox"] {
    transform: scale(1.2);
    margin: 0;
}

.no-padding-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; 
}

.pnl-wrapper-head {

    width: 100%;
    max-width: 100% !important;
    min-width: 100% !important;

    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;

    display: flex;
    flex-direction: column;
   
    overflow-x: auto;         
    overflow-y: visible !important;
    padding: 0 1px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    box-sizing: border-box;
}

/* Generic wide scroll wrapper: enforce a reasonable minimum width with horizontal scroll */
.wide-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 1400px; /* adjust as needed based on column count */
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
}

/* Keep the navbar hamburger toggler always visible in the top-right corner */
.navbar-toggler-fixed-right {
    position: fixed;
    top: 8px;
    left: 16px;
    z-index: 1100;
    border-width: 5px;
}

.wide-scroll-wrapper.wider {
    min-width: 1800px;
}

.table-wrapper {

    width: 100%;
    max-width: 100% !important;
    min-width: 100% !important;

    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;

    display: flex;
    flex-direction: column;
   
    overflow-x: auto;       
    overflow-y: visible !important;
    padding: 0 1px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10px;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .table-wrapper {
        width: 90vw;
        min-width: 1200px;
        max-width: 1800px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.table-wrapper table {
    width: 100%;
}

.table-row, .table-cell {
    position: relative;
}

.Select-menu-outer, .Select__menu, .Select__menu-list {
    z-index: 999999 !important;
    max-height: 200px;
    overflow-y: auto;
}

.table-scroll {
    /*max-height: 400px; */
    overflow-x: auto;  
    overflow-y: visible !important;
    border: 1px solid #eee; 
    padding: 0;       
    margin: 0;        
}

.table-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    width: 100%;       
    min-width: 0;      
    flex-shrink: 1;
}

.table-header-cell {
    font-weight: bold;
    background-color: transparent;  
    display: flex; 
    vertical-align: top;              
    align-items: flex-start;         
    justify-content: flex-start;      
    padding: 4px 6px;
    border-right: 1px solid #ccc;
    border-top: none;
    border-bottom: none;
    border-left: none;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word; 
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.table-cell {
    padding: 4px 6px;
    border-right: 1px solid #ccc;
    border-top: none;
    border-bottom: none;
    border-left: none;
    white-space: normal;
    overflow: visible;
    text-overflow: ellipsis;
    word-break: break-word; 
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.table-cell .Select, 
.table-cell .Select-control {
    min-width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap;  
    display: inline-block;
    font-size: 8px;
}

.table-row > .table-cell:last-child,
.table-row > .table-header-cell:last-child {
    border-right: none;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
    padding-left: 4px !important;
    padding-right: 2px !important;
    display: inline-block;
    white-space: nowrap;
    /*overflow: hidden;*/
    overflow: visible;
    text-overflow: ellipsis;
    font-size: 8px;
}

.Select-menu-outer, .Select__menu {
    z-index: 9999 !important;
}

.narrow-col {
    min-width: 30px !important;
    max-width: 60px !important;
    width: 40px !important;
    flex: 0 0 40px !important;
    padding: 4px 3px;
}


.avg-col {
    min-width: 60px !important;
    max-width: 100px !important;
    width: 80px !important;
    flex: 0 0 80px !important;
    padding: 4px 3px;
    /*text-align: center; */
}

.table-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    width: 100%;           /* Make row fill the wrapper */
    box-sizing: border-box;
}


.table-wrapper,
.table-scroll,
.table-row,
.table-cell {
    overflow: visible !important;
}

.negative-number {
    color: #d32f2f;
}

.dash-spreadsheet-menu-item button {
    font-size: 12px;
    color: #888;
    border-radius: 6px;
    padding: 2px 8px;
    background: #fafafa;
    display: none;
}

.dash-table-container .dropdown {
    font-size: 13px !important;
    padding: 2px 12px !important;
    background: #f7f7fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    color: #555 !important;
    margin: 0 0 0 8px !important;
    box-shadow: none !important;
    height: 28px !important;
    min-width: 60px !important;
    cursor: pointer;
    transition: background 0.2s;
}
.dash-table-container .dropdown:hover,
.dash-table-container .dropdown:focus {
    background: #e0e0e0 !important;
    color: #222 !important;
    border-color: #bbb !important;
}

/***********************************************/
/* Dash customizations */
/***********************************************/
/* Make tables fixed height */
.accordion-leaf-content .dash-spreadsheet-container {
    height: 350px;
}

/* Make table pagination buttons larger */
.previous-next-container button {
    width: 100px;
}

/* Ensure the table takes up a consistent height */
#transactions-table-content-table > .dash-spreadsheet-container {
    min-height: 50vh;
}

/* Date navigation buttons */
.date-nav-button {
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 16px;
    height: 38px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.date-nav-button:hover {
    background-color: #e9ecef;
}

/* Loading spinner overlay - only when visible */
.custom-spinner #exposure-loading[style*="visibility: visible"],
.custom-spinner #loading-wrapper[style*="visibility: visible"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 250px !important;
}

/* Make spinner larger and more visible */
.custom-spinner .dash-default-spinner {
    width: 60px !important;
    height: 48px !important;
}

.custom-spinner .dash-default-spinner > div {
    width: 8px !important;
    margin-right: 6px !important;
}

/* Pivot Table Styling */
.pivot-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.pivot-table .border-dotted {
    border-left: 1px dotted #dee2e6 !important;
}

.pivot-table .group-level-0 {
    background-color: rgba(13, 110, 253, 0.05) !important;
}

.pivot-table .group-level-1 {
    background-color: rgba(13, 110, 253, 0.03) !important;
}

.table-xs {
    font-size: 0.75rem;
}

.table-xs th, .table-xs td {
    padding: 0.25rem;
}

.table-lg {
    font-size: 1.1rem;
}

.table-lg th, .table-lg td {
    padding: 0.75rem;
}

.table-xl {
    font-size: 1.25rem;
}

.table-xl th, .table-xl td {
    padding: 1rem;
}

.pivot-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.pivot-table tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Group boundary styling for visual separation */
.pivot-table tbody tr.group-boundary {
    border-bottom: 2px solid #dee2e6 !important;
}

.pivot-table tbody tr.group-boundary td {
    border-bottom: 2px solid #dee2e6 !important;
    padding-bottom: 6px !important;
}

/* Stronger boundary styling only when there are multiple groups */
.pivot-table tbody tr.group-boundary.multi-group {
    border-bottom: 4px solid #6c757d !important;
}

.pivot-table tbody tr.group-boundary.multi-group td {
    border-bottom: 4px solid #6c757d !important;
    padding-bottom: 12px !important;
}

.pivot-table tbody tr.group-boundary.multi-group td::after {
    content: "";
    display: block;
    height: 8px;
    background: transparent;
}

/* Sub-total row styling - use custom class to avoid Bootstrap conflicts */
.pivot-table tbody tr.pivot-subtotal,
.pivot-table tbody tr.pivot-subtotal.group-boundary {
    background-color: rgba(108, 117, 125, 0.15) !important;
    border-top: 1px solid #adb5bd !important;
    border-color: #adb5bd !important;
}

.pivot-table tbody tr.pivot-subtotal td,
.pivot-table tbody tr.pivot-subtotal.group-boundary td {
    background-color: rgba(108, 117, 125, 0.15) !important;
    border-top: 1px solid #adb5bd !important;
    border-color: #adb5bd !important;
    font-weight: 600 !important;
    font-style: italic;
    color: #343a40 !important;
}

/* Legacy support - keep table-warning override just in case */
.pivot-table tbody tr.table-warning,
.pivot-table tbody tr.table-warning.group-boundary,
table.pivot-table tbody tr.table-warning,
.table.pivot-table tbody tr.table-warning {
    background-color: rgba(108, 117, 125, 0.15) !important;
    background: rgba(108, 117, 125, 0.15) !important;
    border-top: 1px solid #adb5bd !important;
    border-color: #adb5bd !important;
    border-top-color: #adb5bd !important;
    border-bottom-color: #adb5bd !important;
    /* Nuclear option - override any possible Bootstrap yellow */
    --bs-table-bg: rgba(108, 117, 125, 0.15) !important;
    --bs-table-accent-bg: rgba(108, 117, 125, 0.15) !important;
}

.pivot-table tbody tr.table-warning td,
.pivot-table tbody tr.table-warning.group-boundary td,
table.pivot-table tbody tr.table-warning td,
.table.pivot-table tbody tr.table-warning td {
    background-color: rgba(108, 117, 125, 0.15) !important;
    background: rgba(108, 117, 125, 0.15) !important;
    border-top: 1px solid #adb5bd !important;
    border-color: #adb5bd !important;
    border-top-color: #adb5bd !important;
    border-bottom-color: #adb5bd !important;
    font-weight: 600 !important;
    font-style: italic;
    color: #343a40 !important;
    /* Nuclear option - override any possible Bootstrap yellow */
    --bs-table-bg: rgba(108, 117, 125, 0.15) !important;
    --bs-table-accent-bg: rgba(108, 117, 125, 0.15) !important;
}

/* Sub-total with group boundary - thick line under sub-total */
.pivot-table tbody tr.pivot-subtotal.group-boundary,
.pivot-table tbody tr.table-warning.group-boundary {
    border-bottom: 4px solid #6c757d !important;
    padding-bottom: 8px !important;
}

.pivot-table tbody tr.pivot-subtotal.group-boundary td,
.pivot-table tbody tr.table-warning.group-boundary td {
    border-bottom: 4px solid #6c757d !important;
    padding-bottom: 8px !important;
}

/* Grand total row styling - prominent and authoritative */
.pivot-table tbody tr.table-secondary {
    background-color: rgba(13, 110, 253, 0.12) !important;
    border-top: 3px solid #0d6efd !important;
    border-bottom: 3px solid #0d6efd !important;
}

.pivot-table tbody tr.table-secondary td {
    background-color: rgba(13, 110, 253, 0.12) !important;
    border-top: 3px solid #0d6efd !important;
    border-bottom: 3px solid #0d6efd !important;
    font-weight: 700 !important;
    color: #0d47a1 !important;
    font-size: 1.05em !important;
}

/* Hash-based group coloring for pivot tables */
.pivot-table tbody tr.even-row.group-color-0 {
    background-color: rgba(13, 110, 253, 0.05) !important; /* Blue */
}
.pivot-table tbody tr.odd-row.group-color-0 {
    background-color: rgba(13, 110, 253, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-1 {
    background-color: rgba(25, 135, 84, 0.05) !important; /* Green */
}
.pivot-table tbody tr.odd-row.group-color-1 {
    background-color: rgba(25, 135, 84, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-2 {
    background-color: rgba(255, 193, 7, 0.05) !important; /* Yellow */
}
.pivot-table tbody tr.odd-row.group-color-2 {
    background-color: rgba(255, 193, 7, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-3 {
    background-color: rgba(220, 53, 69, 0.05) !important; /* Red */
}
.pivot-table tbody tr.odd-row.group-color-3 {
    background-color: rgba(220, 53, 69, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-4 {
    background-color: rgba(111, 66, 193, 0.05) !important; /* Purple */
}
.pivot-table tbody tr.odd-row.group-color-4 {
    background-color: rgba(111, 66, 193, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-5 {
    background-color: rgba(13, 202, 240, 0.05) !important; /* Cyan */
}
.pivot-table tbody tr.odd-row.group-color-5 {
    background-color: rgba(13, 202, 240, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-6 {
    background-color: rgba(255, 99, 132, 0.05) !important; /* Pink */
}
.pivot-table tbody tr.odd-row.group-color-6 {
    background-color: rgba(255, 99, 132, 0.03) !important;
}

.pivot-table tbody tr.even-row.group-color-7 {
    background-color: rgba(255, 159, 64, 0.05) !important; /* Orange */
}
.pivot-table tbody tr.odd-row.group-color-7 {
    background-color: rgba(255, 159, 64, 0.03) !important;
}

/* Positive and negative value styling for pivot tables */
.pivot-table .positive-value {
    color: #198754 !important; /* Bootstrap success green */
    font-weight: 500;
}

.pivot-table .negative-value {
    color: #dc3545 !important; /* Bootstrap danger red */
    font-weight: 500;
}

.pivot-table .zero-value {
    color: #6c757d !important; /* Bootstrap secondary gray */
    font-style: italic;
}

/* Stronger styling for totals */
.pivot-table .total-positive {
    color: #146c43 !important; /* Darker green for totals */
    font-weight: 700;
}

.pivot-table .total-negative {
    color: #b02a37 !important; /* Darker red for totals */
    font-weight: 700;
}

.pivot-table .total-zero {
    color: #495057 !important; /* Darker gray for totals */
    font-weight: 700;
    font-style: italic;
}

/* Consistent column widths for pivot tables */
.col-strategy { 
    width: 100px; 
    min-width: 100px; 
    max-width: 100px; 
}

.col-category { 
    width: 100px; 
    min-width: 100px; 
    max-width: 100px; 
}

.col-default { 
    width: 120px; 
    min-width: 120px; 
    max-width: 120px; 
}

.col-value { 
    width: 90px; 
    min-width: 90px; 
    max-width: 90px; 
    text-align: right; 
}

.col-total { 
    width: 110px; 
    min-width: 110px; 
    max-width: 110px; 
    text-align: right; 
    font-weight: bold; 
}

.col-weekend { 
    width: 60px !important; 
    min-width: 60px !important; 
    max-width: 60px !important; 
    text-align: right; 
}

/* Apply darker background to weekend columns in table body */
.pivot-table tbody td.col-weekend {
    background-color: rgba(0, 0, 0, 0.08) !important; 
}

/* Apply darker background to weekend columns in table header */
.pivot-table thead th.col-weekend {
    background-color: rgba(0, 0, 0, 0.08) !important; 
}

.col-weekday { 
    width: 80px !important; 
    min-width: 80px !important; 
    max-width: 80px !important; 
    text-align: right; 
}

.pivot-table { 
    table-layout: fixed; 
}

.pivot-table th, .pivot-table td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

/* Weekly Legend Styling - appears as second header row */
.weekly-legend-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.weekly-legend-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    margin-bottom: 0 !important;
    table-layout: fixed;
    border: 1px solid #dee2e6;
    border-bottom: none; /* Remove bottom border to merge with pivot table */
}

.weekly-legend-row {
    background-color: #e7f1ff !important; /* Light blue background */
    border-bottom: 2px solid #0d6efd !important;
}

.weekly-legend-label {
    background-color: #e7f1ff !important;
    color: #0d47a1 !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    padding: 6px 8px !important;
    text-align: left !important;
    border-right: 1px solid #dee2e6 !important;
    border-bottom: 2px solid #0d6efd !important;
    vertical-align: middle !important;
}

.weekly-legend-cell {
    background-color: #e7f1ff !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 0.85em !important;
    padding: 6px 4px !important;
    text-align: center !important;
    border-right: 1px solid #dee2e6 !important;
    border-bottom: 2px solid #0d6efd !important;
    vertical-align: middle !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-legend-cell.col-weekend {
    background-color: rgba(0, 0, 0, 0.12) !important; /* Darker for weekend columns */
}

.weekly-legend-na {
    color: #6c757d !important;
    font-style: italic !important;
}

/* Remove top border from pivot table when legend is present */
.weekly-legend-container + .table-responsive .pivot-table {
    border-top: none !important;
}

.weekly-legend-container + .table-responsive .pivot-table thead tr {
    border-top: none !important;
}

/* Ensure the legend table respects font size classes */
.table-xs ~ .weekly-legend-container .weekly-legend-cell,
.table-xs ~ .weekly-legend-container .weekly-legend-label {
    font-size: 0.7em !important;
    padding: 4px !important;
}

.table-lg ~ .weekly-legend-container .weekly-legend-cell,
.table-lg ~ .weekly-legend-container .weekly-legend-label {
    font-size: 1em !important;
    padding: 8px !important;
}

.table-xl ~ .weekly-legend-container .weekly-legend-cell,
.table-xl ~ .weekly-legend-container .weekly-legend-label {
    font-size: 1.1em !important;
    padding: 10px !important;
}