/* ============================================================================
   COMPONENTS.CSS - Trading Platform Component Styles
   Uses semantic tokens from base.css - theme-agnostic
   ============================================================================ */

/* ============================================================================
   TABLE OF CONTENTS
   
   1. Global Resets & Base Styles
   2. Utility Classes
   3. Layout System
   4. Toolbar & Navigation
   5. Buttons
   6. Form Elements
   7. Widget System
   8. Trading Components
   9. Panels & Resizing
   10. Sidebars
   11. Order Cards
   12. Tables
   13. Modals & Overlays
   14. Specialized Widgets
   15. Mobile Responsive
   16. Accessibility & States
       
   ============================================================================ */

/* ============================================================================
   1. GLOBAL RESETS & BASE STYLES
   ============================================================================ */

/* Reset browser defaults for full-bleed layout */
html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    min-height: 100vh;
    display: block;
    overflow-x: hidden;
}

/* Bootstrap container reset */
.container-fluid {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

/* Main layout with toolbar offset */
body.trading-layout {
    /* Bootstrap variable overrides mapped to base palette */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-default);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary--hover);

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 27, 79, 114;
    --bs-primary-text: var(--text-on-primary);

    --bs-info: var(--color-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-info-text: var(--color-info);

    --bs-success: var(--color-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-success-text: var(--text-on-success);

    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text: var(--color-warning);

    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 216, 67, 21;
    --bs-danger-text: var(--text-on-danger);

    --bs-secondary: var(--text-secondary);
    --bs-secondary-rgb: 148, 163, 184;

    --bs-light: var(--gray-200);
    --bs-light-rgb: 226, 232, 240;
    --bs-dark: var(--gray-900);
    --bs-dark-rgb: 15, 23, 42;

    background: var(--bg-primary);
    margin: 0;
    padding: 0;
    padding-top: var(--toolbar-offset);
    width: 100%;
    overflow-x: hidden;
}

/* Prevent double offset on nested containers */
.container-fluid.trading-layout {
    padding-top: 0;
}

/* Custom scrollbars */
*::-webkit-scrollbar {
    width: var(--space-3);
    height: var(--space-3);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-md);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb--hover);
}

/* Accessible focus rings */
*:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Performance optimization */
* {
    will-change: auto;
}

/* ============================================================================
   2. UTILITY CLASSES
   ============================================================================ */

/* Display utilities */
.hidden {
    display: none;
}

/* Trading color utilities - bid/ask institutional perspective */
.bg-bid {
    background: var(--color-bid);
}

.bg-bid--hover:hover {
    background: var(--color-bid--hover);
}

.bg-ask {
    background: var(--color-ask);
}

.bg-ask--hover:hover {
    background: var(--color-ask--hover);
}

.text-bid {
    color: var(--color-bid);
}

.text-ask {
    color: var(--color-ask);
}

.border-bid {
    border-color: var(--color-bid);
}

.border-ask {
    border-color: var(--color-ask);
}

/* Background utilities */
.bg-primary {
    background: var(--bg-primary);
}

.bg-secondary {
    background: var(--bg-secondary);
}

.bg-widget {
    background: var(--bg-widget);
}

.bg-toolbar {
    background: var(--bg-toolbar);
}

/* Text utilities */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.text-inverse {
    color: var(--text-inverse);
}

/* Text weight utilities */
.text-normal {
    font-weight: var(--font-weight-normal);
}

.text-medium {
    font-weight: var(--font-weight-medium);
}

.text-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-bold {
    font-weight: var(--font-weight-bold);
}

/* Border utilities */
.border-default {
    border: 1px solid var(--border-default);
}

.border-strong {
    border: 2px solid var(--border-strong);
}

.border-subtle {
    border: 1px solid var(--border-subtle);
}

/* Border radius utilities */
.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* Status utilities */
.bg-success {
    background: var(--color-success);
}

.bg-warning {
    background: var(--color-warning);
}

.bg-danger {
    background: var(--color-danger);
}

.bg-info {
    background: var(--color-info);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-info {
    color: var(--color-info);
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   3. LAYOUT SYSTEM
   ============================================================================ */

/* CSS Grid for widget layout */
.trd-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-column), 1fr));
    grid-auto-rows: minmax(var(--grid-min-row), auto);
    grid-auto-flow: dense;
    background: var(--bg-secondary);
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Masonry column layout */
.masonry-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Widget item container */
.trd-widget-item {
    padding: 0;
    margin: 0;
    min-height: auto;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: relative;
    transform: translateZ(0);
    transition: var(--transition-fast);
}

.trd-widget-item:hover {
    box-shadow: var(--shadow-xl);
}

/* Widget height utilities */
.h1 {
    /* Default: fit-content */
}

.h2 {
    min-height: var(--widget-height-medium);
}

.h3 {
    min-height: var(--widget-height-large);
}

.h4 {
    min-height: var(--widget-height-xlarge);
}

/* ============================================================================
   4. TOOLBAR & NAVIGATION
   ============================================================================ */

/* Main toolbar - fixed at top */
.trd-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--toolbar-height);
    padding: var(--space-2) var(--space-5);
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border-subtle);
    z-index: var(--z-toolbar);
    width: 100%;
    margin: 0;
}

/* Sub-toolbar - below main toolbar */
.sub-toolbar {
    position: absolute;
    top: var(--toolbar-height);
    left: 0;
    right: 0;
    height: var(--sub-toolbar-height);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-6);
    background: var(--bg-primary);
    z-index: var(--z-sub-toolbar);
}

.sub-toolbar > :first-child {
    margin-right: auto;
}

/* Form controls in sub-toolbar (1-click orders toggle) */
.sub-toolbar .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    transition: var(--transition-fast);
}

.sub-toolbar .form-check:hover {
    background: var(--bg-button--hover);
    border-color: var(--color-primary);
}

.sub-toolbar .form-check-input {
    margin: 0;
    cursor: pointer;
    width: 2.5rem;
    height: 1.25rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
}

.sub-toolbar .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sub-toolbar .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.sub-toolbar .form-check-label {
    color: var(--text-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    margin: 0;
}

/* Toolbar layout sections */
.toolbar-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.toolbar-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-1) var(--space-5);
}

.toolbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Logo styling */
.navbar-logo img,
.logo-image {
    max-height: var(--logo-max-height);
    height: auto;
    width: auto;
    object-fit: contain;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.logo-image:hover {
    opacity: 0.9;
}

/* --- Footer --- */
.trd-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
    z-index: var(--z-toolbar);
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.footer-connection {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
}

.footer-connection.connected {
    color: var(--color-success);
}

.footer-connection.disconnected {
    color: var(--color-danger);
}

.footer-connection.connecting {
    color: var(--color-warning);
}

.footer-datetime {
    color: var(--text-secondary);
    font-size: var(--font-size-12);
    font-family: monospace;
}

/* ============================================================================
   5. BUTTONS
   ============================================================================ */

/* --- Base Button --- */
.trd-button {
    background: var(--bg-button);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-12);
    padding: var(--space-2) var(--space-3);
    min-height: var(--button-height-standard);
    cursor: pointer;
    transition: var(--transition-fast);
    transform: translateZ(0);
}

.trd-button:hover {
    background: var(--bg-button--hover);
}

/* --- Trading Price Buttons --- */
.price-button {
    border: 2px solid transparent;
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-3);
    min-height: var(--button-height-standard);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    transform: translateZ(0);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.price-bid {
    background: var(--color-bid);
    color: var(--text-on-primary);
}

.price-bid:hover {
    border-color: var(--color-bid--hover);
}

.price-ask {
    background: var(--color-ask);
    color: var(--text-on-primary);
}

.price-ask:hover {
    border-color: var(--color-ask--hover);
}

/* --- Control Buttons (Size/Price) --- */
.trd-control-button,
.trd-sizebutton,
.trd-pricebutton {
    flex: 1;
    min-height: var(--button-height-standard);
    text-align: center;
    margin: 0;
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.trd-sizebutton {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-12);
    width: var(--button-width-small);
    min-width: var(--button-width-small);
    max-width: var(--button-width-small);
    background: var(--bg-button);
}

.trd-pricebutton {
    min-width: var(--button-width-medium);
    background: var(--bg-button--hover);
}

.trd-sizebutton:hover,
.trd-pricebutton:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* --- GTD Trading Buttons --- */
.gtd-buy-btn,
.gtd-sell-btn {
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
    min-width: var(--button-width-small);
}

.gtd-buy-btn {
    background: var(--color-buy);
    color: var(--text-on-primary);
}

.gtd-sell-btn {
    background: var(--color-sell);
    color: var(--text-on-primary);
}

.gtd-buy-btn:hover,
.gtd-sell-btn:hover {
    filter: brightness(1.1);
}

.gtd-buy-btn:disabled,
.gtd-sell-btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

/* --- Action Buttons (Cancel/Confirm) --- */
.order-cancel-btn,
.confirmation-cancel-btn {
    background: var(--color-danger);
    color: var(--text-on-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.order-cancel-btn:hover,
.confirmation-cancel-btn:hover {
    filter: brightness(1.05);
}

.order-cancel-btn:disabled,
.confirmation-cancel-btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.order-confirm-btn {
    background: var(--color-success);
    color: var(--text-on-success);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.order-confirm-btn:hover {
    filter: brightness(1.05);
}

.order-confirm-btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

/* ============================================================================
   6. FORM ELEMENTS
   ============================================================================ */

/* --- Input Fields --- */
.trd-input {
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-11);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    width: 100%;
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.trd-input:focus {
    border-color: var(--border-focus);
    outline: none;
}

.trd-input:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

/* --- Select Dropdowns --- */
select.trd-select,
.instrument-type-select,
.search-instrument-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-11);
    cursor: pointer;
    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='%23f0f6fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: var(--space-5);
    padding-right: var(--space-8);
}

select.trd-select option {
    background: var(--bg-widget);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
}

/* --- Dropdown Menus --- */
.dropdown-menu {
    background: var(--bg-widget);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 12.5rem;
    max-height: 15.625rem;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-2);
}

.dropdown-item {
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-12);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    text-align: left;
    width: 100%;
}

.dropdown-item:hover {
    background: var(--bg-button--hover);
    color: var(--text-primary);
}

.dropdown-header {
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-10);
    letter-spacing: 0.5px;
    padding: var(--space-2) var(--space-4);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) 0;
    opacity: 0.3;
}

/* --- Instrument Search Widget --- */
.search-widget-container {
    background: var(--bg-widget);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-height: 25rem;
    min-width: 18.75rem;
    padding: var(--space-6);
}

.search-widget-header {
    margin-bottom: 1.25rem;
    padding: var(--space-2) 0;
}

