/*---------------------------------------------
 * Trading Platform - Main Stylesheet
 * 
 * Table of Contents:
 * 1. Base Styles & Reset
 * 2. Layout & Container Structure
 * 3. Sidebar Navigation
 * 4. Header & Controls
 * 5. Component Base Styles
 * 6. Component Content Areas
 * 7. Table Styles
 *    - 7.1 Common Table Styles
 *    - 7.2 FX Swap Curve
 *    - 7.3 Custom Pricer
 *    - 7.4 Active Fwd-Fwds
 *    - 7.5 Active Broken Dates
 *    - 7.6 Rates Overview
 *    - 7.7 Fwd-Fwd Grid
 *    - 7.8 Activity Tables
 * 8. Chart Styles
 * 9. UI Elements
 *    - 9.1 Buttons & Controls
 *    - 9.2 Tabs
 *    - 9.3 Indicators & Badges
 * 10. Scrollbar Styling
 * 11. Hover Effects
 * 12. Responsive Adjustments
 * 13. Modal & Popup Styles
 * 14. Settings & Authentication
 * 15. Anti-flicker & Performance
 * 16. Utilities & Fixes
 *---------------------------------------------*/

/*---------------------------------------------
 * 1. Base Styles & Reset
 *---------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Golos Text', sans-serif;
    background-color: #050505;
    color: #ffffff;
    height: 100vh;
    overflow: hidden;
}

/* iPad / narrow-desktop zoom-out: render full layout at reduced scale.
   Uses `transform: scale()` on `.container` rather than `zoom` on `body`
   because iOS Safari implements `zoom` inconsistently with Chrome. */
@media (max-width: 1500px) {
    html {
        overflow-x: hidden !important;
    }
    body {
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .container {
        transform: scale(0.7);
        transform-origin: 0 0;
        width: calc(100% / 0.7);
        /* Pin layout height to (viewport / scale) so the scaled visual box
           exactly fills the viewport. Container scrolls internally so
           dragged-tall components like FX Swap Curve are reachable. */
        height: calc(100vh / 0.7) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .container {
        height: auto !important;
        min-height: 100vh;
    }
    /* Hide Basis vs OIS (col 11) and Basis vs 3s (col 12) */
    .fx-swap-curve-table th:nth-child(11),
    .fx-swap-curve-table td:nth-child(11),
    .fx-swap-curve-table th:nth-child(12),
    .fx-swap-curve-table td:nth-child(12),
    .active-fwd-fwds-table th:nth-child(11),
    .active-fwd-fwds-table td:nth-child(11),
    .active-fwd-fwds-table th:nth-child(12),
    .active-fwd-fwds-table td:nth-child(12),
    .active-broken-dates-table th:nth-child(11),
    .active-broken-dates-table td:nth-child(11),
    .active-broken-dates-table th:nth-child(12),
    .active-broken-dates-table td:nth-child(12),
    .custom-pricer-table th:nth-child(7),
    .custom-pricer-table td:nth-child(7),
    .custom-pricer-table th:nth-child(8),
    .custom-pricer-table td:nth-child(8) {
        display: none;
    }
    /* Narrower left/middle columns, wider right for fwd-fwd grid */
    .vertical-group.left-group   { flex: 0 0 33% !important; }
    .vertical-group.middle-group { flex: 0 0 33% !important; }
    .vertical-group.right-group  { flex: 0 0 33% !important; }
    /* (.container height handled in the transform block above — don't reset to auto here.) */
    .sidebar {
        height: auto !important;
        min-height: 100vh;
    }
    .main-content {
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .components-container {
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .vertical-group {
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    /* Let components auto-size to content vertically. `height: auto` (NOT
       !important) so resize-handle drag (sets inline style.height) wins. */
    .component {
        height: auto;
        min-height: 0 !important;
        flex: none !important;
        overflow: hidden !important;
    }
    /* Internal vertical scroll inside each component when content (e.g. all
       21 FX Swap Curve rows) exceeds the component's box height. */
    .component-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Tables expand vertically to show all rows */
    .table-wrapper,
    .custom-pricer-wrapper {
        overflow: hidden !important;
        max-height: none !important;
    }
    /* Fwd-fwd grid: contain horizontally, scroll internally */
    #fwd-fwd-grid,
    #fwd-fwd-grid .component-content,
    .fwd-fwd-grid-container {
        overflow: hidden !important;
    }
    .grid-wrapper {
        overflow: auto !important;
    }
    /* Tighter fwd-fwd grid to avoid horizontal scroll */
    .fwd-fwd-table thead th {
        padding: 4px 3px !important;
        min-width: 30px !important;
        font-size: 11px !important;
    }
    .fwd-fwd-table td,
    .fwd-fwd-table .row-header {
        padding: 4px 3px !important;
        min-width: 30px !important;
        font-size: 11px !important;
    }
    .fwd-fwd-grid-container {
        padding: 5px !important;
    }
    /* Tighter rates overview */
    .rates-table thead th {
        padding: 4px 3px !important;
        font-size: 11px !important;
    }
    .rates-table tbody td {
        padding: 3px 3px !important;
        font-size: 11px !important;
    }
    .vertical-separator {
        margin: 0 2px !important;
    }
    .rates-overview-container {
        padding: 0 5px 5px 5px !important;
    }
    /* Activity keeps fixed height with internal scroll */
    #rates-overview .rates-table tbody td {
        padding: 6px 3px !important;
    }
    #rates-overview .rates-table thead th {
        padding: 6px 3px !important;
    }
    /* More vertical padding on all table rows to fill screen height */
    .fx-swap-curve-table tbody td,
    .active-fwd-fwds-table tbody td,
    .active-broken-dates-table tbody td,
    .custom-pricer-table tbody td,
    .activity-table tbody td,
    .fwd-fwd-table td,
    .fwd-fwd-table .row-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Drop the narrow-viewport min-height floor so the chart component
       can be dragged to a smaller size when needed. */
    #charting            { min-height: 0 !important; }

    #activity            { overflow: hidden !important; }

    #activity .component-content { overflow: hidden !important; }
    #activity .activity-container .tab-content { overflow-y: auto !important; }
    #activity .activity-table-wrapper { overflow-y: auto !important; }
}

/*---------------------------------------------
 * 2. Layout & Container Structure
 *---------------------------------------------*/
.container {
    display: flex;
    height: 100vh;
}

/* Main content area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Components container - 3 column layout */
.components-container {
    flex: 1;
    display: flex;
    background-color: #050505;
    gap: 5px;
    padding: 5px 5px 15px 5px; /* Extra padding at the bottom */
    overflow: hidden;
}

/* Vertical column groups */
.vertical-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    height: calc(100vh - 70px); /* Viewport height minus header and padding */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px; /* Space for scrollbar */
}

/*---------------------------------------------
 * 3. Sidebar Navigation
 *---------------------------------------------*/
.sidebar {
    width: 60px;
    height: 100%;
    background-color: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #252525;
    padding: 20px 0;
    position: relative;
    overflow: visible; /* Allow hover effects to be visible */
    z-index: 20;
}

.logo {
    padding: 0 10px;
    margin-bottom: 30px;
}

/* Navigation sections */
.primary-nav, .bottom-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.bottom-nav {
    margin-top: auto;
}

/* Navigation items */
.nav-item {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: 24px;
    margin: 10px 0;
}

.nav-item img {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s;
    position: relative;
    z-index: 3;
}

/* Hover light effects */
.hover-light {
    position: absolute;
    height: 73px; /* Original height of leftLight.png */
    width: 8px; /* Original width of leftLight.png */
    right: 0; /* Align to the right edge of sidebar */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}

.hover-light img {
    width: 8px; /* Original width */
    height: 73px; /* Original height */
    position: absolute;
    right: 0; /* Align to the right edge */
    top: 0;
}

.nav-item:hover .hover-light {
    opacity: 1;
}

.hover-light.horizontal {
    height: 8px; /* Original height of topLight.png */
    width: 93px; /* Original width of topLight.png */
    bottom: 0; /* Align to the bottom */
    top: auto;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s;
    z-index: 1;
}

.hover-light.horizontal img {
    width: 93px; /* Original width */
    height: 8px; /* Original height */
    position: absolute;
    bottom: 0; /* Align to the bottom */
    left: 0;
}

/*---------------------------------------------
 * 4. Header & Controls
 *---------------------------------------------*/
.header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #252525;
    background-color: #050505;
    z-index: 15;
}

/* Currency selector */
.currency-selector {
    display: flex;
    align-items: center;
    position: relative;
}

.currency {
    padding: 0 15px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.currency.active {
    color: #00ffcc;
}

.currency:not(.active) {
    color: #666666;
}

.currency .hover-light.horizontal {
    opacity: 0;
    transition: opacity 0.3s;
}

.currency:hover .hover-light.horizontal {
    opacity: 1;
}

.separator {
    height: 20px;
}

.add-currency {
    margin-left: 15px;
    cursor: pointer;
}

/* Matching status indicator */
.matching-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #050505;
    padding: 8px 15px;
    border-radius: 4px;
    color: #ffcc00;
    font-size: 12px;
    font-weight: 600;
}

.status-icon {
    width: 15px;
    height: 15px;
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 10px;
}

/*---------------------------------------------
 * 5. Component Base Styles
 *---------------------------------------------*/
.component {
    background-color: #101010;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    margin-bottom: 5px;
    min-height: 100px;
	flex-shrink: 0;
}

.component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #252525;
    background-color: #1f1f1f;
    height: 40px;
}

.title {
    font-size: 14px;
    font-weight: 500;
}

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.change {
    font-size: 12px;
    color: #666666;
}

/* Component resize handles */
.resize-handle-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    background-color: transparent;
    z-index: 10;
	transition: background-color 0.2s ease;
}

.resize-handle-bottom:hover {
    background-color: rgba(64, 84, 178, 0.3); /* NEW - Subtle highlight on hover */
}

/* Hide top resize handles */
.resize-handle-top {
    display: none;
}

/* Toggle switches */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333333;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
}

input:checked + .slider {
    background-color: #4054b2;
}

input:checked + .slider:before {
    transform: translateX(18px);
}

.slider.round {
    border-radius: 18px;
}

.slider.round:before {
    border-radius: 50%;
}