.search-widget-container .btn {
    margin: 0 var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.search-widget-container .btn:first-child {
    margin-left: 0;
}

.search-widget-container .btn:last-child {
    margin-right: 0;
}

.search-widget-container .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.search-widget-container .trd-input {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-14);
    margin-left: var(--space-2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-widget-container .trd-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-widget-container .trd-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(27, 79, 114, 0.25);
    outline: none;
}

.search-widget-container [id^="instrument_search_results"] {
    min-height: 18.75rem;
    padding-top: var(--space-3);
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.search-results-count {
    font-size: var(--font-size-14);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.search-results-grid {
    --bs-gutter-x: var(--space-1);
    --bs-gutter-y: var(--space-1);
    gap: var(--space-1);
}

.search-results-grid .btn {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.search-results-grid .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.instrument-search-btn {
    background: var(--bg-button--hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.instrument-search-btn:hover {
    background: var(--bg-button--active);
}

.instrument-search-btn--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-on-danger);
}

.instrument-search-btn--danger:hover {
    filter: brightness(1.05);
}

.instrument-search-dropdown {
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

.instrument-search-dropdown .dropdown-item {
    color: var(--text-primary);
}

.instrument-search-dropdown .dropdown-item:hover {
    background: var(--bg-button--hover);
    color: var(--text-primary);
}

/* --- Add Widget Dropdown --- */
#addWidgetBtn.show {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

#addWidgetBtn:hover {
    background: var(--bg-button--hover);
}

/* --- Dropdown Overflow Management --- */
*:has(.dropdown.show) {
    overflow: visible;
}

.dropright .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-left: var(--space-2);
}

/* ============================================================================
   7. WIDGET SYSTEM
   ============================================================================ */

/* --- Widget Container --- */
.ordergui-container,
.trd-widget-pro-container {
    background: var(--bg-primary);
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    min-height: auto;
    border: none;
}

/* --- Widget Header --- */
.trd-widget-pro-header {
    background: var(--bg-primary);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-2);
    min-height: var(--widget-header-height);
    position: relative;
    gap: var(--space-5);
    z-index: 1;
}

.trd-widget-pro-header > * {
    margin: 0 var(--space-1);
}

/* Symbol wrapper for centering */
.symbol-wrapper {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* Symbol wrapper shifted left (for LIMIT order widgets with side selector) */
.symbol-wrapper-left {
    justify-content: flex-start;
}

/* --- Widget Side Selector (for LIMIT orders) --- */
.widget-side-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.widget-side-dropdown {
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 7.5rem;
    height: calc(var(--control-button-size) * 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-side-dropdown:hover {
    background: var(--bg-button--hover);
    border-color: var(--text-secondary);
}

.widget-side-dropdown:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

/* --- Widget Body --- */
.trd-widget-pro-body {
    flex-grow: 1;
    padding: var(--space-1);
    overflow-y: auto;
    min-height: 0;
    margin: 0;
}

/* --- Widget Control Buttons --- */
.widget-control-btn {
    padding: var(--space-1);
    margin: 0 var(--space-1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    width: var(--control-button-size);
    height: var(--control-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.widget-control-btn:hover {
    background: var(--bg-button--hover);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.widget-control-btn:active {
    transform: translateY(0);
}

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

/* --- Widget Lock States --- */
.widget-lock-btn.locked {
    color: var(--color-danger);
}

.widget-lock-btn.unlocked {
    color: var(--text-secondary);
}

.widget-lock-btn[disabled] {
    pointer-events: none;
}

/* Widget lock states - applies to both individual and global locks */
body.globally-locked [id^="ORDERGUI"],
[id^="ORDERGUI"].widget-locked {
    opacity: 0.6;
    position: relative;
}

body.globally-locked [id^="ORDERGUI"] [data-msgpack-order],
body.globally-locked [id^="ORDERGUI"] button[type="submit"],
body.globally-locked [id^="ORDERGUI"] .wrap-button,
body.globally-locked [id^="ORDERGUI"] .button-size,
body.globally-locked [id^="ORDERGUI"] .button-price,
[id^="ORDERGUI"].widget-locked [data-msgpack-order],
[id^="ORDERGUI"].widget-locked button[type="submit"],
[id^="ORDERGUI"].widget-locked .wrap-button,
[id^="ORDERGUI"].widget-locked .button-size,
[id^="ORDERGUI"].widget-locked .button-price {
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Symbol Button --- */
.symbol-btn {
    border-radius: var(--radius-lg);
    min-height: var(--symbol-button-height);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    height: 100%;
    border-width: 0;
    min-width: 0;
    background: var(--bg-widget);
    transition: var(--transition-fast);
}

.symbol-btn:hover {
    box-shadow: var(--shadow-md);
    border-width: 1px;
    background: var(--bg-widget);
}

.symbol-btn:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

/* Symbol display layout */
.symbol-display {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.symbol-display-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.symbol-btn .symbol-large {
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    display: inline;
}

.symbol-btn .symbol-small {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    display: inline;
    margin-left: var(--space-1);
}

/* --- Widget Content Optimization --- */
.trd-widget-item > * {
    width: 100%;
    box-sizing: border-box;
}

.trd-widget-item .d-flex,
.trd-widget-item .row,
.trd-widget-item .btn-group {
    gap: var(--space-1);
}

.trd-widget-item .d-flex > button,
.trd-widget-item .d-flex > .btn,
.trd-widget-item .btn-group > button,
.trd-widget-item .btn-group > .btn {
    flex: 1;
    margin: 0;
}

/* ============================================================================
   8. TRADING COMPONENTS (Order Book, Pills, Split Buttons)
   ============================================================================ */

/* --- Pill-Style Controls --- */
.control-pill-label {
    background: var(--bg-widget);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-11);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
    min-width: var(--space-12);
    text-align: center;
    border-right: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.control-pill-content {
    flex-grow: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.control-pill-content .btn,
.control-pill-content .trd-input {
    flex: 1;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-11);
}

.control-pill-content .btn {
    min-height: var(--button-height-compact);
    font-weight: var(--font-weight-semibold);
}

.control-pill-content .trd-input {
    font-weight: var(--font-weight-medium);
    text-align: center;
    min-height: var(--input-height-compact);
}

.control-pill-content .dropdown {
    flex: 1;
}

.control-pill-content .dropdown .btn {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    min-height: var(--button-height-compact);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* --- Wrapped Pill Layout --- */
.pills-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    position: relative;
    margin-bottom: calc(-1 * var(--space-1));
}

.pills-container {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: visible;
    z-index: 10;
}

/* --- Split Buttons --- */
.wrap-button {
    position: relative;
    min-width: var(--widget-control-width);
    border: 2px solid transparent;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--space-1);
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
    transition: var(--transition-fast);
}

.wrap-button-bid {
    background: var(--color-bid);
    color: var(--text-on-primary);
}

.wrap-button-ask {
    background: var(--color-ask);
    color: var(--text-on-primary);
}

.wrap-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.wrap-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.wrap-button-bid:hover {
    background: var(--color-bid--hover);
}

.wrap-button-ask:hover {
    background: var(--color-ask--hover);
}

/* Split button corners */
.wrap-button.wrap-button-top.wrap-button-bid {
    border-top-right-radius: var(--radius-md);
}

.wrap-button.wrap-button-top.wrap-button-ask {
    border-top-left-radius: var(--radius-md);
}

.wrap-button.wrap-button-bottom.wrap-button-bid {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.wrap-button.wrap-button-bottom.wrap-button-ask {
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

/* Button price display */
.button-price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.button-size {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    color: white;
    padding: var(--space-4) 0;
    border-radius: var(--radius-md);
    min-width: var(--space-10);
    text-align: center;
    text-shadow: -0.1rem 0.1rem 0 var(--black);
}

.wrap-button-top .button-size {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-extrabold);
    padding: var(--space-1) var(--space-3);
    min-width: var(--space-12);
}

.button-price {
    font-size: var(--font-size-30);
    font-weight: var(--font-weight-black);
    line-height: 1;
    color: white;
    display: flex;
    align-items: baseline;
    justify-content: center;
    word-break: break-all;
    overflow-wrap: break-word;
    text-shadow: -0.12rem 0.12rem 0 var(--black);
}

.wrap-button-top .button-price {
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-black);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Price display components (large/small digits) */
.price-small {
    font-size: var(--font-size-15);
    font-weight: 550;
    color: white;
}

.price-large {
    font-size: 2.1875rem;
    font-weight: var(--font-weight-bold);
    color: white;
}

.wrap-button-bottom .price-small {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    color: white;
}

.wrap-button-bottom .price-large {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: white;
}

/* Override for top-level prices (largest display) */
.wrap-button-top .price-large {
    font-size: var(--font-size-48) !important;
    font-weight: var(--font-weight-black) !important;
}

/* Split button group container */
.split-button-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-grow: 1;
    align-self: flex-end;
    width: var(--widget-control-width);
    min-width: var(--widget-control-width);
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    flex-shrink: 0;
}

/* Split button group styling */
.split-button-group .wrap-button-top + .wrap-button-bottom {
    border-top: none !important;
    margin-top: 0;
}

.split-button-group .wrap-button-top {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: var(--space-1) !important;
}

.split-button-group .wrap-button-bottom {
    padding-top: var(--space-1) !important;
}

/* Inherit border styling from parent button */
.split-button-group .wrap-button-top,
.split-button-group .wrap-button-bottom {
    border-left: inherit !important;
    border-right: inherit !important;
    border-width: inherit !important;
}

/* --- Seamless Order Book --- */
.seamless-order-book {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-radius: 0;
    background: var(--bg-primary);
    overflow: hidden;
    margin-top: var(--space-2);
    gap: var(--space-1);
}

.order-book-half {
    width: 50%;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: 0;
}

.order-book-half .d-flex {
    margin: 0;
    padding: 0;
    gap: var(--space-1);
}

.order-book-price-column {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.order-book-size-column {
    width: 35%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Order book button styling */
.seamless-order-book button,
.seamless-order-book .btn {
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    min-height: auto;
    height: 100%;
    line-height: 1;
    box-shadow: none;
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.seamless-order-book .btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Hover background changes for order book rows */
.price-bid .btn:hover {
    background: var(--color-bid--hover);
}

.price-ask .btn:hover {
    background: var(--color-ask--hover);
}

/* Order book alignment */
.order-book-align-baseline {
    align-items: baseline;
    min-height: auto;
    padding: 0;
    margin: 0;
}

/* Order book price column buttons */
.order-book-price-column .btn,
.order-book-size-column .btn {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    min-height: auto;
    height: 100%;
    line-height: 1;
    vertical-align: baseline;
}

/* Text alignment for order book columns */
.seamless-order-book .order-book-price-column .text-right {
    justify-content: flex-end;
    text-align: right;
}

.seamless-order-book .order-book-price-column .text-left {
    justify-content: flex-start;
    text-align: left;
}

.seamless-order-book .order-book-price-column .text-left .d-flex {
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* --- Stacked Input Pill --- */
.stacked-input-pill {
    background: var(--bg-primary);
    padding: 0;
    margin: 0 auto;
    width: var(--widget-control-width);
    max-width: var(--widget-control-width);
    display: flex;
    flex-direction: column;
}

.stacked-input-pill:hover {
    border-color: var(--border-focus);
}

.stacked-input-pill:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.1rem rgba(88, 166, 255, 0.25);
}

.stacked-input-section {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
}

.stacked-input-section:last-child {
    border-bottom: none;
}

.stacked-input-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    min-width: var(--space-8);
    padding-right: var(--space-2);
    flex-shrink: 0;
}

.stacked-input-field {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    padding: var(--space-1);
    margin: 0;
    text-align: right;
    outline: none;
    width: 100%;
    min-width: 0;
}

.stacked-input-field:focus {
    background: rgba(88, 166, 255, 0.1);
}

.stacked-input-field::-webkit-inner-spin-button,
.stacked-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stacked-input-field[type=number] {
    -moz-appearance: textfield;
}

/* Type section special styling */
.stacked-type-section {
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
}

.stacked-type-section:hover {
    background: transparent;
}

/* --- Bottom Section (Analytics/Charts) --- */
.bottom-section {
    margin-top: 0;
}

.bottom-section-toggle {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: var(--space-1);
    width: var(--control-button-size);
    height: var(--control-button-size);
    cursor: pointer;
    transition: var(--transition-fast);
}

.bottom-section-toggle:hover {
    background: var(--bg-button--hover);
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.bottom-section-toggle:active {
    transform: translateY(0);
}

.bottom-section-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.bottom-section-content[style*="display: none"] {
    margin-top: 0;
    height: 0;
    overflow: hidden;
}

.bottom-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.bottom-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.bottom-tab:last-child {
    border-right: none;
}

.bottom-tab:hover {
    background: var(--bg-button--hover);
    color: var(--text-primary);
}

.bottom-tab.active {
    background: var(--bg-primary);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.bottom-tab-content {
    min-height: 12.5rem;
    padding: 0;
    margin: 0;
}

.bottom-tab-content .tab-pane {
    height: 100% !important;
}

/* Chart tabs only - scoped to .bottom-section (ordergui_pro.html) */
.bottom-section .tab-pane {
    transition: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.bottom-section .tab-pane.fade {
    transition: none !important;
}

.bottom-section .tab-pane.fade.show {
    opacity: 1 !important;
}

/* Chart container - constrain the container, not the canvas */
.chart-container {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas elements - let JavaScript handle sizing */
.chart-container canvas,
.tab-pane canvas {
    display: block;
    margin: 0;
    padding: 0;
}

/* VWAP container */
.vwap-container {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
}

.vwap-container .spinner-border-sm {
    width: var(--space-4);
    height: var(--space-4);
    border-width: 1px;
}

/* Venue placeholder */
.venue-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
}

.venue-placeholder-text {
    text-align: center;
    font-size: var(--font-size-14);
}

/* Widget Settings Container */
.widget-settings-container {
    padding: var(--space-4);
    background: var(--bg-primary);
    min-height: 12.5rem;
}

.widget-settings-section {
    margin-bottom: var(--space-4);
}

.widget-settings-section label {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-12);
}

.widget-display-mode {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    font-size: var(--font-size-12);
    width: 100%;
    max-width: 25rem;
}

.widget-display-mode option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.widget-display-mode option:checked {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

.display-mode-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.display-mode-checkboxes .form-check {
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.display-mode-checkboxes .form-check-input {
    margin-left: 0;
    margin-top: 0;
}

.display-mode-checkboxes .form-check-label {
    cursor: pointer;
    user-select: none;
    font-weight: normal;
    margin-bottom: 0;
    font-size: var(--font-size-12);
}

.widget-display-mode:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* VWAP Levels Configuration */
.vwap-levels-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vwap-level-input-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.vwap-level-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-12);
}

.vwap-level-input:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.remove-vwap-level {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-16);
    background: var(--color-danger);
    color: var(--text-on-danger);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.remove-vwap-level:hover {
    filter: brightness(1.1);
}

.add-vwap-level {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: var(--space-2);
}

.add-vwap-level:hover {
    background: var(--bg-button--hover);
    border-color: var(--color-primary);
}

/* VWAP Levels Display (in widget body) */
.vwap-levels-display {
    margin-top: var(--space-2);
    padding: var(--space-2);
}

.vwap-levels-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--border-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.vwap-header-row,
.vwap-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background-color: var(--border-subtle);
}

.vwap-header {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-2) var(--space-1);
    text-align: center;
}

.vwap-cell {
    background-color: var(--bg-primary);
    padding: var(--space-2);
    text-align: center;
    font-size: var(--font-size-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--space-9);
}

.notional-cell {
    background-color: var(--bg-secondary);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.buy-cell {
    background-color: var(--color-ask);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
    transition: var(--transition-fast);
}

.sell-cell {
    background-color: var(--color-bid);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
    transition: var(--transition-fast);
}

.buy-cell.clickable:hover,
.sell-cell.clickable:hover {
    filter: brightness(1.1);
    cursor: pointer;
    transform: scale(1.02);
}

.unavailable-cell {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: var(--font-size-10);
}

.unavailable-cell .text-warning {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning);
}

.unavailable-cell small {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-9);
}

.vwap-loading {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-12);
}

/* ============================================================================
   9. PANELS & RESIZING
   ============================================================================ */

/* --- Resizable Container --- */
.resizable-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
    overflow: hidden;
    min-height: 0;
}

/* --- Top and Bottom Panels --- */
.top-panel {
    flex: 1 1 60%;
    min-height: var(--space-12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bottom-panel {
    flex: 1 1 40%;
    min-height: var(--space-9);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    transform: translateZ(0);
}

/* --- Resize Handle --- */
.resize-handle {
    height: var(--resize-handle-height);
    cursor: row-resize;
    background-color: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    flex-grow: 0;
    z-index: 10;
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.resize-handle:hover {
    background-color: var(--color-success);
    opacity: 0.2;
}

.resize-handle.dragging {
    background-color: var(--color-success);
    opacity: 0.4;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.resize-handle-line {
    width: var(--space-8);
    height: var(--space-1);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
    transition: var(--transition-fast);
}

.resize-handle:hover .resize-handle-line {
    background-color: var(--color-success);
    width: var(--space-12);
}

.resize-handle.dragging .resize-handle-line {
    background-color: var(--color-success);
    width: 4rem;
    height: 3px;
}

/* --- Tab System --- */
.custom-nav-tabs {
    min-height: var(--nav-tab-height);
    max-height: var(--nav-tab-height);
    display: flex;
    align-items: stretch;
    border-bottom: none;
    overflow: hidden;
}

.custom-nav-tabs .nav-link {
    background: var(--bg-widget);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-16);
    box-sizing: border-box;
    position: relative;
    line-height: 1.2;
    padding: var(--space-3) var(--space-5);
    border-bottom: 2px solid transparent;
    transition: none;
}

.custom-nav-tabs .nav-link:hover,
.custom-nav-tabs .nav-link:focus {
    font-weight: var(--font-weight-semibold);
    box-shadow: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    transform: none;
}

.custom-nav-tabs .nav-link.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: none;
    border-bottom: 2px solid var(--color-primary);
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-secondary);
    height: 100%;
}

.tab-pane {
    height: 100%;
    display: none;
}

.tab-pane.show,
.tab-pane.active {
    display: block;
}

.tab-pane > * {
    height: 100%;
    width: 100%;
}

/* ============================================================================
   10. SIDEBARS
   ============================================================================ */

/* --- Icon Sidebar --- */
.icon-sidebar {
    position: fixed;
    left: 0;
    top: var(--toolbar-height);
    width: var(--sidebar-icon-width);
    border-top: 0;
    margin-top: 0;
    z-index: 1102;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
}

.icon-sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: right;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-4);
}

.icon-btn {
    width: var(--space-12);
    height: var(--space-8);
    border: 2px solid var(--border-subtle);
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-18);
    cursor: pointer;
    transition: var(--transition-base);
}

.icon-btn:hover {
    background-color: var(--bg-button--hover);
    color: var(--text-primary);
    transform: translateX(2px);
}

.icon-btn.active {
    background-color: var(--color-primary);
    color: var(--text-inverse);
}

/* --- Expandable Sidebars --- */
.expandable-sidebar {
    position: fixed;
    top: calc(var(--toolbar-offset) + var(--space-4));
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    z-index: 999;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.left-expandable {
    left: var(--sidebar-icon-width);
    width: 0;
}

.left-expandable.expanded {
    width: var(--sidebar-expand-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    min-height: var(--nav-tab-height);
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    gap: var(--space-3);
}

.sidebar-toggle {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-10));
    transform: translateY(-50%);
    width: var(--space-10);
    height: var(--space-12);
    background: var(--color-primary);
    border: none;
    border-radius: 0 10px 10px 0;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-semibold);
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.sidebar-toggle:hover {
    background: var(--color-primary--hover);
    transform: translateY(-50%) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.sidebar-content {
    flex: 1;
    padding: var(--space-5);
    overflow-y: auto;
    background: var(--bg-widget);
}

.sidebar-section {
    margin-bottom: var(--space-8);
}

.sidebar-section-title {
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 var(--space-2);
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sidebar-btn {
    width: 100%;
    padding: 0.75rem var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-widget);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    transform: translateZ(0);
    transition: var(--transition-base);
}

.sidebar-btn:hover {
    background: var(--color-primary);
    color: var(--text-primary);
    border-color: var(--color-primary);
    transform: translateX(5px) translateZ(0);
    box-shadow: var(--shadow-md);
}

.sidebar-btn:active {
    transform: translateX(8px) translateY(1px) translateZ(0);
}

.sidebar-btn i {
    font-size: var(--font-size-16);
    width: var(--control-icon-size);
    text-align: center;
    opacity: 0.9;
}

.sidebar-btn:hover i {
    opacity: 1;
}

/* --- Layout Containers (Main Viewport & Flex Layout) --- */
.main-viewport-container {
    height: calc(100vh - var(--toolbar-offset));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.layout-container {
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex: 1 1 60%;
    min-height: 0;
}

.main-content-fullwidth {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.main-content-shifted {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    margin-top: 0;
}

.main-content-shifted.right-expanded {
    padding-right: var(--space-3);
}

.main-content-shifted.both-expanded {
    padding-right: var(--space-3);
}

/* --- Right Sidebar (Orders) --- */
.right-sidebar {
    width: 0;
    min-width: 0;
    background: var(--bg-widget);
    border-left: 2px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transition: none;
}

.right-sidebar.expanded {
    width: var(--sidebar-right-width);
    min-width: var(--sidebar-right-width);
}

.right-sidebar-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-14);
    color: var(--text-primary);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.right-sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.order-count-badge {
    background: var(--color-primary);
    color: var(--text-on-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-bold);
}

.right-sidebar-content {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-widget);
}

.right-sidebar-content::-webkit-scrollbar {
    width: var(--space-3);
}

.right-sidebar-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.right-sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: var(--radius-md);
}

.right-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================================================
   11. ORDER CARDS
   ============================================================================ */

/* --- Order Cards Container --- */
.order-cards-container {
    padding: 0;
}

/* --- Order Card Base --- */
.order-card {
    width: 100%;
    max-width: var(--order-card-max-width);
    background: var(--bg-widget);
    border: 1px solid var(--border-default);
    border-left: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    margin: 0 0 var(--space-2) 0;
    padding: var(--space-2);
    transition: none;
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.order-card:hover {
    border-color: var(--color-primary);
    transform: translateX(-3px) translateZ(0);
    box-shadow: var(--shadow-md);
    filter: brightness(1.1);
}

/* --- Order Card Header --- */
.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.order-symbol {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.order-side-status {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* --- Order Card Body --- */
.order-card-body {
    margin-bottom: var(--space-4);
}

/* --- Order Direction Selector (Radio Buttons) --- */
.order-direction-selector {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.order-direction-selector .direction-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-primary);
    transition: all var(--transition-fast);
    flex: 1;
    justify-content: center;
}

.order-direction-selector .direction-option:hover {
    background: var(--bg-button--hover);
    border-color: var(--text-secondary);
}

.order-direction-selector .direction-option.selected {
    border-color: var(--color-primary);
    background: var(--bg-button--hover);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.order-direction-selector input[type="radio"] {
    margin-right: var(--space-2);
    cursor: pointer;
}

.order-direction-selector .direction-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-direction-selector .buy-label {
    color: var(--color-buy);
}

.order-direction-selector .sell-label {
    color: var(--color-sell);
}

.order-price-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.order-price {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.order-price-label {

    font-size: var(--font-size-10);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-1);
}

.order-qty {
    font-size: var(--font-size-12);
    color: var(--text-secondary);
}

.order-progress {
    width: 100%;
    height: var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.order-progress-bar {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

.order-fill-text {
    font-size: var(--font-size-10);
    color: var(--text-secondary);
    text-align: center;
}

.order-fill-text.filled-order-text {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.order-fill-text.filled-order-text .filled-buy,
.order-fill-text.filled-order-text .filled-sell {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-black);
    text-shadow: -0.12rem 0.12rem 0 var(--black);
}

.order-fill-text.filled-order-text .filled-buy {
    color: var(--color-buy);
}

.order-fill-text.filled-order-text .filled-sell {
    color: var(--color-sell);
}

.order-last-fill {
    color: var(--text-primary);
    font-size: var(--font-size-10);
    margin: var(--space-2) 0;
    opacity: 0.9;
    text-align: center;
    font-family: monospace;
}

/* Order status text (REJECTED, EXPIRED, CANCELED) */
.order-status-text {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    text-transform: uppercase;
}

.order-status-rejected {
    color: var(--color-danger);
}

.order-status-expired {
    color: var(--color-warning);
}

.order-status-canceled {
    color: var(--color-warning);
}

/* Order detail text (rejection reasons, etc.) */
.order-detail-text {
    color: var(--text-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

/* --- Order Card Footer --- */
.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-timestamp {
    font-size: var(--font-size-10);
    color: var(--text-secondary);
    font-family: monospace;
}

/* --- Confirmation Cards --- */
.order-confirmation-card,
.limit-confirmation-card,
.universal-confirmation-card {
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--color-primary);
}

.universal-order-body,
.limit-order-body {
    padding: var(--space-2);
}

.universal-footer {
    padding: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.universal-confirm-btn,
.limit-confirm-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
}

.universal-confirm-btn[data-direction="buy"],
.limit-confirm-btn[data-direction="buy"] {
    background: var(--color-buy);
    color: var(--text-on-primary);
}

.universal-confirm-btn[data-direction="sell"],
.limit-confirm-btn[data-direction="sell"] {
    background: var(--color-sell);
    color: var(--text-on-primary);
}

.universal-confirm-btn:hover:not(:disabled),
.limit-confirm-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.universal-confirm-btn:disabled,
.limit-confirm-btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    transform: none;
}

/* --- Market Order Cards --- */
.market-price-section {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    text-align: center;
}

.market-order-message {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.market-quantity-section {
    margin-top: var(--space-3);
    padding: var(--space-2);
}

.market-direction-row {
    display: flex;
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.market-direction-row.buy-row {
    border-left: 2px solid var(--color-ask);
}

.market-direction-row.sell-row {
    border-left: 2px solid var(--color-bid);
}

.market-direction-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    margin-right: var(--space-2);
    min-width: 40px;
}

.buy-row .market-direction-label {
    color: var(--color-ask);
}

.sell-row .market-direction-label {
    color: var(--color-bid);
}

.market-quantity-input {
    flex: 1;
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    text-align: right;
    transition: var(--transition-base);
    font-family: monospace;
}

.market-quantity-input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-button--hover);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

/* --- Currency Conversion Section --- */
.currency-conversion-section {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
}

.currency-row {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.currency-row:last-child {
    margin-bottom: 0;
}

.currency-row.buy-row {
    border-left: 2px solid var(--color-buy);
}

.currency-row.sell-row {
    border-left: 2px solid var(--color-sell);
}

.currency-action {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-11);
    text-transform: uppercase;
    width: 35px;
    margin-right: var(--space-2);
}

.buy-row .currency-action {
    color: var(--color-ask);
}

.sell-row .currency-action {
    color: var(--color-bid);
}

.currency-amount-input {
    flex: 1;
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    text-align: right;
    transition: var(--transition-base);
    font-family: monospace;
}

.currency-amount-input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-button--hover);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.currency-amount-input[readonly] {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
    cursor: default;
    opacity: 0.8;
}

/* --- Price Input Section --- */
.price-input-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

.price-input-label {
    display: block;
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.limit-price-input,
.universal-price-input {
    width: 100%;
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    transition: var(--transition-base);
    font-family: monospace;
}

.limit-price-input:focus,
.universal-price-input:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-button--hover);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* --- Status Badges --- */
.badge,
.order-status-badge,
.order-side-badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.order-side-badge.buy {
    background: var(--color-buy);
    color: var(--text-on-primary);
}

.order-side-badge.sell {
    background: var(--color-sell);
    color: var(--text-on-primary);
}

.order-status-badge.filled {
    background: var(--color-success);
    color: var(--text-on-success);
}

.order-status-badge.rejected,
.order-status-badge.canceled {
    background: var(--color-danger);
    color: var(--text-on-danger);
}

.order-status-badge.partially-filled,
.order-status-badge.pending {
    background: var(--color-warning);
    color: var(--black);
}

.order-status-badge.new {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

/* --- Order Card States --- */
.order-card.filled {
    border-left-color: var(--color-success);
    border-bottom-color: var(--color-success);
    background: rgba(16, 185, 129, 0.15);
    opacity: 0.9;
}

.order-card.canceled,
.order-card.rejected {
    border-left-color: var(--color-danger);
    border-bottom-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.15);
    opacity: 0.8;
}

.order-card.partially-filled,
.order-card.pending {
    border-left-color: var(--color-warning);
    border-bottom-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.12);
}

.order-card.new {
    border-left-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.12);
}

/* ============================================================================
   12. TABLES
   ============================================================================ */

/* --- Table Filter Row --- */
.table-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    background: var(--bg-toolbar);
    border-radius: var(--radius-sm);
    width: fit-content;
}

.table-filter-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.table-filter-row label {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-12);
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

/* --- Base Table Styles --- */
.table {
    width: 100%;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.table th,
.table td {
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    vertical-align: middle;
}

.table thead th {
    background: var(--bg-toolbar);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    border-color: var(--border-default);
}

.table tbody td {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}

.table-hover tbody tr:hover {
    background-color: var(--bg-button--hover);
}

.table-hover tbody tr:hover td {
    background-color: var(--bg-button--hover);
    color: var(--text-primary);
}

#QUOTE_LIST .bi {
    color: inherit;
}

#QUOTE_LIST .btn-success .bi,
#QUOTE_LIST .btn-info .bi {
    color: var(--text-on-primary);
}

#QUOTE_LIST .btn-danger .bi {
    color: var(--text-on-danger);
}

#QUOTE_LIST .btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-on-success);
}

#QUOTE_LIST .btn-info {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--text-on-primary);
}

#QUOTE_LIST .btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-on-danger);
}

/* Hidden table cell */
.hidden-cell {
    display: none;
}

/* --- Sortable Tables --- */
th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}

th.sortable::after {
    content: "⇅";
    position: absolute;
    right: var(--space-3);
    opacity: 0.5;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-11);
}

th.sorted-asc::after {
    content: "↑";
    opacity: 1;
}

th.sorted-desc::after {
    content: "↓";
    opacity: 1;
}

/* --- Selected Row --- */
tr.selected-row {
    background-color: rgba(30, 100, 175, 0.9);
    border: 2px solid #5db2ff;
    color: var(--white);
    font-weight: var(--font-weight-medium);
    box-shadow: 0 0 10px rgba(0, 120, 255, 0.5);
    position: relative;
}

.table-hover tr.selected-row:hover {
    background-color: rgba(40, 110, 185, 0.95);
}

tr.selected-row td:first-child {
    border-left: 5px solid #5db2ff;
    padding-left: 10px;
}

tr.selected-row td:first-child::before {
    content: "▶";
    position: absolute;
    left: -3px;
    color: var(--white);
    font-size: var(--font-size-11);
}

/* --- Progress Width Classes --- */
.progress-width-0 { width: 0%; }
.progress-width-10 { width: 10%; }
.progress-width-20 { width: 20%; }
.progress-width-30 { width: 30%; }
.progress-width-40 { width: 40%; }
.progress-width-50 { width: 50%; }
.progress-width-60 { width: 60%; }
.progress-width-70 { width: 70%; }
.progress-width-80 { width: 80%; }
.progress-width-90 { width: 90%; }
.progress-width-100 { width: 100%; }

/* --- P&L and Position Formatting --- */
.pnl-positive,
.position-long,
.margin-low {
    color: var(--color-success);
}

.pnl-negative,
.position-short,
.margin-critical {
    color: var(--color-danger);
}

.pnl-neutral,
.position-flat {
    color: var(--text-tertiary);
}

.margin-medium {
    color: var(--color-warning);
}

.margin-high {
    color: var(--color-danger--hover);
}

.margin-critical {
    font-weight: var(--font-weight-bold);
}

.position-long,
.position-short {
    font-weight: var(--font-weight-medium);
}

/* ============================================================================
   13. MODALS & OVERLAYS
   ============================================================================ */

/* --- Settings Modal --- */
.settings-modal .modal-dialog {
    max-width: 37.5rem;
}

.settings-modal .modal-header {
    background: var(--color-primary);
    color: var(--text-primary);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.settings-modal .modal-content {
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
}

.settings-modal .modal-body {
    background: var(--bg-widget);
    color: var(--text-primary);
}

.settings-modal .modal-footer {
    background: var(--bg-widget);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    color: var(--text-secondary);
}

.settings-modal .modal-title {
    color: var(--text-on-primary);
}

.settings-modal .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.settings-modal .btn-close:hover {
    opacity: 1;
}

.settings-content {
    min-height: 18.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    color: var(--text-primary);
    gap: var(--space-5);
}

.settings-badge {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-11);
    font-weight: var(--font-weight-semibold);
}

.settings-section-title {
    color: var(--text-primary);
}

.settings-subtext {
    color: var(--text-secondary);
}

.settings-btn {
    border-radius: var(--radius-md);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-4);
    min-height: var(--button-height-standard);
    transition: var(--transition-fast);
}

.settings-btn-sm {
    min-height: var(--button-height-compact);
    font-size: var(--font-size-11);
    padding: var(--space-1) var(--space-3);
}

.settings-btn-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--text-on-primary);
}

.settings-btn-primary:hover {
    filter: brightness(1.05);
}

.settings-btn-ghost {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.settings-btn-ghost:hover {
    background: var(--bg-button--hover);
    color: var(--text-primary);
}

/* --- Type Overlay --- */
.type-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: calc(var(--z-dropdown) + 1);
}

.type-overlay-panel {
    position: fixed;
    max-height: 70vh;
    overflow: auto;
    background: var(--bg-widget);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    z-index: calc(var(--z-dropdown) + 2);
    padding: var(--space-2);
    min-width: 12rem;
}

.type-overlay-panel.two-column-panel {
    width: 20rem;
    padding: 0;
}

.type-panel-header {
    display: flex;
    background-color: var(--bg-widget-header);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.type-column-header {
    flex: 1;
    padding: var(--space-2);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    color: var(--text-primary);
}

.type-panel-body {
    display: flex;
    min-height: 12rem;
}

.type-column {
    flex: 1;
    padding: var(--space-2);
    border-right: 1px solid var(--border-subtle);
}

.type-column:last-child {
    border-right: none;
}

.type-option-button {
    color: var(--text-primary);
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.type-option-button:hover {
    background: var(--bg-button--hover);
}

.type-option-button.selected {
    background: var(--color-primary);
    color: var(--white);
}

.type-panel-footer {
    padding: var(--space-2);
    background-color: var(--bg-widget-header);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-align: center;
}

.type-confirm-button {
    padding: var(--space-2) var(--space-3);
    background: var(--color-success);
    border: 1px solid var(--color-success);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.type-confirm-button:hover:not(:disabled) {
    background: var(--color-success--hover);
    filter: brightness(1.1);
}

.type-confirm-button:disabled {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

/* --- Toasts --- */
.toast-container {
    position: fixed;
    top: calc(var(--toolbar-height) + 0.5rem);
    right: var(--space-5);
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
}

.widget-toast-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.widget-toast {
    background: rgba(32, 32, 32, 0.98);
    color: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) 10px;
    min-width: 220px;
    max-width: 360px;
    border-left: 4px solid #6c757d;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}

.widget-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.widget-toast-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.widget-toast-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.widget-toast-title {
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

.widget-toast-details {
    font-size: var(--font-size-12);
    opacity: 0.9;
}

.widget-toast-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    font-size: var(--font-size-16);
    line-height: 1;
}

.widget-toast-success {
    border-left-color: var(--color-success);
}

.widget-toast-warning {
    border-left-color: var(--color-warning);
}

.widget-toast-error {
    border-left-color: var(--color-danger);
}

/* ============================================================================
   14. SPECIALIZED WIDGETS
   ============================================================================ */

/* --- VWAP Calculator --- */
.vwap-calculator {
    font-size: var(--font-size-11);
    color: var(--text-primary);
    padding: var(--space-2);
}

.vwap-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-1) 0;
}

.vwap-input {
    width: 5.625rem;
    flex-shrink: 0;
    font-size: var(--font-size-10);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    height: var(--space-7);
}

.vwap-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
    outline: none;
}

.vwap-input::placeholder {
    color: var(--text-secondary);
    font-size: var(--font-size-9);
}

.vwap-results {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-10);
    line-height: 1.1;
}