.settings-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Add button styles */
.add-btn {
    width: 20px;
    height: 20px;
    background-color: #4054b2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

/*---------------------------------------------
 * 6. Component Content Areas
 *---------------------------------------------*/
.component-content {
    flex: 1;
    overflow: auto;
    background-color: #101010;
}

/* Table wrappers */
.table-wrapper {
    padding: 0 10px 10px 10px;;
    width: 100%;
    box-sizing: border-box;
    margin-right: -15px; /* Compensate for scrollbar width in Chrome */
    overflow: visible; /* Change from auto to visible */
}

/*---------------------------------------------
 * 7. Table Styles
 *---------------------------------------------*/

/* 7.1 Common Table Styles */
/* Basic table structure common to all tables */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

thead th {
    background-color: #101010;
    color: #616161;
    font-weight: 100;
    text-align: center;
    vertical-align: middle;
    padding: 8px 6px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #252525;
    box-shadow: inset 0px -1px 0px #252525; /* Reinforces line on overlap */
}

/* Make sure table headers stay sticky */
.fx-swap-curve-table thead th,
.custom-pricer-table thead th,
.active-fwd-fwds-table thead th,
.active-broken-dates-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #101010;
}

/* Fix for custom pricer specifically */
#custom-pricer .component-content {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#custom-pricer .custom-pricer-wrapper {
    overflow: visible;
    flex: 1;
}

#custom-pricer .custom-pricer-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #101010;
}

tbody td {
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    font-weight: 100;
    padding: 6px 4px;
    border-bottom: 1px solid #252525;
    white-space: nowrap;
}

/* Price container for consistent alignment */
.price-container {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Bid cell styles */
.bid-cell .price-container {
    justify-content: flex-end;
}

/* Offer cell styles */
.offer-cell .price-container {
    justify-content: flex-start;
}

/* Circle indicator styles */
.circle-indicator {
    width: 8px;
    height: 8px;
    min-width: 8px; /* Prevent shrinking */
    min-height: 8px; /* Prevent shrinking */
    border-radius: 50%;
    background-color: #2a2a2a;
    border: 1px solid #444444;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Price box styles */
.price-box {
    width: 60px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    text-align: center;
}

/* Style 1: Electronic Offer - Full pink box */
.price-box.electronic.offer {
    background-color: #d8005c;
    color: #ffffff;
    border: none;
}

/* Style 2: Electronic Bid - Full green box */
.price-box.electronic.bid {
    background-color: #0ec09a;
    color: #050505;
    border: none;
}

/* Style 3: Voice Bid - Dark green with green border */
.price-box.voice.bid {
    background-color: #004437;
    color: #ffffff;
    border: 1px solid #00d8ad;
}

/* Style 4: Voice Offer - Dark pink with pink border */
.price-box.voice.offer {
    background-color: #280011;
    color: #ffffff;
    border: 1px solid #d8005c;
}

/* Style 5: Level - Not tradeable */
.price-box.level {
    background-color: #1f1f1f;
    color: #999999;
    border: none;
    cursor: default;
}

/* Indicator styles by status */
.circle-indicator.bid-indicator.best-price,
.circle-indicator.offer-indicator.best-price {
    background-color: #1eb30b;
    border: 1px solid #444444;
}

.circle-indicator.bid-indicator.joined,
.circle-indicator.offer-indicator.joined {
    background-color: #ffbc1c;
    border: 1px solid #444444;
}

.circle-indicator.bid-indicator.better-away,
.circle-indicator.offer-indicator.better-away {
    background-color: #c00808;
    border: 1px solid #444444;
}

/* Bid and offer indicator position */
.bid-indicator {
    margin-right: 4px;
}

.offer-indicator {
    margin-left: 4px;
}

/* Header alignment to match bid/offer cells */
.bid-header {
    text-align: right;
    padding-left: 19px !important;
}

.offer-header {
    text-align: left;
    padding-right: 19px !important;
}

/* 7.2 FX Swap Curve Table */
.fx-swap-curve-table {
    width: 100%;
    font-size: 14px;
    background-color: #101010;
}

.fx-swap-curve-table tbody td {
    font-size: 12px;
}

.fx-swap-curve-table thead th.small {
    font-size: 12px;
}

.fx-swap-curve-table tbody td.far-date {
    font-size: 10px; /* Smaller font for far date */
}

/* FX Swap Curve column widths */
/* Tenor column - keep narrow */
.fx-swap-curve-table th:nth-child(1),
.fx-swap-curve-table td:nth-child(1) {
    width: 48px;
}

/* Far date column - keep narrow */
.fx-swap-curve-table th:nth-child(2),
.fx-swap-curve-table td:nth-child(2) {
    width: 45px;
}

/* Bid column - make wider */
.fx-swap-curve-table th:nth-child(3),
.fx-swap-curve-table td:nth-child(3) {
    width: 80px;
}

/* Offer column - make wider */
.fx-swap-curve-table th:nth-child(4),
.fx-swap-curve-table td:nth-child(4) {
    width: 80px;
}

/* Mid and Last columns - keep narrow */
.fx-swap-curve-table th:nth-child(5),
.fx-swap-curve-table td:nth-child(5),
.fx-swap-curve-table th:nth-child(6),
.fx-swap-curve-table td:nth-child(6) {
    width: 45px;
}

/* Other data columns */
.fx-swap-curve-table th:nth-child(7),
.fx-swap-curve-table td:nth-child(7) {
    width: 50px;
}

.fx-swap-curve-table th:nth-child(8),
.fx-swap-curve-table td:nth-child(8),
.fx-swap-curve-table th:nth-child(9),
.fx-swap-curve-table td:nth-child(9) {
    width: 45px;
}

.fx-swap-curve-table th:nth-child(10),
.fx-swap-curve-table td:nth-child(10) {
    width: 52px;
}

.fx-swap-curve-table th:nth-child(11),
.fx-swap-curve-table td:nth-child(11) {
    width: 50px;
}

.fx-swap-curve-table th:nth-child(12),
.fx-swap-curve-table td:nth-child(12) {
    width: 45px;
}

/* 7.3 Custom Pricer Table */
.custom-pricer-wrapper {
    padding: 0 10px 10px 10px;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
}

.custom-pricer-table {
    width: 100%;
    font-size: 14px;
    background-color: transparent;
}

.custom-pricer-table thead th {
    font-size: 12px;
    white-space: normal;
    height: 36px;
    line-height: 1.2;
}

.custom-pricer-table tbody td {
    font-size: 12px;
    border-bottom: 1px solid #1a1a1a;
}

/* Custom Pricer column widths */
.custom-pricer-table th:nth-child(1),
.custom-pricer-table td:nth-child(1),
.custom-pricer-table th:nth-child(2),
.custom-pricer-table td:nth-child(2) {
    width: 30px; /* Near and Far columns */
}

.custom-pricer-table th:nth-child(3),
.custom-pricer-table td:nth-child(3),
.custom-pricer-table th:nth-child(4),
.custom-pricer-table td:nth-child(4),
.custom-pricer-table th:nth-child(5),
.custom-pricer-table td:nth-child(5),
.custom-pricer-table th:nth-child(6),
.custom-pricer-table td:nth-child(6),
.custom-pricer-table th:nth-child(7),
.custom-pricer-table td:nth-child(7),
.custom-pricer-table th:nth-child(8),
.custom-pricer-table td:nth-child(8) {
    width: 30px; /* Data columns */
}

.custom-pricer-table th:nth-child(9),
.custom-pricer-table td:nth-child(9),
.custom-pricer-table th:nth-child(10),
.custom-pricer-table td:nth-child(10) {
    width: 100px; /* Action button columns */
}

/* Custom Pricer button styles */
.place-price-btn, .request-price-btn {
    width: 100%;
    padding: 5px 0;
    border-radius: 4px;
    border: none;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
    white-space: nowrap;
}

.place-price-btn {
    background-color: #4054b2;
    color: #ffffff;
}

.place-price-btn:hover {
    background-color: #3145a8;
}

.request-price-btn {
    background-color: #3a3a3a;
    color: #ffffff;
}

.request-price-btn:hover {
    background-color: #4a4a4a;
}

/* 7.4 Active Fwd-Fwds Table */
.active-fwd-fwds-table {
    width: 100%;
    font-size: 14px;
    background-color: #101010;
}

.active-fwd-fwds-table tbody td {
    font-size: 12px;
}

.active-fwd-fwds-table thead th.small {
    font-size: 12px;
}

/* Active Fwd-Fwds column widths - similar to FX Swap Curve */
.active-fwd-fwds-table th:nth-child(1),
.active-fwd-fwds-table td:nth-child(1) {
    width: 48px;
}

.active-fwd-fwds-table th:nth-child(2),
.active-fwd-fwds-table td:nth-child(2) {
    width: 45px;
}

.active-fwd-fwds-table th:nth-child(3),
.active-fwd-fwds-table td:nth-child(3) {
    width: 80px;
}

.active-fwd-fwds-table th:nth-child(4),
.active-fwd-fwds-table td:nth-child(4) {
    width: 80px;
}

.active-fwd-fwds-table th:nth-child(5),
.active-fwd-fwds-table td:nth-child(5),
.active-fwd-fwds-table th:nth-child(6),
.active-fwd-fwds-table td:nth-child(6) {
    width: 45px;
}

.active-fwd-fwds-table th:nth-child(7),
.active-fwd-fwds-table td:nth-child(7),
.active-fwd-fwds-table th:nth-child(11),
.active-fwd-fwds-table td:nth-child(11) {
    width: 50px;
}

.active-fwd-fwds-table th:nth-child(8),
.active-fwd-fwds-table td:nth-child(8),
.active-fwd-fwds-table th:nth-child(9),
.active-fwd-fwds-table td:nth-child(9) {
    width: 45px;
}

.active-fwd-fwds-table th:nth-child(10),
.active-fwd-fwds-table td:nth-child(10) {
    width: 52px;
}

.active-fwd-fwds-table th:nth-child(12),
.active-fwd-fwds-table td:nth-child(12) {
    width: 45px;
}

/* 7.5 Active Broken Dates Table */
.active-broken-dates-table {
    width: 100%;
    font-size: 14px;
    background-color: #101010;
}

.active-broken-dates-table tbody td {
    font-size: 12px;
}

/* Make date columns font size smaller */
.active-broken-dates-table tbody td:nth-child(1),
.active-broken-dates-table tbody td:nth-child(2) {
    font-size: 10px;
}

.active-broken-dates-table thead th.small {
    font-size: 12px;
}

/* Active Broken Dates column widths */
.active-broken-dates-table th:nth-child(1),
.active-broken-dates-table td:nth-child(1) {
    width: 45px;
}

.active-broken-dates-table th:nth-child(2),
.active-broken-dates-table td:nth-child(2) {
    width: 45px;
}

.active-broken-dates-table th:nth-child(3),
.active-broken-dates-table td:nth-child(3) {
    width: 75px;
}

.active-broken-dates-table th:nth-child(4),
.active-broken-dates-table td:nth-child(4) {
    width: 75px;
}

.active-broken-dates-table th:nth-child(5),
.active-broken-dates-table td:nth-child(5),
.active-broken-dates-table th:nth-child(6),
.active-broken-dates-table td:nth-child(6) {
    width: 40px;
}

.active-broken-dates-table th:nth-child(7),
.active-broken-dates-table td:nth-child(7),
.active-broken-dates-table th:nth-child(11),
.active-broken-dates-table td:nth-child(11) {
    width: 48px;
}

.active-broken-dates-table th:nth-child(8),
.active-broken-dates-table td:nth-child(8),
.active-broken-dates-table th:nth-child(9),
.active-broken-dates-table td:nth-child(9) {
    width: 40px;
}

.active-broken-dates-table th:nth-child(10),
.active-broken-dates-table td:nth-child(10) {
    width: 50px;
}

.active-broken-dates-table th:nth-child(12),
.active-broken-dates-table td:nth-child(12) {
    width: 40px;
}

/* Slight adjustments for Broken Dates table */
.active-broken-dates-table .bid-header {
    text-align: right;
    padding-left: 16px !important; /* Reduced from 23px */
}

.active-broken-dates-table .offer-header {
    text-align: left;
    padding-right: 16px !important; /* Reduced from 23px */
}

/* 7.6 Rates Overview Tables */
.rates-overview-container {
    width: 100%;
    height: 100%;
    padding: 0px 10px 10px 10px;
    box-sizing: border-box;
    background-color: #101010;
    overflow: auto;
}

.rates-tables-wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start; /* Align items at the top */
}

.rates-table-section {
    flex: 1;
    min-width: 0; /* Allow tables to shrink below their content width */
}

/* Vertical separator between tables */
.vertical-separator {
    width: 1px;
    background-color: #252525;
    margin: 0 5px;
    align-self: stretch; /* This will make it stretch to match the height of the adjacent table sections */
}

/* Rates Overview table styles */
.rates-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
}