.vwap-result-line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--space-5);
}

.vwap-label {
    color: var(--text-primary);
    font-size: var(--font-size-9);
    font-weight: var(--font-weight-bold);
    min-width: var(--space-7);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vwap-buy-price,
.vwap-sell-price {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-10);
    font-family: 'Courier New', monospace;
}

.vwap-buy-price {
    color: var(--color-buy);
}

.vwap-sell-price {
    color: var(--color-sell);
}

/* --- RFS Widget --- */
.rfs-gui-container {
    background: var(--bg-widget);
    color: var(--text-primary);
}

.rfs-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.3rem;
    color: var(--text-primary);
    font-size: var(--font-size-12);
}

.rfs-input,
.rfs-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--font-size-12);
    padding: var(--space-3) var(--space-4);
}

.rfs-input:focus,
.rfs-select:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

.rfs-input:hover,
.rfs-select:hover {
    border-color: var(--border-focus);
}

.rfs-submit-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem var(--space-5);
    font-size: var(--font-size-12);
    border-radius: var(--radius-md);
}

.rfs-submit-btn:hover {
    background: var(--color-primary--hover);
    box-shadow: var(--shadow-md);
}

.rfs-venue-group {
    max-height: 9.375rem;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    background: var(--bg-input);
}

.rfs-checkbox-input {
    accent-color: var(--color-primary);
}

.rfs-checkbox-label {
    color: var(--text-primary);
    font-size: var(--font-size-12);
    margin-left: 0.5rem;
}

/* --- Margin Supervisor --- */
#sortable-table-container {
    background-color: var(--bg-primary);
}

#sortable-table-container .table-dark td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

#sortable-table-container .table-dark th {
    padding: var(--space-3) var(--space-3);
    vertical-align: bottom;
    background-color: var(--bg-toolbar);
}

/* ============================================================================
   15. MOBILE RESPONSIVE
   ============================================================================ */

/* Desktop-only visibility */
.desktop-only {
    display: flex;
}

@media (max-width: 768px), (pointer: coarse) {
    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }
    /* Larger touch targets for mobile */
    .wrap-button-top,
    .wrap-button-bottom {
        min-height: 2.75rem;
        font-size: 1.125rem;
    }

    .wrap-button-top .button-size {
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-extrabold);
        padding: var(--space-2) var(--space-3);
    }

    .wrap-button-top .button-price {
        font-size: 2.25rem;
        font-weight: var(--font-weight-black);
    }

    .order-book-price-column .btn,
    .order-book-size-column .btn {
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-3);
    }

    .widget-control-btn {
        width: var(--space-8);
        height: var(--space-8);
        font-size: var(--font-size-16);
    }

    .bottom-section-toggle {
        width: var(--space-8);
        height: var(--space-8);
    }

    /* Margin supervisor mobile */
    #sortable-table-container .table-dark td,
    #sortable-table-container .table-dark th {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-11);
    }

    /* Hide less critical columns */
    #sortable-table-container .table th:nth-child(n+6),
    #sortable-table-container .table td:nth-child(n+6) {
        display: none;
    }

    /* Sticky action column */
    #sortable-table-container .table th:last-child,
    #sortable-table-container .table td:last-child {
        position: sticky;
        right: 0;
        background-color: inherit;
        z-index: 2;
    }
}

/* ============================================================================
   16. ACCESSIBILITY & STATES
   ============================================================================ */

/* --- WebSocket Disconnection State --- */
#trading-main-container {
    height: calc(100vh - var(--toolbar-offset)) !important;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

#trading-main-container.ws-disconnected {
    opacity: 0.4;
    filter: grayscale(0.3) blur(0.5px);
    pointer-events: none;
    user-select: none;
}

.ws-disconnected button,
.ws-disconnected input,
.ws-disconnected select,
.ws-disconnected .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
    filter: grayscale(0.8);
}

/* Preserve connection indicators */
#connection_error,
#connection_ok {
    pointer-events: auto;
    opacity: 1;
    filter: none;
}

/* --- Loading States --- */
.order-cards-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.order-cards-loading.hidden {
    display: none;
}

.loading-spinner .spinner-border {
    width: var(--space-8);
    height: var(--space-8);
    border-width: 0.2em;
}

.loading-text {
    margin-top: var(--space-5);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* This duplicate section is removed - see lines 1811-1889 for correct VWAP styling */

/* ============================================================================
   END OF COMPONENTS.CSS
   ============================================================================ */