.rates-table thead th {
    text-align: left;
    padding: 8px 8px;
    font-weight: 400;
    color: #666666;
    border-bottom: 1px solid #252525;
    height: 32px; /* Add explicit height */
}

.rates-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rates Overview column widths */
.rates-table th:nth-child(1),
.rates-table td:nth-child(1) {
    width: 40%;
}

.rates-table th:nth-child(2),
.rates-table td:nth-child(2) {
    width: 30%;
}

.rates-table th:nth-child(3),
.rates-table td:nth-child(3) {
    width: 30%;
}

/* Color coding for changes */
.rates-table .positive {
    color: #00d8ad; /* Green for positive changes */
}

.rates-table .negative {
    color: #d8005c; /* Red for negative changes */
}

/* 7.7 Fwd-Fwd Grid */
.fwd-fwd-grid-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #101010;
    display: flex;
    flex-direction: column;
}

/* Grid controls */
.fwd-fwd-controls {
    display: flex;
    gap: 10px;
    margin-right: 15px;
}

/* Custom select styling */
.custom-select {
    background-color: #1f1f1f;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 5px 28px 5px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    cursor: pointer;
}

.custom-select:focus {
    outline: none;
    border-color: #4054b2;
}

/* Grid wrapper */
.grid-wrapper {
    flex: 1;
    overflow: auto;
	padding-bottom: 10px;
}

/* Fwd-Fwd Grid table styles */
.fwd-fwd-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    table-layout: fixed;
}

/* Header styles */
.fwd-fwd-table thead th {
    background-color: #101010;
    color: #666666;
    font-weight: 400;
    text-align: center;
    padding: 6px 10px; /* Reduced padding */
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 40px;
    border-bottom: 1px solid #252525;
    transition: background-color 0.2s;
}

.fwd-fwd-table thead th:first-child {
    background-color: #101010;
    left: 0;
    z-index: 3;
}

/* Row header styles */
.fwd-fwd-table .row-header {
    position: sticky;
    left: 0;
    background-color: #101010;
    color: #666666;
    font-weight: 400;
    text-align: center;
    padding: 4px 10px;
    height: 28px;
    z-index: 1;
    min-width: 40px;
    white-space: nowrap;
    transition: background-color 0.2s;
    vertical-align: middle;
}

/* Cell styles */
.fwd-fwd-table td {
    text-align: center;
    padding: 4px 10px;
    height: 28px;
    border-bottom: 1px solid #1a1a1a;
    min-width: 40px;
    vertical-align: middle;
}

/* Style for grid value cells */
.grid-value {
    background-color: #131313;
    transition: background-color 0.2s;
}

/* Style for empty cells */
.empty-cell {
    background-color: #0c0c0c;
}

/* Grid highlighting system */
.fwd-fwd-table.hoverable .highlight-header {
    background-color: #252525  !important;
    transition: background-color 0.2s;
}

.fwd-fwd-table.hoverable .highlight-cell {
    background-color: #252525  !important;
    transition: background-color 0.2s;
}

.fwd-fwd-table.hoverable .highlight-active {
    background-color: #2a2a2a  !important;
    transition: background-color 0.2s;
}

/* 7.8 Activity Tables */
.activity-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #101010;
	overflow: hidden;
}

/* Tab content styling */
.activity-container .tab-content {
    flex: 1;
    display: none;
    height: calc(100% - 40px); /* Account for tab header height */
    overflow-y: auto; /* Enable scrolling within the fixed height */
}

.activity-container .tab-content.active {
    display: block;
}

/* Table wrapper */
.activity-table-wrapper {
    height: 100%;
    overflow: auto;
	padding: 0px 10px 10px 10px;
}

/* Activity table styles */
.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
}

/* Updated header styles to match other components */
.activity-table thead th {
    background-color: #101010;
    color: #616161;
    font-weight: 400;
    text-align: left;
    padding: 8px 10px;
    height: 36px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #252525;
}

/* Center text alignment for My Prices table headers */
.my-prices-table thead th {
    text-align: center;
}

.activity-table tbody td {
    padding: 6px 10px;
    height: 32px;
    border-bottom: 1px solid #1a1a1a;
    text-align: left;
}

/* Reduced row height for My Prices table */
.my-prices-table tbody td {
    padding: 4px 10px; /* Reduced from 6px to 4px */
    height: 28px; /* Reduced from 32px to 28px */
    text-align: center; /* Center alignment for data cells */
}

/* Market Activity specific styles */
.market-activity-table .highlight {
    color: #ffcc00;
    font-weight: 500;
}

/* My Prices specific styles */
.my-prices-table .bid-value {
    color: #00d8ad; /* Green for bid */
}

.my-prices-table .offer-value {
    color: #d8005c; /* Pink for offer */
}

/* Action buttons */
.action-btn {
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.change-btn {
    background-color: #4054b2;
    color: white;
}

.change-btn:hover {
    background-color: #3145a8;
}

.refer-btn {
    background-color: #b22c28;
    color: white;
}

.refer-btn:hover {
    background-color: #a11f1c;
}

/* Market Activity Table column widths */
.market-activity-table th:nth-child(1),
.market-activity-table td:nth-child(1) {
    width: 15%; /* Time */
}

.market-activity-table th:nth-child(2),
.market-activity-table td:nth-child(2) {
    width: 25%; /* Activity */
}

.market-activity-table th:nth-child(3),
.market-activity-table td:nth-child(3) {
    width: 15%; /* Tenor */
}

.market-activity-table th:nth-child(4),
.market-activity-table td:nth-child(4) {
    width: 15%; /* Level */
}

.market-activity-table th:nth-child(5),
.market-activity-table td:nth-child(5) {
    width: 30%; /* Comment */
}

/* My Prices Table column widths */
.my-prices-table th:nth-child(1),
.my-prices-table td:nth-child(1),
.my-prices-table th:nth-child(2),
.my-prices-table td:nth-child(2) {
    width: 8%; /* Near date, Far date */
}

.my-prices-table th:nth-child(3),
.my-prices-table td:nth-child(3),
.my-prices-table th:nth-child(4),
.my-prices-table td:nth-child(4) {
    width: 8%; /* My bid, My offer */
}

.my-prices-table th:nth-child(5),
.my-prices-table td:nth-child(5),
.my-prices-table th:nth-child(6),
.my-prices-table td:nth-child(6) {
    width: 10%; /* Best market bid, Best market offer */
}

.my-prices-table th:nth-child(7),
.my-prices-table td:nth-child(7),
.my-prices-table th:nth-child(8),
.my-prices-table td:nth-child(8) {
    width: 20%; /* Action buttons */
}

/*---------------------------------------------
 * 8. Chart Styles
 *---------------------------------------------*/
/* Tabs for chart selection */
.tabs {
    display: flex;
    background-color: #4e4e4e;
    border-bottom: 1px solid #252525;
}

.tab {
    padding: 8px 15px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab.active {
    background-color: #676767;
    color: #ffffff;
}

.tab:not(.active) {
    color: #dddddd;
}

/* Chart section container */
.chart-section {
    position: relative;
    height: calc(100% - 35px); /* Subtract tabs height */
    width: 100%;
    background-color: #101010;
    overflow: hidden; /* Prevent overall scrolling */
}

.chart-container {
    display: none;
    height: 100%;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto; /* Add scrolling to each chart container */
}

.chart-container.active {
    display: block;
}

/* Chart title and legend area */
.chart-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    height: 20px;
}

.chart-title {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

.chart-legend {
    display: flex;
    gap: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-color {
    display: inline-block;
    width: 12px;
    height: 4px;
    border-radius: 2px;
}

.legend-label {
    font-size: 11px;
    color: #aaaaaa;
}

/* Chart grid layout */
.chart-grid {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 1fr 20px;
    height: calc(100% - 30px); /* Subtract title and legend height */
    width: 100%;
}

/* Y-axis labels */
.y-axis-labels {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;
    text-align: right;
}

.y-label {
    font-size: 10px;
    color: #666666;
    margin-right: 5px;
}

/* X-axis labels */
.x-axis-labels {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 10px; /* align with the chart grid */
}

.x-label {
    font-size: 10px;
    color: #666666;
    text-align: center;
}

/* Chart area with grid lines */
.chart-area {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    background-image: 
        linear-gradient(to right, #1a1a1a 1px, transparent 1px),
        linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    background-size: 10% 20%; /* 10 columns, 5 rows */
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Chart SVG styles */
.chart-area svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chart-line {
    transition: stroke-opacity 0.3s ease;
}

.chart-line:hover {
    stroke-opacity: 0.8;
}

/* Make sure chart points show on top */
.chart-area svg circle {
    z-index: 5;
}

/*---------------------------------------------
 * 9. UI Elements
 *---------------------------------------------*/

/* 9.1 Buttons & Controls */
button {
    padding: 8px 15px;
    border-radius: 4px;
    border: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.place-prices {
    background-color: #4054b2;
    color: #ffffff;
}

.place-prices:hover {
    background-color: #3145a8;
}

.ref-prices {
    background-color: #b22c28;
    color: #ffffff;
}

.ref-prices:hover {
    background-color: #a11f1c;
}

/* 9.2 Tabs */
.own-activity {
    font-size: 12px;
    color: #666666;
}

/* 9.3 Indicators & Badges */
/* Hover effects for price boxes */
.price-box:not(.level):hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Active/Click effect */
.price-box:not(.level):active {
    transform: scale(0.95);
}

/*---------------------------------------------
 * 10. Scrollbar Styling
 *---------------------------------------------*/
/* Unified scrollbar styling for consistent appearance */

/* Main vertical groups scrollbar */
.vertical-group::-webkit-scrollbar {
    width: 8px;
}

.vertical-group::-webkit-scrollbar-track {
    background: #101010;
    border-radius: 4px;
}

.vertical-group::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.vertical-group::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Component content scrollbars - iOS-style */
.component-content::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.rates-overview-container::-webkit-scrollbar,
.grid-wrapper::-webkit-scrollbar,
.activity-container .tab-content::-webkit-scrollbar,
.activity-table-wrapper::-webkit-scrollbar,
.chart-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.component-content::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.rates-overview-container::-webkit-scrollbar-track,
.grid-wrapper::-webkit-scrollbar-track,
.activity-container .tab-content::-webkit-scrollbar-track,
.activity-table-wrapper::-webkit-scrollbar-track,
.chart-container::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.component-content::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.rates-overview-container::-webkit-scrollbar-thumb,
.grid-wrapper::-webkit-scrollbar-thumb,
.activity-container .tab-content::-webkit-scrollbar-thumb,
.activity-table-wrapper::-webkit-scrollbar-thumb,
.chart-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.component-content::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.rates-overview-container::-webkit-scrollbar-thumb:hover,
.grid-wrapper::-webkit-scrollbar-thumb:hover,
.activity-container .tab-content::-webkit-scrollbar-thumb:hover,
.activity-table-wrapper::-webkit-scrollbar-thumb:hover,
.chart-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/*---------------------------------------------
 * 11. Hover Effects
 *---------------------------------------------*/
/* Row hover effects for tables */
.fx-swap-curve-table tbody tr:hover,
.custom-pricer-table tbody tr:hover,
.active-fwd-fwds-table tbody tr:hover,
.active-broken-dates-table tbody tr:hover,
.rates-table tbody tr:hover,
.activity-table tbody tr:hover {
    background-color: #151515;
}

/* Ensure that table headers don't change color on row hover */
.fx-swap-curve-table tbody tr:hover th,
.custom-pricer-table tbody tr:hover th,
.active-fwd-fwds-table tbody tr:hover th,
.active-broken-dates-table tbody tr:hover th,
.rates-table tbody tr:hover th {
    background-color: inherit;
}

/* Preserve price box styles when row is hovered */
.fx-swap-curve-table tbody tr:hover .price-box.electronic.bid,
.active-fwd-fwds-table tbody tr:hover .price-box.electronic.bid,
.active-broken-dates-table tbody tr:hover .price-box.electronic.bid {
    background-color: #0ec09a;
    color: #050505;
    border: none;
}

.fx-swap-curve-table tbody tr:hover .price-box.electronic.offer,
.active-fwd-fwds-table tbody tr:hover .price-box.electronic.offer,
.active-broken-dates-table tbody tr:hover .price-box.electronic.offer {
    background-color: #d8005c;
    color: #ffffff;
    border: none;
}

/* Transition for smoother hover effect */
.fx-swap-curve-table tbody tr,
.custom-pricer-table tbody tr,
.active-fwd-fwds-table tbody tr,
.active-broken-dates-table tbody tr,
.rates-table tbody tr,
.activity-table tbody tr {
    transition: background-color 0.15s ease;
}

/*---------------------------------------------
 * 12. Responsive Adjustments
 *---------------------------------------------*/
@media (max-width: 1200px) {
    /* Slightly smaller font sizes for tables */
    .rates-table {
        font-size: 11px;
    }
    
    .rates-table thead th,
    .rates-table tbody td {
        padding: 4px 6px;
    }
}

@media (max-width: 900px) {
    /* Adjust rates tables for smaller screens */
    .rates-tables-wrapper {
        flex-wrap: wrap;
    }
    
    .rates-table-section {
        flex: 1 1 45%;
        margin-bottom: 10px;
    }
    
    .vertical-separator {
        display: none;
    }
    
    /* Adjust column widths for smaller screens */
    .rates-table th:nth-child(1),
    .rates-table td:nth-child(1) {
        width: 35%;
    }
    
    .rates-table th:nth-child(2),
    .rates-table td:nth-child(2),
    .rates-table th:nth-child(3),
    .rates-table td:nth-child(3) {
        width: 32.5%;
    }
    
    /* Smaller text for activity tables */
    .activity-table {
        font-size: 11px;
    }
    
    .activity-table th,
    .activity-table td {
        padding: 6px 8px;
    }
    
    .action-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    /* Smaller text for chart labels */
    .x-label {
        font-size: 9px;
    }
    
    .y-label {
        font-size: 9px;
    }
    
    .x-axis-labels, .y-axis-labels {
        padding: 5px 0;
    }
    
    .chart-grid {
        grid-template-columns: 35px 1fr;
    }
    
    /* Adjust fwd-fwd grid for small screens */
    .fwd-fwd-table {
        font-size: 11px;
    }
    
    .fwd-fwd-table th,
    .fwd-fwd-table td {
        padding: 6px 8px;
        min-width: 36px;
    }
    
    .custom-select {
        font-size: 11px;
        padding: 4px 24px 4px 8px;
    }
    
    /* Adjust component header for small screens */
    .component-header {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
    }
    
    .fwd-fwd-controls {
        order: 2;
        margin-top: 5px;
        width: 100%;
        justify-content: flex-start;
    }
    
    .controls {
        order: 1;
    }
}

@media (max-width: 600px) {
    /* Very small screens adjustments */
    .x-label:nth-child(even) {
        display: none; /* Hide every other x label */
    }
    
    .chart-title {
        font-size: 12px;
    }
    
    .legend-label {
        font-size: 10px;
    }
}

/*---------------------------------------------
 * 13. Modal & Popup Styles
 *---------------------------------------------*/
/* Modal/Popup Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #1f1f1f;
    border-radius: 5px;
    width: 350px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.close-modal {
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
}

.price-info {
    margin-bottom: 20px;
}

.current-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #101010;
    border-radius: 4px;
    padding: 15px;
}

.current-price-row {
    display: flex;
    justify-content: space-between;
}

.current-price-row span:first-child {
    color: #888;
}

#current-bid {
    color: #00d8ad; /* Green for bid */
}

#current-offer {
    color: #d8005c; /* Pink for offer */
}

.price-input-container {
    margin-bottom: 20px;
}

.price-input-container label {
    display: block;
    margin-bottom: 8px;
    color: #ddd;
    font-size: 14px;
}

#price-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #101010;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}

#price-input:focus {
    outline: none;
    border-color: #4054b2;
}

.checkbox-container {
    margin-bottom: 20px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkbox-row input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-row label {
    color: #ddd;
    cursor: pointer;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-submit {
    background-color: #4054b2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
}

.modal-submit:hover {
    background-color: #3145a8;
}

.modal-cancel {
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
}

.modal-cancel:hover {
    background-color: #444;
}

.date-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #101010;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.date-row {
    display: flex;
    justify-content: space-between;
}

.date-row span:first-child {
    color: #888;
}

.date-row span:last-child {
    color: #fff;
}

/* Bid/Offer specific button styles */
.modal-submit.bid-button {
    background-color: #0ec09a; /* Green for bid - matches the bid boxes */
    color: #050505; /* Dark text for contrast */
}

.modal-submit.bid-button:hover {
    background-color: #00b08a; /* Slightly darker on hover */
}

.modal-submit.offer-button {
    background-color: #d8005c; /* Pink for offer - matches the offer boxes */
}

.modal-submit.offer-button:hover {
    background-color: #c8004c; /* Slightly darker on hover */
}

/* Add Price Modal specific styles */
.date-inputs, .price-inputs {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #ddd;
    font-size: 14px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #101010;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}

.input-group input:focus {
    outline: none;
    border-color: #4054b2;
}

.price-validation-message {
    height: 20px;
    color: #ff5252;
    margin-bottom: 15px;
    font-size: 13px;
    text-align: center;
}

/*---------------------------------------------
 * 14. Settings & Authentication
 *---------------------------------------------*/
/* Settings popup styles */
.settings-modal-content {
    width: 450px;
    max-width: 90vw;
}

.settings-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 1px solid #4054b2;
    padding-bottom: 8px;
}

/* User information display */
.user-info-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #101010;
    border-radius: 4px;
    border: 1px solid #333;
}

.user-detail-label {
    font-size: 14px;
    color: #aaaaaa;
    font-weight: 500;
}

.user-detail-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

.session-active {
    color: #00d8ad !important;
}

/* Settings items */
.setting-item {
    margin-bottom: 12px;
}

.setting-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #dddddd;
    cursor: pointer;
    padding: 8px 0;
}

.setting-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4054b2;
    cursor: pointer;
}

/* Session management buttons */
.session-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.logout-btn-settings {
    background-color: #d8005c;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.logout-btn-settings:hover {
    background-color: #c8004c;
}

.refresh-session-btn {
    background-color: #4054b2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.refresh-session-btn:hover {
    background-color: #3145a8;
}

.refresh-session-btn:disabled {
    background-color: #333333;
}

/* My Prices Table - Complete CSS styling consistent with FX Swap Curve */

/* Base table styling - matches FX Swap Curve */
.my-prices-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 14px;
    background-color: #101010;
}

.my-prices-table tbody td {
    font-size: 12px;
}

/* Header styling - consistent with other tables */
.my-prices-table thead th {
    background-color: #101010;
    color: #616161;
    font-weight: 100;
    text-align: center;
    vertical-align: middle;
    padding: 8px 6px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #252525;
    box-shadow: inset 0px -1px 0px #252525;
    font-size: 12px;
}

/* Small font for multi-line headers */
.my-prices-table thead th.small {
    font-size: 12px;
}

/* Body cell styling - consistent with other tables */
.my-prices-table tbody td {
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    font-weight: 100;
    padding: 6px 4px;
    border-bottom: 1px solid #252525;
    white-space: nowrap;
    height: 28px; /* Match FX Swap Curve row height */
}

/* Row hover effect - matches FX Swap Curve */
.my-prices-table tbody tr:hover {
    background-color: #151515;
}

/* Row transition for smooth hover */
.my-prices-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Column widths - adjusted to fit buttons properly */
.my-prices-table th:nth-child(1),
.my-prices-table td:nth-child(1) {
    width: 8%; /* Near date - reduced further */
}

.my-prices-table th:nth-child(2),
.my-prices-table td:nth-child(2) {
    width: 8%; /* Far date - reduced further */
}

.my-prices-table th:nth-child(3),
.my-prices-table td:nth-child(3) {
    width: 8%; /* My bid - reduced further */
}

.my-prices-table th:nth-child(4),
.my-prices-table td:nth-child(4) {
    width: 8%; /* My offer - reduced further */
}

.my-prices-table th:nth-child(5),
.my-prices-table td:nth-child(5) {
    width: 10%; /* Best market bid - reduced */
}

.my-prices-table th:nth-child(6),
.my-prices-table td:nth-child(6) {
    width: 10%; /* Best market offer - reduced */
}

.my-prices-table th:nth-child(7),
.my-prices-table td:nth-child(7) {
    width: 24%; /* Update button - increased more */
}

.my-prices-table th:nth-child(8),
.my-prices-table td:nth-child(8) {
    width: 24%; /* Refer button - increased more */
}

/* Editable price cells - remove background colors and fix animations */
.my-prices-table .my-bid-cell,
.my-prices-table .my-offer-cell {
    cursor: text;
    border-radius: 2px;
    transition: background-color 0.2s ease;
    position: relative;
    user-select: text;
}

/* Price cells with values - no background colors */
.my-prices-table .my-bid-cell.has-price {
    color: #0ec09a;
    font-weight: 600;
}

.my-prices-table .my-offer-cell.has-price {
    color: #d8005c;
    font-weight: 600;
}

/* Empty price cells */
.my-prices-table .my-bid-cell.no-price,
.my-prices-table .my-offer-cell.no-price {
    color: #666;
    font-style: italic;
}

/* Hover effects for editable cells - simplified */
.my-prices-table .my-bid-cell:hover,
.my-prices-table .my-offer-cell:hover {
    background-color: #1a1a1a;
}

/* Focus styling for editable cells */
.my-prices-table .my-bid-cell:focus,
.my-prices-table .my-offer-cell:focus {
    outline: 2px solid #4054b2;
    outline-offset: -2px;
    background-color: #1a1a1a;
}

/* Auto-select behavior for contenteditable cells */
.my-prices-table .my-bid-cell[contenteditable="true"],
.my-prices-table .my-offer-cell[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Ensure text selection works properly */
.my-prices-table .my-bid-cell[contenteditable="true"]:focus,
.my-prices-table .my-offer-cell[contenteditable="true"]:focus {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

/* Selection styling for contenteditable cells */
.my-prices-table .my-bid-cell::selection,
.my-prices-table .my-offer-cell::selection {
    background-color: #4054b2;
    color: white;
}

/* Market price cells */
.my-prices-table .best-bid {
    color: #00d8ad;
    font-weight: 500;
}

.my-prices-table .best-offer {
    color: #d8005c;
    font-weight: 500;
}

/* FIXED ACTION BUTTONS - Consistent sizing with proper blue color */
.my-prices-table .action-btn {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #333333;
    background-color: transparent;
    color: #666666;
    border-radius: 2px;
    cursor: not-allowed;
    transition: all 0.2s ease; /* Smooth transitions for all properties */
    width: 95%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    height: 20px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box; /* Ensure consistent sizing */
    min-width: 60px; /* Maintain consistent width */
    font-family: inherit;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
}

/* Update button specific base styling - same as action-btn */
.my-prices-table .update-btn {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #333333;
    background-color: transparent;
    color: #666666;
    border-radius: 2px;
    cursor: not-allowed;
    transition: all 0.2s ease;
    width: 95%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    height: 20px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    min-width: 60px;
    font-family: inherit;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
}

/* FIXED: Enabled Update button ONLY - matches "Place Prices" button blue */
.my-prices-table .update-btn:not(:disabled) {
    border-color: #4054b2 !important; /* Same blue as Place Prices button */
    background-color: #4054b2 !important; /* Solid blue background */
    color: #ffffff !important; /* White text */
    cursor: pointer !important; /* Pointer cursor when enabled */
}

/* FIXED: Hover state for Update button ONLY - matches Place Prices hover */
.my-prices-table .update-btn:hover:not(:disabled) {
    background-color: #3145a8 !important; /* Same hover color as Place Prices */
    border-color: #3145a8 !important;
}

/* Generic action buttons (not update or refer) - keep default styling */
.my-prices-table .action-btn:not(:disabled):not(.update-btn):not(.refer-btn) {
    border-color: #4054b2;
    color: #4054b2;
    cursor: pointer;
}

.my-prices-table .action-btn:hover:not(:disabled):not(.update-btn):not(.refer-btn) {
    background-color: #4054b2;
    color: #ffffff;
}

/* Disabled state styling (grey) - explicit override */
.my-prices-table .action-btn:disabled,
.my-prices-table .update-btn:disabled {
    border-color: #333333 !important;
    background-color: transparent !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* Refer button specific styling - matches "Ref all prices" button (red) */
.my-prices-table .refer-btn:not(:disabled) {
    border-color: #b22c28 !important; /* Same red as "Ref all prices" button */
    background-color: #b22c28 !important; /* Solid red background when enabled */
    color: #ffffff !important; /* White text */
    cursor: pointer !important; /* Pointer cursor when enabled */
}

.my-prices-table .refer-btn:hover:not(:disabled) {
    background-color: #a11f1c !important; /* Same hover color as "Ref all prices" */
    border-color: #a11f1c !important;
}

/* Override any button element defaults - Update button only gets blue */
.my-prices-table button.update-btn:not(:disabled) {
    border-color: #4054b2 !important;
    background-color: #4054b2 !important;
    color: #ffffff !important;
}

.my-prices-table button.update-btn:hover:not(:disabled) {
    background-color: #3145a8 !important;
    border-color: #3145a8 !important;
}

/* Refer button overrides - red styling */
.my-prices-table button.refer-btn:not(:disabled) {
    border-color: #b22c28 !important;
    background-color: #b22c28 !important;
    color: #ffffff !important;
    cursor: pointer !important; /* Pointer cursor when enabled */
}

.my-prices-table button.refer-btn:hover:not(:disabled) {
    background-color: #a11f1c !important;
    border-color: #a11f1c !important;
}

/* Processing state for buttons */
.my-prices-table .action-btn.processing,
.my-prices-table .update-btn.processing {
    opacity: 0.6;
    cursor: wait;
}

.my-prices-table .action-btn.processing:after,
.my-prices-table .update-btn.processing:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 4px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cell update animations */
.my-prices-table .cell-updated {
    animation: cellUpdateFlash 1s ease-out;
}

@keyframes cellUpdateFlash {
    0% {
        background-color: rgba(255, 235, 59, 0.3);
        transform: scale(1);
    }
    50% {
        background-color: rgba(255, 235, 59, 0.6);
        transform: scale(1.02);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Success and error animations */
.my-prices-table .update-success {
    animation: successFlash 1s ease-out;
}

@keyframes successFlash {
    0% {
        background-color: rgba(76, 175, 80, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

.my-prices-table .update-error {
    animation: errorShake 0.5s ease-out;
    background-color: rgba(255, 82, 82, 0.2);
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Row-level success and error feedback */
.my-prices-table .row-success {
    animation: rowSuccessFlash 2s ease-out;
}

@keyframes rowSuccessFlash {
    0% {
        background-color: rgba(14, 192, 154, 0.2);
    }
    50% {
        background-color: rgba(14, 192, 154, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

.my-prices-table .row-error {
    animation: rowErrorFlash 2s ease-out;
}

@keyframes rowErrorFlash {
    0% {
        background-color: rgba(216, 0, 92, 0.2);
    }
    50% {
        background-color: rgba(216, 0, 92, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

/* Loading and error states */
.my-prices-table .loading-row td,
.my-prices-table .error-row td {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}

.my-prices-table .error-row td {
    color: #ff5252;
}

/* Placeholder text for empty cells */
.my-prices-table [contenteditable="true"]:empty:before {
    content: "-";
    color: #666666;
    font-style: italic;
}

.my-prices-table [contenteditable="true"]:focus:empty:before {
    content: "";
}

/* Improved focus states */
.my-prices-table .my-bid-cell:focus-visible,
.my-prices-table .my-offer-cell:focus-visible {
    outline: 2px solid #4054b2;
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(64, 84, 178, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .my-prices-table {
        font-size: 12px;
    }
    
    .my-prices-table tbody td {
        font-size: 11px;
    }
    
    .my-prices-table .action-btn,
    .my-prices-table .update-btn {
        padding: 4px 8px;
        font-size: 10px;
        height: 20px;
    }
    
    .my-prices-table thead th,
    .my-prices-table tbody td {
        padding: 4px 3px;
    }
}

@media (max-width: 768px) {
    .my-prices-table {
        font-size: 11px;
    }
    
    .my-prices-table tbody td {
        font-size: 10px;
    }
    
    .my-prices-table .action-btn,
    .my-prices-table .update-btn {
        padding: 3px 6px;
        font-size: 9px;
        height: 18px;
    }
    
    .my-prices-table thead th,
    .my-prices-table tbody td {
        padding: 3px 2px;
    }
}

/* Style 5: Level - Not tradeable */
.price-box.level {
    background-color: #1f1f1f;
    color: #999999;
    border: none;
    cursor: default;
}

/* NEW: Style 6: User's Best Price - Blue pill style */
.price-box.user-best-price {
    background-color: #4054b2 !important; /* Blue background */
    color: #ffffff !important; /* White text */
    border: none !important;
    cursor: pointer;
}

.price-box.user-best-price:hover {
    background-color: #3145a8 !important; /* Darker blue on hover */
}

/* Indicator styles by status */
.circle-indicator.bid-indicator.best-price,
.circle-indicator.offer-indicator.best-price {
    background-color: #1eb30b;
    border: 1px solid #444444;
}

.circle-indicator.bid-indicator.joined,
.circle-indicator.offer-indicator.joined {
    background-color: #ffbc1c;
    border: 1px solid #444444;
}

.circle-indicator.bid-indicator.better-away,
.circle-indicator.offer-indicator.better-away {
    background-color: #c00808;
    border: 1px solid #444444;
}

/* NEW: User ranking indicator styles */
.circle-indicator.user-rank-1 {
    background-color: #1eb30b !important; /* Green for rank 1 (best) */
    border: 1px solid #444444;
}

.circle-indicator.user-rank-2 {
    background-color: #ffbc1c !important; /* Orange for rank 2 (second best) */
    border: 1px solid #444444;
}

.circle-indicator.user-rank-worse {
    background-color: #c00808 !important; /* Red for rank 3+ (worse) */
    border: 1px solid #444444;
}

.price-box.user-own-price {
    opacity: 0.55 !important; /* Slightly more greyed */
    filter: grayscale(0.5) !important; /* Stronger greyscale */
    position: relative;
    cursor: pointer;
}

.price-box.user-own-price::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1.5px,
        rgba(255, 255, 255, 0.2) 1.5px, /* More visible stripes */
        rgba(255, 255, 255, 0.2) 3px
    );
    pointer-events: none;
    border-radius: inherit;
}

.price-box.user-own-price:hover {
    opacity: 0.75 !important;
    filter: grayscale(0.25) !important;
}

/*---------------------------------------------
 * 17. Enhanced Trading Modal Styles
 *---------------------------------------------*/

/* Enhanced Trading Modal Base */
.enhanced-trading-modal {
    width: 650px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;  /* CHANGED FROM overflow-y: auto */
}

.enhanced-trading-modal .modal-body {
    padding: 0;
}

/* Contract Information Section */
.contract-info-section {
    padding: 20px;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.contract-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contract-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.contract-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.contract-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #aaaaaa;
}

.date-label {
    font-weight: 500;
    color: #666666;
}

#contract-near-date, #contract-far-date {
    font-weight: 600;
    color: #ffffff;
}

.date-separator {
    color: #666666;
}

.date-days {
    color: #666666;
    font-size: 13px;
}

.market-info {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.market-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font-size: 12px;
    color: #666666;
    text-transform: uppercase;
    font-weight: 500;
}

.stat-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

/* Price Ladder Section */
.price-ladder-section {
    padding: 20px;
    border-bottom: 1px solid #333;
}

.price-ladder-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.price-ladder-container {
    background-color: #151515;
    border-radius: 4px;
    overflow: hidden;
}

.price-ladder {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 200px;
}

.bids-column, .offers-column {
    padding: 15px;
}

.spread-column {
    width: 80px;
    background-color: #1a1a1a;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
}

.ladder-header {
    font-size: 12px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: center;
}

.price-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;  /* ADD THIS LINE */
    overflow-y: auto;   /* ADD THIS LINE */
	padding-right: 8px;  /* ADD: Space for scrollbar */
    margin-right: -4px;  /* ADD: Pull scrollbar closer to edge */
}

/* Update scrollbar styling for better spacing */
.price-levels::-webkit-scrollbar {
    width: 6px;
}

.price-levels::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.price-levels::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

.price-levels::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

.price-level {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #1f1f1f;
    border: 1px solid #333;
    transition: all 0.2s ease;
}

.price-level.best-price {
    background-color: #2a2a2a;
    border-color: #4054b2;
}

.price-level.clickable {
    cursor: pointer;
}

.price-level.clickable:hover {
    background-color: #333333;
    transform: translateY(-1px);
}

.price-level.best-price.clickable:hover {
    background-color: #4054b2;
    color: white;
}

.price-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.price-size {
    font-size: 12px;
    color: #aaaaaa;
}

.price-count {
    font-size: 11px;
    color: #666666;
}

.spread-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffbc1c;
    text-align: center;
    margin-top: 20px;
}

.no-orders {
    padding: 20px;
    text-align: center;
    color: #666666;
    font-style: italic;
}

/* Order Placement Section */
.order-placement-section {
    padding: 20px;
}

.order-placement-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.order-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.price-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 12px;
    font-weight: 500;
    color: #aaaaaa;
    text-transform: uppercase;
}

.bid-input-group label {
    color: #00d8ad;
}

.offer-input-group label {
    color: #d8005c;
}

.price-input, .notional-input {
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #101010;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.price-input:focus, .notional-input:focus {
    outline: none;
    border-color: #4054b2;
    box-shadow: 0 0 0 2px rgba(64, 84, 178, 0.2);
}

.bid-input-group .price-input:focus {
    border-color: #00d8ad;
    box-shadow: 0 0 0 2px rgba(0, 216, 173, 0.2);
}

.offer-input-group .price-input:focus {
    border-color: #d8005c;
    box-shadow: 0 0 0 2px rgba(216, 0, 92, 0.2);
}

.notional-input-container {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-symbol, .currency-unit {
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    color: #666666;
    pointer-events: none;
}

.currency-symbol {
    left: 12px;
}

.currency-unit {
    right: 12px;
}

.notional-input {
    padding-left: 28px;
    padding-right: 28px;
    text-align: center;
}

.notional-help {
    font-size: 11px;
    color: #666666;
    font-style: italic;
}

.trading-options-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.option-group {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #aaaaaa;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: #777;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: #4054b2;
    border-color: #4054b2;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.action-buttons-row {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.place-order-btn {
    background-color: #4054b2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.place-order-btn:hover:not(:disabled) {
    background-color: #3145a8;
    transform: translateY(-1px);
}

.place-order-btn:disabled {
    background-color: #333333;
    color: #666666;
    cursor: not-allowed;
    transform: none;
}

.place-order-btn.two-way {
    background-color: #4054b2;
}

.place-order-btn.bid-only {
    background-color: #00d8ad;
    color: #050505;
}

.place-order-btn.offer-only {
    background-color: #d8005c;
}

.cancel-btn {
    background-color: transparent;
    color: #aaaaaa;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn:hover {
    background-color: #333333;
    color: #ffffff;
}

.order-status-message {
    min-height: 20px;
    font-size: 13px;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
}

.order-status-message.success {
    background-color: rgba(0, 216, 173, 0.1);
    color: #00d8ad;
    border: 1px solid #00d8ad;
}

.order-status-message.error {
    background-color: rgba(216, 0, 92, 0.1);
    color: #d8005c;
    border: 1px solid #d8005c;
}

.order-status-message.info {
    background-color: rgba(64, 84, 178, 0.1);
    color: #4054b2;
    border: 1px solid #4054b2;
}

/* Enhanced price box interaction styles */
.price-box:not(.level) {
    position: relative;
    transition: all 0.2s ease;
}

.price-box:not(.level):hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(64, 84, 178, 0.4);
    z-index: 10;
}

.price-box:not(.level):active {
    transform: scale(0.98);
}

/* Enhanced visual feedback 
.price-box:not(.level)::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background-color: #4054b2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.price-box:not(.level):hover::after {
    opacity: 1;
}*/

/* Click ripple effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.price-box.clicking {
    position: relative;
    overflow: hidden;
}

.price-box.clicking::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .enhanced-trading-modal {
        width: 95vw;
        margin: 20px;
    }
    
    .price-inputs-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .market-info {
        gap: 20px;
    }
    
    .trading-options-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .action-buttons-row {
        flex-direction: column;
    }
    
    .place-order-btn, .cancel-btn {
        width: 100%;
    }
}

/* Trade Execution Modal Styles */
.trade-execution-modal {
    max-width: 600px;
    width: 90%;
}

.trade-execution-modal .modal-body {
    padding: 20px;
}

/* Trade Details Section */
.trade-details-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #2a2a2a;
    border-radius: 8px;
}

.trade-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-action {
    font-size: 16px;
    font-weight: 600;
}

.action-label {
    color: #888;
}

.action-value {
    color: #00d8ad;
    margin-left: 8px;
}

.action-price {
    color: #fff;
    margin-left: 8px;
    font-weight: 700;
}

.trade-contract {
    font-size: 14px;
    color: #ccc;
}

.contract-dates {
    color: #888;
    margin-left: 8px;
}

/* Counterparty Section */
.counterparty-section {
    margin-bottom: 25px;
}

.counterparty-section h4 {
    margin-bottom: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.counterparty-info {
    padding: 12px;
    background-color: #252525;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.counterparty-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-label {
    color: #888;
    font-size: 12px;
}

.cp-value {
    color: #fff;
    font-weight: 600;
}

.cp-id {
    color: #666;
    font-size: 11px;
}

.counterparty-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-value.online {
    color: #00d8ad;
}

.status-value.offline {
    color: #ff6b6b;
}

/* Notional Negotiation Section */
.notional-section {
    margin-bottom: 25px;
}

.notional-section h4 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.negotiation-container {
    background-color: #252525;
    padding: 15px;
    border-radius: 6px;
}

.notional-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.notional-input-group label {
    color: #ccc;
    font-size: 12px;
    min-width: 100px;
}

.send-notional-btn {
    background-color: #4054b2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.send-notional-btn:hover {
    background-color: #5064c2;
}

.send-notional-btn:disabled {
    background-color: #666;
    cursor: not-allowed;
}

.negotiation-status {
    padding: 10px;
    background-color: #2a2a2a;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
}

.status-message {
    color: #888;
    font-size: 12px;
}

.counterparty-response {
    padding: 12px;
    background-color: #1a3a1a;
    border: 1px solid #00d8ad;
    border-radius: 4px;
}

.response-info, .final-size {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.response-label, .final-label {
    color: #ccc;
    font-size: 12px;
}

.response-value, .final-value {
    color: #00d8ad;
    font-weight: 600;
}

.final-note {
    color: #888;
    font-size: 10px;
}

/* Credit Verification Section */
.credit-section {
    margin-bottom: 25px;
}

.credit-section h4 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.credit-verification {
    background-color: #252525;
    padding: 15px;
    border-radius: 6px;
}

.credit-check-group {
    margin-bottom: 15px;
}

.credit-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: #2a2a2a;
    border-radius: 4px;
}

.status-value.pending {
    color: #ffbc1c;
}

.status-value.confirmed {
    color: #00d8ad;
}

.status-value.rejected {
    color: #ff6b6b;
}

/* Balance Section */
.balance-section {
    margin-bottom: 25px;
}

.balance-section h4 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.balance-info {
    background-color: #3a2a1a;
    border: 1px solid #ffbc1c;
    padding: 15px;
    border-radius: 6px;
}

.balance-amount {
    text-align: center;
    margin-bottom: 15px;
}

.balance-label {
    color: #ccc;
    font-size: 12px;
}

.balance-value {
    color: #ffbc1c;
    font-weight: 600;
    margin-left: 8px;
}

.balance-question {
    color: #fff;
    font-size: 13px;
    margin-bottom: 12px;
    text-align: center;
}

.balance-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.balance-action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.balance-action-btn.bid-btn {
    background-color: #00d8ad;
    color: #000;
}

.balance-action-btn.offer-btn {
    background-color: #ff6b6b;
    color: #fff;
}

.balance-action-btn.cancel-btn {
    background-color: #666;
    color: #fff;
}

/* Action Buttons */
.trade-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 15px;
}

.book-trade-btn {
    background-color: #00d8ad;
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 150px;
}

.book-trade-btn:hover:not(:disabled) {
    background-color: #00c49a;
}

.book-trade-btn:disabled {
    background-color: #666;
    color: #ccc;
    cursor: not-allowed;
}

.cancel-trade-btn {
    background-color: transparent;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-trade-btn:hover {
    background-color: #ff6b6b;
    color: #fff;
}

/* Status Messages */
.trade-status-message {
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    min-height: 20px;
}

.trade-status-message.info {
    background-color: #1a3a3a;
    color: #00d8ad;
}

.trade-status-message.error {
    background-color: #3a1a1a;
    color: #ff6b6b;
}

.trade-status-message.success {
    background-color: #1a3a1a;
    color: #00d8ad;
}

/* Responsive Design */
@media (max-width: 600px) {
    .trade-execution-modal {
        width: 95%;
        max-width: none;
    }
    
    .counterparty-info {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .notional-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .balance-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .trade-action-buttons {
        flex-direction: column;
        gap: 8px;
    }
}

/* /////////////////////////////////// Single click */
/* Enhanced notional input container with currency selection */
.notional-input-container {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.notional-input-container:focus-within {
    border-color: #4054b2;
    box-shadow: 0 0 0 2px rgba(64, 84, 178, 0.2);
}

.notional-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    color: white;
    font-size: 14px;
    outline: none;
    min-width: 0;
}

.notional-input::placeholder {
    color: #666;
}

.currency-label {
    padding: 12px 8px;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Make this more specific to only target currency selectors within notional containers */
.notional-input-container .currency-selector {
    background-color: #3a3a3a;
    border: none;
    border-left: 1px solid #444;
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    min-width: 70px;
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZmlsbD0iIzk5OSIgZD0ibTEgMiA1IDMgNS0zeiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

.notional-input-container .currency-selector:hover {
    background-color: #4a4a4a;
}

.notional-input-container .currency-selector:focus {
    background-color: #4054b2;
    outline: none;
}

.notional-input-container .currency-selector option {
    background-color: #2a2a2a;
    color: white;
    padding: 8px;
}

/* Updated notional help text */
.notional-help {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    line-height: 1.3;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .notional-input-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .notional-input-container .currency-selector {
        border-left: none;
        border-top: 1px solid #444;
        border-radius: 0 0 4px 4px;
    }
    
    .notional-input {
        border-radius: 4px 4px 0 0;
    }
}

/* Enhanced styling for price input containers */
.price-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 12px;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-input {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.price-input:focus {
    border-color: #4054b2;
    box-shadow: 0 0 0 2px rgba(64, 84, 178, 0.2);
    outline: none;
}

.price-input::placeholder {
    color: #666;
}

/* Bid/Offer specific styling */
.bid-input-group .price-input:focus {
    border-color: #0ec09a;
    box-shadow: 0 0 0 2px rgba(14, 192, 154, 0.2);
}

.offer-input-group .price-input:focus {
    border-color: #d8005c;
    box-shadow: 0 0 0 2px rgba(216, 0, 92, 0.2);
}

/* Enhanced button styling */
.place-order-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.place-order-btn:disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed;
}

.place-order-btn.bid-only {
    background-color: #0ec09a;
    color: white;
}

.place-order-btn.bid-only:hover:not(:disabled) {
    background-color: #0da688;
}

.place-order-btn.offer-only {
    background-color: #d8005c;
    color: white;
}

.place-order-btn.offer-only:hover:not(:disabled) {
    background-color: #c00052;
}

.place-order-btn.two-way {
    background: linear-gradient(90deg, #0ec09a 50%, #d8005c 50%);
    color: white;
}

.place-order-btn.two-way:hover:not(:disabled) {
    background: linear-gradient(90deg, #0da688 50%, #c00052 50%);
}

/* Status message styling */
.order-status-message {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    min-height: 16px;
    transition: all 0.2s ease;
}

.order-status-message.info {
    background-color: rgba(64, 84, 178, 0.1);
    color: #64b5f6;
    border: 1px solid rgba(64, 84, 178, 0.3);
}

.order-status-message.success {
    background-color: rgba(14, 192, 154, 0.1);
    color: #4caf50;
    border: 1px solid rgba(14, 192, 154, 0.3);
}

.order-status-message.error {
    background-color: rgba(216, 0, 92, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(216, 0, 92, 0.3);
}

/* Currency selection visual feedback - only for modal */
.notional-input-container .currency-selector[data-selected="base"] {
    background-color: #4054b2;
}

.notional-input-container .currency-selector[data-selected="term"] {
    background-color: #0ec09a;
}

/* Animation for currency changes - only for modal */
.notional-input-container.currency-changed {
    animation: currencyChangeFlash 0.3s ease-out;
}

@keyframes currencyChangeFlash {
    0% {
        background-color: #2a2a2a;
    }
    50% {
        background-color: rgba(64, 84, 178, 0.2);
    }
    100% {
        background-color: #2a2a2a;
    }
}

/* NEW: Style for clickable empty price boxes */
/* NEW: Style for clickable empty price boxes */
/* NEW: Style for clickable empty price boxes */
/* NEW: Style for clickable empty price boxes */
.price-box.level-clickable {
    background-color: #1f1f1f;
    color: #999999;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.price-box.level-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    background-color: #2a2a2a;
    color: #cccccc;
    border-color: #444444;
}

.price-box.level-clickable:active {
    transform: scale(0.95);
}

/* My trades */
/* My Trades Tab Specific Styles */

/* My Trades table header alignment */
.my-trades-table thead th {
    text-align: center;
}

/* My Trades table cell alignment and sizing */
.my-trades-table tbody td {
    text-align: center;
    padding: 4px 10px;
    height: 28px; /* Consistent with My Prices table */
}

/* Column widths for My Trades table - updated for 6 columns */
.my-trades-table th:nth-child(1),
.my-trades-table td:nth-child(1) {
    width: 15%; /* Time */
}

.my-trades-table th:nth-child(2),
.my-trades-table td:nth-child(2) {
    width: 15%; /* Tenor */
}

.my-trades-table th:nth-child(3),
.my-trades-table td:nth-child(3) {
    width: 12%; /* Side */
}

.my-trades-table th:nth-child(4),
.my-trades-table td:nth-child(4) {
    width: 18%; /* Quantity */
}

.my-trades-table th:nth-child(5),
.my-trades-table td:nth-child(5) {
    width: 15%; /* Price */
}

.my-trades-table th:nth-child(6),
.my-trades-table td:nth-child(6) {
    width: 25%; /* Counterparty */
}

/* Trade row hover and click effects */
.trade-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.trade-row:hover {
    background-color: #1a1a1a;
}

.trade-row:active {
    background-color: #252525;
}

/* Trade Details Modal Styles */
.trade-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: #151515;
    border-radius: 8px;
    margin-bottom: 20px;
}

.trade-side-indicator {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #252525;
}

.trade-side-indicator.bought {
    color: #00d8ad;
    background-color: rgba(0, 216, 173, 0.1);
}

.trade-side-indicator.sold {
    color: #d8005c;
    background-color: rgba(216, 0, 92, 0.1);
}

.trade-amount {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.trade-pair {
    font-size: 16px;
    color: #999999;
}

.trade-tenor {
    font-size: 14px;
    color: #666666;
    background-color: #252525;
    padding: 4px 8px;
    border-radius: 4px;
}

.trade-details-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #252525;
}

.detail-label {
    color: #999999;
    font-size: 13px;
}

.detail-value {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Trade side styling - consistent with bid/offer colors */
.trade-side.bought {
    color: #00d8ad; /* Green for bought (same as bid) */
    font-weight: 500;
}

.trade-side.sold {
    color: #d8005c; /* Pink for sold (same as offer) */
    font-weight: 500;
}

/* Loading state styles */
.loading-row td {
    color: #666666;
    font-style: italic;
    text-align: center;
}

/* Empty state styles */
.empty-trades-message {
    text-align: center;
    color: #666666;
    font-style: italic;
    padding: 40px 20px;
}

/* Hover effects for My Trades rows */
.my-trades-table tbody tr:hover {
    background-color: #151515;
    transition: background-color 0.2s;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .my-trades-table th:nth-child(7),
    .my-trades-table td:nth-child(7) {
        width: 20%; /* Reduce comment column width */
    }
    
    .my-trades-table th:nth-child(5),
    .my-trades-table td:nth-child(5) {
        width: 18%; /* Increase quantity column width */
    }
}

/* Ensure consistent styling with existing activity tables */
.my-trades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
}

.my-trades-table thead th {
    background-color: #101010;
    color: #616161;
    font-weight: 400;
    padding: 8px 10px;
    height: 36px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #252525;
}

.my-trades-table tbody td {
    border-bottom: 1px solid #1a1a1a;
}

/* Scrollbar consistency for My Trades table */
#my-trades-content .activity-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

#my-trades-content .activity-table-wrapper::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

#my-trades-content .activity-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#my-trades-content .activity-table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}





/* 3. ADD these NEW rules for specific component default heights */

#fx-swap-curve {
    height: 64vh; /* 841px from screenshot */
    min-height: 350px;
}

#custom-pricer {
    height: 29vh; /* 366px from screenshot */
    min-height: 200px;
}

#active-fwd-fwds {
    height: 26vh; /* 318px from screenshot */
    min-height: 200px;
}

#active-broken-dates {
    height: 26vh; /* 357px from screenshot */
    min-height: 200px;
}

#charting {
    height: 40vh; /* 524px from screenshot */
    min-height: 250px;
}

#rates-overview {
    height: 18vh; /* 245px from screenshot */
    min-height: 150px;
}

#fwd-fwd-grid {
    height: 34vh; /* 431px from screenshot */
    min-height: 250px;
}

#activity {
    height: 40vh; /* 523px from screenshot */
    min-height: 250px;
}

/* Responsive adjustments for smaller screens */
@media (max-height: 800px) {
    /* Proportionally scale down for smaller screens */
    #fx-swap-curve { height: 60vh; }
    #custom-pricer { height: 25vh; }
    #active-fwd-fwds { height: 22vh; }
    #active-broken-dates { height: 25vh; }
    #charting { height: 37vh; }
    #rates-overview { height: 17vh; }
    #fwd-fwd-grid { height: 30vh; }
    #activity { height: 37vh; }
}

@media (max-height: 600px) {
    /* Further scale down for very small screens */
    #fx-swap-curve { height: 50vh; min-height: 250px; }
    #custom-pricer { height: 22vh; min-height: 150px; }
    #active-fwd-fwds { height: 20vh; min-height: 140px; }
    #active-broken-dates { height: 22vh; min-height: 150px; }
    #charting { height: 30vh; min-height: 180px; }
    #rates-overview { height: 15vh; min-height: 120px; }
    #fwd-fwd-grid { height: 25vh; min-height: 160px; }
    #activity { height: 30vh; min-height: 180px; }
}

/* Visual feedback during resize */
.component.resizing {
    transition: none;
    user-select: none;
}

.component.resizing .resize-handle-bottom {
    background-color: rgba(64, 84, 178, 0.6);
}

/* Layout management buttons */
.layout-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.reset-layout-btn {
    background-color: #666666;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.reset-layout-btn:hover {
    background-color: #777777;
}

.layout-description {
    text-align: center;
    margin-top: 8px;
}

.layout-description small {
    color: #aaaaaa;
    font-size: 12px;
}

/* ── Post-deal interest round UX ───────────────────────────────── */

.interest-btn-container {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    align-items: center;
}

.interest-btn-container-confirming {
    padding: 2px 6px;
    background: rgba(42, 138, 138, 0.08);
    border: 1px solid rgba(42, 138, 138, 0.3);
}

.interest-confirming-label {
    font-size: 11px;
    color: #2a8a8a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.interest-match-found-inline {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    background: #2a8a8a;
    color: #0a0a0a;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interest-cancel-feed-btn {
    background: #222;
    color: #ccc;
    border-color: #444;
}
.interest-cancel-feed-btn:hover {
    background: #333;
    border-color: #666;
}

.interest-btn {
    padding: 2px 10px;
    font-size: 11px;
    border: 1px solid #2a8a8a;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interest-btn-buy {
    background: #0a4a2a;
    color: #d0ffd0;
}
.interest-btn-buy:hover { background: #0e6638; }

.interest-btn-sell {
    background: #4a0a1a;
    color: #ffd0d0;
}
.interest-btn-sell:hover { background: #660e28; }

.interest-countdown {
    margin-left: 6px;
    color: #888;
    font-size: 10px;
    font-style: italic;
}

.interest-signal-tag {
    margin-left: 6px;
    color: #2a8a8a;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.interest-complete-tag {
    margin-left: 6px;
    color: #ffaa00;
    font-size: 10px;
    font-weight: 600;
}

/* Interest round modal uses the shared .modal / .pro-modal / .pro-body / .pro-button
   styling from websocket-trade-styles.css. These additions cover the leg-list +
   residual-summary sections that are specific to the confirmation panel. */

.legs-list {
    background: #0c0c0c;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
}

.legs-empty {
    padding: 12px;
    color: #888;
    font-size: 12px;
    text-align: center;
}

.leg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #1a1a1a;
}
.leg-row:last-child { border-bottom: none; }

.leg-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #dcdcdc;
}

.leg-credit-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: #2a8a8a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #141414;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.leg-credit-check:hover {
    background: #1c1c1c;
    border-color: #2a8a8a;
}
.leg-credit-check input[type="checkbox"] {
    accent-color: #2a8a8a;
    cursor: pointer;
    margin: 0;
}

.legs-sub-hint,
.interest-inline-sub-hint {
    color: #888;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 8px;
    font-style: italic;
}

.leg-cp {
    color: #ffffff;
    font-weight: 500;
}

.leg-qty {
    color: #cccccc;
    font-variant-numeric: tabular-nums;
}

.leg-side {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid currentColor;
    letter-spacing: 0.5px;
}
.leg-side-buy  { color: #0e6638; }
.leg-side-sell { color: #a02020; }

.residual-summary {
    padding: 8px 12px;
    background: #0c0c0c;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.residual-actions {
    display: flex;
    gap: 8px;
}

.residual-btn {
    flex: 1;
    padding: 8px 12px;
    background: #1a1a1a;
    color: #cccccc;
    border: 1px solid #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.residual-btn:hover {
    background: #222;
    border-color: #2a8a8a;
    color: #ffffff;
}

.residual-btn.selected {
    background: #2a8a8a;
    color: white;
    border-color: #2a8a8a;
}

/* Originals' leftover standing-order row uses the same visual language as
   residual — summary card on top, two action buttons below. */
.leftover-row + .leftover-row { margin-top: 10px; }

.leftover-btn {
    flex: 1;
    padding: 8px 12px;
    background: #1a1a1a;
    color: #cccccc;
    border: 1px solid #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.leftover-btn:hover {
    background: #222;
    border-color: #2a8a8a;
    color: #ffffff;
}
.leftover-btn.selected {
    background: #2a8a8a;
    color: white;
    border-color: #2a8a8a;
}

/* Interest round rendered INSIDE the trade-execution modal's .pro-body,
   above the Close Window button. Styled as a prominent teal-accented card
   so it stands out alongside the credit (grey) and balance-decision
   (yellow) sections. */

.interest-inline-status {
    margin-top: 16px;
    margin-bottom: 22px;
    padding: 15px;
    background: #062727;
    border: 1px solid #2a8a8a;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(42, 138, 138, 0.15);
}

.interest-inline-divider {
    display: none;
}

.interest-inline-header {
    color: #2a8a8a;
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
    text-align: center;
    text-transform: none;
}

.interest-inline-body {
    color: #dcdcdc;
    font-size: 13px;
    line-height: 1.5;
}

.interest-inline-countdown {
    margin-left: 4px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.interest-inline-subsection {
    margin-top: 12px;
}

.interest-inline-sub-title {
    color: #aaaaaa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Panel has no dedicated Confirm button any more — the modal's existing
   Close Window button does double-duty: its label updates to reflect
   what's still needed, goes to "Confirm" once every decision is in, and
   on click submits to /interest/{id}/confirm before firing its native
   close handler. See interest-round-inline.js hijackCloseBtnForConfirm. */

/* Close button dimmed while the post-deal round is in flight or while
   the trader has a pending decision to make. */
.interest-close-locked {
    opacity: 0.6;
    cursor: not-allowed !important;
    filter: saturate(0.6);
}

/* Per-component default heights for iPad / narrow-viewport (1366×892).
   Placed at end-of-file so it wins source-order over the always-applied
   #id height rules earlier in the stylesheet (e.g. #fx-swap-curve { 64vh }).
   No !important so inline styles (saved heights from localStorage applied
   by component-resize.js on load) still win — user's manually-resized
   heights persist across reloads. */
@media (max-width: 1500px) {
    #fx-swap-curve       { height: 937px; }
    #custom-pricer       { height: 260px; }
    #active-fwd-fwds     { height: 369px; }
    #active-broken-dates { height: 369px; }
    #charting            { height: 452px; }
    #rates-overview      { height: 242px; }
    #fwd-fwd-grid        { height: 448px; }
    #activity            { height: 498px; }
}
/* Dark interest (working order) badge in My Prices */
.dark-badge {
    color: #5eead4;
    cursor: pointer;
    font-size: 10px;
    vertical-align: middle;
}
.dark-badge:hover {
    text-shadow: 0 0 6px rgba(94, 234, 212, 0.5);
}

/* ── Hidden-level style toggle: two mutually exclusive buttons ── */
.dark-style-toggle {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.dark-style-btn {
    flex: 1;
    background-color: #3a3a3a;
    border: 1px solid #444;
    color: #bbb;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    outline: none;
}
.dark-style-btn:hover {
    border-color: #5eead4;
}
.dark-style-btn.selected {
    border-color: #5eead4;
    background-color: #16302c;
    color: #fff;
}
.dark-style-name {
    display: block;
    font-weight: 600;
    font-size: 12px;
}
.dark-style-desc {
    display: block;
    font-size: 10px;
    color: #8a94a0;
    margin-top: 2px;
}
.dark-style-btn.selected .dark-style-desc {
    color: #9fd8cc;
}

/* ── Hidden-level fold-out header ── */
.dark-fold-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    cursor: pointer;
    user-select: none;
}
.dark-fold-title {
    font-size: 12px;
    color: #aab4c0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dark-fold-header:hover .dark-fold-title {
    color: #5eead4;
}
.dark-fold-arrow {
    font-size: 11px;
    color: #8a94a0;
}