@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-family: var(--font-family);
}

#root {
  height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
} 
:root {

  --chart-background-color: var(--popup-foreground-color);
  --chart-text-color: var(--font-color-grid);
  --chart-grid-color: #b0b0b0;
  --chart-border-color: #ddd;
  --chart-candlestick-up-color: #26a69a;
  --chart-candlestick-down-color: #ef5350;
  --chart-volume-color: rgba(38, 166, 154, 0.5);
  --chart-volume-down-color: rgba(239, 83, 80, 0.5);
  --chart-crosshair-color: #d0d0d0;
  --chart-time-scale-border-color: #b0b0b0;

  /* Advance Chart specific variables */
  --chart-indigo-primary: #6366f1;
  --chart-indigo-hover: #e0e7ff;
  --chart-indigo-text-hover: #3730a3;
  --chart-btn-bg: #f5f6fa;
  --chart-btn-border: #e0e3eb;
  --chart-btn-header-bg: #f8f9fa;
  --chart-btn-header-border: #e5e7eb;
  --chart-btn-active-bg: #ececff;
  --chart-btn-active-border: #a5b4fc;
  --chart-ticker-color: #131722;
  --chart-secondary-text: #787b86;
  --chart-indicator-bg: #ffffff;
  --chart-indicator-border: #e0e3eb;
  --chart-indicator-hover: #f0f3fa;
  --chart-tooltip-bg: rgba(30, 34, 45, 0.95);
  --chart-tooltip-border: rgba(54, 58, 69, 0.5);
  --chart-button-active-sidebar: var(--button-bg-color);


  --draggable-header-bg: linear-gradient(90deg, #007991, #9FE9F0);
  --MuiToolbar-bg: linear-gradient(90deg, #007991, #9FE9F0);
  --draggable-header-color: black;
  --drawer-bg: linear-gradient(180deg, #007991, 80%, #9FE9F0);
  --footer-bg: #fff;
  --footer-border-color: rgb(186, 179, 179);
  --modal-header-color: linear-gradient(90.28deg, #003E7E -0.41%, #0070E4 104.31%);
  --ag-header-container-bg: #E4E3EA;
  --cardsDiv-Bg-Color: linear-gradient(90deg, #007991, #9FE9F0);
  --main-Bg-Color: white;
  --watchlist-dropdown-bg: rgba(255, 255, 255, 1);
  --color-background-picker: #E4EAEA;
  --color-primary-bg-new-dashboard: linear-gradient(95deg, #003E7E 2.55%, #0070E4 118.47%);
  --textfield-bg-color: var(--color-white) !important;

  --color-primary: #0070E4;
  --color-primary-dark: #003E7E;
  --color-accent: #7c3aed;
  --color-success: #4caf50;
  --color-danger: #f44336;
  --color-warning: #ff9800;
  --color-info: #61dafb;
  --color-gray-lightest: #f5f5f5;
  --color-gray-lighter: #ededed;
  --color-gray-light: #e0e0e0;
  --color-gray: #ccc;
  --color-gray-medium: #b0b0b0;
  --color-gray-dark: #888;
  --color-gray-darker: #333;
  --color-gray-darkest: #121212;
  --color-border: #ddd;
  --color-panel: #f0f0f0;
  --color-panel-green: #F4F9F5;
  --color-blue: #1976d2;
  --color-blue-border: #003E7E;
  --color-blue-dark: #222e62;
  --color-blue-accent: #4864dc;
  --color-blue-outline: #4c65d4;
  --color-blue-tab: #6b5cd0;
  --color-red: #c00;
  --color-red-light: #ef5350;
  --color-red-dark: #ef4444;
  --color-green: #1EFF00;
  --color-green-ticket: #18CD00;
  --color-green-dark: #22c55e;
  --color-green-accent: #26a69a;
  --color-green-bright: rgb(4, 200, 4);
  --color-transparent-white: rgba(255, 255, 255, 0.15);
  --color-transparent-white-cards: rgba(255, 255, 255, 0.10);
  --color-cards-component-white: rgba(255, 255, 255, 0.18);
  --color-transparent-black: rgba(0, 0, 0, 0.1);
  --color-transparent-red: rgba(255, 0, 0, 0.5);
  --color-transparent-green: rgba(0, 255, 0, 0.5);
  --color-white: #fff;
  --color-black: #000;
  --color-theme-pure: #ffffff;
  --menu-border: #ffffff !important;
  --menu-shadow-primary: rgba(10, 13, 18, 0.08);
  --menu-shadow-secondary: rgba(10, 13, 18, 0.03);
  --menu-item-hover: #d6d6d6 !important;
  --dropdown-bg: rgba(255, 255, 255, 1);
  --dropdown-selected: rgba(233, 233, 233, 1);
  --text-primary: #ffffff;
  /* For main dropdown text like "DFM" */
  /* Background Colors */
  --background-dropdown-menu: #ffffff;
  --background-menu-item-hover: #d6d6d6;
  --background-menu-item-selected: #d6d6d6;
  /* A light grey for selected items */


  /* Border & Separator Colors */
  --border-menu-item: #f0f0f0;

  /* Icon Colors */
  --icon-dropdown-arrow: #ffffff;

  /* Shadow Colors */
  --shadow-dropdown: rgba(0, 0, 0, 0.1) !important;

  --performance-card-even-bg: rgba(246, 249, 255, 1);
  --performance-card-odd-bg: rgba(255, 255, 255, 1);
  --performance-card-border: rgba(248, 248, 248, 1);
  --performance-symbol-color: rgba(0, 62, 126, 1);

  --primary-text-color: #fff;
  --secondary-text-color: #9ca3af;
  --primary-border-color: #4b5563;
  --button-bg-color-secondary: var(--popup-foreground-color);
  --hover-border-color: #ffffff;
  --focus-shadow-color: rgba(0, 0, 0, 0.2);
  --background-color-label: rgba(133, 132, 152, 0.915);
  /* Or your rgb(133,132,152)page background, e.g., #2c0d3c */
  --text-color-light: rgba(164, 164, 164, 1);
  --text-color-blueish: rgba(0, 62, 126, 1);

  /* Search Input Styles */
  --search-bg-color: rgba(255, 255, 255, 0.4);
  --search-border-color: rgba(255, 255, 255, 0.5);
  --search-text-color: rgba(148, 148, 148, 1);
  --search-icon-color: rgba(62, 62, 62, 1);
  --grid-empty-text-color: rgba(217, 217, 217, 1);

  --portfolio-images-right: -31px;
  --portfolio-gap-size: 30px;
  --portfolio-upper-card-padding: 30px;
  --portfolio-dashboard-padding: 20px;
  --portfolio-panel-header-padding: 20px 30px;
  --portfolio-section-title-padding: 15px 20px 5px;

  /* Pill Search Input Styles */
  --pill-search-bg-color: #ffffff;
  --pill-search-border-color: #e0e0e0;
  --pill-search-hover-border-color: #adadad;
  --pill-search-focus-shadow-color: rgba(0, 0, 0, 0.08);
  --pill-search-text-color: rgba(0, 0, 0, 1);
  --pill-search-icon-color: rgba(0, 0, 0, 1);

  --input-label-color: rgba(255, 255, 255, .6);
  --button-bg-color: linear-gradient(95deg, #003E7E 2.55%, #0070E4 118.47%);
  --button-bg-color-secondary: var(--popup-foreground-color);

  --performance-label-text-color: rgba(75, 75, 75, 1);
  --performance-card-bg-color: rgba(247, 249, 251, 1);

  --background-dropdown-hover: rgb(236, 236, 236) !important;
  --widget-background: rgba(255, 255, 255, 0.3);

  --button-icon-width: 20px;
  --button-icon-height: 20px;

  --formula-builder-padding: 25px;

  --search-popup-background-color: white !important;

  --dropdown-icon-top: 47% !important;

  --dashed-line-color: rgba(229, 229, 229, 1) !important;

  --chat-user-bubble-color: rgba(212, 212, 212, 1);

  --detail-quote-header-color: rgba(0, 62, 126, 1);
  --detail-quote-label-color: rgba(120, 120, 120, 1);

  --ag-background-color: var(--color-white) !important;
  --ag-row-odd-bg: rgba(228, 227, 234, 1);
  --ag-row-even-bg: white;

  --font-family-english: Poppins;
  --font-family-arabic: Noto Sans Arabic;
  --font-family: var(--font-family-english);
  --font-size-title: 20px;
  --font-size-label: 16px;
  --container-font-label: 16px;
  --font-size-small: 12px;
  --font-size-cash: var(--font-size-title);
  --border-color-medium-grey: #B7B7B7;
  --news-background-color: var(--color-white);

  --financial-margin-left: 35px;

  --grid-bg-red: rgba(163, 22, 33, 1);
  --grid-bg-green: rgba(76, 127, 88, 1);
  --master-data-odd-row-bg: rgba(246, 249, 255, 1) !important;

  --portfolio-view-bg-summary: rgba(242, 242, 242, 1);
  --portfolio-view-text-color: rgba(115, 115, 115, 1);

  --ag-grid-even-row: rgba(255, 255, 255, 0.12);

  --tab-active-color: rgba(0, 62, 126, 1) !important;

  --font-label-size: 12px;
  --font-value-size: 12px;
  --font-placeholder-size: 12px;

  --font-item-size: 12px;
  --font-item-label-size: 14px;

  --dropdown-line-height: 30px;


  --filter-heights: var(--tab-height);
  --search-heights: 32px;
  --settings-tab-height: 34px;

  --button-heights: 44px;
  --button-widths: 44px;

  --global-padding: 5px;
  --global-margin: 5px;
  --dialoge-header-size: 10px;

  --financial-ltp-size: 36px;

  --icon-height: 40px;
  --icon-width: 40px;
  --side-bar-width: 64px;

  --text-field-form-height: 30px;
  --text-field-screen-height: 40px;
  --button-screen-height: 50px;
  --button-form-height: 40px;
  --drop-down-menu-width: 120px;
  --drop-down-menu-height: 30px;

  --global-gap-size: 10px;

  --global-cards-height: 60px;

  --top-bar-margin: 5px;

  --tab-margin: 5px 0px 5px 20px;
  --top-bar-height: 40px;

  --side-bar-display: none;

  --tab-height: 38px;

  --dashboard-add-icon-height: 18px;
  --dashboard-add-icon-width: 18px;

  --margin-left-side-bar-with-content: -6px;

  --inner-tab-height: 32px;

  --market-header-padding: 5px 0px 8px 10px;
  --market-header-padding-rtl: 5px 2px 8px 10px;

  --dialog-content-padding: 20px 20px;
  --font-label-size-new-dashboard: 18px;

  --border-color-inactive: rgba(160, 160, 160, 1);
  --border-color-global: rgba(0, 62, 126, 1);

  --border-radius: 14px;
  --login-border-radius: 14px;

  --ag-cell-header-value: 12px !important;
  --ag-cell-value: 12px;
  --app-scrollbar-size: 6px;
  --app-scrollbar-thumb-idle: transparent;
  --app-scrollbar-thumb-hover: grey;
  --app-scrollbar-thumb-active: grey;
  /* --ag-cell-header-text: var(--font-family); */
  --exchange-card-padding: 0px, 20px;

  --exchange-card-min-width: 150px;

  --widgets-background-244: rgba(244, 244, 244, 1);
  --market-grid-cell-value: 12px;

  --advance-serach-width: 800px;
  --market-index-green: #16A34A;
  /* --market-index-green: rgba(30, 254, 0, 1); */

  --market-index-red: #ff0000;
  --font-color: black;
  --theme-contrast-fixed: #ffffff;
  --theme-contrast-fixed-inverse: #000000;
  --financial-label-text-color: rgba(82, 82, 82, 1);
  --card-background: rgba(0, 0, 0, 0.10);
  --logo-color: var(--text-color-blueish);
  --login-title-text-color: var(--color-black);
  --login-subtitle-text-color: rgba(30, 30, 30, 1);
  --login-field-text-color: var(--color-black);
  /* --dv-activegroup-visiblepanel-tab-background-color: rgba(0, 0, 0, 0.12) !important ; */
  --letter-spacing-cards: 1px;
  --button-background-color: rgba(255, 255, 255, 0.05) !important;
  --font-color-card: black !important;
  --link-icon-color: black;
  --date-icon-color: rgba(0, 62, 126, 1) !important;
  --IconButton-hoverBg: none !important;
  --IconButton-hoverColor: none !important;
  --icon-height-width: 40px;
  --border-radius-dockview: 6px !important;
  --lang-switcher-background: rgba(0, 0, 0, 0.20);
  --color-transparent-cards: rgba(0, 0, 0, 0.10);
  --icon-with-text-width: 14px;
  --icon-with-text-height: 14px;
  --kse-color: rgb(199, 151, 84);
  --dockview-popper: white;
  --grid-header-text-color: black !important;
  --ag-row-odd-bg: #E4E3EA !important;
  --ag-row-even-bg: white !important;
  --icon-button-hover-background-color: rgba(0, 0, 0, 0.15) !important;
  --border-right-cards: none;
  --card-background-tabs: var(--card-background) !important;
  --unselected-tab-background-color: rgba(255, 255, 255, 0.05) !important;
  --card-background-login: var(--card-background) !important;
  --dialoge-template-background-color: transparent !important;
  --search-box-text-color: black !important;
  --font-color-grid: var(--color-black) !important;
  --button-text-color: var(--color-white) !important;
  --grid-bg-green-even: #e5ffea !important;
  --grid-bg-green-odd: #c9e8ce !important;
  --grid-bg-red-even: #ffe8e8 !important;
  --grid-bg-red-odd: #ffd1cf !important;
  --order-grid-bg-green: #c9e8ce !important;
  --order-grid-bg-red: #ffd1cf !important;
  --od-bg-panel: #FFFFFF !important;
  --od-border-divider: rgba(218, 218, 218, 1) !important;
  --portfolio-border-divider: rgba(205, 205, 205, 1) !important;
  --od-field-bg: #f8fafc !important;
  --od-text-main: #737373;
  --od-buysell-bg-color: rgba(248, 250, 252, 1) !important;
  --tw-header-green: rgba(230, 255, 235, 1) !important;
  --tw-header-red: rgba(237, 208, 211, 1) !important;
  --tw-card-green: rgba(242, 255, 244, 1) !important;
  --tw-card-red: rgba(246, 232, 233, 1) !important;
  --tw-border: rgba(248, 250, 252, 1) !important;
  --tw-border-green: rgba(242, 255, 244, 1) !important;
  --tw-border-red: rgba(246, 232, 233, 1) !important;
  --tw-btn-bg: rgba(249, 249, 249, 1) !important;
  --tw-btn-bg-hover: rgba(239, 239, 239, 1) !important;
  --tw-icons-color: var(--border-color-global) !important;
  --border-right-grid-header: #F8F8F8 !important;
  --cards-background-color: white !important;
  --dashed-line-color: rgba(211, 211, 211, 1) !important;

  --popup-background-color: transparent;
  --popup-foreground-color: var(--cards-background-color);

  --detail-quote-label-color: #757979 !important;
  --detail-quote-value-color: black !important;
  --side-bar-icon-color: black !important;

  --font-color-graph: white !important;
  --dashboard-add-dock-icon-height: 16px;
  --dashboard-add-dock-icon-width: 16px;
  --dialoge-icon-color: var(--icon-button-hover-background-color) !important;

  --formula-row-bg-color: rgba(231, 231, 231, 0.7);

  --card-border-color: rgba(203, 212, 221, 1);
  --buysell-border-color: rgba(229, 231, 235, 1);
  --portfolio-symbol-row-bg-color: rgba(0, 62, 126, 0.06);
  --portfolio-symbol-row-search-bg-color: rgba(0, 62, 126, 0.1);

  --portfolio-images-color: rgba(0, 62, 126, 0.1);

  --glass-overlay-bg: rgba(0, 0, 0, 0.2);
  --glass-overlay-blur: 0px;
  --draggable-header-height: 35px;

  --cd-content-bg: rgba(248, 250, 252, 1);
  --cd-content-border: rgba(226, 232, 240, 1);

  --grid-bg-red-even-flash: rgba(229, 57, 53, 0.85);
  --grid-blue-color: rgba(0, 112, 228, 1);
  --grid-green-color: green;
  --grid-red-color: red;
  --symbol-color-grid: var(--grid-blue-color);
  --search-comparison-bg-search: rgba(238, 238, 238, 1);
  --font-color-equal: var(--symbol-color-grid:);

  --selected-tab-color: black;
  
  
  --ag-cell-text-color: var(--font-color-grid) !important;
  .dockview-theme-light {
    --dv-paneview-active-outline-color: rgba(255, 255, 255, 0.35) !important;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(0, 0, 0, 0.35);
    --dv-drag-over-border-color: black;
    --dv-tabs-container-scrollbar-color: transparent !important;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-overlay-z-index: 999;
    --dv-active-sash-transition-duration: 0.1s;
    --dv-active-sash-transition-delay: 0.5s;
    --dv-group-view-background-color: transparent !important;
    --dv-tabs-and-actions-container-background-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-background-color: rgba(0, 0, 0, 0.12) !important;
    --dv-activegroup-hiddenpanel-tab-background-color: rgba(255, 255, 255, 0.05) !important;
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important;
    --dv-inactivegroup-hiddenpanel-tab-background-color: transparent !important;
    --dv-tab-divider-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-color: var(--font-color) !important;
    --dv-activegroup-hiddenpanel-tab-color: var(--font-color) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--font-color-grid) !important;
    --dv-separator-border: rgba(255, 255, 255, 0.15) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-visiblepanel-tab-color: var(--font-color) !important;
  }
}

[data-theme='dark'] {
  --draggable-header-bg: linear-gradient(90deg, #16222A, #3A6073);
  --draggable-header-color: white;
  --drawer-bg: linear-gradient(180deg, #16222A, 80%, #3A6073);
  --MuiToolbar-bg: linear-gradient(90deg, #16222A, #3A6073);
  --footer-bg: #121212;
  --footer-border-color: black;
  --modal-header-color: White;

  /* Advance Chart Dark variants */
  --chart-ticker-color: #d1d4dc;
  --chart-indicator-bg: #1e222d;
  --chart-indicator-border: #363a45;
  --chart-indicator-hover: #2a2e39;

  --cardsDiv-Bg-Color: linear-gradient(90deg, #16222A, #3A6073);
  --main-Bg-Color: white;
  /* --color-primary-bg-new-dashboard: rgba(198, 151, 75, 1); */
  /* --ag-header-container-bg: #C6974B; */
  --ag-row-odd-bg: #E4E3EA;
  --ag-row-even-bg: white;
  --rc-dyn-tabs-tabs: transparent;
  /* --font-family: var(--font-family); */
  --font-size-label: 16px;
  --border-color-medium-grey: #B7B7B7;
  /* --border-color-global: rgba(198, 151, 75, 1); */

  --market-index-green: #1eff00;
  --market-index-red: #ff0000;
  --login-subtitle-text-color: rgba(225, 225, 225, 1);
  --login-title-text-color: var(--color-white);
  --login-field-text-color: var(--color-white);
  --lang-switcher-background: rgba(255, 255, 255, 0.20);

  --font-color: white;
  --link-icon-color: black;
  --card-background: rgba(255, 255, 255, 0.10);
  --logo-color: white;
  --color-theme-pure: #000000;
  --dockview-popper: rgba(0, 0, 0, .25);
  /* --transparent-background: rgba(255, 255, 255, 0.10); */
  /* --dv-activegroup-visiblepanel-tab-background-color: rgba(255, 255, 255, 0.12) !important; */
  --unselected-tab-background-color: rgba(255, 255, 255, 0.05) !important;
  --card-background-login: var(--card-background) !important;
  --dialoge-template-background-color: transparent !important;
  --search-box-text-color: white !important;
  --detail-quote-label-color: #757979 !important;
  --font-color-grid: var(--color-black) !important;
  --icon-button-hover-background-color: rgba(255, 255, 255, 0.15) !important;
  --detail-quote-value-color: black !important;
  /* --detail-quote-header-color: #757979 !important; */
  --side-bar-icon-color: white !important;
  --font-color-graph: white !important;
  --dialoge-icon-color: rgba(0, 0, 0, 0.15) !important;
  --shadow-dropdown: rgba(255, 255 255, 255, 0.1);

  --glass-overlay-bg: rgba(0, 0, 0, 0.2);
  --glass-overlay-blur: 20px;
  --grid-bg-red-even-flash: var(--grid-bg-red) !important;
  --selected-tab-color: white;
  

  .dockview-theme-light {
    --dv-paneview-active-outline-color: rgba(255, 255, 255, 0.35) !important;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(0, 0, 0, 0.35);
    --dv-drag-over-border-color: black;
    --dv-tabs-container-scrollbar-color: transparent !important;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-overlay-z-index: 999;
    --dv-active-sash-transition-duration: 0.1s;
    --dv-active-sash-transition-delay: 0.5s;
    --dv-group-view-background-color: transparent !important;
    --dv-tabs-and-actions-container-background-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-background-color: rgba(255, 255, 255, 0.12) !important;
    --dv-activegroup-hiddenpanel-tab-background-color: rgba(255, 255, 255, 0.05) !important;
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important;
    --dv-inactivegroup-hiddenpanel-tab-background-color: transparent !important;
    --dv-tab-divider-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-color: var(--font-color) !important;
    --dv-activegroup-hiddenpanel-tab-color: var(--font-color) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--font-color-grid) !important;
    --dv-separator-border: rgba(255, 255, 255, 0.15) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-visiblepanel-tab-color: var(--font-color) !important;
  }
}

[data-theme='flat-light'] {
  --theme-contrast-fixed: #000000 !important;
  --theme-contrast-fixed-inverse: #ffffff !important;
  --color-transparent-cards: transparent !important;
  --color-primary-bg-new-dashboard: rgba(0, 62, 126, 1) !important;
  --search-bg-color: rgba(248, 250, 252, 1) !important;
  --ag-header-container-bg: rgba(235, 239, 243, 1) !important;
  --search-border-color: rgba(203, 212, 221, 1) !important;
  --grid-header-text-color: rgba(124, 138, 152, 1) !important;
  --ag-row-odd-bg: rgba(246, 249, 255, 1) !important;
  --ag-row-even-bg: transparent !important;
  --icon-button-hover-background-color: rgba(61, 108, 157, 1) !important;
  --dialoge-icon-color: rgb(202, 202, 202) !important;
  --border-right-cards: none !important;
  --card-background: transparent !important;
  --card-background-tabs: rgba(248, 246, 246, 1) !important;
  --unselected-tab-background-color: transparent !important;
  --card-background-login: rgba(248, 246, 246, 1) !important;
  --cards-background-color: white !important;
  --dialoge-template-background-color: rgba(248, 246, 246, 1) !important;
  --search-box-text-color: black !important;
  --font-color-grid: var(--color-black) !important;
  --button-text-color: white !important;
  --textfield-bg-color: var(--popup-foreground-color) !important;
  --popup-background-color: rgba(248, 246, 246, 1) !important;
  --popup-foreground-color: white;
  --color-theme-pure: #ffffff;
  --background-menu-item-hover: rgba(0, 62, 126, 0.1) !important;
  --font-color-graph: var(--popup-foreground-color) !important;
  --detail-quote-label-color: #757979 !important;
  --detail-quote-value-color: black !important;
  --button-bg-color: rgba(0, 62, 126, 1) !important;
  --news-background-color: var(--color-white);

  --glass-overlay-bg: rgba(0, 0, 0, 0.2);
  --glass-overlay-blur: 0px;
  --grid-bg-red-even-flash: rgba(229, 57, 53, 0.85) !important;
  --selected-tab-color: black;


  .dockview-theme-light {
    --dv-paneview-active-outline-color: rgba(255, 255, 255, 0.35) !important;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(0, 0, 0, 0.35);
    --dv-drag-over-border-color: black;
    --dv-tabs-container-scrollbar-color: transparent !important;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-overlay-z-index: 999;
    --dv-active-sash-transition-duration: 0.1s;
    --dv-active-sash-transition-delay: 0.5s;
    --dv-group-view-background-color: transparent !important;
    --dv-tabs-and-actions-container-background-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-background-color: rgba(248, 246, 246, 1) !important;
    --dv-activegroup-hiddenpanel-tab-background-color: rgba(0, 0, 0, 0.03) !important;
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important;
    --dv-inactivegroup-hiddenpanel-tab-background-color: transparent !important;
    --dv-tab-divider-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-color: var(--font-color) !important;
    --dv-activegroup-hiddenpanel-tab-color: var(--font-color) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--font-color-grid) !important;
    --dv-separator-border: rgba(255, 255, 255, 0.15) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-visiblepanel-tab-color: var(--font-color) !important;
  }
}

[data-theme='flat-dark'] {
  --color-transparent-cards: transparent !important;
  --color-primary-bg-new-dashboard: rgba(0, 62, 126, 1) !important;
  --search-bg-color: rgba(34, 34, 34, 1) !important;
  --ag-header-container-bg: rgba(57, 57, 57, 1) !important;
  --search-border-color: rgba(55, 60, 65, 1) !important;
  --grid-header-text-color: rgba(124, 138, 152, 1) !important;
  --ag-row-odd-bg: rgba(34, 34, 34, 1) !important;
  --ag-row-even-bg: rgba(42, 42, 42, 1) !important;
  --grid-empty-text-color: rgba(57, 57, 57, 1);
  --icon-button-hover-background-color: rgba(48, 48, 48, 1) !important;
  --button-bg-color: rgba(0, 62, 126, 1) !important;
  --border-right-cards: none !important;
  --card-background: transparent !important;
  --card-background-tabs: rgba(10, 10, 10, 1) !important;
  --unselected-tab-background-color: transparent !important;
  --card-background-login: rgba(42, 42, 42, 1) !important;
  --dialoge-template-background-color: rgba(25, 25, 25, 1) !important;
  --font-color: white !important;
  --link-icon-color: white;
  --date-icon-color: white !important;
  --search-box-text-color: white !important;
  --ag-background-color: var(--popup-foreground-color) !important;
  --font-color-grid: var(--color-white) !important;
  --detail-quote-header-color: var(--color-white) !important;
  --textfield-bg-color: var(--popup-foreground-color) !important;
  --grid-bg-green-even: green !important;
  --grid-bg-green-odd: green !important;
  --grid-bg-red-even: #ff000094 !important;
  --grid-bg-red-odd: #ff000094 !important;
  --order-grid-bg-green: rgba(96, 215, 157, 0.3) !important;
  --order-grid-bg-red: rgba(251, 114, 121, 0.3) !important;
  --od-bg-panel: #555555 !important;
  --od-field-bg: #0a0a0a !important;
  --portfolio-images-color: rgba(255, 255, 255, 0.1);
  --search-popup-background-color: rgba(25, 25, 25, 1) !important;
  --od-buysell-bg-color: var(--popup-foreground-color) !important;
  --od-border-divider: rgba(43, 43, 43, 1) !important;
  --tw-header-green: rgba(69, 149, 82, 0.5) !important;
  --tw-header-red: rgba(163, 22, 33, 0.5) !important;
  --tw-card-green: rgba(33, 68, 40, 1) !important;
  --tw-card-red: var(--tw-header-red) !important;
  --financial-label-text-color: rgba(115, 115, 115, 1);
  --tw-border: rgba(72, 79, 88, 1) !important;
  --tw-border-green: rgba(38, 96, 47, 1) !important;
  --master-data-odd-row-bg: var(--ag-row-odd-bg) !important;
  --tw-border-red: var(--tw-header-red) !important;
  --tw-btn-bg: rgba(50, 50, 50, 1) !important;
  --tw-btn-bg-hover: rgba(82, 82, 82, 1) !important;
  --tw-icons-color: white !important;
  --tab-active-color: var(--font-color-grid) !important;
  --border-right-grid-header: rgba(255, 255, 255, 0.05) !important;
  --cards-background-color: var(--card-background-login) !important;
  --popup-background-color: rgba(25, 25, 25, 1) !important;
  --popup-foreground-color: rgba(42, 42, 42, 1) !important;
  --color-theme-pure: #000000;
  --background-menu-item-hover: rgba(64, 64, 64, 1) !important;
  --background-dropdown-menu: #2a2a2a !important;
  --menu-border: #5d5d5d !important;
  --menu-shadow-primary: rgba(10, 13, 18, 0.14);
  --menu-shadow-secondary: rgba(10, 13, 18, 0.12);
  --menu-item-hover: #4f4f4f !important;
  --detail-quote-label-color: rgba(255, 255, 255, 0.42) !important;
  --detail-quote-value-color: white !important;
  --side-bar-icon-color: white !important;
  --portfolio-view-bg-summary: var(--popup-background-color) !important;
  --font-color-graph: var(--popup-foreground-color) !important;
  --dialoge-icon-color: var(--icon-button-hover-background-color) !important;
  --watchlist-dropdown-bg: rgb(53, 53, 53) !important;
  --login-subtitle-text-color: rgba(225, 225, 225, 1);
  --login-title-text-color: var(--color-white);
  --login-field-text-color: var(--color-white);
  --formula-row-bg-color: rgba(24, 24, 24, 0.7);
  --performance-label-text-color: rgba(180, 180, 180, 1);
  --performance-card-bg-color: rgba(50, 48, 46, 1);
  --logo-color: white;
  --lang-switcher-background: rgba(255, 255, 255, 0.20);
  --news-background-color: var(--popup-foreground-color);

  --performance-card-even-bg: rgba(34, 34, 34, 1);
  --performance-card-odd-bg: rgba(42, 42, 42, 1);
  --performance-card-border: rgba(63, 63, 63, 1);
  --performance-symbol-color: var(--color-white);

  --glass-overlay-bg: rgba(0, 0, 0, 0.2);
  --glass-overlay-blur: 20px;
  --cd-content-bg: var(--cards-background-color);
  --cd-content-border: var(--search-border-color);
  --grid-bg-red-even-flash: var(--grid-bg-red) !important;
  --grid-blue-color: #3699FF;
  --grid-green-color: #4ADE80;
  --grid-red-color: #FF4040;
  --symbol-color-grid:#8dc6ff ;
  --market-index-red: var(--grid-red-color);
  --market-index-green: var(--grid-green-color);
  --search-comparison-bg-search: rgba(42, 42, 42, 1);
  --font-color-equal: black;
  --selected-tab-color: white;


  .dockview-theme-light {
    --dv-paneview-active-outline-color: rgba(255, 255, 255, 0.35) !important;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(255, 255, 255, 0.35);
    --dv-drag-over-border-color: white;
    --dv-tabs-container-scrollbar-color: transparent !important;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-overlay-z-index: 999;
    --dv-active-sash-transition-duration: 0.1s;
    --dv-active-sash-transition-delay: 0.5s;
    --dv-group-view-background-color: transparent !important;
    --dv-tabs-and-actions-container-background-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-background-color: rgba(25, 25, 25, 1) !important;
    --dv-activegroup-hiddenpanel-tab-background-color: rgba(0, 0, 0, 0.03) !important;
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important;
    --dv-inactivegroup-hiddenpanel-tab-background-color: transparent !important;
    --dv-tab-divider-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-color: var(--font-color) !important;
    --dv-activegroup-hiddenpanel-tab-color: var(--font-color) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--font-color-grid) !important;
    --dv-separator-border: rgba(255, 255, 255, 0.15) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-visiblepanel-tab-color: var(--font-color) !important;
  }
}

[data-theme='kse'] {
  --color-transparent-cards: transparent !important;
  --color-primary-bg-new-dashboard: rgba(197, 148, 75, 1) !important;

  --search-bg-color: rgba(255, 255, 255, .1) !important;
  --search-border-color: rgba(55, 60, 65, 1) !important;
  --grid-empty-text-color: rgba(57, 57, 57, 1);
  --icon-button-hover-background-color: rgba(255, 255, 255, .1) !important;
  --button-bg-color: rgba(197, 148, 75, 1) !important;
  --ag-header-container-bg: rgba(197, 148, 75, 1) !important;
  --ag-row-odd-bg: transparent !important;
  --ag-row-even-bg: rgba(0, 0, 0, 0.15) !important;
  --border-right-cards: none !important;
  --card-background: transparent !important;
  --card-background-tabs: rgba(255,255,255, .1) !important;
  --unselected-tab-background-color: transparent !important;
  --card-background-login: rgba(255,255,255, .1) !important;
  --dialoge-template-background-color: rgba(255,255,255, .1) !important;
  --font-color: white !important;
  --link-icon-color: white !important;
  --date-icon-color: white !important;
  --search-box-text-color: white !important;
  --font-color-grid: var(--color-black) !important;
  --grid-header-text-color: var(--color-white) !important;
  --textfield-bg-color: var(--popup-foreground-color) !important;
  --border-color-global: rgba(197, 148, 75, 1) !important;
  --grid-bg-green-even: green !important;
  --grid-bg-green-odd: green !important;
  --grid-bg-red-even: #ff000094 !important;
  --grid-bg-red-odd: #ff000094 !important;
  --order-grid-bg-green: rgba(96, 215, 157, 0.3) !important;
  --order-grid-bg-red: rgba(251, 114, 121, 0.3) !important;
  --od-bg-panel: #555555 !important;
  --od-field-bg: #0a0a0a !important;
  --search-popup-background-color: rgba(255, 255, 255, .1) !important;
  --od-buysell-bg-color: var(--popup-foreground-color) !important;
  --od-border-divider: rgba(43, 43, 43, 1) !important;
  --tw-header-green: rgba(69, 149, 82, 0.5) !important;
  --tw-header-red: rgba(163, 22, 33, 0.5) !important;
  --tw-card-green: rgba(33, 68, 40, 1) !important;
  --tw-card-red: var(--tw-header-red) !important;
  --tw-border: rgba(72, 79, 88, 1) !important;
  --tw-border-green: rgba(38, 96, 47, 1) !important;
  --tw-border-red: var(--tw-header-red) !important;
  --tw-btn-bg: rgba(50, 50, 50, 1) !important;
  --tw-btn-bg-hover: rgba(82, 82, 82, 1) !important;
  --tab-active-color: var(--font-color-grid) !important;
  --border-right-grid-header: rgba(255, 255, 255, 0.05) !important;
  --cards-background-color: var(--card-background-login) !important;
  --popup-background-color: transparent !important;
  --popup-foreground-color: var(--cards-background-color) !important;
  --color-theme-pure: #ffffff;
  --background-menu-item-hover: rgba(64, 64, 64, .2) !important;
  --background-dropdown-menu: white !important;
  --menu-border: rgba(64, 64, 64, .2) !important;
  --menu-shadow-primary: rgba(10, 13, 18, 0.14);
  --menu-shadow-secondary: rgba(10, 13, 18, 0.12);
  --menu-item-hover: rgba(64, 64, 64, .2) !important;
  --detail-quote-label-color: var(--color-black) !important;
  --detail-quote-value-color: var(--color-black) !important;
  --side-bar-icon-color: white !important;
  --tw-icons-color: white !important;
  --portfolio-view-bg-summary: var(--popup-background-color) !important;
  --font-color-graph: var(--popup-foreground-color) !important;
  --dialoge-icon-color: var(--icon-button-hover-background-color) !important;
  --watchlist-dropdown-bg: var(--color-white) !important;
  --login-subtitle-text-color: rgba(225, 225, 225, 1);
  --login-title-text-color: var(--color-white);
  --login-field-text-color: var(--color-white);
  --formula-row-bg-color: rgba(24, 24, 24, 0.7);
  --performance-label-text-color: rgba(180, 180, 180, 1);
  --logo-color: white !important;
  --lang-switcher-background: rgba(255, 255, 255, 0.20) !important;
  --glass-overlay-bg: rgba(255, 255, 255, 0.2) !important;
  --glass-overlay-blur: 20px !important;
  --chart-button-active-sidebar: rgb(116 80 27) !important;
  --button-text-color: var(--font-color-grid) !important;

  
  .dockview-theme-light {
    --dv-paneview-active-outline-color: rgba(255, 255, 255, 0.35) !important;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(0, 0, 0, 0.35);
    --dv-drag-over-border-color: black;
    --dv-tabs-container-scrollbar-color: transparent !important;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-overlay-z-index: 999;
    --dv-active-sash-transition-duration: 0.1s;
    --dv-active-sash-transition-delay: 0.5s;
    --dv-group-view-background-color: transparent !important;
    --dv-tabs-and-actions-container-background-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-background-color: rgba(255, 255, 255, .1) !important;
    --dv-activegroup-hiddenpanel-tab-background-color: rgba(255, 255, 255, .1) !important;
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important;
    --dv-inactivegroup-hiddenpanel-tab-background-color: transparent !important;
    --dv-tab-divider-color: transparent !important;
    --dv-activegroup-visiblepanel-tab-color: var(--font-color) !important;
    --dv-activegroup-hiddenpanel-tab-color: var(--font-color) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--font-color-grid) !important;
    --dv-separator-border: rgba(255, 255, 255, 0.15) !important;
    --dv-paneview-header-border-color: transparent !important;
    --dv-inactivegroup-visiblepanel-tab-color: var(--font-color) !important;
  }
}

/* @media (min-width: 767px) {
  :root{
    display: none;
  }
} */

/* @media (min-height: 699px) {
  :root{
    display: none;
  }
} */




@media (min-width: 768px) and (max-width: 1199px) and (min-height: 600px) {
  :root {
    --top-bar-height: 40px;
    /* --side-bar-width: none; */
    --icon-height: 10px;
    --icon-width: 10px;
    --font-label-size: 12px;
    --top-bar-margin: 2px;
    --tab-margin: 5px 5px;
    --tab-height: 26px;

    --dashboard-add-icon-height: 18px;
    --dashboard-add-icon-width: 18px;
    --margin-left-side-bar-with-content: 0px;

    --button-icon-width: 16px;
    --button-icon-height: 16px;

    --inner-tab-height: 25px;

    --formula-builder-padding: 20px;

    --dockview-inner-content-padding: 2px;

    --dropdown-icon-top: 50% !important;

    --filter-heights: var(--tab-height);
    --search-heights: 32px;
    --font-size-cash: 20px;
    --market-header-padding: 2px 0px 4px 9px;
    --draggable-header-height: 35px;

    --portfolio-images-right: -39px;

    --dialog-content-padding: 10px 10px;
    
    --financial-margin-left: 20px;

    --font-label-size-new-dashboard: 16px;

    --financial-ltp-size: 25px;

    --dropdown-line-height: 30px;

    --portfolio-label-size: 14px;
    --portfolio-value-size: 25px;
    --portfolio-header-size: 16px;
    --portfolio-gap-size: 20px;
    --portfolio-upper-card-padding: 20px;
    --portfolio-dashboard-padding: 15px;
    --portfolio-panel-header-padding: 10px 30px;
    --portfolio-section-title-padding: 10px 15px 0px;

    --icon-with-text-height: 14px;
    --icon-with-text-width: 14px;
    --border-radius: 4px;
    --login-border-radius: 6px;
    --border-radius-dockview: 4px !important;

    --exchange-card-padding: 0px, 0px;

    --font-item-label-size: 12px;

    --exchange-card-min-width: 100px;
    --market-grid-cell-value: 12px;
    --advance-serach-width: 448px;

    --card-top-margin: 04px;

    --side-bar-display: none;
  }

  .menuBarLabels {
    display: none;
  }

}


@media (min-width: 1200px) and (max-width: 1599px) and (min-height: 720px) {
  :root {
    --top-bar-height: 40px;
    --side-bar-width: 50px;
    --icon-height: 30px;
    --icon-width: 30px;
    --font-label-size: 12px;
    --top-bar-margin: 0px;
    --tab-margin: 5px 5px;
    --tab-height: 28px;

    --dashboard-add-icon-height: 25px;
    --dashboard-add-icon-width: 25px;
    --dashboard-add-dock-icon-height: 16px;
    --dashboard-add-dock-icon-width: 16px;

    --button-icon-width: 18px;
    --button-icon-height: 18px;

    --margin-left-side-bar-with-content: 0px;
    --inner-tab-height: 28px;
    --dockview-inner-content-padding: 5px 0px 5px 5px;

    --filter-heights: var(--tab-height);
    --search-heights: 36px;
    --market-header-padding: 5px 0px 8px 10px;
    --draggable-header-height: 35px;
    --dialog-content-padding: 15px 15px;

    --dropdown-icon-top: 50% !important;

    --financial-margin-left: 25px;

    --font-label-size-new-dashboard: 18px;
    --font-size-cash: 22px;

    --portfolio-images-right: -35px;

    --icon-with-text-height: 14px;
    --icon-with-text-width: 14px;

    --dropdown-line-height: 28px;

    --financial-ltp-size: 30px;

    --border-radius: 6px;
    --login-border-radius: 8px;
    --border-radius-dockview: 6px !important;

    --button-heights: 40px;
    --button-widths: 40px;

    --portfolio-label-size: 16px;
    --portfolio-value-size: 35px;
    --portfolio-header-size: 18px;
    --portfolio-gap-size: 30px;
    --portfolio-upper-card-padding: 30px;
    --portfolio-dashboard-padding: 20px;
    --portfolio-panel-header-padding: 20px 30px;
    --portfolio-section-title-padding: 15px 20px 5px;

    --market-grid-cell-value: 12px;
    --advance-serach-width: 448px;
    --card-top-margin: 02px;

    --card-top-margin: 04px;

    --side-bar-display: flex;




  }
}

@media (min-width: 1600px) and (min-height: 900px) {
  :root {
    --side-bar-width: 64px;
    --top-bar-height: 40px;
    --global-padding: 20px;
    --icon-height: 40px;
    --icon-width: 40px;
    --tab-margin: 5px 0px 5px 20px;
    --tab-height: 34px;

    --dashboard-add-icon-height: 18px;
    --dashboard-add-icon-width: 18px;

    --margin-left-side-bar-with-content: 0px;
    --inner-tab-height: 38px;
    --dockview-inner-content-padding: 05px 12px 12px 12px;

    --filter-heights: var(--tab-height);
    --search-heights: 38px;
    --market-header-padding: 5px 0px 8px 10px;
    --draggable-header-height: 40px;

    --button-icon-width: 20px;
    --button-icon-height: 20px;

    --dropdown-line-height: 32px;

    --dialog-content-padding: 20px 20px;
    --font-label-size-new-dashboard: 18px;
    --font-size-cash: 24px;

    --financial-ltp-size: 36px;

    --portfolio-label-size: 18px;
    --portfolio-value-size: 40px;
    --portfolio-header-size: 20px;
    --portfolio-gap-size: 30px;
    --portfolio-upper-card-padding: 30px;
    --portfolio-dashboard-padding: 20px;
    --portfolio-panel-header-padding: 20px 30px;
    --portfolio-section-title-padding: 15px 20px 5px;

    --dropdown-icon-top: 47% !important;

    --icon-with-text-height: 18px;
    --icon-with-text-width: 18px;

    --portfolio-images-right: -31px;

    --border-radius: 8px;
    --login-border-radius: 10px;
    --border-radius-dockview: 8px !important;

    --financial-margin-left: 35px;

    --button-heights: 44px;
    --button-widths: 44px;

    --market-grid-cell-value: 12px;
    --advance-serach-width: 449px;
    --card-top-margin: 01px;

    --side-bar-display: flex;

    --icon-height-width: 50px;

  }
}



/* 2️⃣ Very short height (split screen / browser zoom) */
@media (max-height: 650px) {
  :root {
    /* --top-bar-height: 26px; */
    --tab-height: 22px;
    --inner-tab-height: 22px;

    --filter-heights: var(--tab-height);
    --font-label-size: 11px;

    --dashboard-add-icon-height: 18px;
    --dashboard-add-icon-width: 18px;

    --side-bar-width: 40px;
    --side-bar-display: none;
    --tab-margin: 4px 4px;

    --market-header-padding: 2px 0px 2px 10px;


  }
}

/* 3️⃣ Ultra-wide but short screens (HP external monitors) */
@media (max-height: 800px) {
  :root {
    /* --side-bar-display: none; */
    --advance-serach-width: 600px;
    --icon-height: 30px;
    --icon-width: 30px;

    /* --top-bar-height: 28px; */
    --tab-height: 30px;
    --inner-tab-height: 30px;
    --filter-heights: var(--tab-height);
    /* --filter-heights: 20px; */
    --text-field-form-height: 28px;
    --text-field-screen-height: 34px;
    --button-form-height: 34px;
    --button-screen-height: 40px;

    --icon-height: 12px;
    --icon-width: 12px;

    --dialog-content-padding: 4px 8px;
    --global-padding: 4px;
    --global-margin: 4px;

    --font-label-size: 12px;
    --font-value-size: 11px;
    --font-item-size: 11px;
    --tab-margin: 4px 4px;
    --side-bar-display: none;
    --market-header-padding: 2px 0px 2px 10px;

  }
}


@media (min-width: 100px) and (max-width: 767px) {
  :root {
    /* display: none; */
  }
}

@media (min-height: 100px) and (max-height: 400px) {
  :root {
    /* display: none; */
  }
}

html[dir="rtl"],
html[lang="ar"] {
  --font-family: var(--font-family-arabic);
}
.container {
  display: flex;
  height: 100vh !important;
  width: 100%;
}

.sidebar {
  width: 250px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh !important; /* Changed from 100% to 100vh */
  overflow: auto;
  display: var(--side-bar-display);
}

.main {
  margin-left: 250px; /* Matches sidebar width */
  display: flex;
  flex-direction: column;
  width: calc(100% - 250px);
  height: 100vh !important; /* Added explicit height */
  position: relative;
}

.content {
  flex: 1;
  /* margin-top: 50px; Adjust for header height */
  overflow-y: auto;
  /* padding: 20px; */
  background-color: var(--color-white);
}

.layout-container,
.data-table {
  display: flex;
  height: 100%; /* Added height to inherit from parent */
}

.layout-col {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  overflow: hidden;
  vertical-align: middle;
  height: 100%;
}

.layout-inline {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: var(--color-panel);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.mainContentArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100% !important;
  overflow: hidden;
} 

.MuiDialogContent-root{
  padding: var(--dialog-content-padding) !important;
  background-color: var(--popup-background-color) !important;
}

/* Company Profile dialog: full-bleed layout (no content padding) */
.MuiDialogContent-root.company-profile-dialog-no-padding {
  padding: 0 !important;
}

.filter-label{
  color: var(--font-color);
  font-weight: 800 !important;
  letter-spacing: 0.5 !important;
  font-family: var(--font-family) !important;
  font-size: 12px !important;
}

.dashboard-label{
  color: var(--font-color-grid);
  font-weight: 500 !important;
  letter-spacing: 0.5 !important;
  font-family: var(--font-family) !important;
  font-size: 11px !important;
}

.watchlist-input{
  height: 30px !important;
}

.needle {
  display: none;
}
.layout-inline:hover table tr td {
  background: linear-gradient(98.9deg, #003E7E 1.85%, #0070E4 107.16%);
}

/* .modalMenuIcon img{
  height: 18px !important;
  fill: var(--font-color) !important;
  stroke: var(--font-color) !important;
} */

.MuiIconButton-root{
  transition: none !important;
  webkit-transition: none !important;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure the height of HTML and body covers the full viewport */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; */
  font-family: var(--font-family);
  color: var(--font-color);
}

/* Apply font-color to all text elements by default */
*,
*::before,
*::after {
  color: inherit;
}






#root {
  height: 100%;
}

code {
  font-family: var(--font-family);
}

/* Scrollbar styles for light mode */


.upperToolBar {

  color: var(--modal-header-color) !important;
  ;
  height: 20px !important;

}

.react-draggable {
  padding: 0px !important;
  position: relative !important;
}

.draggable-header {
  height: var(--draggable-header-height) !important;
  color: var(--color-white) !important;
  font-size: var(--font-label-size) !important;
  padding-left: 5px;
  /* margin-bottom: 2px !important; */
  /* background: var(--draggable-header-bg) !important; */
  background: var(--color-primary-bg-new-dashboard) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  /* width: 150px !important;        set the width you want */


}

/* all custom css or css overrride  */

.cardsDiv {


  /* background: var(--cardsDiv-Bg-Color) !important; */

  flex-shrink: 0;
  /* Prevent resizing */

}

.fileMenu {
  min-height: var(--top-bar-height);
}





b7dj7n-MuiList-root {
  padding-top: 0px;
  padding-bottom: 0px;

}

.MuiToolbar-root {
  background: var(--MuiToolbar-bg) !important;
  height: 30px !important;
}

.MuiDrawer-paper {
  /* background:  #5670ff !important; */
  background: var(--drawer-bg);
}








rq0tul-MuiToolbar-root {

  min-height: 40px !important;
}

.iconBtnFonts {
  font-size: 2px !important;
}



.footer {
  /* border: 1px solid; */
  /* border-color: var(--footer-border-color) !important; */
  margin: 0;
  bottom: 0;

  left: 0;
  /* background-color: var(--footer-bg) !important; */
  width: 100%;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cardsDashboard {
  background-color: transparent !important;
  border: none;
  box-shadow: none !important;
  color: white;
  height: 70px;

  border-right: '1px  solid white' !important;
  width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
}

.layout-container,
.data-table {
  display: flex;
}

.layout-col {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  overflow: hidden;
  vertical-align: middle;
  height: 100%;
}

.layout-inline {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.Dockviewpanels {
  width: 100%;
  height: 100%;
  /* min-height: 750px; */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dockview-theme-light {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-top-left-radius: 05px;
  border-top-right-radius: 05px;
}

.layout-select:hover {
  border: 2px solid #4c6ef5;
}

.layout-name {
  font-family: var(--font-family);
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;
  /* leading-trim: NONE; */
  line-height: 12px;
  letter-spacing: 0px;
}

.dockview-demo {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f8f9fa;

  .group-control {
    .action {
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      font-size: 18px;
      cursor: pointer;

      &:hover {
        border-radius: 2px;
        color: var(--dv-activegroup-visiblepanel-tab-color);
        background-color: var(--dv-icon-hover-background-color);
      }
    }
  }

  .data-table {
    table {
      font-size: 11px;

      th {
        padding: 0px 8px;
      }
    }
  }

  button {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    outline: 1px solid var(--color-blue-outline);

    &:focus {
      outline: 1px solid var(--color-blue-outline) !important;
    }

    &:hover {
      background-color: var(--color-blue-dark);
    }
  }

  input {
    outline: 1px solid var(--color-blue-outline);
    border: none;
    margin: 0px;
    height: 25px;

    &:focus {
      outline: 1px solid var(--color-blue-outline) !important;
    }
  }

  .action-container {
    display: flex;
    padding: 4px;
    overflow: auto;

    .text-button {
      margin: 0px 4px;
    }

    .button-action {
      margin: 0px 4px;

      .selected {
        background-color: #4864dc;
      }
    }

    .button-group {
      button {
        margin-right: 0px;
      }
    }

    .demo-button {
      min-width: 50px;
      padding: 0px 2px;
      border-radius: 0px;
      display: flex;
      flex-grow: 1;
      align-items: center;
      outline: 1px solid #4c65d4;
    }

    .demo-icon-button {
      outline: 1px solid #4c65d4;
      flex-grow: 1;
      display: flex;
      align-items: center;
      border-radius: 0px;
      padding: 0px 4px;
      border: none;
      cursor: pointer;

      &:disabled {
        color: gray;
        cursor: help;
      }

      span {
        font-size: 16px;
      }
    }
  }
}

.MuiDrawer-paper {

  border: none !important;
}



.main {
  max-width: 1800px;

}



.tdwlHeader {



  font-size: 35px;
  margin-top: -10px;

}

.ag-menu {
  display: none !important;
}

.sideBar {

  width: var(--side-bar-width);
  height: 100%;
  flex-shrink: 0;
  display: var(--side-bar-display) !important;
  /* Prevent shrinking */
  /* position: fixed; */
  /* flex: 1; */
  /* flex-shrink: 0; */

}

.sideBarContent {
  height: 100%;
  width: var(--side-bar-width) !important;
  display: var(--side-bar-display) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* padding-top: 20px; */
  /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  background-color: var(--card-background-login) !important;
  /* backdrop-filter: blur(10px) */ 
  gap: 30px !important;


}

.mainContentArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin-left: var(--margin-left-side-bar-with-content);
  /* Prevent outer scroll */
}



@media (min-width: 1920px) and (min-height: 1080px) {}


@media (min-width: 1366px) and (max-width: 1919px) and (min-height: 650px) and (max-height: 700px) {}

@media (min-width: 1024px) and (max-width: 1365px) and (min-height: 600px) and (max-height: 767px) {}

@media (min-width: 600px) and (max-width: 1023px) and (min-height: 800px) and (max-height: 1365px) {}

/* below media query is on my laptop F11 mode.*/
@media (min-width: 801px) and (max-width: 1550px) and (min-height: 800px) and (max-height: 1365px) {}


@media (min-width: 1920px) and (max-height: 911px) {}

.container {
  display: flex;
  height: 100%;
  border-radius: 2px;
}

.mainContentArea {
  background: transparent !important;
}

.content {
  flex: 1 0 auto;
  /* Take up all available space between cards and footer */
  background: transparent !important;
  /* Example color */

}


.footerLabels {
  font-size: 14px !important;
  min-width: 50px;
  font-weight: 400;
  font-family: var(--font-family);
  line-height: 14px;
  color: var(--color-white);
  padding: 0px 10px;
}

.footerRightLabel {
  width: 200px;
}

.dv-tabs-and-actions-container {
  /* border-top-left-radius: 20px; */
  /* border-top-right-radius: 20px; */
  height: var(--inner-tab-height) !important;
  /* background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important; */
}

/* CSS Variables for Scrollbar (Fallback colors for both themes) */
:root {
  --tabs-scrollbar-thumb: rgba(0, 0, 0, 0.25);
  --tabs-scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] {
  --tabs-scrollbar-thumb: rgba(255, 255, 255, 0.25);
  --tabs-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
}

.dv-tabs-container {
  text-align: center;
  display: flex;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}

/* Chrome, Safari and Opera */
.dv-tabs-container::-webkit-scrollbar {
  display: none !important;
}

/* Chrome, Safari and Opera */
.dv-tabs-container::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

.dv-tabs-container::-webkit-scrollbar-track {
  background: transparent;
}

.dv-tabs-container::-webkit-scrollbar-thumb {
  /* background-color: var(--tabs-scrollbar-thumb);
  border-radius: 4px;
}


.dv-tabs-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--tabs-scrollbar-thumb-hover);
}


.dv-tabs-container .dv-tab.dv-active-tab {
  background-color: var(--color-primary);
}

.dv-tabs-and-actions-container {
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color) !important; */
}

.dv-active-tab{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.dv-default-tab-action{
  margin-left: 10px;
}
[dir="rtl"] .dv-default-tab-action{
  margin-right: 10px;
}

.dv-tabs-container .dv-tab.dv-active-tab {
  background-color: var(--color-primary);
}

.dv-tabs-and-actions-container .dv-tabs-container .dv-tab:first-child {
  padding: 6px 5px 6px;
  z-index: 0;
  /* border-top-left-radius: 16px; */
  /* border-top-right-radius: 30px; */
  /* clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%); */
}

.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
  padding: 6px 5px 6px;
  z-index: 0;
  /* border-top-left-radius: 30px; */
  /* border-top-right-radius: 30px; */
  /* clip-path: polygon(0 100%,10% 0%, 89% 0%, 100% 100%, 0% 100%, 0% 0%); */
}

.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab
{
  background-color: var(--unselected-tab-background-color) !important;
  color: var(--dv-inactivegroup-visiblepanel-tab-color) !important;
}

.dv-tab .dv-default-tab {
  min-width: 0;
  overflow: hidden;
}

.dv-tab .dv-default-tab .dv-default-tab-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dv-tab .dv-default-tab .dv-default-tab-action {
  flex-shrink: 0;
  flex-grow: 0;
}

.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
  flex-shrink: 1;
  min-width: 60px;
  max-width: 220px;
}

.market-header {
  padding: var(--market-header-padding);
  display: flex;
  justify-content: space-between;
  min-width: 0;

}

.filter-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.market-filters {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.market-filter-slot,
.market-filter-keep {
  flex-shrink: 0;
}

.market-filter-slot--hidden {
  display: none !important;
}


.filter-btn.active {
  /* background: #0070E4; */
  color: #ffffff;
}

.proFont {

  font-family: var(--font-family) !important;
}

.arrowCardsTasi {
  margin-left: 3px !important;
}

/* Add this to your global CSS */
.sideBarBtns:hover~span .hover-image-sidebar {
  display: block !important;
}

/* RTL Support */
[dir="rtl"] .sideBar {
  right: 0;
  left: auto;
}

[dir="rtl"] .mainContentArea {
  margin-right: 0;
  margin-left: 0;
}

[dir="rtl"] .market-filters {
  text-align: right;
}

[dir="rtl"] .filter-btn {
  margin-left: 0;
  margin-right: 8px;
}

[dir="rtl"] .market-header {
  text-align: right;
}

/* RTL support for AG Grid */
[dir="rtl"] .ag-header-cell {
  text-align: right;
}

[dir="rtl"] .ag-cell {
  text-align: right;
}

[dir="rtl"] .ag-paging-panel {
  direction: rtl;
}

/* RTL support for Material UI */
[dir="rtl"] .MuiButton-startIcon {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .MuiButton-endIcon {
  margin-left: 0;
  margin-right: 8px;
}

/* RTL support for Dockview */
[dir="rtl"] .dockview-theme-light {
  direction: rtl;
}

[dir="rtl"] .dockview-demo {
  direction: rtl;
}

/*
 * Dockview DnD overlays use physical style.left/% width (LTR geometry).
 * Under direction:rtl the left/right highlight paints mirrored while hit-testing
 * still uses clientX — so drop side is correct but the highlight is swapped.
 * Force LTR only on drop-target layers so highlight matches the drop side.
 */
[dir="rtl"] .dv-drop-target,
[dir="rtl"] .dv-drop-target-dropzone,
[dir="rtl"] .dv-drop-target-selection {
  direction: ltr !important;
}


.MuiButton-colorSecondary {
  background-color: var(--color-white) !important;
  color: var(--text-color-blueish) !important;
  border-radius: 08px !important;
  border: 1px solid var(--text-color-blueish) !important;
}

.dv-dockview {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.ag-column-select-column .ag-checkbox-input-wrapper {
  border-color: #0070E4 !important;
}

/* Checked state */
.ag-column-select-column .ag-checkbox-input-wrapper.ag-checked::after {
  color: #9664f7 !important;
}

/* Hover state */
.ag-column-select-column .ag-checkbox-input-wrapper:hover {
  border-color: #0070E4 !important;
}

/* Remove previous styles that were changing background */
.ag-column-select-column .ag-checkbox-input-wrapper.ag-checked::before,
.ag-column-select-column .ag-checkbox-input-wrapper.ag-checked {
  /* background-color: transparent !important; */
  background-color: #9664f7 !important;
}

/* Override AG Grid checkbox theme */
:where(.ag-theme-checkboxStyle-4) {
  --ag-checkbox-checked-shape-color: #0070E4 !important;

}

:where(.ag-checked) {
  --ag-checkbox-checked-background-color: #9664f7 !important;
  --ag-checkbox-checked-border-color: #9664f7 !important;
}

/* Column Chooser Panel Title Bar */
.ag-panel-title-bar {
  background-color: #0070E4 !important;
  color: white !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  padding: 8px !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Column Chooser Panel Title Text */
.ag-panel-title-bar span {
  color: white !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
}

.rc-dyn-tabs-close {
  display: none !important;
}


.filterIconTimeAndSales {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
  margin-bottom: 8px;
  color: #0070E4 !important;
}

.filtersDivTimeAndSales {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}

.filterCriteriaTimeAndSales {
  min-width: 100px;
}

.additionalFilters1TimeAndSales {
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.additionalFilters2TimeAndSales {
  margin-top: 8px;
  flex-direction: row;

}

.btnApply {
  padding: '6px 18px';
  font-weight: 500;
  background-color: #0070E4 !important;
  color: white !important;
}

.labelsTimeAndSales {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;

  padding: '0 16px';

  font-size: 14px;
}

.labelTimeAndSales {
  font-weight: 500;
}

.labelValueTimeAndSales {
  font-weight: 500;
}

.lineBreak {

  margin: '16px 0 8px 0px ' !important;
  border: 'none' !important;
  border-top: '0.5px solid #e0e0e0' !important;
}

.labelTheme {
  color: #0070E4;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.MuiButton-colorPrimary {
  background: var(--color-primary-bg-new-dashboard) !important;
  color: white !important;
  border-radius: var(--border-radius) !important;
  height: 50px;
  border: none !important;
}

.MuiButton-colorInherit {
  background-color: var(--color-transparent-white) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: var(--border-radius) !important;
  height: 50px !important;
  border: none !important;
}

/* Set glass-light.svg as the app background */
body,
#root {
  min-height: 100vh;
  /* background: url('../images/glass/forest-theme.svg') no-repeat center center fixed; */
  /* background-size: cover !important; */
  /* background-color: #f0f0f0; */
}

/* Make all direct children of #root transparent except ProGrid (ag-theme-balham) */
#root>*:not(.ag-theme-balham) {
  background: transparent;
}

.mainContentAreaBox {
  display: flex;
  flex-direction: column;
  gap: 02px;
  /* background: var(--color-cards-component-white) !important; */
  /* backdrop-filter: blur(10px); */
}

.sideBarIcon {
  width: 40px;
  /* height: 40px; */

}

.MuiSvgIcon-root {
  color: var(--font-color-grid) !important;
}

.material-symbols-outlined {
  color: var(--font-color) !important;
}

.dashboard-add-icon {
  color: var(--font-color) !important;
  align-items: center;
  display: flex;
  padding: 6px 6px;
  cursor: pointer;
  position: relative;
  border-radius: var(--border-radius-dockview);
  background: var(--button-background-color);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  /* width: 50px; */
  height: var(--tab-height);
  flex-shrink: 0;
}

.MuiPaper-root {
  background-color: rgba(255, 255, 255, .6) !important;
  /* #FFFFFF at 60% opacity */
  backdrop-filter: blur(15px) !important;
  /* Background blur */
  -webkit-backdrop-filter: blur(15px) !important;
  /* Safari support */
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.12x) !important;
  /* Drop shadow: X:0 Y:8 Blur:20 Opacity:25% */
  border-radius: 12px !important;
  /* max-height: none !important; */
}

.depthGrid {
  min-height: 45% !important;
}

.filterCheckbox svg {
  fill: black !important;
}

.MuiOutlinedInput-input {
    color: var(--font-color-grid) !important;
    -webkit-text-fill-color: var(--font-color-grid) !important;
}

.MuiSelect-iconOutlined {
  fill: black !important;
}

.deleteIcon svg {
  fill: red !important;
}



#theme-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: stretch;
  /* filter: blur(2px); */
  z-index: -1;
}

.MuiCheckbox-root:not(.app-checkbox) svg {
  fill: var(--border-color-global) !important;
}

.app-checkbox svg {
  width: 20px;
  height: 20px;
}

[data-theme='dark'] .app-checkbox.Mui-checked svg,
[data-theme='flat-dark'] .app-checkbox.Mui-checked svg {
  border-radius: 4px;
  box-shadow: 0 0 0 1px #fff;
}

[data-theme='dark'] .app-checkbox.Mui-checked svg rect,
[data-theme='flat-dark'] .app-checkbox.Mui-checked svg rect {
  stroke: #fff !important;
  stroke-width: 1px !important;
}

[data-theme='dark'] .app-checkbox:not(.Mui-checked) svg rect,
[data-theme='flat-dark'] .app-checkbox:not(.Mui-checked) svg rect {
  stroke: #fff !important;
  stroke-width: 1px !important;
}

.MuiFormLabel-root :focus {
  color: var(--input-label-color) !important;
}

.sideBarBtnsBottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 0px;
  /* background-color: var(--color-cards-component-white); */
  /* backdrop-filter: blur(10px); */
  /* border-radius: 10px; */
}

.MuiDialogTitle-root {
  padding: 0 15px 0 20px !important;
}

.menuBarPaper {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  border-radius: 8px !important;
  border: 1px solid var(--menu-border) !important;
  background: var(--White, #FFF) !important;
  box-shadow: 0 12px 16px -4px var(--menu-shadow-primary), 0 4px 6px -2px var(--menu-shadow-secondary) !important;
  /* width: 200px !important; */
}

.menuBarItems {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  /* 142.857% */
}

/* Top menu bar dropdown item hover */
.menuBarPaper .MuiMenuItem-root svg,
.menuBarPaper .mw-context-menu-list-item-icon,
.menuBarPaper .mw-context-menu-list-item-icon svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0;
}

.menuBarPaper .mw-context-menu-list-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 10px;
}

.menuBarPaper .MuiMenuItem-root:hover {
  background-color: var(--menu-item-hover) !important;
}

.MuiDialog-paper {
  overflow-y: hidden !important;
}

/* Dialog shell: LTR layout for centering/drag/resize; content can stay RTL via DialogTemplate */
.MuiDialog-root .MuiDialog-container {
  direction: ltr;
}

.MuiDialog-root .MuiDialog-paper {
  direction: ltr;
}

html[dir='rtl'] .MuiDialog-root .MuiDialogContent-root,
html[dir='rtl'] .MuiDialog-root .dialog-template-content-host,
html[dir='rtl'] .MuiDialog-root .draggable-header {
  direction: rtl;
}

html[dir='rtl'] .MuiDialog-root .react-resizable-handle-sw {
  left: 0;
  right: auto;
}

/* Manual dialog resize must not animate — transitions fight react-resizable drag */
.dialog-is-resizing.react-resizable,
.MuiDialog-paper.dialog-is-resizing .react-resizable {
  transition: none !important;
}

.dialog-is-resizing .MuiDialogContent-root,
.dialog-is-resizing .dialog-template-content-host {
  pointer-events: none;
  user-select: none;
}

@media screen and (max-height: 768px) {
  body {
    overflow: auto !important;
  }

  .sideBarContent {
    gap: 0px !important
  }


  .rc-dyn-tabs-panellist {
    min-height: 0px !important;
  }

  .market-header-bar {
    padding-bottom: 0px !important;
  }
}

.search-price-header-symbol-name {
  flex: 1;
  /* min-width: 0; */
}

.search-price-header-symbol-name-text {
  width: 150px;
  /* set the width you want */
  white-space: nowrap;
  /* keep text on one line */
  overflow: hidden;
  /* hide overflow */
  text-overflow: ellipsis;
  /* show "..." */
  font-size: var(--font-value-size) !important;
  margin-left: 02px;
  color: var(--font-color-grid) !important;
}

.column-class {
  display: flex;
  flex-direction: column;
  gap: var(--global-margin);
}

.row-class {
  display: flex;
  flex-direction: row;
  gap: var(--global-margin);
}

.MuiPickersPopper-root {
  z-index: 1900 !important;
}

.MuiDateCalendar-root .MuiSvgIcon-root {
  fill: var(--color-black) !important;
}

.icons-class {
  width: var(--icon-width) !important;
  height: var(--icon-height) !important;
  display: block;
  /* stroke: var(--font-color) !important; */
  fill: var(--font-color);
}

.multi-select-search .MuiInputBase-root {
  height: var(--filter-heights) !important;
}

.MuiButton-endIcon svg {
  fill: var(--color-white) !important;
}

.dialoge-icons {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--font-color) !important;  
}

.draggable-header .MuiIconButton-root:hover {
  background-color: var(--icon-button-hover-background-color) !important;
  border-radius: 4px !important;
  /* padding: 5px; */
}

.MuiIconButton-root:hover {
  background-color: var(--dialoge-icon-color) !important;
  border-radius: 12px !important;
}

.MuiAlert-icon {
  fill: var(--font-color-card) !important;
  /* stroke: var(--font-color-card) !important; */
  height: 10px !important;
  width: 10px !important;
}

.MuiAlert-root {
  background-color: var(--popup-foreground-color) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  border-radius: 12px !important;
}

.MuiAlert-message {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-label) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 13px !important;
}

.edit-btn svg {
  fill: none !important;
  stroke: var(--font-color-grid) !important;
  width: 15px !important;
  height: 15px !important;

}

.delete-btn svg {
  fill: red !important;
  /* stroke: red !important; */
  width: 15px !important;
  height: 15px !important;
}

.menuBarIconsList {
  height: 15px !important;
  width: 15px !important;
  fill: var(--detail-quote-header-color) !important;
  margin-inline-end: 10px;
}

.widget-spotlight {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(14vh, 120px);
  pointer-events: none;
}

.widget-spotlight__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  pointer-events: auto;
  background: var(--glass-overlay-bg, rgba(0, 0, 0, 0.08));
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 0px));
  backdrop-filter: blur(var(--glass-overlay-blur, 0px));
}

.widget-spotlight__shell {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(520px, calc(100vw - 32px));
}

.widget-spotlight__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Search + results = one glass surface (no stacked layers) */
.widget-spotlight__combo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 999px;
  border: 1px solid var(--menu-border, var(--color-border, #ddd));
  background: var(--popup-background-color) !important;
  background-color: var(--popup-background-color) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 20px var(--menu-shadow-secondary, rgba(10, 13, 18, 0.12)),
    0 2px 6px var(--menu-shadow-primary, rgba(10, 13, 18, 0.08));
  overflow: hidden;
  isolation: isolate;
}

.widget-spotlight__combo--open {
  border-radius: 22px;
}

.widget-spotlight__search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  height: 52px;
  padding: 0 16px;
  position: relative;
  z-index: 0;
  background: transparent !important;
  border: none;
  box-shadow: none;
  color: var(--font-color-grid, var(--font-color, inherit));
}

/* No hard divider — same glass plane as list */
.widget-spotlight__combo--open .widget-spotlight__search {
  border-bottom: none;
}

.widget-spotlight__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--side-bar-icon-color, var(--font-color-grid, currentColor));
  opacity: 0.45;
}

.widget-spotlight__icon path {
  fill: currentColor;
}

.widget-spotlight__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--font-color-grid, var(--font-color, inherit));
  -webkit-text-fill-color: var(--font-color-grid, var(--font-color, inherit));
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.2;
}

.widget-spotlight__input::placeholder {
  color: var(--font-color-grid, var(--font-color, inherit));
  -webkit-text-fill-color: var(--font-color-grid, var(--font-color, inherit));
  opacity: 0.4;
}

.widget-spotlight__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--side-bar-icon-color, var(--font-color-grid, currentColor));
  opacity: 0.45;
  cursor: pointer;
}

.widget-spotlight__clear:hover {
  opacity: 0.85;
}

.widget-spotlight__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}

.widget-spotlight__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--menu-border, var(--color-border, #ddd));
  background: var(--popup-background-color) !important;
  background-color: var(--popup-background-color) !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow:
    0 4px 12px var(--menu-shadow-secondary, rgba(10, 13, 18, 0.12)),
    0 1px 2px var(--menu-shadow-primary, rgba(10, 13, 18, 0.08));
  color: var(--side-bar-icon-color, var(--font-color-grid, currentColor));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.widget-spotlight__circle:hover {
  transform: translateY(-0.5px);
  background: var(--popup-background-color) !important;
  background-color: var(--popup-background-color) !important;
}

.widget-spotlight__circle--active {
  border-color: var(--border-color-global, var(--color-primary-dark, #003E7E));
  color: var(--border-color-global, var(--color-primary-dark, #003E7E));
  background: var(--popup-background-color) !important;
  background-color: var(--popup-background-color) !important;
  box-shadow:
    0 0 0 1px var(--border-color-global, var(--color-primary-dark, #003E7E)),
    0 4px 12px var(--menu-shadow-secondary, rgba(10, 13, 18, 0.12));
}

.widget-spotlight__circle-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.widget-spotlight__circle-icon--list {
  width: 26px;
  height: 23px;
}

/* Hard-coded fills in SVG → follow button color */
.widget-spotlight__circle-icon--list path {
  fill: currentColor;
}

.widget-spotlight__list {
  overflow: auto;
  max-height: min(280px, 48vh);
  padding: 0 0 8px;
  border: none;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  position: relative;
  z-index: 0;
  color: var(--font-color-grid, var(--font-color, inherit));
}

.widget-spotlight__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: start;
  padding: 4px 10px 4px 18px;
  cursor: default;
  font-family: inherit;
  color: var(--font-color-grid, inherit);
}

.widget-spotlight__option-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 8px 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
}

.widget-spotlight__option-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-spotlight__option-desc {
  font-size: 12px;
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-spotlight__option-arrow-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--font-color-grid, inherit);
}

.widget-spotlight__option-arrow-btn:hover {
  background-color: var(--icon-button-hover-background-color, var(--dialoge-icon-color, rgba(0, 0, 0, 0.06)));
}

.widget-spotlight__option-arrow {
  width: 14px;
  height: 14px;
  opacity: 0.45;
  color: currentColor;
}

.widget-spotlight__option-arrow path {
  stroke: currentColor;
}

.widget-spotlight__option:hover .widget-spotlight__option-main,
.widget-spotlight__option--active .widget-spotlight__option-main {
  color: var(--color-primary-dark, var(--color-primary, #003E7E));
}

.widget-spotlight__option:hover .widget-spotlight__option-label,
.widget-spotlight__option--active .widget-spotlight__option-label {
  font-weight: 500;
}

.widget-spotlight__option:hover .widget-spotlight__option-arrow,
.widget-spotlight__option--active .widget-spotlight__option-arrow {
  opacity: 0.85;
  color: var(--color-primary-dark, var(--color-primary, #003E7E));
}

.widget-spotlight__option--disabled {
  cursor: default;
  opacity: 0.65;
  padding: 12px 18px;
}

.widget-spotlight__option--disabled:hover {
  color: var(--font-color-grid, inherit);
}

.saveIcon {
  fill: none !important;
  stroke: var(--detail-quote-header-color);
  stroke-width: 0.1px;
}

.sideBarContent .MuiIconButton-root:hover {
  background-color: var(--dialoge-icon-color) !important;
}


.MuiPaper-root::-webkit-scrollbar {
  width: var(--app-scrollbar-size, 6px);
  height: var(--app-scrollbar-size, 6px);
}

.MuiPaper-root::-webkit-scrollbar-track {
  background: transparent;
}

.MuiPaper-root::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-idle, transparent);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.MuiPaper-root:hover::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35));
}

.MuiPaper-root::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-active, rgba(0, 0, 0, 0.5));
}

.MuiPaper-root::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
.MuiPaper-root {
  scrollbar-width: thin !important;
  scrollbar-color: var(--app-scrollbar-thumb-idle, transparent) transparent !important;
}

.MuiPaper-root:hover {
  scrollbar-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35)) transparent !important;
}

/* DialogTemplate widgets — same thin scrollbars as ProGrid */
.MuiDialog-root .MuiDialogContent-root::-webkit-scrollbar,
.MuiDialog-root .dialog-template-content-host::-webkit-scrollbar {
  width: var(--app-scrollbar-size, 6px);
  height: var(--app-scrollbar-size, 6px);
}

.MuiDialog-root .MuiDialogContent-root::-webkit-scrollbar-track,
.MuiDialog-root .dialog-template-content-host::-webkit-scrollbar-track,
.MuiDialog-root .MuiDialogContent-root::-webkit-scrollbar-corner,
.MuiDialog-root .dialog-template-content-host::-webkit-scrollbar-corner {
  background: transparent;
}

.MuiDialog-root .MuiDialogContent-root::-webkit-scrollbar-thumb,
.MuiDialog-root .dialog-template-content-host::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-idle, transparent);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.MuiDialog-root:hover .MuiDialogContent-root::-webkit-scrollbar-thumb,
.MuiDialog-root:hover .dialog-template-content-host::-webkit-scrollbar-thumb,
.MuiDialog-root .dialog-template-content-host:hover::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35));
}

.MuiDialog-root .MuiDialogContent-root::-webkit-scrollbar-thumb:hover,
.MuiDialog-root .dialog-template-content-host::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-active, rgba(0, 0, 0, 0.5));
}

.MuiDialog-root .MuiDialogContent-root,
.MuiDialog-root .dialog-template-content-host {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb-idle, transparent) transparent;
}

.MuiDialog-root:hover .MuiDialogContent-root,
.MuiDialog-root:hover .dialog-template-content-host,
.MuiDialog-root .dialog-template-content-host:hover {
  scrollbar-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35)) transparent;
}

.ag-header-cell .ag-header-icon.ag-header-cell-filter-button {
  display: none !important;
}

.ag-header-icon.ag-header-label-icon.ag-filter-icon {
  display: none !important;
}


/* default (inactive): uses normal theme font color */
.tab-header-dropdown { --font-color: var(--font-color); }
/* selected tab: make icon white */
.rc-dyn-tabs-selected .tab-header-dropdown { --selected-tab-color: white; }

[data-theme="flat-dark"]{
  /* default (inactive): uses normal theme font color */
.tab-header-dropdown { --selected-tab-color: white;  }
/* selected tab: make icon white */
.rc-dyn-tabs-selected .tab-header-dropdown { --selected-tab-color: white; }

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}


/* WMS dark / black theme — same tokens as Alert Manager */

[data-theme='dark'] .wms-md-root,
[data-theme='dark'] .wms-md-form,
[data-theme='flat-dark'] .wms-md-root,
[data-theme='flat-dark'] .wms-md-form {
  --wms-md-bg: var(--popup-background-color, #191919);
  --wms-md-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-md-text: var(--font-color-grid, #ffffff);
  --wms-md-muted: var(--secondary-text-color, #9ca3af);
  --wms-md-border: var(--tw-border, #484f58);
  --wms-md-header: var(--ag-header-container-bg, #393939);
  --wms-md-row-alt: var(--ag-row-odd-bg, #222222);
  --wms-md-selected: rgba(0, 112, 228, 0.28);
}

[data-theme='dark'] .wms-md-icon-btn--view,
[data-theme='flat-dark'] .wms-md-icon-btn--view {
  color: #fff;
}

[data-theme='dark'] .wms-fa-root,
[data-theme='dark'] .wms-fa-form,
[data-theme='dark'] .wms-fa-refs,
[data-theme='flat-dark'] .wms-fa-root,
[data-theme='flat-dark'] .wms-fa-form,
[data-theme='flat-dark'] .wms-fa-refs {
  --wms-fa-bg: var(--popup-background-color, #191919);
  --wms-fa-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-fa-text: var(--font-color-grid, #ffffff);
  --wms-fa-muted: var(--secondary-text-color, #9ca3af);
  --wms-fa-border: var(--tw-border, #484f58);
  --wms-fa-header: var(--ag-header-container-bg, #393939);
  --wms-fa-row-alt: var(--ag-row-odd-bg, #222222);
  --wms-fa-selected: rgba(0, 112, 228, 0.28);
}

[data-theme='dark'] .wms-pg-root,
[data-theme='dark'] .wms-pg-form,
[data-theme='dark'] .wms-pg-portfolios,
[data-theme='flat-dark'] .wms-pg-root,
[data-theme='flat-dark'] .wms-pg-form,
[data-theme='flat-dark'] .wms-pg-portfolios {
  --wms-pg-bg: var(--popup-background-color, #191919);
  --wms-pg-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-pg-text: var(--font-color-grid, #ffffff);
  --wms-pg-muted: var(--secondary-text-color, #9ca3af);
  --wms-pg-border: var(--tw-border, #484f58);
  --wms-pg-header: var(--ag-header-container-bg, #393939);
  --wms-pg-row-alt: var(--ag-row-odd-bg, #222222);
}

[data-theme='dark'] .wms-fee-root,
[data-theme='flat-dark'] .wms-fee-root {
  --wms-fee-bg: var(--popup-background-color, #191919);
  --wms-fee-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-fee-text: var(--font-color-grid, #ffffff);
  --wms-fee-muted: var(--secondary-text-color, #9ca3af);
  --wms-fee-border: var(--tw-border, #484f58);
  --wms-fee-header: var(--ag-header-container-bg, #393939);
  --wms-fee-selected: rgba(0, 112, 228, 0.28);
}

[data-theme='dark'] .wms-dash-root,
[data-theme='flat-dark'] .wms-dash-root {
  --wms-dash-bg: var(--popup-background-color, #191919);
  --wms-dash-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-dash-text: var(--font-color-grid, #ffffff);
  --wms-dash-muted: var(--secondary-text-color, #9ca3af);
  --wms-dash-border: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-hm,
[data-theme='flat-dark'] .wms-hm {
  --hm-bg: var(--popup-background-color, #191919);
  --hm-card: var(--popup-foreground-color, #2a2a2a);
  --hm-text: var(--font-color-grid, #ffffff);
  --hm-muted: var(--secondary-text-color, #9ca3af);
  --hm-border: var(--tw-border, #484f58);
  --hm-shadow: none;
}

[data-theme='dark'] .wms-hm__filters,
[data-theme='flat-dark'] .wms-hm__filters {
  background: var(--popup-foreground-color, #2a2a2a);
}

[data-theme='dark'] .wms-hm-search,
[data-theme='flat-dark'] .wms-hm-search,
[data-theme='dark'] .wms-hm-search-suggest,
[data-theme='flat-dark'] .wms-hm-search-suggest,
[data-theme='dark'] .wms-hm-filter .wms-md-search-select__trigger,
[data-theme='flat-dark'] .wms-hm-filter .wms-md-search-select__trigger {
  background: var(--popup-foreground-color, #2a2a2a);
  border-color: var(--tw-border, #484f58);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-hm-search input,
[data-theme='flat-dark'] .wms-hm-search input,
[data-theme='dark'] .wms-hm-search-suggest button,
[data-theme='flat-dark'] .wms-hm-search-suggest button {
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-perf-root,
[data-theme='flat-dark'] .wms-perf-root {
  --wms-perf-bg: var(--popup-background-color, #191919);
  --wms-perf-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-perf-text: var(--font-color-grid, #ffffff);
  --wms-perf-muted: var(--secondary-text-color, #9ca3af);
  --wms-perf-border: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-pv-root,
[data-theme='flat-dark'] .wms-pv-root {
  --wms-pv-bg: var(--popup-background-color, #191919);
  --wms-pv-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-pv-text: var(--font-color-grid, #ffffff);
  --wms-pv-muted: var(--secondary-text-color, #9ca3af);
  --wms-pv-border: var(--tw-border, #484f58);
  --wms-pv-header: var(--ag-header-container-bg, #393939);
}

[data-theme='dark'] .wms-pv-fill__bar,
[data-theme='flat-dark'] .wms-pv-fill__bar {
  background: #374151;
}

[data-theme='dark'] .wms-cm-root,
[data-theme='flat-dark'] .wms-cm-root {
  --wms-cm-bg: var(--popup-background-color, #191919);
  --wms-cm-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-cm-text: var(--font-color-grid, #ffffff);
  --wms-cm-muted: var(--secondary-text-color, #9ca3af);
  --wms-cm-border: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-cs-root,
[data-theme='dark'] .wms-cs-editor,
[data-theme='dark'] .wms-cs-assign,
[data-theme='flat-dark'] .wms-cs-root,
[data-theme='flat-dark'] .wms-cs-editor,
[data-theme='flat-dark'] .wms-cs-assign {
  --wms-cs-bg: var(--popup-background-color, #191919);
  --wms-cs-surface: var(--popup-foreground-color, #2a2a2a);
  --wms-cs-text: var(--font-color-grid, #ffffff);
  --wms-cs-muted: var(--secondary-text-color, #9ca3af);
  --wms-cs-border: var(--tw-border, #484f58);
  --wms-cs-primary-soft: rgba(0, 112, 228, 0.22);
}

[data-theme='dark'] .wms-reb,
[data-theme='flat-dark'] .wms-reb,
[data-theme='dark'] .wms-srev,
[data-theme='flat-dark'] .wms-srev {
  --reb-border: var(--tw-border, #484f58);
  --reb-text: var(--font-color-grid, #ffffff);
  --reb-muted: var(--secondary-text-color, #9ca3af);
  --reb-surface: var(--popup-background-color, #191919);
  --reb-sidebar: var(--popup-foreground-color, #2a2a2a);
  --reb-header-bg: var(--ag-header-container-bg, #393939);
}

[data-theme='dark'] .wms-ec-form .wms-md-field input,
[data-theme='dark'] .wms-ec-form .wms-md-field select,
[data-theme='dark'] .wms-ec-form .wms-md-field textarea,
[data-theme='dark'] .wms-ec-form .wms-md-search-select__trigger,
[data-theme='flat-dark'] .wms-ec-form .wms-md-field input,
[data-theme='flat-dark'] .wms-ec-form .wms-md-field select,
[data-theme='flat-dark'] .wms-ec-form .wms-md-field textarea,
[data-theme='flat-dark'] .wms-ec-form .wms-md-search-select__trigger {
  background: var(--popup-foreground-color, #2a2a2a) !important;
  border-color: #6b7380 !important;
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-srev__suffix-input,
[data-theme='flat-dark'] .wms-srev__suffix-input {
  background: var(--popup-foreground-color, #2a2a2a);
  border-color: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-srev__suffix-input input,
[data-theme='flat-dark'] .wms-srev__suffix-input input,
[data-theme='dark'] .wms-srev__check,
[data-theme='flat-dark'] .wms-srev__check {
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-reb__main,
[data-theme='flat-dark'] .wms-reb__main {
  background: var(--popup-background-color, #191919);
}

[data-theme='dark'] .wms-reb-orders,
[data-theme='flat-dark'] .wms-reb-orders {
  background: var(--popup-background-color, #191919);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-mp,
[data-theme='flat-dark'] .wms-mp {
  --mp-primary-soft: rgba(0, 112, 228, 0.22);
  --mp-border: var(--tw-border, #484f58);
  --mp-border-strong: var(--menu-border, #5d5d5d);
  --mp-text: var(--font-color-grid, #ffffff);
  --mp-muted: var(--secondary-text-color, #9ca3af);
  --mp-muted-2: var(--secondary-text-color, #9ca3af);
  --mp-surface: var(--popup-background-color, #191919);
  --mp-track: var(--ag-header-container-bg, #393939);
}

[data-theme='dark'] .wms-create-holding.tw-main,
[data-theme='dark'] .wms-create-holding.wms-soe.tw-main,
[data-theme='dark'] .wms-create-holding .tw-content,
[data-theme='dark'] .wms-create-holding .tw-form-container,
[data-theme='dark'] .wms-create-holding .tw-sidebar,
[data-theme='dark'] .wms-create-holding .tw-sidebar-card,
[data-theme='flat-dark'] .wms-create-holding.tw-main,
[data-theme='flat-dark'] .wms-create-holding.wms-soe.tw-main,
[data-theme='flat-dark'] .wms-create-holding .tw-content,
[data-theme='flat-dark'] .wms-create-holding .tw-form-container,
[data-theme='flat-dark'] .wms-create-holding .tw-sidebar,
[data-theme='flat-dark'] .wms-create-holding .tw-sidebar-card {
  background: var(--popup-background-color, #191919) !important;
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-soe.tw-main,
[data-theme='flat-dark'] .wms-soe.tw-main {
  background: var(--popup-background-color, #191919) !important;
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-tx-list,
[data-theme='flat-dark'] .wms-tx-list {
  --wms-tx-bg: var(--popup-background-color, #191919);
  --wms-tx-text: var(--font-color-grid, #ffffff);
  --wms-tx-muted: var(--secondary-text-color, #9ca3af);
  --wms-tx-border: var(--tw-border, #484f58);
  --wms-tx-header: var(--ag-header-container-bg, #393939);
  --wms-tx-row-alt: var(--ag-row-odd-bg, #222222);
}

[data-theme='dark'] .wms-tx-list__search,
[data-theme='dark'] .wms-tx-list__icon-btn,
[data-theme='dark'] .wms-tx-list__csv-btn,
[data-theme='dark'] .wms-tx-list__page-size select,
[data-theme='flat-dark'] .wms-tx-list__search,
[data-theme='flat-dark'] .wms-tx-list__icon-btn,
[data-theme='flat-dark'] .wms-tx-list__csv-btn,
[data-theme='flat-dark'] .wms-tx-list__page-size select {
  background: var(--popup-foreground-color, #2a2a2a);
  border-color: var(--tw-border, #484f58);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-tx-list__loading,
[data-theme='flat-dark'] .wms-tx-list__loading {
  background: rgba(25, 25, 25, 0.88);
}

[data-theme='dark'] .wms-portfolio-list,
[data-theme='flat-dark'] .wms-portfolio-list {
  background: var(--popup-background-color, #191919);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-portfolio-list__search,
[data-theme='flat-dark'] .wms-portfolio-list__search {
  background: var(--popup-foreground-color, #2a2a2a);
  border-color: var(--tw-border, #484f58);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-customer-search__loading,
[data-theme='flat-dark'] .wms-customer-search__loading {
  background: rgba(25, 25, 25, 0.92);
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-pg-table thead th,
[data-theme='dark'] .wms-pg-portfolios__table thead th,
[data-theme='flat-dark'] .wms-pg-table thead th,
[data-theme='flat-dark'] .wms-pg-portfolios__table thead th,
[data-theme='dark'] .wms-cm-table thead th,
[data-theme='flat-dark'] .wms-cm-table thead th,
[data-theme='dark'] .wms-cs-table thead th,
[data-theme='flat-dark'] .wms-cs-table thead th,
[data-theme='dark'] .wms-dash-table thead th,
[data-theme='flat-dark'] .wms-dash-table thead th,
[data-theme='dark'] .wms-perf-table thead th,
[data-theme='flat-dark'] .wms-perf-table thead th,
[data-theme='dark'] .wms-fee-table thead th,
[data-theme='flat-dark'] .wms-fee-table thead th {
  background: var(--ag-header-container-bg, #393939) !important;
  color: var(--grid-header-text-color, #7c8a98) !important;
  border-color: var(--tw-border, #484f58) !important;
}

[data-theme='dark'] .wms-pg-table tbody td,
[data-theme='dark'] .wms-pg-portfolios__table tbody td,
[data-theme='flat-dark'] .wms-pg-table tbody td,
[data-theme='flat-dark'] .wms-pg-portfolios__table tbody td {
  color: var(--font-color-grid, #ffffff);
  border-color: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-pg-table tbody tr,
[data-theme='dark'] .wms-pg-portfolios__table tbody tr,
[data-theme='flat-dark'] .wms-pg-table tbody tr,
[data-theme='flat-dark'] .wms-pg-portfolios__table tbody tr {
  background: var(--wms-pg-surface, var(--popup-foreground-color, #2a2a2a));
}

[data-theme='dark'] .wms-pg-table tbody tr:nth-child(even),
[data-theme='dark'] .wms-pg-portfolios__table tbody tr:nth-child(even),
[data-theme='flat-dark'] .wms-pg-table tbody tr:nth-child(even),
[data-theme='flat-dark'] .wms-pg-portfolios__table tbody tr:nth-child(even) {
  background: var(--wms-pg-row-alt, var(--ag-row-odd-bg, #222222));
}

[data-theme='dark'] .wms-pg-portfolios,
[data-theme='dark'] .wms-pg-portfolios__panel,
[data-theme='dark'] .wms-pg-portfolios__table-wrap,
[data-theme='dark'] .wms-pg-form__picker,
[data-theme='dark'] .wms-pg-form__field input,
[data-theme='dark'] .wms-pg-form__field textarea,
[data-theme='dark'] .wms-pg-portfolio-item,
[data-theme='flat-dark'] .wms-pg-portfolios,
[data-theme='flat-dark'] .wms-pg-portfolios__panel,
[data-theme='flat-dark'] .wms-pg-portfolios__table-wrap,
[data-theme='flat-dark'] .wms-pg-form__picker,
[data-theme='flat-dark'] .wms-pg-form__field input,
[data-theme='flat-dark'] .wms-pg-form__field textarea,
[data-theme='flat-dark'] .wms-pg-portfolio-item {
  background: var(--popup-foreground-color, #2a2a2a);
  color: var(--font-color-grid, #ffffff);
  border-color: var(--tw-border, #484f58);
}

[data-theme='dark'] .wms-pg-portfolios__title,
[data-theme='flat-dark'] .wms-pg-portfolios__title {
  color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] .wms-pg-portfolios-dialog-root.MuiDialogContent-root,
[data-theme='flat-dark'] .wms-pg-portfolios-dialog-root.MuiDialogContent-root {
  background: var(--popup-background-color, #191919) !important;
}

[data-theme='dark'] .wms-fee-card,
[data-theme='dark'] .wms-fee-pane,
[data-theme='dark'] .wms-fee-field input,
[data-theme='dark'] .wms-fee-field select,
[data-theme='dark'] .wms-fee-slab-table input,
[data-theme='dark'] .wms-fee-slab-table select,
[data-theme='flat-dark'] .wms-fee-card,
[data-theme='flat-dark'] .wms-fee-pane,
[data-theme='flat-dark'] .wms-fee-field input,
[data-theme='flat-dark'] .wms-fee-field select,
[data-theme='flat-dark'] .wms-fee-slab-table input,
[data-theme='flat-dark'] .wms-fee-slab-table select {
  background: var(--wms-fee-surface, var(--popup-foreground-color, #2a2a2a)) !important;
  color: var(--wms-fee-text, #ffffff) !important;
  border-color: var(--wms-fee-border, #484f58) !important;
}

[data-theme='dark'] .wms-fee-field .MuiOutlinedInput-root,
[data-theme='dark'] .wms-fee-field .MuiPickersOutlinedInput-root,
[data-theme='flat-dark'] .wms-fee-field .MuiOutlinedInput-root,
[data-theme='flat-dark'] .wms-fee-field .MuiPickersOutlinedInput-root {
  background: var(--wms-fee-surface, #2a2a2a) !important;
  color: var(--wms-fee-text, #ffffff) !important;
}

[data-theme='dark'] .wms-fee-slab-table th,
[data-theme='flat-dark'] .wms-fee-slab-table th {
  background: var(--wms-fee-header, #393939) !important;
  color: var(--wms-fee-muted, #9ca3af) !important;
}

[data-theme='dark'] .wms-cs-assign__btn--cancel.custom-button,
[data-theme='flat-dark'] .wms-cs-assign__btn--cancel.custom-button {
  background: var(--popup-foreground-color, #2a2a2a) !important;
  border-color: var(--tw-border, #484f58) !important;
  color: var(--font-color-grid, #ffffff) !important;
}

[data-theme='dark'] .wms-cs-assign__btn--cancel svg,
[data-theme='flat-dark'] .wms-cs-assign__btn--cancel svg {
  color: var(--font-color-grid, #ffffff) !important;
}

[data-theme='dark'] [class^='wms-'] input,
[data-theme='dark'] [class*=' wms-'] input,
[data-theme='dark'] [class^='wms-'] textarea,
[data-theme='dark'] [class*=' wms-'] textarea,
[data-theme='dark'] [class^='wms-'] select,
[data-theme='dark'] [class*=' wms-'] select,
[data-theme='flat-dark'] [class^='wms-'] input,
[data-theme='flat-dark'] [class*=' wms-'] input,
[data-theme='flat-dark'] [class^='wms-'] textarea,
[data-theme='flat-dark'] [class*=' wms-'] textarea,
[data-theme='flat-dark'] [class^='wms-'] select,
[data-theme='flat-dark'] [class*=' wms-'] select {
  color: var(--font-color-grid, #ffffff);
  caret-color: var(--font-color-grid, #ffffff);
}

[data-theme='dark'] [class^='wms-'] input::placeholder,
[data-theme='dark'] [class*=' wms-'] input::placeholder,
[data-theme='flat-dark'] [class^='wms-'] input::placeholder,
[data-theme='flat-dark'] [class*=' wms-'] input::placeholder {
  color: var(--secondary-text-color, #9ca3af);
}

[data-theme='dark'] .dm-root,
[data-theme='dark'] .dm-upload-dialog,
[data-theme='flat-dark'] .dm-root,
[data-theme='flat-dark'] .dm-upload-dialog {
  --dm-bg: var(--popup-background-color, #191919);
  --dm-surface: var(--popup-foreground-color, #2a2a2a);
  --dm-text: var(--font-color-grid, #ffffff);
  --dm-text-muted: var(--secondary-text-color, #9ca3af);
  --dm-border: var(--tw-border, #484f58);
  --dm-border-light: rgba(255, 255, 255, 0.08);
  --dm-primary-soft: rgba(0, 62, 126, 0.55);
  --dm-primary-hover: rgba(0, 62, 126, 0.75);
  --dm-blue-soft: rgba(37, 99, 235, 0.22);
  --dm-green-soft: rgba(22, 163, 74, 0.22);
  --dm-orange-soft: rgba(234, 88, 12, 0.22);
  --dm-purple-soft: rgba(124, 58, 237, 0.22);
  --dm-success-bg: rgba(34, 197, 94, 0.18);
  --dm-warning-bg: rgba(245, 158, 11, 0.18);
  --dm-error-bg: rgba(239, 68, 68, 0.18);
}

[data-theme='dark'] .dm-action-btn,
[data-theme='flat-dark'] .dm-action-btn {
  background: var(--button-bg-color, #003e7e) !important;
  color: #fff !important;
}

[data-theme='dark'] .dm-action-btn svg,
[data-theme='flat-dark'] .dm-action-btn svg {
  color: #fff !important;
}

[data-theme='dark'] .dm-download-btn,
[data-theme='flat-dark'] .dm-download-btn {
  background: var(--button-bg-color, #003e7e) !important;
  border-color: transparent !important;
  color: #fff !important;
}

[data-theme='dark'] .dm-download-btn svg,
[data-theme='flat-dark'] .dm-download-btn svg {
  color: #fff !important;
}

[data-theme='dark'] .dm-table thead th,
[data-theme='flat-dark'] .dm-table thead th {
  background: var(--ag-header-container-bg, #393939);
  color: var(--grid-header-text-color, #9ca3af);
}

[data-theme='dark'] .dm-table tbody tr:hover,
[data-theme='flat-dark'] .dm-table tbody tr:hover {
  background: var(--dm-primary-soft);
}


 
.ag-header-container {
    background-color: var(--ag-header-container-bg ) !important;
    height: 45px;
  }
  .ag-row{
    line-height: normal;
    background-color: var(--ag-background-color) ;
    color: var(--font-color-grid);
  }

  /* Keep row hover highlight within the row bounds (Electron + web parity). */
  .ag-theme-balham .ag-row {
    box-sizing: border-box;
    overflow: hidden;
  }
  .ag-row-odd{
    background-color: var(--ag-row-odd-bg) !important;
  }

  .ag-row-even,
  .even-row{
    background-color: var(--ag-row-even-bg) !important;
  }

  .ag-row-selected {
    background-color: var(--grid-cell-selected-color, var(--ag-selected-row-background-color)) !important;
  }
  
  .ag-header-cell-text{
    font-family: var(--grid-header-font-family, var(--font-family));
    font-weight: var(--grid-header-font-weight, 600) !important;
    font-style: var(--grid-header-font-style, normal);
    text-decoration: var(--grid-header-text-decoration, none);
    font-size: var(--ag-cell-header-value);
    line-height: 14px;
    color: var(--grid-header-text-color) !important;
  }
  
  .ag-cell-value {
    font-family: var(--grid-cell-font-family, var(--font-family));
    font-weight: var(--grid-cell-font-weight, 500);
    font-style: var(--grid-cell-font-style, normal);
    text-decoration: var(--grid-cell-text-decoration, none);
    font-size: var(--ag-cell-value);
    /* line-height: 5px; */
  }
  
  .ag-cell {
    align-content: center;
    border-right: 1px solid var(--border-right-grid-header) !important;
    border-right: 1px solid var(--border-right-grid-header) !important;

  }
  
  .bid-class-even{
    background-color: var(--grid-bg-green-even) !important;
    color: var(--font-color-grid) !important;
  }
  
  .bid-class-odd{
    background-color: var(--grid-bg-green-odd) !important;
    color: var(--font-color-grid) !important;
  }
  
  .offer-class-odd{
    background-color: var(--grid-bg-red-odd) !important;
    color: var(--font-color-grid) !important;
  }
  
  .offer-class-even{
    background-color:  var(--grid-bg-red-even) !important;
    color: var(--font-color-grid) !important;
  }
  
  .price-up.ag-cell-data-changed {
    /* color: #18CD00 !important; Light green */
    background-color: #18CD00 !important; /* Light green */
    transition: background-color 1ms ease-in-out;
    color: var(--font-color-grid) !important;
  }   
  
  .price-down.ag-cell-data-changed {
    background-color: var(--grid-bg-red-even-flash) !important; /* Light red */
    transition: background-color 1ms ease-in-out;
    /* color: black !important; */
    color: var(--font-color-grid) !important;
  }
  .price-equal.ag-cell-data-changed {
    background-color: yellow !important;
    transition: background-color 1ms ease-in-out;
    color: var(--font-color-equal) !important;
  }

  .volume-up.ag-cell-data-changed {
    /* color: #18CD00 !important; Light green */
    color: rgb(0, 112, 228) !important; /* Light green */
    background-color: transparent !important;
    /* transition: background-color 0.15s linear; */
  }   
  .volume-equal.ag-cell-data-changed {
    color: var(--font-color-grid) !important;
    background-color: transparent !important;
    /* color: transparent !important; */
  }

  .change-up.ag-cell-data-changed {
    color: #18CD00 !important; /* Light green */
    /* transition: background-color 0.15s linear; */
  }

  .change-down.ag-cell-data-changed {
    color: var(--grid-bg-red-even-flash) !important; /* Light red */
    /* transition: background-color 0.15s linear; */
  }
  
  .ag-header-cell {
    border-right: 1px solid var(--border-right-grid-header) !important;  /* Matches resize handle */
    /* position: relative; Required for aligning resize handle */
  }
  .ag-header-cell:last-child {
    border-right: none; /* Remove border from last column */
  }
  
  .market-watch-symbol-search{
    border: 0 !important;
    height: 34px !important;
  }

.cash-map-class-positive {
  color: #18CD00;
}

.cash-map-class-negative {
  color: #C90000;
}

.bg-red-400 {
  background-color: rgba(250, 117, 111, 1);
  width: 100%;
  height: 20%;
}

.bg-green-400 {
  background-color: rgba(134, 222, 148, 1);
  width: 100%;
  height: 20%;
}

.negative-class {
  background-color: var(--grid-bg-red-odd) !important;
}

.positive-class {
  background-color: var(--grid-bg-green-odd) !important;
}

.ag-header-group-cell {
  background: transparent !important;
}

/* -----------------------
   Scrollbars — thin 6px, thumb on hover (web + Electron parity)
   ----------------------- */

.ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar,
.ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
  width: var(--app-scrollbar-size, 6px) !important;
  height: var(--app-scrollbar-size, 6px) !important;
  min-width: var(--app-scrollbar-size, 6px) !important;
  min-height: var(--app-scrollbar-size, 6px) !important;
  max-width: var(--app-scrollbar-size, 6px) !important;
  max-height: var(--app-scrollbar-size, 6px) !important;
  background: transparent;
}

.ag-theme-balham .ag-body-vertical-scroll,
.ag-theme-balham .ag-body-vertical-scroll-container {
  width: var(--app-scrollbar-size, 6px) !important;
  min-width: var(--app-scrollbar-size, 6px) !important;
  max-width: var(--app-scrollbar-size, 6px) !important;
}

/* Overlay scroll lane on top of grid (web-style; avoids permanent gutter width in Electron). */
.ag-theme-balham .ag-body-vertical-scroll {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ag-theme-balham .ag-ltr .ag-body-vertical-scroll {
  right: 0 !important;
  left: auto !important;
}

.ag-theme-balham .ag-rtl .ag-body-vertical-scroll {
  left: 0 !important;
  right: auto !important;
}

.ag-theme-balham:hover .ag-body-vertical-scroll,
.ag-theme-balham .ag-body-vertical-scroll.ag-scrollbar-scrolling,
.ag-theme-balham .ag-body-vertical-scroll.ag-scrollbar-active {
  opacity: 1;
  visibility: visible;
}

.ag-theme-balham .ag-body-vertical-scroll-viewport {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.ag-theme-balham .ag-body-horizontal-scroll {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ag-theme-balham:hover .ag-body-horizontal-scroll,
.ag-theme-balham .ag-body-horizontal-scroll.ag-scrollbar-scrolling,
.ag-theme-balham .ag-body-horizontal-scroll.ag-scrollbar-active {
  opacity: 1;
  visibility: visible;
}

.ag-theme-balham .ag-body-horizontal-scroll,
.ag-theme-balham .ag-body-horizontal-scroll-viewport,
.ag-theme-balham .ag-body-horizontal-scroll-container {
  height: var(--app-scrollbar-size, 6px) !important;
  min-height: var(--app-scrollbar-size, 6px) !important;
  max-height: var(--app-scrollbar-size, 6px) !important;
}

.ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track,
.ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar-corner,
.ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-corner {
  background: transparent;
}

.ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb,
.ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-idle, transparent);
  border-radius: 3px !important;
  transition: background-color 0.2s ease;
}

.ag-theme-balham:hover .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb,
.ag-theme-balham:hover .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35));
}

.ag-theme-balham:hover .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover,
.ag-theme-balham:hover .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-active, rgba(0, 0, 0, 0.5));
}

.ag-theme-balham .ag-body-vertical-scroll-viewport,
.ag-theme-balham .ag-body-horizontal-scroll-viewport {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb-idle, transparent) transparent;
}

.ag-theme-balham:hover .ag-body-vertical-scroll-viewport,
.ag-theme-balham:hover .ag-body-horizontal-scroll-viewport {
  scrollbar-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35)) transparent;
}

/* DialogTemplate: reveal grid scrollbars when hovering dialog content, not only the grid root */
.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb,
.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35));
}

.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover,
.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-active, rgba(0, 0, 0, 0.5));
}

.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-vertical-scroll-viewport,
.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-horizontal-scroll-viewport {
  scrollbar-color: var(--app-scrollbar-thumb-hover, rgba(0, 0, 0, 0.35)) transparent;
}

.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-vertical-scroll,
.MuiDialog-root .dialog-template-content-host:hover .ag-theme-balham .ag-body-horizontal-scroll {
  opacity: 1;
  visibility: visible;
}

.ag-theme-balham .ag-row-drag,
.ag-theme-balham .ag-row-drag .ag-icon {
  color: var(--font-color-grid) !important;
  background-color: var(--color-primary-bg-new-dashboard) !important;
}

.no-rows-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 15px;
}

.no-rows-text {
  color: var(--grid-empty-text-color) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-item-label-size) !important;
}

.no-rows-icon {
  width: 72px;
  height: 72px;
  fill: var(--grid-empty-text-color) !important;
}

.context-menu-item {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-item-label-size) !important;
  line-height: var(--font-item-label-size) !important;
  font-weight: 400 !important;
  padding: 8px 14px !important;
}

.arrow-up {
  fill: #18CD00;
  width: 10px;
  height: 10px;
}

.arrow-down {
  fill: #C90000;
  width: 10px;
  height: 10px;
}

.arrow-equal {
  fill: var(--font-color-grid) !important;
  width: 10px;
  height: 10px;
}

.mw-symbol-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  width: max-content;
  max-width: none;
}

.mw-symbol-cell__text {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 0;
  line-height: 1;
}

.mw-symbol-cell__icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.mw-symbol-cell__icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.mw-symbol-cell__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
}

.mw-symbol-cell__icon-btn:focus-visible {
  outline: 2px solid var(--primary-color, #1976d2);
  outline-offset: 1px;
}

.ag-cell.mw-symbol-column-cell,
.ag-cell[col-id="symbol"] {
  overflow: visible !important;
  padding-right: 6px;
}

.ag-cell.mw-symbol-column-cell .ag-cell-wrapper,
.ag-cell[col-id="symbol"] .ag-cell-wrapper {
  overflow: visible !important;
}

.ag-cell.mw-symbol-column-cell .ag-cell-value,
.ag-cell[col-id="symbol"] .ag-cell-value {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: visible;
  width: max-content;
  max-width: none;
}

 .ag-cell-focus,
 .ag-cell-focus:not(.ag-cell-range-selected) {
  border: none !important;
}

.ag-theme-balham[data-show-borders="true"] .ag-cell,
.ag-theme-balham[data-show-borders="true"] .ag-cell.ag-cell-focus,
.ag-theme-balham[data-show-borders="true"] .ag-cell.ag-cell-focus:not(.ag-cell-range-selected) {
  border: 1px solid var(--grid-cell-border-color, var(--color-border)) !important;
}

.ag-theme-balham[data-show-borders="true"] .ag-header-cell {
  border-right: 1px solid var(--grid-cell-border-color, var(--color-border)) !important;
}

.ag-row-focus {
  background-color: var(--popup-background-color);
} 

.kse-market-watch .ag-header-container {
  background-color: var(--kse-color) !important ;
}

.kse-market-watch .ag-row-odd{
  background-color: var(--ag-row-odd-bg, rgb(237, 237, 237)) !important;
}

.kse-market-watch .ag-row-even{
  background-color: var(--ag-row-even-bg, var(--ag-background-color)) !important;
}

.kse-market-watch .bid-class-kse-even{
  background-color: var(--ag-row-even-bg, rgb(237, 237, 237)) !important;
}
.kse-market-watch .bid-class-kse-odd{
  background-color: var(--ag-row-odd-bg, rgb(237, 226, 206)) !important;
}
.kse-market-watch .offer-class-kse-even{
  background-color: var(--ag-row-even-bg, rgb(237, 237, 237)) !important;
}
.kse-market-watch .offer-class-kse-odd{
  background-color: var(--ag-row-odd-bg, rgb(237, 226, 206)) !important;

}

/* Arabic / RTL: use theme Arabic font (overrides profile-resolved Poppins inline styles). */
html[dir="rtl"] .ag-theme-balham,
html[lang="ar"] .ag-theme-balham {
  --font-family: var(--font-family-arabic);
}

html[dir="rtl"] .ag-header-cell-text,
html[lang="ar"] .ag-header-cell-text {
  font-family: var(--grid-header-font-family, var(--font-family-arabic)) !important;
}

html[dir="rtl"] .ag-cell-value,
html[lang="ar"] .ag-cell-value,
html[dir="rtl"] .ag-header-cell,
html[lang="ar"] .ag-header-cell,
html[dir="rtl"] .ag-cell,
html[lang="ar"] .ag-cell,
html[dir="rtl"] .no-rows-text,
html[lang="ar"] .no-rows-text,
html[dir="rtl"] .context-menu-item,
html[lang="ar"] .context-menu-item {
  font-family: var(--grid-cell-font-family, var(--font-family-arabic)) !important;
}

/* Suspended market-watch symbols (API st === 'S') */
.ag-theme-balham .ag-row.mw-row-suspended,
.ag-theme-balham .ag-row.mw-row-suspended .ag-cell {
  opacity: 0.55;
  text-decoration: line-through;
  color: var(--font-color-grid, inherit);
}

.ag-theme-balham .ag-row.mw-row-suspended .ag-cell * {
  text-decoration: line-through;
}

.ag-theme-balham .ag-row.ts-row-big-trade .ag-cell {
  font-weight: 700;
  background-color: color-mix(in srgb, var(--up-color, #1b8a4a) 16%, transparent);
}
.mw-context-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mw-context-menu-filter-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 2px;
  /* border-bottom: 1px solid #e0e0e0; */
}

.mw-context-menu-filter-button {
  text-transform: none;
  font-size: var(--font-label-size) !important;
  font-weight: 500 !important;
  height: var(--filter-heights) !important;
  border-radius: 8px;
  /* border: 1px solid white; */
  /* color: #333; */
  background-color: var(--popup-foreground-color) !important;
  /* background: none  !important; */
  background-image: none !important;
  color: var(--font-color-grid) !important;
  /* transition: all 0.2s ease; */
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: max-content;
}


/* .mw-context-menu-filter-button:hover {
  border-color: var(--MuiToolbar-bg);
  background-color: var(--MuiToolbar-bg);
} */

.mw-context-menu-filter-button--selected {
  background: var(--color-primary-bg-new-dashboard) !important;
  color: white !important;
  border-color: transparent;
}

.mw-context-menu-filter-button--selected:hover {
  /* background: linear-gradient(90deg, #0056B3 0%, #004A9A 100%); */
}

.mw-context-menu-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: var(--popup-foreground-color) !important;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color-global) !important;
  color: black !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-weight: 500 !important;
}

.mw-context-menu-list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: transparent;
}

/* [dir='rtl'] .mw-context-menu-list-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .mw-context-menu-filter-buttons {
  justify-content: flex-start;
} */

.mw-context-menu-list-item:hover {
  background-color: var(--background-menu-item-hover);
  /* color :var(--font-color); */
}

.mw-context-menu-list-item-icon {
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

[dir="rtl"] .mw-context-menu-list-item-icon {
  margin-right: 0;
  margin-left: 12px;
}

    .mw-context-menu-list-item-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--detail-quote-header-color);
    }

.mw-context-menu-list-item-label {
  font-size: var(--font-label-size);
  color: var(--font-color-grid);
  font-family: var(--font-family);
}

.MuiDialogContent-root{
    overflow: none !important;
    overflow-y: hidden !important;
}


/* Column Formatting */
.column-formatting-container {
  font-family: var(--font-family);
  width: 100%;
  height: inherit !important;
}

.column-formatting-content {
  display: flex;
  gap: 20px;
  height: 100%;
  min-height: 0;
}

.column-formatting-section {
  border-radius: 10px;
  padding: 0;
  width: 36%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
}

.column-formatting-search-wrapper {
  position: relative;
}

.column-formatting-search-icon {
  display: none;
}

.column-formatting-list {
  border-radius: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 280px;
  max-height: 340px;
  padding: 0;
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  background: var(--popup-foreground-color, var(--cards-background-color));
}

.column-formatting-list::-webkit-scrollbar {
  width: 6px;
}

.column-formatting-list::-webkit-scrollbar-thumb {
  background-color: var(--border-color-medium-grey, #aaa);
  border-radius: 3px;
}

.column-formatting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: var(--font-label-size, 12px);
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--font-color-grid) !important;
  background-color: transparent;
  border-bottom: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  min-height: 44px;
}

.column-formatting-item:last-child {
  border-bottom: none;
}

.column-formatting-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.column-formatting-item.selected {
  background-color: rgba(0, 112, 228, 0.08);
}

.column-formatting-item:hover:not(.selected) {
  background-color: var(--icon-button-hover-background-color, rgba(0, 0, 0, 0.04));
}

.column-formatting-appearance-section {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.column-formatting-appearance-section::-webkit-scrollbar {
  width: 6px;
}

.column-formatting-appearance-section::-webkit-scrollbar-thumb {
  background-color: var(--border-color-medium-grey, #aaa);
  border-radius: 3px;
}

.column-formatting-editing-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.column-formatting-editing-name {
  font-size: 18px !important;
  line-height: 1.2;
}

.column-formatting-settings-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}

.column-formatting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.column-formatting-field-label {
  font-size: var(--font-label-size, 12px);
  color: var(--detail-quote-label-color, #757979);
  font-weight: 500;
  font-family: var(--font-family);
  line-height: 1.2;
}

.column-formatting-field--width {
  flex: 0 0 110px;
  width: 110px;
}

.column-formatting-field--alignment {
  flex: 0 0 auto;
}

.column-formatting-field--style {
  flex: 0 0 auto;
}

.column-formatting-width-input,
.column-formatting-width-input .MuiFormControl-root,
.column-formatting-width-input .MuiOutlinedInput-root {
  width: 100% !important;
  height: var(--filter-heights, 36px) !important;
  min-height: var(--filter-heights, 36px) !important;
}

.column-formatting-width-input .MuiOutlinedInput-root {
  border-radius: 8px !important;
  background: var(--cards-background-color, #fff) !important;
}

.column-formatting-width-input .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-global, rgba(0, 0, 0, 0.12)) !important;
}

.column-formatting-width-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-primary, #0070E4) !important;
}

.column-formatting-alignment-group {
  display: flex;
  border: 1px solid var(--border-color-global);
  border-radius: 8px;
  overflow: hidden;
  height: var(--filter-heights, 36px);
  background-color: var(--cards-background-color, #fff);
}

.column-formatting-alignment-group .MuiIconButton-root {
  padding: 6px 12px;
  border-radius: 0;
  color: var(--font-color-grid);
  width: 40px;
  height: 100%;
}

.column-formatting-alignment-group .MuiIconButton-root.selected {
  background-color: rgba(0, 112, 228, 0.12);
  color: var(--color-primary, #0070E4);
}

.column-formatting-alignment-group svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.column-formatting-bold-button {
  width: var(--filter-heights, 36px);
  min-width: var(--filter-heights, 36px);
  height: var(--filter-heights, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color-global);
  border-radius: 8px;
  background-color: var(--cards-background-color, #fff);
  color: var(--font-color-grid);
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-family);
  font-size: 14px;
}

.column-formatting-bold-button.active {
  background-color: rgba(0, 112, 228, 0.12);
  color: var(--color-primary, #0070E4);
  border-color: var(--color-primary, #0070E4);
}

.column-formatting-color-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

.column-formatting-color-column {
  flex: 1;
  min-width: 160px;
  max-width: calc(50% - 8px);
}

.column-formatting-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--cards-background-color, #fff);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  min-height: var(--filter-heights, 36px);
}

.column-formatting-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-color-global);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  flex-shrink: 0;
}

.column-formatting-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.column-formatting-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.column-formatting-color-label {
  font-size: var(--font-label-size, 12px);
  color: var(--detail-quote-label-color, #757979);
  margin-bottom: 6px;
  font-weight: 500;
}

.column-formatting-color-value {
  font-size: var(--font-label-size, 12px);
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-weight: 500;
}

@media (max-width: 720px) {
  .column-formatting-settings-row {
    flex-wrap: wrap;
  }

  .column-formatting-field--width {
    flex: 1 1 100px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .column-formatting-content {
    flex-direction: column;
  }

  .column-formatting-section {
    width: 100%;
  }
}

/* flat-dark theme */
[data-theme='flat-dark'] .column-formatting-list {
  background: rgba(25, 25, 25, 1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme='flat-dark'] .column-formatting-item {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='flat-dark'] .column-formatting-item.selected {
  background-color: rgba(0, 112, 228, 0.2);
}

[data-theme='flat-dark'] .column-formatting-item:hover:not(.selected) {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme='flat-dark'] .column-formatting-field-label,
[data-theme='flat-dark'] .column-formatting-color-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme='flat-dark'] .column-formatting-color-row,
[data-theme='flat-dark'] .column-formatting-bold-button,
[data-theme='flat-dark'] .column-formatting-alignment-group,
[data-theme='flat-dark'] .column-formatting-width-input .MuiOutlinedInput-root {
  background-color: rgba(42, 42, 42, 1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

[data-theme='flat-dark'] .column-formatting-color-value {
  color: #fff !important;
}

[data-theme='flat-dark'] .column-formatting-bold-button.active,
[data-theme='flat-dark'] .column-formatting-alignment-group .MuiIconButton-root.selected {
  background-color: rgba(0, 112, 228, 0.25) !important;
  color: #fff !important;
}

[data-theme='flat-dark'] .column-formatting-alignment-group .MuiIconButton-root {
  color: #fff;
}

[data-theme='flat-dark'] .grid-settings-editing-header {
  background: rgba(42, 42, 42, 1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme='flat-dark'] .grid-settings-editing-header-name {
  color: #fff !important;
}

/* CustomTextField Component Styles */

/* ===== BASE STYLES ===== */
.custom-text-field {
  font-family: var(--font-family);
  margin-bottom: 1rem;
}

.custom-text-field .MuiInputLabel-root {
  color: var(--secondary-text-color, #666);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s ease-in-out;
}

.custom-text-field .MuiOutlinedInput-root {
  border-radius: 8px;
  font-family: var(--font-family);
  transition: all 0.2s ease-in-out;
}

.custom-text-field .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color, #ddd);
  border-width: 1px;
  transition: all 0.2s ease-in-out;
}

.custom-text-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  /* border-color: var(--hover-border-color, #999); */
}

.custom-text-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  /* border-color: var(--primary-color, #1976d2); */
  /* border-width: 2px; */
}

.custom-text-field .MuiInputBase-input {
  color: var(--text-color, #333);
  font-size: 14px;
  font-weight: 400;
  padding: 12px 14px;
}

.custom-text-field .MuiInputBase-input::placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

/* ===== SIZE VARIANTS ===== */

/* Small size */
.custom-text-field.size-small .MuiOutlinedInput-root {
  height: 40px;
  padding: 8px 12px;
}

.custom-text-field.size-small .MuiInputBase-input {
  padding: 8px 12px;
  font-size: 13px;
}

/* Medium size (default) */
.custom-text-field.size-medium .MuiOutlinedInput-root {
  height: 48px;
  padding: 12px 14px;
}

.custom-text-field.size-medium .MuiInputBase-input {
  padding: 12px 14px;
  font-size: 14px;
}

/* Large size */
.custom-text-field.size-large .MuiOutlinedInput-root {
  height: 56px;
  padding: 16px 18px;
}

.custom-text-field.size-large .MuiInputBase-input {
  padding: 16px 18px;
  font-size: 16px;
}

/* ===== MULTILINE/TEXTAREA STYLES ===== */
.custom-text-field.multiline .MuiOutlinedInput-root {
  height: auto;
  min-height: 48px;
  padding: 12px 14px;
}

.custom-text-field.multiline .MuiOutlinedInput-root.MuiInputBase-multiline {
  height: auto;
  min-height: 48px;
}

.custom-text-field.multiline .MuiInputBase-input {
  padding: 0;
  line-height: 1.5;
  resize: vertical;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ===== ICON SUPPORT ===== */
.custom-text-field.has-icon .MuiInputLabel-root {
  left: 48px;
}

.custom-text-field.has-icon .MuiOutlinedInput-root {
  /* padding-left: 48px; */
}

.custom-text-field .MuiInputAdornment-root {
  color: var(--icon-color, #666);
}

.custom-text-field .MuiInputAdornment-root .MuiSvgIcon-root {
  color: black;
  fill: black;
}

/* ===== SHRINK LABEL STYLES ===== */
.custom-text-field.shrink-label .MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75);
  background-color: var(--background-color, #fff);
  padding: 0 4px;
  color: var(--primary-color, #1976d2);
}

/* ===== ERROR STATES ===== */
.custom-text-field.error .MuiOutlinedInput-notchedOutline {
  border-color: var(--error-color, #d32f2f);
  border-width: 2px;
}

.custom-text-field.error .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--error-color, #d32f2f);
}

.custom-text-field.error .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--error-color, #d32f2f);
}

.custom-text-field.error .MuiFormHelperText-root {
  color: var(--error-color, #d32f2f);
}

/* ===== DISABLED STATES ===== */
.custom-text-field.disabled .MuiOutlinedInput-root {
  background-color: var(--disabled-bg-color, #f5f5f5);
  cursor: not-allowed;
}

.custom-text-field.disabled .MuiOutlinedInput-notchedOutline {
  border-color: var(--disabled-border-color, #e0e0e0);
}

.custom-text-field.disabled .MuiInputBase-input {
  color: var(--disabled-text-color, #999);
  cursor: not-allowed;
}

.custom-text-field.disabled .MuiInputLabel-root {
  color: var(--disabled-label-color, #999);
}

/* ===== FOCUS STATES ===== */
.custom-text-field .MuiOutlinedInput-root.Mui-focused {
  outline: none;
}

.custom-text-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--focus-shadow-color, rgba(25, 118, 210, 0.2));
}

/* ===== RTL (RIGHT-TO-LEFT) SUPPORT ===== */
[dir="rtl"] .custom-text-field .MuiInputLabel-root {
  left: auto;
  right: 14px;
  transform-origin: top right;
}

[dir="rtl"] .custom-text-field .MuiInputLabel-shrink {
  transform: translate(-14px, -9px) scale(0.75);
  right: 35px !important;
  top: -2px;
}

[dir="rtl"] .custom-text-field .MuiOutlinedInput-root .MuiInputBase-input {
  text-align: right;
}

[dir="rtl"] .custom-text-field .MuiInputLabel-outlined {
  right: 0;
  left: auto;
  transform-origin: right;
}

[dir="rtl"] .custom-text-field .MuiInputAdornment-root {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"] .custom-text-field.has-icon .MuiInputLabel-root {
  left: auto;
  right: 48px;
}

[dir="rtl"] .custom-text-field.has-icon .MuiOutlinedInput-root {
  padding-left: 14px;
  padding-right: 48px;
}

/* ===== VARIANT STYLES ===== */

/* Outlined variant (default) */
.custom-text-field.variant-outlined .MuiOutlinedInput-root {
  background-color: var(--background-color, #fff);
}

/* Filled variant */
.custom-text-field.variant-filled .MuiFilledInput-root {
  background-color: var(--filled-bg-color, #f5f5f5);
  border-radius: 8px;
}

.custom-text-field.variant-filled .MuiFilledInput-root:hover {
  background-color: var(--filled-hover-bg-color, #eeeeee);
}

.custom-text-field.variant-filled .MuiFilledInput-root.Mui-focused {
  background-color: var(--background-color, #fff);
}

/* Standard variant */
.custom-text-field.variant-standard .MuiInput-root {
  border-bottom: 1px solid var(--border-color, #ddd);
}

.custom-text-field.variant-standard .MuiInput-root:hover {
  border-bottom: 2px solid var(--hover-border-color, #999);
}

.custom-text-field.variant-standard .MuiInput-root.Mui-focused {
  border-bottom: 2px solid var(--primary-color, #1976d2);
}

/* ===== SPECIALIZED STYLES ===== */

/* Search field styles */
.custom-text-field.search-field {
  max-width: 300px;
}

.custom-text-field.search-field .MuiOutlinedInput-root {
  border-radius: 24px;
  background-color: var(--search-bg-color, #f5f5f5);
}

/* Form field styles */
.custom-text-field.form-field {
  margin-bottom: 1.5rem;
}

.custom-text-field.form-field .MuiInputLabel-root {
  font-weight: 500;
}

/* Compact field styles */
.custom-text-field.compact {
  margin-bottom: 0.5rem;
}

.custom-text-field.compact .MuiOutlinedInput-root {
  height: 30px;
  padding: 8px 12px;
}

.custom-text-field.compact .MuiInputBase-input {
  padding: 8px 12px;
  font-size: 13px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .custom-text-field .MuiOutlinedInput-root {
    height: 44px;
    padding: 10px 12px;
  }
  
  .custom-text-field .MuiInputBase-input {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .custom-text-field .MuiInputLabel-root {
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .custom-text-field .MuiOutlinedInput-root {
    height: 46px;
    padding: 11px 13px;
  }
  
  .custom-text-field .MuiInputBase-input {
    padding: 11px 13px;
    font-size: 14px;
  }
}

/* ===== DARK THEME SUPPORT ===== */
[data-theme="dark"] .custom-text-field .MuiInputLabel-root {
  color: var(--secondary-text-color-dark, #ccc);
}

[data-theme="dark"] .custom-text-field .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-dark, #555);
}

[data-theme="dark"] .custom-text-field .MuiOutlinedInput-root .MuiInputBase-input {
  color: var(--font-color-card, #fff);
}

[data-theme="dark"] .custom-text-field .MuiOutlinedInput-root {
  background-color: var(--background-color-dark, #ffffff);
}

[data-theme="dark"] .custom-text-field .MuiInputBase-input::placeholder {
  color: var(--placeholder-color-dark, #999);
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .custom-text-field .MuiOutlinedInput-notchedOutline {
    border-width: 2px;
  }
  
  .custom-text-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .custom-text-field .MuiOutlinedInput-root {
    transition: none;
  }
  
  .custom-text-field .MuiInputLabel-root {
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.custom-text-field .MuiOutlinedInput-root:focus-visible {
  outline: 2px solid var(--primary-color, #1976d2);
  outline-offset: 2px;
}

/* ===== ANIMATION ENHANCEMENTS ===== */
.custom-text-field .MuiInputLabel-root {
  transition: all 0.2s cubic-bezier(0.0, 0, 0.2, 1);
}

.custom-text-field .MuiOutlinedInput-root {
  transition: all 0.2s cubic-bezier(0.0, 0, 0.2, 1);
}

.custom-text-field .MuiOutlinedInput-notchedOutline {
  transition: all 0.2s cubic-bezier(0.0, 0, 0.2, 1);
}


/* Column Chooser */
.column-chooser-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 0;
}

.column-chooser-window-label {
  color: var(--detail-quote-label-color, #757979) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
}

.column-chooser-title {
  margin-bottom: var(--global-margin);
  font-family: var(--font-family);
  font-size: var(--font-label-size);
}

.column-chooser-profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.column-chooser-profile-row .Dropdown,
.column-chooser-profile-row .editable-dropdown-root,
.column-chooser-profile-row .watchlist-dropdown-container {
  flex: 1;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
}

.column-chooser-profile-row .watchlist-dropdown-container .watchlist-select,
.column-chooser-profile-row .watchlist-dropdown-container .MuiOutlinedInput-root {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.column-chooser-profile-row .watchlist-dropdown-container--full-width {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.column-chooser-profile-row .Dropdown {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.column-chooser-add-profile-button {
  flex-shrink: 0;
}

.column-chooser-dual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 280px;
}

.column-chooser-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.column-chooser-panel-title {
  color: var(--font-color-grid) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
}

.column-chooser-filter-label {
  color: var(--detail-quote-label-color, #757979) !important;
  font-size: var(--font-label-size, 12px) !important;
}

.column-chooser-filter {
  margin-bottom: 0;
  color: var(--font-color-grid) !important;
  height: var(--filter-heights) !important;
  border-radius: 8px !important;
  width: 100% !important;
  background-color: var(--cards-background-color) !important;
}

.column-chooser-filter .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-border-color) !important;
}

.column-chooser-filter:hover .MuiOutlinedInput-notchedOutline,
.column-chooser-filter .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-primary, #0070E4) !important;
}

.column-chooser-list {
  flex: 1;
  min-height: 220px;
  max-height: 280px;
  overflow-y: auto;
  /* border: 1px solid var(--border-color-global); */
  border-radius: 10px;
  background: rgba(240, 244, 248, 1) !important;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.column-chooser-list::-webkit-scrollbar {
  width: 6px;
}

.column-chooser-list::-webkit-scrollbar-thumb {
  background-color: var(--border-color-medium-grey, #aaa);
  border-radius: 3px;
}

.column-chooser-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  /* border-radius: 8px; */
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.1);
  /* background: var(--cards-background-color, #fff); */
  min-height: 40px;
}

.column-chooser-list-item--available {
  justify-content: space-between;
}

.column-chooser-list-item--selected {
  /* background: var(--cards-background-color, #fff); */
}

.column-chooser-list-item.is-dragging {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--color-primary, #0070E4);
}

.column-chooser-list-item-label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size, 12px) !important;
  color: var(--font-color-grid) !important;
  font-weight: 500 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-chooser-drag-handle {
  display: flex;
  align-items: center;
  color: var(--detail-quote-label-color, #757979);
  cursor: grab;
  flex-shrink: 0;
}

.column-chooser-list-item-action {
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

.column-chooser-list-item-action--add {
  color: var(--color-primary, #0070E4) !important;
  /* background: rgba(0, 112, 228, 0.08) !important; */
}

.column-chooser-list-item-action--remove {
  color: var(--color-danger, #f44336) !important;
}

.column-chooser-list-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--detail-quote-label-color, #757979) !important;
  font-size: var(--font-label-size, 12px) !important;
}

.column-chooser-add-profile-button {
  background: var(--color-primary-bg-new-dashboard) !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
}

.column-chooser-filter-text {
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  color: var(--font-color-grid);
}

.MuiPopover-root,
.MuiPopper-root,
.MuiAutocomplete-popper,
.MuiPaper-root.MuiMenu-paper {
  z-index: 1600 !important;
}

.MuiDialog-root.save-as-dialog {
  z-index: 1500 !important;
}

.MuiDialog-root.column-chooser-dialog {
  z-index: 1400 !important;
}

.column-chooser-list--selected{
  background: transparent !important;
  border: 0.8px solid rgba(230, 234, 242, 1);
}

@media (max-width: 640px) {
  .column-chooser-dual-layout {
    grid-template-columns: 1fr;
  }
}

/* flat-dark theme */
[data-theme='flat-dark'] .column-chooser-window-label,
[data-theme='flat-dark'] .column-chooser-panel-title,
[data-theme='flat-dark'] .column-chooser-filter-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme='flat-dark'] .column-chooser-list {
  background: rgba(25, 25, 25, 1) !important;
}

[data-theme='flat-dark'] .column-chooser-list--selected {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme='flat-dark'] .column-chooser-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='flat-dark'] .column-chooser-list-item-label {
  color: #fff !important;
}

[data-theme='flat-dark'] .column-chooser-drag-handle {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme='flat-dark'] .column-chooser-filter {
  background-color: rgba(42, 42, 42, 1) !important;
  color: #fff !important;
}

[data-theme='flat-dark'] .column-chooser-filter .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme='flat-dark'] .column-chooser-filter .MuiInputBase-input {
  color: #fff !important;
}

[data-theme='flat-dark'] .column-chooser-list-item:hover:not(.is-dragging) {
  background: rgba(255, 255, 255, 0.06);
}

/* DeleteConfirmation Component Styles */

/* Main Dialog container: z-index is set in JS (see DeleteConfirmation.js) so nested
   confirmations stack above DialogTemplate and other modals. */

.delete-confirmation-paper {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    width: 400px !important;
    /* border: 2px solid var(--color-primary-bg-new-dashboard) !important; */
    overflow: hidden;
}

/* Dialog Title - Blue Header */
.delete-confirmation-title {
    background: var(--color-primary-bg-new-dashboard) !important;
    color: var(--color-white) !important;
    /* padding: 16px 24px !important; */
    margin: 0 !important;
    border-bottom: none !important;
    height: 10px;
}

.dialog-title-text {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-label) !important;
    color: var(--color-Back) !important;
    text-align: left;
    margin: 0 !important;
    /* padding-bottom: 10px !important; */
}

/* Dialog Content - White Background */
.delete-confirmation-content {
    padding: 10px !important;
    background-color: var(--popup-foreground-color) !important;
    text-align: center;
}

.dialog-message-text {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    color: var(--font-color-grid) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left;
}

/* Dialog Actions - Button Container */
.delete-confirmation-actions {
    padding: 16px 24px !important;
    background-color: var(--color-white) !important;
    /* border-top: 1px solid var(--color-gray-light) !important; */
    gap: 12px;
    justify-content: center;
}

/* Button Styling */
.confirm-button {
    font-family: var(--font-family) !important;
    font-weight: 300 !important;
    font-size: var(--font-value-size) !important;
    text-transform: none !important;
    border-radius: 8px !important;
    /* padding: 10px 24px !important; */
    /* min-width: 80px !important; */
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    width: 80px !important;
    height: var(--filter-heights) !important;
}
/* 
.confirm-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.confirm-button:disabled {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
} */

.cancel-button-delete {
    font-family: var(--font-family) !important;
    font-weight: 300 !important;
    font-size: var(--font-value-size) !important;
    text-transform: none !important;
    border-radius: 8px !important;
    /* padding: 10px 24px !important; */
    min-width: 80px !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    height: var(--filter-heights) !important;
}

/* .cancel-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.cancel-button:disabled {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
} */

/* Dark Mode Styles */
.delete-confirmation-dialog.dark-mode .delete-confirmation-paper {
    border-color: var(--color-primary-bg-new-dashboard) !important;
}

.delete-confirmation-dialog.dark-mode .delete-confirmation-content {
    background-color: var(--popup-foreground-color) !important;
}

.delete-confirmation-dialog.dark-mode .dialog-message-text {
    color: var(--font-color-grid) !important;
}

.delete-confirmation-dialog.dark-mode .delete-confirmation-actions {
    background-color: var(--popup-foreground-color) !important;
    border-top-color: var(--border-color-inactive) !important;
}

/* Responsive Design */
@media (max-width: 600px) {
    .delete-confirmation-paper {
        min-width: 320px;
        max-width: 90vw;
        margin: 16px;
    }
    
    .delete-confirmation-title {
        padding: 12px 16px !important;
    }
    
    .delete-confirmation-content {
        padding: 16px !important;
    }
    
    .delete-confirmation-actions {
        padding: 12px 16px !important;
        flex-direction: column;
        gap: 8px;
    }
    
    .confirm-button,
    .cancel-button-delete {
        width: 100%;
        margin: 0 !important;
    }
}

/* Animation for dialog appearance */
.delete-confirmation-dialog .MuiDialog-paper {
    animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Focus styles for accessibility */
.delete-confirmation-dialog .MuiButton-root:focus-visible {
    outline: 2px solid var(--color-primary-bg-new-dashboard);
    outline-offset: 2px;
}

/* Custom button color overrides to match the image */
.delete-confirmation-dialog .confirm-button.MuiButton-containedSecondary {
    background-color: var(--color-white) !important;
    color: var(--color-primary-bg-new-dashboard) !important;
    border: 2px solid var(--color-primary-bg-new-dashboard) !important;
}

.delete-confirmation-dialog .confirm-button.MuiButton-containedSecondary:hover {
    background-color: var(--color-gray-lightest) !important;
    color: var(--color-primary-bg-new-dashboard) !important;
}

.delete-confirmation-dialog .cancel-button-delete.MuiButton-containedPrimary {
    background-color: var(--color-primary-bg-new-dashboard) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary-bg-new-dashboard) !important;
}

.delete-confirmation-dialog .cancel-button-delete.MuiButton-containedPrimary:hover {
    background-color: var(--color-primary-bg-new-dashboard-dark) !important;
    color: var(--color-white) !important;
}

/* Logout confirmation: three actions */
.logout-confirmation-actions {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}

.logout-without-saving-button {
    font-family: var(--font-family) !important;
    font-weight: 300 !important;
    font-size: var(--font-value-size) !important;
    text-transform: none !important;
    border-radius: 8px !important;
    min-width: 80px !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    height: var(--filter-heights) !important;
}

.delete-confirmation-dialog .logout-without-saving-button.MuiButton-containedSecondary {
    background-color: var(--color-white) !important;
    color: #b42318 !important;
    border: 2px solid #b42318 !important;
}

.delete-confirmation-dialog .logout-without-saving-button.MuiButton-containedSecondary:hover {
    background-color: #fef3f2 !important;
}

.delete-confirmation-dialog.dark-mode .logout-without-saving-button.MuiButton-containedSecondary {
    background-color: var(--popup-foreground-color) !important;
    color: #f97066 !important;
    border-color: #f97066 !important;
}

@media (max-width: 600px) {
    .logout-confirmation-actions .MuiButton-root {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* Ensure proper spacing between buttons */
.delete-confirmation-actions .MuiButton-root + .MuiButton-root {
    margin-left: 12px !important;
}

@media (max-width: 600px) {
    .delete-confirmation-actions .MuiButton-root + .MuiButton-root {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
}

.grid-configuration-container {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cards-background-color);
  border-radius: var(--border-radius);
}

.grid-configuration-Tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
  padding: 8px;
}

/* Pill tab bar */
.grid-configuration-tab-item {
  display: flex;
  flex-shrink: 0;
  padding: 8px;
  gap: 4px;
  background: rgba(240, 244, 248, 1);
  border-radius: 10px;
  /* border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08)); */
}

.grid-configuration-tab-item-content {
  /* flex: 1; */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
}

.grid-configuration-tab-item-content:hover:not(.active) {
  background: var(--icon-button-hover-background-color, rgba(0, 0, 0, 0.04));
}

.grid-configuration-tab-item-content.active {
  background: var(--color-primary-bg-new-dashboard, linear-gradient(95deg, #003E7E 2.55%, #0070E4 118.47%)) !important;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 62, 126, 0.2);
}

.grid-configuration-tab-item-label {
  color: var(--font-color-grid) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.grid-configuration-tab-item-content .grid-configuration-tab-item-label {
  color :rgba(100, 116, 139, 1) !important; 
  font-weight: 600 !important;
  
}

.grid-configuration-tab-item-content.active .grid-configuration-tab-item-label {
  color: var(--color-white, #fff) !important;
  font-weight: 600 !important;
}

.grid-configuration-tab-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.grid-configuration-tab-item-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: rgba(100, 116, 139, 1) !important;
  stroke: rgba(100, 116, 139, 1) !important;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.grid-configuration-tab-item-content.active .grid-configuration-tab-item-icon svg {
  fill: var(--color-white, #fff) !important;
  stroke: var(--color-white, #fff) !important;
}

.grid-configuration-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Footer */
.grid-configuration-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  flex-wrap: wrap;
  background: rgba(240, 244, 248, 1) !important;
}

.grid-configuration-footer-hint {
  color: var(--detail-quote-label-color, #757979) !important;
  font-size: 11.5px !important;
  font-family: var(--font-family) !important;
  font-weight: 400 !important;
  flex: 1;
  min-width: 180px;
}

.grid-configuration-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.grid-configuration-actions-button {
  height: var(--filter-heights, 36px) !important;
  min-width: 88px !important;
  padding: 0 16px !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.grid-configuration-actions-button--reset,
.grid-configuration-actions-button--apply {
  background: var(--cards-background-color, #fff) !important;
  color: var(--color-primary, #0070E4) !important;
  border: 1px solid var(--color-primary, #0070E4) !important;
}


.grid-configuration-actions-button--save {
  background: var(--color-primary-bg-new-dashboard, linear-gradient(95deg, #003E7E 2.55%, #0070E4 118.47%)) !important;
  color: var(--color-white, #fff) !important;
  border: none !important;
  min-width: 120px !important;
}

.grid-configuration-actions-button--save:hover {
  opacity: 0.92;
}

/* Shared grid-setting panel styles */
.grid-settings-section-title {
  color: var(--font-color-grid) !important;
  font-size: var(--font-item-label-size, 14px) !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  margin: 0 0 12px 0 !important;
}

.grid-settings-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(240, 244, 248, 1);
}

.grid-settings-toggle-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.grid-settings-toggle-card-title {
  color: var(--font-color-grid) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
}

.grid-settings-toggle-card-desc {
  color: var(--detail-quote-label-color, #757979) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
}

.grid-settings-editing-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 112, 228, 0.12);
  color: var(--color-primary, #0070E4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-family: var(--font-family) !important;
}

.grid-settings-editing-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--popup-foreground-color, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
}

.grid-settings-editing-header-name {
  color: var(--font-color-grid) !important;
  font-size: var(--font-item-label-size, 14px) !important;
  font-weight: 700 !important;
  font-family: var(--font-family) !important;
}

/* Font & Color tab */
.font-color-formatting-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.font-color-formatting-borders-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  width: 100%;
}

.font-color-formatting-borders-title {
  margin: 0 !important;
  flex-shrink: 0;
}

.font-color-formatting-borders-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.font-color-formatting-borders-toggle-label {
  color: var(--font-color-grid) !important;
  font-size: var(--font-label-size, 12px) !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.font-color-formatting-color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 16px;
}

.font-color-formatting-color-field {
  min-width: 0;
}

.font-color-formatting-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  background: var(--cards-background-color, #fff);
  min-width: 0;
}

.font-color-formatting-color-row .column-formatting-color-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.font-color-formatting-color-row .column-formatting-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-color-global);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  flex-shrink: 0;
}

.font-color-formatting-color-label {
  font-size: var(--font-label-size, 12px) !important;
  color: var(--detail-quote-label-color, #757979) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  font-family: var(--font-family) !important;
}

.font-color-formatting-font-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.font-color-formatting-content-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
  min-width: 0;
}

.font-color-formatting-content-field {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
}

.font-color-formatting-content-field--font {
  flex: 0 0 130px;
  width: 130px;
}

.font-color-formatting-content-field--size {
  flex: 0 0 72px;
  width: 72px;
}

.font-color-formatting-content-field .MuiFormControl-root,
.font-color-formatting-content-field > .MuiBox-root {
  width: 100% !important;
}

.font-color-formatting-content-row > .font-color-formatting-font-button {
  flex: 0 0 36px;
}

.font-color-formatting-content-row > .font-color-formatting-preview {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 12px;
  height: var(--filter-heights, 36px);
  min-height: var(--filter-heights, 36px);
}

.font-color-formatting-font-row .font-color-formatting-font-dropdown {
  flex: 1;
  min-width: 160px;
}

.font-color-formatting-font-row .font-color-formatting-size-dropdown {
  width: 100px;
  flex-shrink: 0;
}

.font-color-formatting-font-button {
  width: 36px;
  height: var(--filter-heights, 36px);
  border: 1px solid var(--border-color-global);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--cards-background-color, #fff);
  color: var(--font-color-grid);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  font-weight: 700;
  font-family: var(--font-family);
  flex-shrink: 0;
}

.font-color-formatting-font-button.active {
  background-color: rgba(0, 112, 228, 0.12);
  color: var(--color-primary, #0070E4);
  border-color: var(--color-primary, #0070E4);
}

.font-color-formatting-preview {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.08));
  background: var(--popup-foreground-color, var(--cards-background-color));
  min-height: var(--filter-heights, 36px);
  height: var(--filter-heights, 36px);
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-color-formatting-content-row .MuiFormControl-root {
  margin: 0;
}

.format-options-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 720px) {
  .font-color-formatting-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .font-color-formatting-color-grid {
    grid-template-columns: 1fr;
  }

  .font-color-formatting-content-row {
    flex-wrap: wrap;
  }

  .font-color-formatting-content-row > .font-color-formatting-preview {
    flex: 1 1 100%;
    height: auto;
    min-height: 44px;
    white-space: normal;
  }
}

/* flat-dark theme overrides */
[data-theme='flat-dark'] .grid-configuration-tab-item {
  background: rgba(25, 25, 25, 1);
}

[data-theme='flat-dark'] .grid-configuration-footer {
  background: rgba(57, 57, 57, 1) !important;
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme='flat-dark'] .grid-settings-toggle-card {
  background: rgba(57, 57, 57, 1);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='flat-dark'] .grid-configuration-tab-item-content .grid-configuration-tab-item-label {
  color: #fff !important;
}

[data-theme='flat-dark'] .grid-configuration-tab-item-icon svg {
  fill: #fff !important;
  stroke: #fff !important;
}

[data-theme='flat-dark'] .grid-configuration-tab-item-content:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme='flat-dark'] .grid-configuration-tab-item-content.active .grid-configuration-tab-item-label,
[data-theme='flat-dark'] .grid-configuration-tab-item-content.active .grid-configuration-tab-item-icon svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

[data-theme='flat-dark'] .grid-configuration-container {
  /* background: rgba(25, 25, 25, 1); */
}

[data-theme='flat-dark'] .grid-configuration-footer-hint {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme='flat-dark'] .grid-configuration-actions-button--reset,
[data-theme='flat-dark'] .grid-configuration-actions-button--apply {
  background: transparent !important;
  color: var(--color-primary, #0070E4) !important;
  border-color: var(--color-primary, #0070E4) !important;
}

[data-theme='flat-dark'] .grid-settings-section-title,
[data-theme='flat-dark'] .font-color-formatting-borders-toggle-label {
  color: rgba(115, 115, 115, 1) !important;
}

[data-theme='flat-dark'] .font-color-formatting-color-row,
[data-theme='flat-dark'] .font-color-formatting-preview,
[data-theme='flat-dark'] .font-color-formatting-font-button,
[data-theme='flat-dark'] .grid-settings-editing-header {
  background: rgba(42, 42, 42, 1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(115, 115, 115, 1) !important;
}

[data-theme='flat-dark'] .font-color-formatting-color-label,
[data-theme='flat-dark'] .font-color-formatting-color-row .column-formatting-color-value {
  color: rgba(115, 115, 115, 1) !important;
}

[data-theme='flat-dark'] .font-color-formatting-font-button.active {
  background-color: rgba(0, 112, 228, 0.25) !important;
  color: #fff !important;
}



.company-profile-dialog-root {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0;
  background: var(--popup-background-color);
  overflow: hidden;
}

.company-profile-dialog-root[dir='rtl'] {
  direction: rtl;
  grid-template-columns: 1fr 60px;
}

.company-profile-dialog-sidebar {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: var(--news-background-color);
  overflow: visible;
  z-index: 30;
}

.company-profile-dialog-root[dir='rtl'] .company-profile-dialog-sidebar {
  grid-column: 2;
}

.company-profile-dialog-content {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--popup-background-color);
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Search floats beside the sidebar icon, over the open tab — not a separate tab. */
.company-profile-dialog-sidebar-search-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 40;
}

.company-profile-dialog-symbol-search {
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% + 8px);
  height: 40px;
  width: 240px;
  display: flex;
  align-items: center;
  z-index: 50;
  padding: 0 8px;
  margin: 0;
  background: var(--popup-foreground-color, var(--pill-search-bg-color, #fff));
  border: 1px solid var(--border-color-global, var(--pill-search-border-color, rgba(0, 0, 0, 0.12)));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.company-profile-dialog-symbol-search-input {
  width: 100%;
}

.company-profile-dialog-symbol-search-input.MuiFormControl-root,
.company-profile-dialog-symbol-search-input .MuiFormControl-root {
  width: 100%;
  margin: 0;
}

.company-profile-dialog-symbol-search-input .MuiOutlinedInput-root {
  height: 36px;
  min-height: 36px;
  padding-inline: 4px !important;
  border-radius: 6px !important;
  background: var(--popup-foreground-color, var(--pill-search-bg-color, #fff)) !important;
  box-shadow: none !important;
}

.company-profile-dialog-symbol-search-input .MuiOutlinedInput-input {
  padding: 6px 4px !important;
  font-size: var(--font-size-small, 13px);
  color: var(--font-color-grid, var(--pill-search-text-color, inherit));
}

.company-profile-dialog-symbol-search-input .MuiOutlinedInput-input::placeholder {
  color: var(--pill-search-text-color, var(--font-color-grid, inherit));
  opacity: 0.55;
}

.company-profile-dialog-symbol-search-input .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.company-profile-dialog-symbol-search-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.company-profile-dialog-symbol-search-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

/* Sidebar already has the search icon — keep the field clean. */
.company-profile-dialog-symbol-search-input .MuiInputAdornment-root {
  display: none;
}

.company-profile-dialog-sidebar-btn--search-open {
  background: var(--popup-foreground-color, transparent) !important;
}

.company-profile-dialog-sidebar-btn--search-open .company-profile-dialog-sidebar-icon {
  fill: var(--font-color-grid) !important;
  opacity: 0.9;
}

[data-theme='dark'] .company-profile-dialog-symbol-search,
[data-theme='flat-dark'] .company-profile-dialog-symbol-search,
[data-theme='darkBlack'] .company-profile-dialog-symbol-search {
  background: var(--popup-foreground-color, #1e1e1e);
  border-color: var(--border-color-global, rgba(255, 255, 255, 0.14));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

[data-theme='dark'] .company-profile-dialog-symbol-search-input .MuiOutlinedInput-root,
[data-theme='flat-dark'] .company-profile-dialog-symbol-search-input .MuiOutlinedInput-root,
[data-theme='darkBlack'] .company-profile-dialog-symbol-search-input .MuiOutlinedInput-root {
  background: var(--popup-foreground-color, #1e1e1e) !important;
}

.company-profile-dialog-root[dir='rtl'] .company-profile-dialog-content {
  grid-column: 1;
}

.company-profile-dialog-content > * {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.company-profile-dialog-content > .company-profile-performance-root {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.company-profile-dialog-content > .company-profile-intraday-root {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.company-profile-dialog-sidebar-btn {
  background: transparent;
}

.company-profile-dialog-sidebar-btn--active {
  background: var(--border-color-global) !important;
  border-radius: 12px !important;
}

.company-profile-dialog-sidebar-btn--active:hover {
  background: var(--border-color-global) !important;
}

.company-profile-dialog-sidebar-icon {
  width: 20px;
  height: 20px;
  fill: var(--font-color-grid);
}

.company-profile-dialog-sidebar-btn--active .company-profile-dialog-sidebar-icon {
  fill: var(--color-white) !important;
}

.company-profile-dialog-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  color: var(--font-color-grid);
}


/* ======================================
   Symbol search — quote header layout
   (SearchComponent layout="quoteHeader")
   ====================================== */

.symbol-search-quote {
  width: 100%;
}

.symbol-search-quote--open {
  width: 100%;
}

.symbol-search-quote--open .MuiOutlinedInput-root {
  min-height: 30px;
  border-radius: var(--border-radius) !important;
  background: var(--popup-foreground-color);
}

.symbol-search-quote-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  /* gap: 12px; */
  /* width: 100%; */
}

.symbol-search-quote-main {
  display: flex;
  align-items: center;
  gap: 05px;
  /* flex: 1 1 auto; */
  min-width: 0;
}

.symbol-search-trigger {
  flex-shrink: 0;
  width: 42px !important;
  height: 30px !important;
  /* border: 1px solid var(--card-border-color) !important; */
  border-radius: var(--border-radius) !important;
  background: var(--search-comparison-bg-search, var(--popup-foreground-color)) !important;
  padding: 0 !important;
  color: var(--font-color-grid) !important;
}

.symbol-search-trigger:hover {
  /* background: var(--icon-button-hover-background-color) !important; */
}

.symbol-search-trigger-icon {
  width: 12px;
  height: 12px;
  fill: var(--font-color-grid);
}

.symbol-search-identity {
  flex: 1;
  min-width: 0;
  /* padding-top: 2px; */
}

.symbol-search-symbol {
  font-size: var(--font-label-size,12px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  text-transform: uppercase;
}

.symbol-search-desc {
  font-size: var(--font-label-size, 12px) !important;
  line-height: 1.35;
  color: var(--detail-quote-label-color) !important;
  font-family: var(--font-family) !important;
  /* margin-top: 3px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-search-quote-prices {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.symbol-search-quote-prices .search-price-header-price {
  margin-left: 0;
}

.symbol-search-quote-prices .search-price-header-change,
.symbol-search-quote-prices .search-price-header-percentage {
  margin-left: 8px;
}

.exchange-profile-container{
    padding: var(--global-padding);
}

/* Adjust padding when in dockview - remove all margins/padding to fit within tab */
.exchange-profile-container.dockview-container {
    padding: 0;
    margin: 0;
    height: 100%;
    /* Don't set overflow here - parent wrapper handles scrolling */
    overflow: visible;
}

.exchange-profile-header{
        display: flex ;
        flex-direction: row;
        align-items: center;
        background: var(--color-transparent-cards);
        border-radius: 20px;
        padding: 10px 20px;
        backdrop-filter: blur(20px);
        /* gap: 40%; */
        justify-content: space-between;
        /* Keep visible while scrolling */
        position: fixed;
        top: 10px;
        left: 50px;
        right: 50px;
        z-index: 19999;
        width: calc(100% - 100px);
}

/* When in dockview, use sticky positioning relative to container */
.exchange-profile-header.dockview-header {
        position: sticky;
        top: 10px;
        left: auto;
        right: auto;
        width: calc(100% - 20px);
        margin: 10px 10px 20px 10px;
        z-index: 100;
}

.exchange-profile-header-label{
    display: flex;
    align-items: center;
}

.exchange-profile-header-nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.exchange-profile-header-nav-buttons{
    background: transparent;
    border: none;
    color: var(--font-color, #ffffff);
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    transition: all 0.3s ease;
}

.exchange-profile-header-nav-buttons:hover {
    opacity: 0.8;
}

.exchange-profile-header-nav-buttons.active {
    color: var(--font-color, #ffffff);
}

.exchange-profile-header-nav-buttons.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--font-color, #ffffff);
    border-radius: 2px;
}

.exchange-submarket-selector{
    display: flex;
        flex-direction: row;
        /* gap: 10px; */
    margin-top: 5px;
}

.exchange-submarket-selector-item{
    padding: 10px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    backdrop-filter: blur(20px);
    width: fit-content;
    border-radius: 10px;
}

.exchange-info-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-top: 5px;
}

.exchange-info{
    width: 60%;
}

.chart-container{
    width: 40%;
    background: var(--color-transparent-cards);
    padding: 2px 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
}

.exchange-filters-data{
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
}
.exchange-filter-top-gainer{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}
.exchange-filter-top-loser{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}
.exchange-filter-volume{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}
.exchange-filter-volume{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}

.exchange-profile-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* space for fixed header (height + top offset) */
    margin-top: 60px;
}

/* When header is sticky in dockview, adjust content spacing */
.exchange-profile-container.dockview-container .exchange-profile-content {
    margin-top: 0;
    padding: 0 10px 10px 10px;
}

.news-container{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}
.exchange-index-news{
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
}
.news-container{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 30%;
}

.index-summary-container{
    width: 100%;
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    /* width: 30%; */
}

.section-label{
    font-family: var(--font-family) !important;
font-weight: 600;
font-style: SemiBold !important;
font-size: var(--font-size-label) !important;
leading-trim: NONE !important;
line-height: var(--font-size-label) !important;
letter-spacing: 0px !important;
color: var(--font-color) !important;
}

.exchange-sector-summary{
    background: var(--color-transparent-cards);
    padding: 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    width: 100%;
}

.exchange-profile-grid .ag-header{
    background: var(--font-color) !important;

}

.exchange-profile-grid .ag-row-even{
    background: var(--ag-grid-even-row) !important;
}

.exchange-profile-grid .ag-row-odd{
    background: transparent !important;
}

.exchange-profile-grid {
    --ag-background-color: transparent !important;
}

.exchange-profile-grid .ag-cell {
    color: var(--font-color) !important;
}

/* BorderGlowCard.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .border-glow-app {
    font-family: var(--font-family);
    /* background: linear-gradient(135deg, #0f172a, #1e293b); */
    /* min-height: 100vh; */
    color: white;
    padding: 15px 20px;
  }
  
  
  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    /* margin: 0 auto 40px; */
  }
  
  /* Base glow card styles - keeping the original UI */
  .border-glow-card {
    position: relative;
    background: transparent;
    border-radius: 20px;
    padding: 10px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
  }
  .border-glow-card.selected {
    background: var(--focus-shadow-color);
  }
  
  .border-glow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  }
  
  /* White top border glow effect */
  .border-glow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 12px 12px 0 0;
    z-index: 2;
  }
  
  /* White left border glow effect */
  .border-glow-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 12px 0 0 12px;
    z-index: 2;
  }
  
  .card-content-title {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-style: Medium !important;
    font-size: var(--font-size-label) !important;
    leading-trim: NONE !important;
    line-height: 16px !important;
    letter-spacing: 0px !important;
    /* text-align: center; */
    color: var(--font-color) !important;
  }
  
  .card-content-stock-name {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-style: Medium !important;
    font-size: var(--font-value-size) !important;
    leading-trim: NONE !important;
    line-height: var(--font-value-size) !important;
    letter-spacing: 0px !important;
    /* text-align: center; */
    color: var(--font-color) !important;
  }
  
  .stock-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 15px; */
    padding: 10px 0;
    /* border-bottom: 1px solid #334155; */
  }
  
  .stock-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #60a5fa;
  }
  
  .stock-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
  }
  
  .card-content-stock-price {
    font-family: var(--font-family) !important;
font-weight: 600;
font-style: SemiBold !important;
font-size: 40px !important;
leading-trim: NONE !important;
line-height: 40px !important;
letter-spacing: 0px !important;
color: var(--font-color) !important;
  }
  /* Responsive design */
  @media (max-width: 768px) {
    .cards-container {
      grid-template-columns: 1fr;
    }
    
    .app-header h1 {
      font-size: 2rem;
    }
    
    .border-glow-card {
      padding: 20px;
    }
  }
  
  @media (max-width: 480px) {
    .border-glow-app {
      padding: 15px;
    }
    
    .app-header h1 {
      font-size: 1.8rem;
    }
    
    .card-content h2 {
      font-size: 1.5rem;
    }
  }
.exchange-container{
    background: var(--color-transparent-cards);
    padding: 10px 30px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
}

.exchange-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.exchange-data{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-label-small{
    font-family: var(--font-family) !important;
    font-weight: 400;
    font-style: Regular !important;
    font-size: var(--font-size-label) !important;
    leading-trim: NONE !important;
    line-height: 16px;
    letter-spacing: 0px;
    color: #919191 !important;
}

.section-value{
    font-family: var(--font-family) !important;
font-weight: 600;
font-style: SemiBold !important;
font-size: var(--font-value-size) !important;
leading-trim: NONE !important;
line-height: 22px;
letter-spacing: 2px;
color: var(--font-color);
}

.symbol-graph{
    width: 14%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.symbol-graph-row{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.symbol-graph-row-label{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.symbol-graph-row-bar{
    height: 4px;
    /* background-color: green; */
    /* width: 100%; */
    border-radius: 2px;
}

.up-exchange-info{
    background-color: var(--grid-bg-green);
}

.down-exchange-info{
    background-color: var(--grid-bg-red);
}

.change-exchange-info{
    background-color: var(--font-color);
}

.symbol-graph-row-label-number{
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-style: SemiBold !important;
    font-size: var(--font-size-label) !important;
    line-height: 16px !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    color: var(--font-color) !important;

}

.symbol-graph-row-label-text{
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    font-style: Regular !important;
    font-size: var(--font-value-size) !important;
    line-height: 16px !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    color: var(--font-color) !important;
}

.perc-graph{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: end;

}

.perc-graph-row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.perc-graph-row-bar{
    max-height: 50px !important;
    /* background: red; */
        width: 6px !important;
        border-radius: 4px !important;
    /* height: 60px; */
}

.perc-graph-row-label{
    font-family: var(--font-family) !important;
font-weight: 500 !important;
font-style: Medium !important;
font-size: 14px !important;
leading-trim: NONE !important;
line-height: 14px !important;
letter-spacing: 0px !important;
text-align: center !important;
color: var(--font-color) !important;

}

.negative-bar{
    baackground-color: var(--grid-bg-red);
}

.positive-bar{
    background-color: var(--grid-bg-green);
}
/* TradingView-style Chart CSS */
.tvlike-app {
  font-family: var(--font-family);
  background: var(--card-background-login) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding: 12px 12px 12px 12px;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tvlike-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  min-height: 24px;

}

.premium-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  /* border-radius: 4px; */
  padding: 2px 8px;
  cursor: pointer;
  background: transparent;
  color: var(--theme-contrast-fixed);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  transition: opacity 0.2s, transform 0.1s;
  /* box-shadow: 0 2px 8px rgba(161, 140, 209, 0.3); */
}

.premium-dropdown-trigger:hover {
  opacity: 0.9;
}

.premium-dropdown-trigger:active {
  transform: scale(0.98);
}

.premium-dropdown-trigger.active {
  background: rgba(91, 91, 91, 0.27);
  border-radius: 8px;
}

.premium-trigger-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-trigger-icon img {
  width: 100%;
  height: 100%;
}

.premium-trigger-chevron {
  width: 8px;
  height: 5px;
  margin-left: 4px;
  display: flex;
  align-items: center;
}

.premium-trigger-chevron img {
  width: 100%;
  height: 100%;
}

.tvlike-search {
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: border 0.2s;
}

.tvlike-header-search .MuiOutlinedInput-root {
  min-height: 26px !important;
}

.tvlike-header-search .MuiInputBase-input {
  font-size: 13px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tvlike-header-search .MuiSvgIcon-root {
  height: 14px !important;
  width: 14px !important;
}

.tvlike-timeframe-group {
  display: flex;
  gap: 4px;
}

.tvlike-timeframe-btn {
  background: var(--chart-btn-bg);
  border: 1px solid var(--chart-btn-border);
  border-radius: 4px;
  padding: 5px 16px;
  font-size: 15px;
  color: var(--font-color-grid) !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.tvlike-timeframe-btn.active,
.tvlike-timeframe-btn:active,
.tvlike-footer-btn.active {
  background: var(--chart-indigo-primary);
  color: var(--color-white);
  border: 1.5px solid var(--chart-indigo-primary);
}

.tvlike-timeframe-btn:hover,
.tvlike-footer-btn:hover {
  background: var(--chart-indigo-hover);
  color: var(--chart-indigo-text-hover);
}

.tvlike-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tvlike-header-btn,
.tvlike-header-controls>button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  background: var(--chart-btn-header-bg);
  border: 1px solid var(--chart-btn-header-border);
  border-radius: 6px;
  margin: 0;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tvlike-header-btn.active,
.tvlike-header-controls>button:active {
  background: var(--chart-btn-active-bg);
  border-color: var(--chart-btn-active-border);
}

.tvlike-main-content {
  display: flex;
  flex-direction: row;
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  margin: 8px 16px 16px 8px;
  border-radius: 5px;
  background: transparent;
  overflow: visible;
}

.tvlike-sidebar-container {
  display: flex;
  flex-direction: column;
  background: var(--chart-sidebar-bg);
  width: 40px;
  position: relative;
  z-index: 100;
  background: var(--card-background-login);
  backdrop-filter: blur(var(--glass-overlay-blur));
  margin-inline-end: 8px;
  border-radius: 5px;
  height: 100%;
  overflow: visible;
}

.tvlike-sidebar {
  background: transparent;
  border-right: none;
  box-shadow: none;
  padding: 8px 8px;
  margin-right: 0;
  position: relative;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  overflow: visible;
}

.tvlike-sidebar-btn {

  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  box-shadow: none;
  padding: 0;
  transition: background-color 0.15s ease;
  z-index: 1;
}

.tvlike-sidebar-btn-wrapper {
  position: relative;
  margin: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  overflow: visible;
}

.tvlike-sidebar-btn-wrapper:hover {
  background-color: #FFFFFF4D;
}

.dark .tvlike-sidebar-btn-wrapper:hover {
  background-color: #2a2e39;
}

.tvlike-sidebar-btn-wrapper.active {
  background: var(--chart-button-active-sidebar) !important;
  padding: 6px !important;
}

.dark .tvlike-sidebar-btn-wrapper.active {
  background: var(--chart-button-active-sidebar) !important;
  padding: 5px !important;

}

.tvlike-sidebar-btn.active {
  background-color: transparent;
}

.tvlike-sidebar-arrow {
  position: absolute;
  color: var(--font-color-grid) !important;
  right: -10px;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2;
}

.tvlike-sidebar-btn-wrapper:hover .tvlike-sidebar-arrow {
  opacity: 1;
}

.tvlike-sidebar-arrow:hover {
  transform: scale(1.2);
}

.tvlike-sidebar-arrow svg {
  fill: var(--color-white);
}

.tvlike-sidebar-btn-wrapper.active .tvlike-sidebar-arrow {
  color: var(--color-white) !important;
  opacity: 1;
  right: -3px;

}

.tvlike-sidebar-arrow.active {
  transform: rotate(90deg);
}

.tvlike-chart-area {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
  width: 100%;
  background: var(--chart-background-color);
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Redesigned Stock Info Section */
.tvlike-stockinfo-container {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: transparent;
  pointer-events: none;
  /* Let clicks pass through to chart unless on a button */
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.tvlike-stockinfo-main-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.stock-info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.stock-ticker {
  font-weight: 700;
  font-size: 16px;
  color: var(--chart-ticker-color);
}

.stock-timeframe {
  color: var(--chart-secondary-text);
  font-weight: 500;
}

.stock-ohlc-values {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
}

.ohlc-group {
  display: flex;
  gap: 4px;
}

.ohlc-label {
  color: var(--chart-secondary-text);
  font-weight: 400;
}

.ohlc-val {
  font-weight: 600;
  min-width: 45px;
}

.ohlc-change {
  font-weight: 500;
  margin-left: 4px;
}

.ohlc-group.volume {
  margin-left: 8px;
}

/* Indicators List */
.tvlike-indicators-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.indicator-item {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--chart-indicator-bg);
  border: 1px solid var(--chart-indicator-border);
  border-radius: 20px;
  padding: 2px 8px 2px 10px;
  width: fit-content;
  pointer-events: auto;
  /* Enable clicks on indicators */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.indicator-item:hover {
  background: var(--chart-indicator-hover);
}

.indicator-item.active {
  border-color: #137333;
}

.indicator-item .active-badge {
  font-size: 9px;
  font-weight: 700;
  background-color: #e6f4ea;
  color: #137333;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

[data-theme='dark'] .indicator-item .active-badge {
  background-color: rgba(30, 255, 0, 0.15);
  color: #1eff00;
}

.indicator-item .indicator-item-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: 6px;
}

.indicator-item .indicator-item-badge.indicator {
  background-color: #e8f0fe;
  color: #1a73e8;
}

.indicator-item .indicator-item-badge.script {
  background-color: #f3e8fd;
  color: #9c27b0;
}

.indicator-item .indicator-item-badge.pattern {
  background-color: #fce8e6;
  color: #d93025;
}

.indicator-item .indicator-item-badge.strategy {
  background-color: #fef7e0;
  color: #ea8600;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.indicator-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--chart-indigo-primary);
  /* Purple color from image */
  margin-right: 12px;
  white-space: nowrap;
}

.indicator-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.indicator-action-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--chart-secondary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.indicator-action-btn:hover {
  color: var(--chart-ticker-color);
  background-color: var(--chart-indicator-hover);
}

.indicator-action-btn.delete:hover {
  color: #f23645;
}

.tvlike-chart {
  flex: 1 1 0;
  min-height: 300px;
  height: 100%;
  width: 100%;
  background: #ffffff;
  position: relative;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* TradingView-style OHLCV Tooltip */
.tvlike-tooltip {
  position: absolute;
  top: 18px;
  left: 24px;
  background: var(--chart-tooltip-bg);
  color: var(--chart-ticker-color);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s ease;
  border: 1px solid var(--chart-tooltip-border);
}

.tvlike-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

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

.tvlike-tooltip-label {
  color: var(--chart-secondary-text);
  font-weight: 500;
}

.tvlike-tooltip-value {
  font-weight: 600;
}

.tvlike-tooltip-value.up {
  color: var(--chart-candlestick-up-color);
}

.tvlike-tooltip-value.down {
  color: var(--chart-candlestick-down-color);
}

.tvlike-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: none;
  box-shadow: none;
  padding: 0;
  display: none;
  /* Hide footer */
  margin: 0;
  min-height: 48px;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.tvlike-footer-btn {
  background: #f5f6fa;
  border: 1px solid #e0e3eb;
  border-radius: 4px;
  padding: 5px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease;
}

.tvlike-footer-btn.active {
  background: #6366f1;
  color: #fff;
  border: 1.5px solid #6366f1;
}

.tvlike-footer-btn:hover {
  background: #e0e7ff;
  color: #3730a3;
}

.tvlike-brand {
  margin-left: auto;
  color: #787B86;
  font-weight: 600;
  font-size: 16px;
}

.tvlike-popout {
  position: absolute;
  left: 0px;
  top: 10px;
  min-width: 220px;
  background: #7A7A80;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(30, 40, 90, 0.18), 0 1.5px 6px rgba(99, 102, 241, 0.07);
  padding: 12px 0 8px 0;
  z-index: 100;
  animation: popout-fade-in 0.15s ease-out;
  max-height: 90%;
  overflow-y: auto;
}

@keyframes popout-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tvlike-popout-lines {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  right: auto;
  margin-left: 0;
  margin-right: 0;
  min-width: 250px;
  background: var(--cards-background-color);
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  z-index: 200;
  animation: popout-fade-in 0.18s cubic-bezier(.4, 0, .2, 1);
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

/* RTL: bar stays on the right (document dir); flyout opens to the left of the bar */
[dir="rtl"] .tvlike-popout-lines,
[dir="rtl"] .tvlike-popout {
  left: auto;
  right: calc(100% + 8px);
  margin-left: 0;
  margin-right: 0;
}

[dir="rtl"] .tvlike-sidebar-arrow {
  right: auto;
  left: -10px;
}

[dir="rtl"] .tvlike-sidebar-btn-wrapper.active .tvlike-sidebar-arrow {
  right: auto;
  left: -3px;
}

[dir="rtl"] .tvlike-sidebar-arrow:hover {
  transform: scaleX(-1) scale(1.2);
}

[dir="rtl"] .tvlike-sidebar-arrow.active {
  transform: scaleX(-1) rotate(90deg);
}

.tvlike-popout-lines::-webkit-scrollbar {
  width: 2px;
}

.tvlike-popout-lines::-webkit-scrollbar-track {
  background: transparent;
}

.tvlike-popout-lines::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.tvlike-popout-lines::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

.tvlike-popout-lines::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-lines::-webkit-scrollbar-button:start:decrement,
.tvlike-popout-lines::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-lines::-webkit-scrollbar-corner {
  display: none !important;
}

.tvlike-popout-lines::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-lines::-webkit-scrollbar-button:double-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@keyframes popout-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tvlike-popout-charttype {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--cards-background-color);
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  z-index: 100;
  animation: popout-fade-in 0.18s cubic-bezier(.4, 0, .2, 1);
  max-height: 450px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

.tvlike-popout-charttype::-webkit-scrollbar {
  width: 2px;
}

.tvlike-popout-charttype::-webkit-scrollbar-track {
  background: transparent;
}

.tvlike-popout-charttype::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.tvlike-popout-charttype::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

.tvlike-popout-charttype::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-charttype::-webkit-scrollbar-button:start:decrement,
.tvlike-popout-charttype::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-charttype::-webkit-scrollbar-corner {
  display: none !important;
}

.tvlike-popout-charttype::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-charttype::-webkit-scrollbar-button:double-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@keyframes popout-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tvlike-popout-title {
  font-weight: 600;
  font-size: 15px;
  color: #6366f1;
  padding: 0 20px 8px 20px;
  border-bottom: 1px solid #e0e3eb;
  margin-bottom: 6px;
}

.tvlike-popout-list {
  list-style: none;
  margin: 0;
  padding: 0 2px;
}

.tvlike-popout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--font-color-grid);
  background-color: transparent;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.tvlike-popout-item:hover {
  background-color: var(--menu-item-hover);
}

.tvlike-popout-item.selected {
  background: var(--color-primary-bg-new-dashboard);
  border-left: 2px solid var(--color-primary-bg-new-dashboard);
}

.tvlike-popout-item.selected span {
  color: #ffffff;
}

.tvlike-popout-shortcut {
  color: var(--font-color-grid);
  font-size: 11px;
  margin-left: 12px;
}

.tvlike-popout-section {
  margin-bottom: 8px;
}

.tvlike-popout-section-title {
  padding: 8px 16px 4px 16px;
  color: var(--font-color-grid);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tvlike-searchable-symbol {
  position: relative;
  min-width: 220px;
}

.tvlike-symbol-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #e0e3eb;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(30, 40, 90, 0.10);
  z-index: 2001 !important;
  max-height: 320px;
  overflow-y: auto;
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
}

.tvlike-symbol-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.18s, color 0.18s;
}

.tvlike-symbol-dropdown-item:hover {
  background: var(--color-transparent-white);
  color: var(--chart-indigo-text-hover);
}

.tvlike-symbol-code {
  font-weight: 600;
  color: var(--chart-indigo-primary);
  min-width: 80px;
}

.tvlike-symbol-name {
  color: var(--chart-secondary-text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvlike-cursor-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--font-color-grid);
  background-color: transparent;
  border-radius: 6px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.tvlike-cursor-option:hover {
  background-color: var(--menu-item-hover);
}

.tvlike-cursor-option.selected {
  background: var(--color-primary-bg-new-dashboard);
  border-left: 3px solid var(--color-primary-bg-new-dashboard);
}

.tvlike-cursor-option.selected span {
  color: #ffffff;
}

.tvlike-cursor-badge {
  background: var(--color-warning);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 8px;
  letter-spacing: 0.5px;
}

.tvlike-chart-type-container {
  display: flex;
  align-items: center;
}


.tvlike-header-icon-btn {
  background: transparent;
  border: none;

  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.tvlike-header-icon-btn:hover {
  background-color: rgba(91, 91, 91, 0.27) !important;
}

.tvlike-header-icon-btn.active {
  background: var(--chart-button-active-sidebar) !important;
  border-radius: 4px;
  /* Highlight for toggled tools */
}

.tvlike-header-icon-btn.hdr-historical-prices-btn.active svg {
  fill: var(--color-white) !important;
}

.tvlike-header-icon-btn.active .themed-svg-icon {
  background-color: var(--color-white);
}

.hdr-vert-divider {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--font-color-grid), rgba(255, 255, 255, 0));
  margin: 0 4px;
}

.dark .hdr-vert-divider,
[data-theme="dark"] .hdr-vert-divider {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.tvlike-header-indicators-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tvlike-header-indicators-btn:hover {
  background-color: rgb(91 91 91 / 54%) !important;
}

.tvlike-symbol-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--font-color-grid) !important;
  min-width: 80px;
  padding: 2px 0;
}

.tvlike-symbol-input:focus {
  font-weight: 700;
  background: var(--chart-indigo-primary);
  color: var(--color-white) !important;
  border-radius: 2px;
  outline: none;
}

.search-textfield-graph {
  background: #7A7A80;
  --pill-search-bg-color: #7A7A80;
}

/* Segmented Pill Bar Styles */
.hdr-seg-container {
  position: relative;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hdr-seg-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-overlay-bg);
  backdrop-filter: blur(var(--glass-overlay-blur));
  /* Matching the dark purple-gray background */
  /* Stronger white border from image */
  border-radius: 6px;
  padding: 2px;
  transition: all 0.2s ease;
  color: var(--font-color-grid);
}


/* Dark Mode Specifics */
[data-theme='dark'] .hdr-seg-bar,
.dark-mode .hdr-seg-bar,
.dark .hdr-seg-bar {
  background: var(--glass-overlay-bg);
  backdrop-filter: blur(var(--glass-overlay-blur));
  color: var(--font-color-grid);
}



.hdr-seg-pill {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 3px 5px;
  margin: 1px;
  /* Slightly more luxurious padding */
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--font-color-grid);
  /* Black text for inactive */
  transition: all 0.2s ease;
  font-family: var(--font-family);
}


[data-theme='dark'] .hdr-seg-pill,
.dark-mode .hdr-seg-pill,
.dark .hdr-seg-pill {
  color: var(--font-color-grid);
}




.hdr-seg-pill.selected {
  background: var(--chart-button-active-sidebar) !important;
  /* Solid white background */
  color: var(--color-white) !important;
  /* Black/Dark text when selected */
}

.hdr-seg-pill:hover:not(.selected) {
  background: rgba(255, 255, 255, 0.15);
  /* Subtle bubble effect on hover */
}

/* Matching the 10D/10Y gray bubble look from image */
.hdr-seg-pill:active {
  background: rgba(255, 255, 255, 0.25);
}

.hdr-seg-chevron {
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--font-color-grid);
  border-radius: 4px;
  transition: all 0.2s ease;
}

[data-theme='dark'] .hdr-seg-chevron,
.dark-mode .hdr-seg-chevron,
.dark .hdr-seg-chevron {
  color: var(--font-color-grid);
}




.hdr-seg-chevron.open {
  transform: rotate(180deg);
}

.hdr-seg-chevron:hover {
  background: var(--color-transparent-white);
}

.hdr-dropdown-button {
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--font-color-grid);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.hdr-dropdown-button:hover {
  background: var(--chart-btn-bg);
  border-color: var(--chart-btn-border);
}

.dark .hdr-dropdown-button {
  border-color: #363a45;
}

.dark .hdr-dropdown-button:hover {
  background: #2a2e39;
  border-color: #4a4e59;
}

.hdr-chevron {
  transition: transform 0.2s ease;
}

.hdr-chevron.open {
  transform: rotate(180deg);
}

.hdr-dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: var(--cards-background-color);
  border: 1px solid var(--chart-btn-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 4px;
  margin: 0;
  min-width: 110px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  animation: popout-fade-in 0.15s ease-out;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

.hdr-dropdown-menu::-webkit-scrollbar {
  width: 3px;
}

.hdr-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.hdr-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.dark .hdr-dropdown-menu {
  background: var(--cards-background-color);
  border-color: #363a45;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.hdr-dropdown-menu li {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--font-color-grid);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.1s ease;
}

.dark .hdr-dropdown-menu li {
  color: var(--font-color-grid);
}

.hdr-dropdown-menu li:hover {
  background: var(--menu-item-hover);
  color: var(--chart-ticker-color);
}

.hdr-dropdown-menu li.selected {
  background: var(--chart-btn-active-bg);
  color: var(--chart-indigo-primary);
  font-weight: 600;
}

.hdr-dropdown-divider {
  height: 1px !important;
  padding: 0 !important;
  margin: 4px 8px !important;
  background: var(--chart-btn-border) !important;
  cursor: default !important;
  pointer-events: none;
}

.dark .hdr-dropdown-divider {
  background: #363a45 !important;
}

.tvlike-popout-timeframe {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--popup-foreground-color);
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  min-width: 160px;
  max-height: 450px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

.tvlike-popout-timeframe::-webkit-scrollbar {
  width: 2px;
}

.tvlike-popout-timeframe::-webkit-scrollbar-track {
  background: transparent;
}

.tvlike-popout-timeframe::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.tvlike-popout-timeframe::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

.tvlike-popout-timeframe::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-timeframe::-webkit-scrollbar-button:start:decrement,
.tvlike-popout-timeframe::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-timeframe::-webkit-scrollbar-corner {
  display: none !important;
}

.tvlike-popout-timeframe::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-popout-timeframe::-webkit-scrollbar-button:double-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tvlike-timeframe-option {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--font-color-grid);
  font-size: 14px;
  font-weight: 400;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.1s ease;
}

.dark .tvlike-timeframe-option {
  color: var(--font-color-grid);
}

.tvlike-timeframe-option:hover {
  background-color: var(--chart-indicator-hover);
}

.dark .tvlike-timeframe-option:hover {
  background-color: #2a2e39;
}

.tvlike-timeframe-option.selected {
  color: var(--color-primary);
  background-color: var(--chart-indicator-hover);
}

.dark .tvlike-timeframe-option.selected {
  color: #2962ff;
  background-color: #2a2e39;
}

.tvlike-timeframe-option.selected .tvlike-timeframe-label {
  color: var(--color-primary);
  font-weight: 600;
}

.tvlike-timeframe-option .tvlike-timeframe-label {
  color: inherit;
  font-weight: inherit;
}

.tvlike-timeframe-option.selected .tvlike-timeframe-star {
  color: #ffffff;
}

.tvlike-timeframe-option .tvlike-timeframe-star {
  color: #6c757d;
  font-size: 12px;
}

.tvlike-timeframe-divider {
  height: 2px;
  background-color: var(--chart-btn-border);
}

.tvlike-timeframe-section-header {
  padding: 10px 16px 4px 16px;
  color: #787b86;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Chip-style popout variant */
.tvlike-popout-timeframe--chips {
  min-width: 200px;
  padding: 8px 12px;
}

.tvlike-chip-section {
  margin-bottom: 8px;
}

.tvlike-chip-section:last-child {
  margin-bottom: 0;
}

.tvlike-chip-section-header {
  color: #787b86;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 4px 6px 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.tvlike-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tvlike-chip {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--font-color-grid);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1;
}

.tvlike-chip:hover {
  background-color: #f0f3fa;
}

.tvlike-chip.selected {
  color: var(--color-primary);
  background-color: var(--chart-btn-active-bg);
  font-weight: 700;
}

/* Dark theme support for chips */
.dark .tvlike-chip-section-header {
  color: #787b86;
}

.dark .tvlike-chip {
  color: var(--font-color-grid);
}

.dark .tvlike-chip:hover {
  background-color: #2a2e39;
}

.dark .tvlike-chip.selected {
  color: #2962ff;
  background-color: rgba(41, 98, 255, 0.15);
}

/* AdvanceChart StockChart (minimal embed) */
.advance-stock-chart .advance-stock-chart-inner,
.advance-stock-chart .chart-section-pixi {
  flex: 1 1 0;
  min-height: 0;
}

.advance-stock-chart-symbol-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.advance-stock-chart-symbol-bar .search-price-header-container {
  flex: 1 1 auto;
  min-width: 140px;
  margin-bottom: 0;
}

.advance-stock-chart-open-chart-btn {
  flex-shrink: 0;
  margin: 0 0 0 auto;
  padding: 4px 10px;
  min-height: 28px;
  border: none;
  background: var(--button-bg-color);
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--font-label-size, 12px);
  font-weight: 500;
  color: var(--color-white, #ffffff);
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.advance-stock-chart-open-chart-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

.advance-stock-chart-open-chart-btn__icon path {
  fill: currentColor !important;
}

.advance-stock-chart-open-chart-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  filter: brightness(1.05);
}

.advance-stock-chart-open-chart-btn:focus-visible {
  outline: 2px solid var(--color-primary, #0070e4);
  outline-offset: 2px;
}

.advance-stock-chart-open-chart-btn:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  filter: none;
}

.advance-stock-chart .chart-canvas {
  min-height: 100px !important;
}

/* Transparent when opened via StockChart */
.advance-stock-chart--transparent {
  background: transparent !important;
}

.advance-stock-chart--transparent .chart-section-pixi {
  background: transparent !important;
}

.advance-stock-chart--transparent .chart-section-pixi .chart-canvas,
.advance-stock-chart--transparent .chart-canvas {
  background: transparent !important;
}

.advance-stock-chart--transparent .advance-stock-chart-symbol-bar {
  background: transparent;
}

[data-theme="dark"].advance-stock-chart--transparent .advance-stock-chart-symbol-bar,
.advance-stock-chart--transparent[data-theme="dark"] .advance-stock-chart-symbol-bar {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* PIXI.js Chart Section Styles */
.chart-section-pixi {
  position: relative;
  background: var(--popup-foreground-color);
  border: none;
  border-radius: 0;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  min-height: 100px !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  box-sizing: border-box;
}

.chart-canvas {
  cursor: crosshair;
  image-rendering: auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
  position: relative;
  display: block;
  box-sizing: border-box;
}

/* Fullscreen on wrapper to keep controls visible */
.chart-section-pixi:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
}

.chart-section-pixi:fullscreen .chart-canvas {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

.chart-canvas:active {
  cursor: grabbing;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  padding: 12px 16px;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
}

/* Legacy spinner kept for any residual class use */
.loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: conic-gradient(var(--chart-indigo-primary) 10%, var(--chart-btn-active-border) 10%, var(--chart-indigo-hover) 40%, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: spinring 1.2s linear infinite;
}

@keyframes spinring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.chart-loading p {
  margin: 0;
  color: var(--chart-secondary-text);
  font-size: 13px;
}

.chart-section-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-section-error h3 {
  margin: 0 0 12px 0;
  color: var(--color-danger);
  font-size: 18px;
}

.chart-section-error p {
  margin: 0 0 16px 0;
  color: var(--chart-secondary-text);
  font-size: 14px;
}

.chart-section-error button {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.chart-section-error button:hover {
  background: var(--color-primary-dark);
}

/* Dark theme support */
[data-theme="dark"] .chart-section-pixi {
  background: var(--popup-foreground-color) !important;
  border-color: #333;
}

[data-theme="dark"] .chart-loading p {
  color: var(--chart-secondary-text);
}

[data-theme="dark"] .chart-section-error {
  background: var(--chart-indicator-bg);
  color: var(--font-color-graph) !important;
}

[data-theme="dark"] .chart-section-error h3 {
  color: var(--color-danger);
}

[data-theme="dark"] .chart-section-error p {
  color: var(--chart-secondary-text);
}

/* TradingView-style Zoom Controls */
.chart-zoom-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.chart-zoom-controls:hover {
  opacity: 1;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-white);
  border: none;
  border-radius: 10px;
  color: var(--chart-ticker-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.zoom-btn:hover {
  background: #ffffff;
  color: #6366f1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.zoom-btn:active {
  background: #f8f9fa;
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.zoom-percent {
  font-size: 13px;
  color: #6a6d78;
  min-width: 48px;
  text-align: center;
}

.zoom-sep {
  width: 28px;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}



[data-theme="light"] .zoom-btn {
  color: #6a6d78;
}

[data-theme="light"] .zoom-btn:hover {
  background: rgb(255, 255, 255);
  color: #131722;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Resizable Panel Styles */
.chart-panel-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: transparent;
  cursor: row-resize;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.chart-panel-resize-handle:hover {
  background: rgba(99, 102, 241, 0.15);
}

.chart-panel-resize-handle:active {
  background: rgba(99, 102, 241, 0.25);
}

.chart-panel-resize-handle::before {
  content: '';
  width: 40px;
  height: 3px;
  background: #d1d5db;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.chart-panel-resize-handle:hover::before {
  background: #6366f1;
  width: 60px;
}

.dark .chart-panel-resize-handle:hover {
  background: rgba(99, 102, 241, 0.2);
}

.dark .chart-panel-resize-handle::before {
  background: #4b5563;
}

.dark .chart-panel-resize-handle:hover::before {
  background: #818cf8;
}

/* Panel container for indicators */
.indicator-panel {
  position: relative;
  min-height: 80px;
  max-height: 300px;
  overflow: hidden;
  border-top: 1px solid #e5e7eb;
}

.dark .indicator-panel {
  border-top-color: #374151;
}

.themed-svg-icon {
  background-color: var(--font-color-grid);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  display: inline-block;
}

.chart-dialog-template .themed-svg-icon {
  background-color: var(--font-color-grid) !important;

}

.chart-dialog-template .hdr-seg-chevron {
  color: var(--font-color-grid) !important;
}


.chart-dialog-template .hdr-seg-pill {
  color: var(--font-color-grid) !important;
}

.chart-dialog-template .hdr-vert-divider {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--font-color-grid), rgba(255, 255, 255, 0));
}

.tvlike-sidebar-btn-wrapper.active .themed-svg-icon {
  background-color: var(--color-white) !important;
}

.header-files-templates {
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: var(--font-item-label-size);
  line-height: var(--font-item-label-size);
  font-weight: 400;
  font-style: normal;
}

.chart-dialog-template .header-files-templates {
  color: var(--font-color-grid);
}



.tvlike-popout-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background-color: var(--font-color-grid);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  display: inline-block;
  vertical-align: middle;
}

.tvlike-app.chart-popout-full,
.tvlike-app.chart-tab-panel {
  height: 100%;
  min-height: 0;
  border-radius: 0 !important;
}

.dashboard-popout-root .tvlike-app.chart-popout-full {
  padding: 0;
}

/* --- Chart Stock Selector Sidebar --- */
.tvlike-stock-selector-container {
  width: 20%;
  min-width: 272px;
  max-width: 320px;
  height: 100%;
  margin-inline-end: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.chart-stock-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--popup-background-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  font-family: var(--font-family);
  border: 1px solid var(--glass-overlay-bg);
}

.dark .chart-stock-selector,
[data-theme="dark"] .chart-stock-selector {
  background: var(--popup-background-color);
  border-color: var(--glass-overlay-bg);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}

/* Header */
.stock-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--chart-button-active-sidebar);
  padding: 12px 14px;
  color: var(--color-white);
  flex-shrink: 0;
  display: none;
}

.stock-selector-header__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stock-selector-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.stock-selector-count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.15px;
}

.stock-selector-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.18s ease;
  flex-shrink: 0;
}

.stock-selector-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Search */
.stock-selector-search-container {
  padding: 12px 12px 8px;
  background: var(--popup-background-color);
  flex-shrink: 0;
}

.stock-selector-search-container .stock-selector-search-field .MuiOutlinedInput-root {
  border-radius: 8px;
  background: var(--popup-foreground-color);
  font-size: 13px;
}

.stock-selector-search-container .stock-selector-search-field .MuiOutlinedInput-notchedOutline {
  border-color: var(--glass-overlay-bg);
}

.stock-selector-search-container .stock-selector-search-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 62, 126, 0.35);
}

.stock-selector-search-container .stock-selector-search-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-global);
  border-width: 1px;
}

.stock-selector-search-container .stock-selector-search-field .MuiOutlinedInput-input {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13px;
}

/* List */
.stock-selector-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--popup-background-color);
}

.stock-selector-list::-webkit-scrollbar {
  width: 5px;
}

.stock-selector-list::-webkit-scrollbar-track {
  background: transparent;
}

.stock-selector-list::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 120, 0.18);
  border-radius: 4px;
}

.stock-selector-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 120, 0.32);
}

/* Symbol item */
.stock-selector-item {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--popup-foreground-color);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}

.stock-selector-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background-color 0.18s ease;
}

.stock-selector-item:hover {
  border-color: rgba(0, 62, 126, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dark .stock-selector-item:hover,
[data-theme="dark"] .stock-selector-item:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.stock-selector-item.is-selected {
  background: rgba(0, 98, 255, 0.07);
  border-color: rgba(0, 98, 255, 0.22);
  box-shadow: 0 1px 6px rgba(0, 98, 255, 0.08);
}

.dark .stock-selector-item.is-selected,
[data-theme="dark"] .stock-selector-item.is-selected {
  background: rgba(0, 112, 228, 0.16);
  border-color: rgba(0, 112, 228, 0.35);
}

.stock-selector-item.is-selected::before {
  background: var(--border-color-global);
}

.stock-selector-item__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.stock-selector-item__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stock-selector-item__symbol {
  font-size: 13px;
  font-weight: 700;
  color: var(--font-color-grid);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.stock-selector-item__name {
  font-size: 11px;
  font-weight: 400;
  color: var(--font-color-grid);
  opacity: 0.58;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-selector-item__quote {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.stock-selector-item__price {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stock-selector-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stock-selector-item__change {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  line-height: 1;
}

.stock-selector-item__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.stock-selector-item__badge.trend-up,
.stock-selector-item__price.trend-up,
.stock-selector-item__change.trend-up {
  color: #089981;
}

.stock-selector-item__badge.trend-down,
.stock-selector-item__price.trend-down,
.stock-selector-item__change.trend-down {
  color: #f23645;
}

.stock-selector-item__badge.trend-flat,
.stock-selector-item__price.trend-flat,
.stock-selector-item__change.trend-flat {
  color: var(--font-color-grid);
  opacity: 0.72;
}

.stock-selector-item__badge.trend-up {
  background: rgba(8, 153, 129, 0.12);
}

.stock-selector-item__badge.trend-down {
  background: rgba(242, 54, 69, 0.12);
}

.stock-selector-item__badge.trend-flat {
  background: rgba(120, 123, 134, 0.1);
}

.stock-selector-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--font-color-grid);
  opacity: 0.5;
  font-size: 13px;
  font-weight: 500;
}

/* Floating Detail Panel container */
.chart-detail-panel {
  position: absolute;
  top: 6px;
  left: 700px;
  right: auto;
  z-index: 100;
  width: 350px;
  background-color: var(--popup-foreground-color);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 12px;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  pointer-events: auto;
  /* Allow interactions on the panel */
}

[dir="rtl"] .chart-detail-panel {
  left: auto;
  right: 420px;
}



/* Header styling */
.chart-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-detail-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.detail-symbol {
  font-size: 16px;
  font-weight: 700;
  color: var(--font-color-grid);
}



.detail-company-name {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}



.chart-detail-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-price {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-change {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-trend-icon {
  flex-shrink: 0;
}

/* Divider styling */
.chart-detail-divider {
  height: 1px;
  background-color: #f1f5f9;
  margin: 12px 0;
}

.chart-detail-panel.dark .chart-detail-divider {
  background-color: #2a2e39;
}

/* Metrics Section */
.chart-detail-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.metric-row.secondary {
  justify-content: flex-start;
  gap: 24px;
}

.metric-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.metric-col.double {
  flex: 2;
}

.metric-label-stock {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}

.chart-detail-panel.dark .metric-label {
  color: #787b86;
}

.metric-value-stock {
  font-size: 14px;
  font-weight: 700;
  color: var(--font-color-grid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-detail-panel.dark .metric-value {
  color: var(--font-color-grid);
}

/* Toggle tab styling */
.chart-detail-toggle-tab {
  position: absolute;
  bottom: -22px;
  right: 24px;
  height: 22px;
  width: 44px;
  background-color: var(--popup-foreground-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  outline: none;
  z-index: 10;
  padding: 0;
}

.chart-detail-panel.dark .chart-detail-toggle-tab {
  background-color: var(--font-color-grid);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.chart-detail-toggle-tab .chevron-arrow {
  font-size: 10px;
  color: var(--font-color-grid);
  display: inline-block;
  transition: transform 0.3s;
}

.chart-detail-panel.dark .chart-detail-toggle-tab .chevron-arrow {
  color: var(--font-color-grid);
}

.chart-detail-toggle-tab:hover .chevron-arrow {
  color: var(--font-color-grid);
}

.chart-detail-panel.dark .chart-detail-toggle-tab:hover .chevron-arrow {
  color: var(--font-color-grid);
}

/* Custom smooth inverse rounded attachment corners */
.chart-detail-toggle-tab::before,
.chart-detail-toggle-tab::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  background: transparent;
  pointer-events: none;
}

.chart-detail-toggle-tab::before {
  left: -12px;
  border-top-right-radius: 12px;
  box-shadow: 4px -4px 0 4px var(--popup-foreground-color);
}

.chart-detail-toggle-tab::after {
  right: -12px;
  border-top-left-radius: 12px;
  box-shadow: -4px -4px 0 4px var(--popup-foreground-color);
}

.chart-detail-panel.dark .chart-detail-toggle-tab::before {
  box-shadow: 4px -4px 0 4px #1e222d;
}

.chart-detail-panel.dark .chart-detail-toggle-tab::after {
  box-shadow: -4px -4px 0 4px #1e222d;
}

/* Collapsed state adjustments */
.chart-detail-panel.collapsed {
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Path color override for SVGs inside the header icon buttons */
.tvlike-header-icon-btn svg path {
  fill: currentColor !important;
}

.tvlike-header-icon-btn.active svg path {
  fill: var(--color-white) !important;
}

.tvlike-header-icon-btn svg {
  display: block;
}

/* Detail panel trend icons and arrow styling */
.detail-price-arrow {
  width: 10px;
  height: 9px;
  display: inline-block;
  margin-right: 4px;
}

.detail-price-arrow path {
  fill: currentColor !important;
}

.detail-trend-icon {
  width: 13px;
  height: 7px;
  display: inline-block;
  margin-right: 4px;
}

.detail-trend-icon path {
  stroke: currentColor !important;
}

.chart-detail-toggle-tab .chevron-arrow path {
  fill: currentColor !important;
}
/* Small spinner for chart / graph loading overlays */

.brand-splash-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  user-select: none;
}

.brand-splash-loader__spinner {
  border-radius: 50%;
  border-style: solid;
  border-color: var(--chart-btn-active-border, rgba(0, 0, 0, 0.12));
  border-top-color: var(--chart-indigo-primary, #2962ff);
  animation: brand-splash-loader-spin 0.75s linear infinite;
  box-sizing: border-box;
}

.brand-splash-loader--sm .brand-splash-loader__spinner {
  width: 22px;
  height: 22px;
  border-width: 2px;
}

.brand-splash-loader--md .brand-splash-loader__spinner {
  width: 28px;
  height: 28px;
  border-width: 2.5px;
}

.brand-splash-loader--lg .brand-splash-loader__spinner {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

.brand-splash-loader__label {
  margin: 0;
  font-size: 12px;
  color: var(--chart-secondary-text, var(--font-color, #666));
  text-align: center;
}

@keyframes brand-splash-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

[data-theme='dark'] .brand-splash-loader__spinner,
[data-theme='flat-dark'] .brand-splash-loader__spinner,
[data-theme='darkBlack'] .brand-splash-loader__spinner {
  border-color: rgba(255, 255, 255, 0.15);
  border-top-color: var(--chart-indigo-primary, #5b9bff);
}

[data-theme='dark'] .brand-splash-loader__label,
[data-theme='flat-dark'] .brand-splash-loader__label,
[data-theme='darkBlack'] .brand-splash-loader__label {
  color: var(--chart-secondary-text, var(--font-color, #ccc));
}

.sector-summary-container {
  /* padding: 8px; */
  border-radius: 8px;
}

.section-label {
  color: #fff;
  margin-bottom: 6px;
}

/* Group Headers Container */
.group-headers-container {
  display: flex;
  gap: 0;
  margin-bottom: -2px;
}

.group-header {
  padding: 8px 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--color-black);
  border-bottom: none;
  position: relative;
}

/* Sector Group Header */
.sector-group-header {
  /* background-color: #0d2345; */
  /* color: #9fc0ff; */
  /* background-color: var(--color-black); */
  /* color: #9fc0ff; */
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  /* border-radius: 4px 0 0 0; */
  flex-shrink: 0;
}

/* Index Group Header */
.index-group-header {
  /* background-color: var(--color-black); */
  /* color: #b4d2ff; */
  /* background-color: #132a4e; */
  /* color: #b4d2ff; */
  border-top: 1px solid black;
  border-right: 1px solid black;
  /* border-left: 1px solid black; */
  flex-shrink: 0;
}

/* Cash Map Group Header */
.cashmap-group-header {
  grid-column: 14 / 15; /* Span last column */
  /* background-color: #1c345a; */
  /* color: #ffffff; */
  /* background-color: var(--color-black); */
  color: #ffffff;
  border-left: none;
  border-right: 1px solid black;
  border-radius: 0 4px 0 0;
  min-width: 80px; /* Adjust based on your column widths */
}

.sector-summary-grid .ag-header {
  border: none !important;
}
.sector-summary-grid .ag-header-row-column-group {
  /* background: transparent !important; */
}

.sector-summary-grid .ag-header-row-column  {
  background: var(--ag-header-container-bg) !important;
  border: none !important;
  
}

.sector-summary-grid {
  /* background: var(--ag-header-container-bg) !important; */
  --ag-background-color: transparent !important;
  --ag-header-background-color: transparent !important;
}

/* .sector-summary-grid .ag-row-even { */
  /* background: var(--color-white) !important; */
  /* border: none !important; */
/* } */

/* .sector-summary-grid .ag-header-container { */
  /* border-top: 1px solid black; */
  /* border-left: 1px solid black; */
  /* border-right: 1px solid black; */
  /* border-radius: 4px ; */
  /* background: transparent !important; */
/* } */
/* Wrapper width / margin */
.date-only-field-wrapper {
  width: 150px;
  /* default width, can override via className */
}

.date-only-field-icon {
  fill: var(--date-icon-color) !important;
  width: 16px !important;
  height: 16px !important;
}

/* Input field root */
.date-only-field-wrapper .MuiOutlinedInput-root {
  height: var(--filter-heights);
  /* total input height */
  background-color: var(--popup-foreground-color);
  border-radius: var(--border-radius);

  /* Border colors */
  & fieldset {
    border-color: var(--border-color-inactive);
  }

  &.Mui-focused fieldset {
    border-color: var(--border-color-global);
  }

  &:hover fieldset {
    border-color: var(--border-color-global);
  }
}

.date-only-field-wrapper .MuiInputLabel-shrink {
  top: 0px !important;
}

/* Input text & label alignment */
.date-only-field-wrapper .MuiOutlinedInput-input {
  padding: 10px 14px;
  box-sizing: border-box;
  font-size: var(--font-value-size);
  color: var(--font-color-grid);
}

.date-only-field-wrapper .MuiInputLabel-root {
  top: -08px;
  font-size: var(--font-value-size);
  color: var(--font-color-grid);
}

/* Icon button */
.date-only-field-wrapper .MuiIconButton-root {
  color: var(--font-color-grid);
}

.date-only-field-wrapper .MuiIconButton-root:hover {
  /* background-color: rgba(25, 118, 210, 0.08); */
}

.date-only-field-wrapper .MuiIconButton-root .MuiSvgIcon-root {
  fill: var(--font-color-grid) !important;
  width: 16px;
  height: 16px;
}

/* Calendar popup (MUI portal — class set via slotProps) */
.date-only-field-calendar-paper,
.date-only-field-calendar-layout {
  background-color: var(--popup-foreground-color) !important;
  color: var(--font-color-grid) !important;
}

.date-only-field-calendar-paper .MuiDateCalendar-root,
.date-only-field-calendar-layout .MuiDateCalendar-root {
  background-color: var(--popup-foreground-color);
  color: var(--font-color-grid);
}

.date-only-field-calendar-paper .MuiPickersCalendarHeader-label,
.date-only-field-calendar-paper .MuiDayCalendar-weekDayLabel,
.date-only-field-calendar-paper .MuiPickersDay-root,
.date-only-field-calendar-paper .MuiPickersYear-yearButton,
.date-only-field-calendar-paper .MuiPickersMonth-monthButton,
.date-only-field-calendar-paper .MuiTypography-root,
.date-only-field-calendar-layout .MuiPickersCalendarHeader-label,
.date-only-field-calendar-layout .MuiDayCalendar-weekDayLabel,
.date-only-field-calendar-layout .MuiPickersDay-root,
.date-only-field-calendar-layout .MuiPickersYear-yearButton,
.date-only-field-calendar-layout .MuiPickersMonth-monthButton,
.date-only-field-calendar-layout .MuiTypography-root {
  color: var(--font-color-grid);
}

.date-only-field-calendar-paper .MuiSvgIcon-root,
.date-only-field-calendar-layout .MuiSvgIcon-root {
  fill: var(--font-color-grid) !important;
}

/* Dark theme: MUI uses light text.secondary for outside-month days; keep them visible on popup bg */
[data-theme='dark'] .date-only-field-calendar-paper .MuiPickersDay-root.MuiPickersDay-dayOutsideMonth,
[data-theme='dark'] .date-only-field-calendar-layout .MuiPickersDay-root.MuiPickersDay-dayOutsideMonth {
  color: var(--detail-quote-label-color) !important;
  opacity: 1;
}
[data-theme='dark'] .MuiPickersDay-root.Mui-disabled:not(.Mui-selected){
  color: rgba(0,0,0,0.5) !important
}

.stock-history-search-button {
  width: 100px;
  height: var(--filter-heights);
}

/* RTL: date pickers inside Stock History and other filters */
.date-only-field-wrapper--rtl .MuiOutlinedInput-root {
  direction: rtl;
}

.date-only-field-wrapper--rtl .MuiInputLabel-root {
  left: auto;
  right: 14px;
  transform-origin: top right;
}

.date-only-field-wrapper--rtl .MuiInputLabel-shrink {
  transform: translate(0, -9px) scale(0.75);
  transform-origin: top right;
}

.date-only-field-wrapper--rtl .MuiOutlinedInput-input {
  text-align: right;
}

.date-only-field-wrapper--rtl .MuiInputAdornment-root {
  margin-left: 0;
  margin-right: 0;
}

.date-only-field-wrapper--rtl .MuiIconButton-root {
  margin-inline-start: 4px;
  margin-inline-end: 0;
}

[dir='rtl'] .date-only-field-calendar-paper,
[dir='rtl'] .date-only-field-calendar-layout {
  direction: rtl;
}

[dir='rtl'] .date-only-field-calendar-paper .MuiPickersCalendarHeader-root,
[dir='rtl'] .date-only-field-calendar-layout .MuiPickersCalendarHeader-root {
  direction: rtl;
}

.stock-history-root {
  display: flex;
  flex-direction: column;
  gap: var(--global-margin);
  min-height: 0;
  height: 100%;
}

.stock-history-filters {
  flex-shrink: 0;
}

.stock-history-filters-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--global-margin);
}

.stock-history-mode-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: 4px;
}

.stock-history-mode-radio .MuiFormControlLabel-root {
  margin-inline-end: 8px;
}

.stock-history-mode-radio .MuiFormControlLabel-label {
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  color: var(--font-color-grid);
}

.stock-history-date-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--global-margin);
}

.stock-history-content {
  display: flex;
  flex-direction: column;
  gap: var(--global-margin);
  flex: 1;
  min-height: 0;
  background-color: var(--popup-foreground-color);
  border-radius: var(--border-radius);
  padding: var(--global-padding);
}

.stock-history-hero {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.4fr) minmax(260px, 1.6fr);
  /* gap: var(--global-margin); */
  align-items: center;
  padding: 05px 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--performance-card-bg-color);
  flex-shrink: 0;
}

.stock-history-hero-identity {
  min-width: 0;
}

.stock-history-hero-meta {
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-weight: 400 !important;
  color: var(--detail-quote-label-color) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-history-hero-symbol {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-title) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--font-color-grid) !important;
}

.stock-history-hero-price-block {
  min-width: 0;
}

.stock-history-hero-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--global-margin);
}

.stock-history-hero-price {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-title) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--font-color-grid) !important;
}

.stock-history-hero-currency {
  font-family: var(--font-family) !important;
  font-size: var(--font-value-size) !important;
  font-weight: 500 !important;
  color: var(--detail-quote-label-color) !important;
}

.stock-history-hero-change {
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.stock-history-hero-change--up {
  color: var(--market-index-green) !important;
}

.stock-history-hero-change--down {
  color: var(--market-index-red) !important;
}

.stock-history-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: var(--global-margin);
}

.stock-history-hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--global-margin);
  min-width: 0;
}

.stock-history-hero-stat-label {
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-weight: 500 !important;
  color: var(--detail-quote-label-color) !important;
  text-transform: uppercase;
}

.stock-history-root[dir='rtl'] .stock-history-hero-stat-label {
  text-transform: none;
}

.stock-history-root[dir='rtl'] .stock-history-filters-body,
.stock-history-root[dir='rtl'] .stock-history-date-filter,
.stock-history-root[dir='rtl'] .stock-history-panel-header,
.stock-history-root[dir='rtl'] .stock-history-panel-header-actions {
  direction: rtl;
}

.stock-history-root[dir='rtl'] .stock-history-view-toggle {
  direction: rtl;
}

.stock-history-hero-stat-value {
  font-family: var(--font-family) !important;
  font-size: var(--font-value-size) !important;
  font-weight: 600 !important;
  color: var(--font-color-grid) !important;
}

.stock-history-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: var(--global-margin);
  flex: 1;
  min-height: 0;
}

.stock-history-dashboard-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.stock-history-dashboard-announcements {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.stock-history-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--performance-card-bg-color);
  overflow: hidden;
  min-height: 0;
}

.stock-history-panel--chart {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.stock-history-panel--table {
  flex-shrink: 0;
}

.stock-history-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--global-margin);
  padding: 05px 30px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.stock-history-panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--global-margin);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.stock-history-panel-header-text {
  min-width: 0;
}

.stock-history-panel-title {
  font-family: var(--font-family) !important;
  font-size: var(--font-value-size) !important;
  font-weight: 600 !important;
  color: var(--font-color-grid) !important;
}

.stock-history-panel-subtitle {
  font-family: var(--font-family) !important;
  font-size: var(--font-label-size) !important;
  font-weight: 400 !important;
  color: var(--detail-quote-label-color) !important;
}

.stock-history-timeframe-group {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--global-margin);
  padding: var(--global-padding);
  border-radius: var(--border-radius);
  background: var(--button-bg-color-secondary);
  border: 1px solid var(--color-border);
}

.stock-history-timeframe-btn {
  border: none;
  background: transparent;
  color: var(--detail-quote-label-color);
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  font-weight: 600;
  padding: var(--global-padding);
  border-radius: var(--border-radius);
  cursor: pointer;
  line-height: 1;
}

.stock-history-timeframe-btn:hover {
  background: var(--dropdown-selected);
  color: var(--font-color-grid);
}

.stock-history-timeframe-btn--active {
  background: var(--dropdown-selected);
  color: var(--tab-active-color);
}

.stock-history-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--global-margin);
  /* padding: var(--global-padding); */
  border-radius: var(--border-radius);
  background: var(--button-bg-color-secondary);
  border: 1px solid var(--color-border);
}

.stock-history-view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--detail-quote-label-color);
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  font-weight: 600;
  padding: 15px;
  border-radius: var(--border-radius);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.stock-history-view-toggle-btn:hover {
  background: var(--dropdown-selected);
  color: var(--font-color-grid);
}

.stock-history-view-toggle-btn--active {
  background: var(--dropdown-selected);
  color: var(--tab-active-color);
}

.stock-history-chart-wrap {
  flex: 1;
  min-height: 0;
  padding: var(--global-padding);
  display: flex;
}

.stock-history-chart-wrap .data-area-chart--fill {
  flex: 1;
  width: 100%;
}

.stock-history-grid-wrap {
  flex: 1;
  min-height: 0;
  padding: var(--global-padding);
  display: flex;
  flex-direction: column;
}

.stock-history-grid {
  width: 100%;
  min-height: 0;
}

.stock-history-cell--up {
  color: var(--market-index-green) !important;
}

.stock-history-cell--down {
  color: var(--market-index-red) !important;
}

.data-area-chart-empty-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--detail-quote-label-color);
  font-family: var(--font-family);
  font-size: var(--font-label-size);
}

@media (max-width: 1100px) {
  .stock-history-hero {
    grid-template-columns: 1fr;
  }

  .stock-history-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .stock-history-hero-stats {
    grid-template-columns: 1fr;
  }

  .stock-history-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .stock-history-timeframe-group,
  .stock-history-view-toggle {
    width: 100%;
    justify-content: space-between;
  }
}

.news-widget-root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.news-widget-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--news-background-color);
  border-radius: 10px;
}

.news-widget-header {
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-weight: 600;
  font-style: normal;
  font-size: var(--font-item-label-size);
  line-height: var(--font-item-label-size);
  flex-shrink: 0;
}

.news-widget-list {
  /* margin-top: 30px; */
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.news-widget-item {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-left: 2px solid var(--border-color-global);
  border-radius: 0;
  background: var(--popup-background-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
}

[dir="rtl"] .news-widget-item {
  border-left: none;
  border-right: 2px solid var(--border-color-global);
}

.news-widget-item-clickable {
  cursor: pointer;
}

.news-widget-item-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.news-widget-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.news-widget-item-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: var(--font-color-grid);
}

.news-widget-item-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.news-widget-title-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.news-widget-symbol {
  font-family: var(--font-family);
  font-weight: 600;
  font-style: normal;
  font-size: var(--font-size-small);
  line-height: var(--font-size-label);
  color: var(--border-color-global);
  flex-shrink: 0;
}

.news-widget-headline {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-small);
  line-height: var(--font-size-label);
  color: var(--font-color-grid, inherit);
  flex: 1;
  min-width: 0;
}

.news-widget-date {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--ag-cell-value);
  line-height: var(--ag-cell-value);
  color: var(--search-text-color);
}

.news-widget-source {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--ag-cell-value);
  line-height: var(--ag-cell-value);
  text-align: right;
  color: var(--font-color-grid, inherit);
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 14px;
  max-width: 35%;
}

.news-details-dialog-root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: var(--popup-foreground-color);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.news-details-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.news-details-source-inline {
  margin-top: 0;
  max-width: unset;
}

.news-details-text {
  margin-top: 24px;
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-small);
  line-height: var(--font-size-title);
  color: var(--font-color-grid, inherit);
  white-space: pre-wrap;
}

.news-details-body-html {
  white-space: normal;
  word-break: break-word;
}

.news-details-body-html a {
  color: var(--primary-color, #1565c0);
  text-decoration: underline;
  cursor: pointer;
}

.news-details-body-html a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.news-details-body-html p {
  margin: 0 0 0.75em;
}

.news-details-body-html p:last-child {
  margin-bottom: 0;
}

.news-details-body-html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75em 0;
  border-radius: 4px;
}

.news-details-body-html figure {
  margin: 0.75em 0;
  max-width: 100%;
}

.news-details-body-html figure img {
  margin: 0;
}

.news-details-body-html figcaption {
  margin-top: 0.35em;
  font-size: 0.9em;
  opacity: 0.85;
}

.news-widget-empty,
.news-widget-error {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
  margin-top: 16px;
  color: var(--font-color-grid, inherit);
}

.history-analyzer-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  gap: 12px;
}

.history-analyzer-search {
  flex-shrink: 0;
  max-width: 360px;
}

.history-analyzer-grid-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.history-analyzer-date-editor {
  width: 100%;
  min-width: 140px;
  padding: 2px 4px;
  box-sizing: border-box;
}

.history-analyzer-date-editor-field {
  width: 100%;
}

.history-analyzer-date-editor-field .MuiOutlinedInput-root {
  height: 32px;
}

/* SaveAsDialog Component Styles */

/* Main Dialog Container */
.save-as-dialog {
    z-index: 1300;
}

.save-as-dialog-paper {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    width: 400px!important;
    max-width: 500px;
}

/* Dialog Title */
.save-as-dialog-title {
    background: var(--modal-header-color) !important;
    color: var(--color-white) !important;
    /* padding: 16px 24px !important; */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 40px !important;
}

.dialog-title-text {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--font-color-grid) !important;
    /* padding-bottom: 10px !important; */
}

.close-button {
    color: var(--color-white) !important;
    padding: 4px !important;
    transition: background-color 0.2s ease;
}

.close-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dialog Content */
.save-as-dialog-content {
    padding: 15px !important;
    background-color: transparent;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Text Input Styling */
.file-name-input .MuiOutlinedInput-root {
    border-radius: 8px !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-gray-light) !important;
    transition: all 0.2s ease;
}

.file-name-input .MuiOutlinedInput-root:hover {
    border-color: var(--color-primary) !important;
}

.file-name-input .MuiOutlinedInput-root.Mui-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 228, 0.2) !important;
}

.file-name-input .MuiInputLabel-root {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    color: var(--color-gray-dark) !important;
}

.file-name-input .MuiInputLabel-root.Mui-focused {
    color: var(--color-primary) !important;
}

.file-name-input .MuiOutlinedInput-input {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    color: var(--color-black) !important;
    padding: 12px 16px !important;
}

.file-name-input .MuiFormHelperText-root {
    font-family: var(--font-family) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

.file-name-input .MuiFormHelperText-root.Mui-error {
    color: var(--color-danger) !important;
}

/* File Extension Hint */
.file-extension-hint {
    font-family: var(--font-family) !important;
    font-size: 12px !important;
    color: var(--color-gray-dark) !important;
    font-style: italic;
    margin-top: 4px;
}

/* Dialog Actions */
.save-as-dialog-actions {
    padding: 16px 24px !important;
    background-color: var(--color-white);
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    gap: 12px;
    justify-content: flex-end;
}

.save-as-dialog-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--popup-background-color) !important;
    /* padding: 10px; */
    border-radius: 10px;
}

.save-as-dialog-buttons-row {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 10px;
}

.action-buttons {
    flex: 1;
    height: 45px;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal !important;
    line-height: 14px !important;
    text-transform: none !important;
    border-radius: 10px !important;
    padding: 8px 20px !important;
}

/* Button Styling */
.cancel-button {
    background-color: var(--button-bg-color-secondary) !important;
    color: var(--font-color-grid) !important;
    border: 1px solid var(--border-color-inactive) !important;
}

/* .cancel-button:hover {
    border-color: var(--color-gray-medium) !important;
    background-color: var(--color-gray-lightest) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} */

.save-button {
    background: var(--button-bg-color) !important;
    color: var(--color-white) !important;
    border: none !important;
}

/* .save-button:hover {
    background: linear-gradient(92.01deg, #003E7E 0%, #0056b3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 112, 228, 0.4);
} */

.save-button:disabled {
    /*background: var(--color-gray-light) !important;
    color: var(--color-gray-medium) !important;*/
    opacity: 0.5;
    box-shadow: none !important;
    transform: none !important;
}

.save-button .MuiSvgIcon-root {
    font-size: 18px !important;
}

/* Dark Mode Styles */
.save-as-dialog.dark-mode .save-as-dialog-content {
    background-color: var(--color-gray-darkest);
}

.save-as-dialog.dark-mode .file-name-input .MuiOutlinedInput-root {
    background-color: var(--color-gray-darker) !important;
    border-color: var(--color-gray-medium) !important;
}

.save-as-dialog.dark-mode .file-name-input .MuiOutlinedInput-input {
    color: var(--color-white) !important;
}

.save-as-dialog.dark-mode .file-name-input .MuiInputLabel-root {
    color: var(--color-gray-light) !important;
}

.save-as-dialog.dark-mode .file-extension-hint {
    color: var(--color-gray-light) !important;
}

.save-as-dialog.dark-mode .save-as-dialog-actions {
    background-color: var(--color-gray-darker);
}

.save-as-dialog.dark-mode .cancel-button {
    background-color: var(--color-gray-darker) !important;
    color: var(--color-gray-light) !important;
    border-color: var(--color-gray-medium) !important;
}

.save-as-dialog.dark-mode .cancel-button:hover {
    background-color: var(--color-gray-dark) !important;
}

/* Responsive Design */
@media (max-width: 600px) {
    .save-as-dialog-paper {
        min-width: 320px;
        max-width: 90vw;
        margin: 16px;
    }
    
    .save-as-dialog-title {
        padding: 12px 16px !important;
    }
    
    .save-as-dialog-content {
        padding: 16px !important;
    }
    
    .save-as-dialog-actions {
        padding: 12px 16px !important;
        flex-direction: column-reverse;
    }
    
    .cancel-button,
    .save-button {
        width: 100%;
        margin: 0 !important;
    }
}

/* Animation for dialog appearance */
.save-as-dialog .MuiDialog-paper {
    animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Focus styles for accessibility */
.save-as-dialog .MuiButton-root:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.save-as-dialog .MuiTextField-root:focus-within {
    outline: none;
}

.whats-new-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  color: var(--font-color-grid, inherit);
}

.whats-new-subtitle {
  flex-shrink: 0;
  opacity: 0.8;
}

.whats-new-empty {
  flex: 1;
  min-height: 0;
  opacity: 0.75;
  padding: 12px 0;
  overflow: auto;
}

.whats-new-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.whats-new-item {
  flex-shrink: 0;
  border: 1px solid var(--border-color-global, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--popup-foreground-color, transparent);
}

.whats-new-item-version {
  display: block;
  opacity: 0.7;
  margin-bottom: 4px;
}

.whats-new-item-title {
  font-weight: 650 !important;
  margin-bottom: 4px !important;
}

.whats-new-item-body {
  opacity: 0.85;
  line-height: 1.45 !important;
}

.whats-new-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  flex-shrink: 0;
}

/* =============================================================
   TRADES HEADER — TradesHeader.css
   Light/Dark theme via CSS variables + responsive
   ============================================================= */

/* ── Light ── */
:root {
  --th-bg: #edfaf4;
  --th-border: #c6e8d5;
  --th-title: #0f172a;
  --th-subtitle: #64748b;
  --th-label: #64748b;
  --th-value: #1e293b;
  --th-divider: #c6e8d5;
  --th-close-bg: #ffffff;
  --th-close-border: #d1eadb;
  --th-close-color: #475569;
  --th-close-hover-bg: #f0fdf4;
  --th-min-h: 54px;
}

/* ── Dark ── */
[data-theme="dark"] {
  --th-bg: #152e20;
  --th-border: #1f4030;
  --th-title: #f1f5f9;
  --th-subtitle: #64748b;
  --th-label: #64748b;
  --th-value: #e2e8f0;
  --th-divider: #1f4030;
  --th-close-bg: #1e2840;
  --th-close-border: #2d3a52;
  --th-close-color: #94a3b8;
  --th-close-hover-bg: #263047;
}

/* ── Side specific overrides (Buy/Sell) ── */
.th-root[data-side="buy"] {
  background: var(--tw-header-green) !important;
  background-color: var(--tw-header-green) !important;
  --th-bg: var(--tw-header-green);
  --th-border: rgba(43, 43, 43, 1);
}

.th-root[data-side="sell"] {
  background: var(--tw-header-red) !important;
  background-color: var(--tw-header-red) !important;
  --th-bg: var(--tw-header-red);
  --th-border: rgba(43, 43, 43, 1);
  --th-divider: rgba(235, 200, 200, 1);
  --th-close-border: rgba(235, 200, 200, 1);
  --th-close-hover-bg: rgba(255, 240, 240, 1);
}

[data-theme="dark"].th-root[data-side="buy"] {
  --th-bg: rgba(20, 50, 25, 1);
  --th-border: rgba(30, 70, 40, 1);
}

[data-theme="dark"].th-root[data-side="sell"] {
  --th-bg: rgba(50, 20, 20, 1);
  --th-border: rgba(70, 30, 30, 1);
  --th-divider: rgba(70, 30, 30, 1);
  --th-close-bg: #2a1616;
  --th-close-border: #3d2222;
  --th-close-hover-bg: #3d1c1c;
}

/* =============================================================
   ROOT
   ============================================================= */

.th-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--th-bg);
  padding: 8px 16px;
  border-bottom: 1px solid var(--th-border);
  min-height: var(--th-min-h);
  user-select: none;
  box-sizing: border-box;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
}

/* =============================================================
   LEFT SIDE
   ============================================================= */

.th-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.th-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.th-title {
  font-family: var(--font-family) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--font-color-grid) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.th-subtitle {
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--font-color-grid) !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* ── Vertical divider between title and cash ── */
.th-divider-v {
  width: 1px;
  height: 28px;
  background-color: var(--th-divider);
  flex-shrink: 0;
}

/* ── Cash Amount block ── */
.th-cash-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.th-cash-label {
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--font-color-grid) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.th-cash-value {
  font-family: var(--font-family) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--font-color-grid) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Ticker data block ── */
.th-ticker-data {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 1;
}

.th-ticker-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.th-ticker-label {
  font-family: var(--font-family) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: var(--th-label) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.th-ticker-value {
  font-family: var(--font-family) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--th-value) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.th-ticker-value.up {
  color: #10b981 !important; /* Green */
}

.th-ticker-value.down {
  color: #ef4444 !important; /* Red */
}

/* =============================================================
   RIGHT SIDE
   ============================================================= */

.th-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.th-close-btn {
  background-color: var(--tw-btn-bg) !important;
  color: var(--th-close-color) !important;
  padding: 4px !important;
  transition: background 0.15s, border-color 0.15s !important;
  width: 28px !important;
  height: 28px !important;
}

.th-close-btn:hover {
  background-color: var(--tw-btn-bg-hover) !important;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 680px) {
  .th-root {
    padding: 6px 12px;
    min-height: 46px;
  }

  .th-title {
    font-size: 14px !important;
  }

  .th-cash-value {
    font-size: 13px !important;
  }

  .th-divider-v {
    display: none;
  }

  .th-cash-group {
    display: none;
  }
}

@media (max-width: 400px) {
  .th-root {
    padding: 5px 8px;
    min-height: 40px;
  }

  .th-title {
    font-size: 13px !important;
  }

  .th-subtitle {
    display: none;
  }
}

.scanner-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.scanner-header {
  background: transparent;
  flex-shrink: 0;
  padding: 4px 4px 0;
}

.scanner-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  align-items: flex-end;
}

.scanner-control {
  flex: 1 1 110px;
  min-width: 100px;
  max-width: 180px;
}

.scanner-control--scan-type {
  flex: 1 1 150px;
  max-width: 200px;
}

.scanner-control--setting {
  flex: 0 1 100px;
  max-width: 120px;
}

.scanner-control--actions {
  flex: 0 0 auto;
  max-width: none;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 2px;
}

.scanner-control--actions .custom-button {
  min-width: 96px;
}

.scanner-label {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-small) !important;
  line-height: var(--font-size-small) !important;
}

.scanner-status {
  padding: 4px 2px 2px;
  font-size: var(--font-size-small, 12px);
  opacity: 0.8;
}

.scanner-body {
  flex: 1;
  min-height: 0;
  display: flex;
  margin-top: 4px;
}

.scanner-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.history-csv-download-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--popup-foreground-color, transparent);
  color: var(--font-color);
  overflow: hidden;
}

.history-csv-download-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
  box-sizing: border-box;
  overflow: auto;
}

.history-csv-download-description,
.history-csv-download-note {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--font-color-grid, var(--font-color)) !important;
  opacity: 0.9;
}

.history-csv-download-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-csv-download-control {
  width: 100%;
  min-width: 0;
}

.history-csv-download-label {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: var(--font-size-small) !important;
  line-height: var(--font-size-small) !important;
  color: var(--font-color-grid, var(--font-color)) !important;
}

.history-csv-download-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-csv-download-progress-text {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 400 !important;
  color: var(--font-color) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-csv-download-progress-bar {
  height: 4px !important;
  border-radius: 2px;
}

.history-csv-download-path {
  font-family: var(--font-family) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--font-color) !important;
  opacity: 0.65;
  word-break: break-all;
}

.history-csv-download-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.history-csv-download-actions .action-buttons {
  flex: 0 0 auto;
  min-width: 0;
  height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: none;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
}

.watchlist-menu{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px; 
}

.watchlist-menu-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
}

.create-new-watchlist-button,
.create-new-watchlist-button-cancel,
.create-new-watchlist-button-save {
    width: var(--button-widths) !important;
    height: var(--button-heights) !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.create-new-watchlist-button:hover:not(.Mui-disabled),
.create-new-watchlist-button-cancel:hover:not(.Mui-disabled),
.create-new-watchlist-button-save:hover:not(.Mui-disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

.create-new-watchlist-button .MuiButton-startIcon,
.create-new-watchlist-button-cancel .MuiButton-startIcon,
.create-new-watchlist-button-save .MuiButton-startIcon {
    margin: 0 !important;
}

.create-new-watchlist-button-cancel {
    background-color: var(--cards-background-color) !important;
}

[data-theme='flat-dark'] .create-new-watchlist-button-cancel {
    border: none !important;
}

.create-new-watchlist-button-container,
.watchlist-new-buttons{
    padding-bottom: 15px !important;
    padding-top: 6px !important;
}

.create-button-svg,
.cancel-button-svg,
.save-button-svg {
    width: var(--button-icon-width);
    height: var(--button-icon-height);
}

.create-button-svg{
    fill: white;
}
.cancel-button-svg{
    fill: var(--date-icon-color) !important;
}
.save-button-svg{
    fill: white;
}

.create-new-watchlist-button-save--ready,
.save-button-svg--ready{
    opacity: 1;
}

.create-new-watchlist-button-save--incomplete,
.save-button-svg--incomplete{
    opacity: 0.5;
}

.create-new-watchlist-button-save.Mui-disabled{
    opacity: 0.5;
}

.create-new-watchlist-button-save.Mui-disabled .save-button-svg{
    opacity: 0.5;
}

.watchlist-menu-main-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    width: 100% !important;
}

.watchlist-new-buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* justify-content: flex-end; */
    /* width: 100% !important; */
}

.hist-data-download-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Same as History CSV / dialogs — glass themes keep this translucent/transparent */
  background: var(--popup-foreground-color, transparent);
  color: var(--font-color);
  overflow: hidden;
}

.hist-data-download-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
}

.hist-data-download-note {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  color: var(--font-color-grid, var(--font-color)) !important;
  padding: 16px;
}

.hist-data-download-control {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.hist-data-download-label {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-small) !important;
  color: var(--font-color-grid, var(--font-color)) !important;
}

.hist-data-download-status-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hist-data-download-status-line {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  color: var(--font-color-grid, var(--font-color)) !important;
  opacity: 0.9;
}

.hist-data-download-all-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 600 !important;
  color: var(--positive-color, #2ecc71) !important;
}

.hist-data-download-all-ready-icon {
  color: var(--positive-color, #2ecc71) !important;
}

.hist-data-download-section-title {
  flex: 0 0 auto;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 600 !important;
  color: var(--font-color) !important;
  margin-top: 2px;
}

.hist-data-download-grid-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  height: 100%;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

/* Select-all sits over the first header cell — outside AG Grid so clicks always work */
.hist-data-download-select-all-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: transparent;
}

.hist-data-download-select-all-overlay .app-checkbox,
.hist-data-download-select-all-overlay .MuiCheckbox-root {
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep AG Grid chrome transparent under glass themes */
.hist-data-download-grid-wrap .hist-data-download-grid,
.hist-data-download-grid-wrap .ag-root-wrapper,
.hist-data-download-grid-wrap .ag-root,
.hist-data-download-grid-wrap .ag-body-viewport,
.hist-data-download-grid-wrap .ag-center-cols-viewport,
.hist-data-download-grid-wrap .ag-center-cols-container,
.hist-data-download-grid-wrap .ag-header,
.hist-data-download-grid-wrap .ag-header-viewport,
.hist-data-download-grid-wrap .ag-row,
.hist-data-download-grid-wrap .ag-cell {
  background-color: transparent !important;
}

.hist-data-download-grid-wrap .ag-header {
  background: var(--popup-foreground-color, transparent) !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

.hist-data-download-grid-wrap .ag-row-even,
.hist-data-download-grid-wrap .ag-row-odd {
  background-color: transparent !important;
}

.hist-data-download-grid-wrap .ag-row-hover {
  background-color: var(--menu-item-hover, rgba(255, 255, 255, 0.06)) !important;
}

.hist-data-download-grid-wrap .ag-header-cell.hist-data-download-select-header,
.hist-data-download-grid-wrap .ag-cell.hist-data-download-select-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

.hist-data-download-grid-wrap .ag-header-cell.hist-data-download-select-header .ag-header-cell-comp-wrapper,
.hist-data-download-grid-wrap .ag-header-cell.hist-data-download-select-header .ag-header-cell-label {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.hist-data-download-select-cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
}

.hist-data-download-select-cell .app-checkbox,
.hist-data-download-select-cell .MuiCheckbox-root {
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.hist-data-download-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}

.hist-data-download-icon.done {
  color: var(--positive-color, #2ecc71);
}

.hist-data-download-icon.downloading {
  color: var(--theme-color, #ff8c00);
}

.hist-data-download-icon.idle {
  color: var(--link-color, #4aa3ff);
  opacity: 0.9;
}

.hist-data-download-pct {
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  color: var(--font-color-grid, var(--font-color));
}

.hist-data-download-error {
  color: var(--negative-color, #e74c3c);
  font-size: 11px;
}

.hist-data-download-icon-btn {
  color: var(--font-color) !important;
  padding: 2px !important;
}

.hist-data-download-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
  background: transparent;
}

.hist-data-download-actions .action-buttons {
  flex: 0 0 auto;
  min-width: 0;
  height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: none;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: var(--color-gray-darkest);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: var(--color-white);
}

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

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rc-dyn-tabs-panellist {
  padding-left: var(--global-padding);
  padding-right: var(--global-padding);
  position: relative;
  flex: 1;
  display: flex;
  direction: ltr;
  font-family: inherit;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 614px;

}

.rc-dyn-tabs-panellist .rc-dyn-tabs-panel {
  display: none;
  flex: 1;
  width: 100%;
  height: auto;
  direction: ltr;
  text-align: left;
}

.rc-dyn-tabs-panellist .rc-dyn-tabs-panel.rc-dyn-tabs-selected {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  direction: ltr;
}

.rc-dyn-tabs-tablist-view {
  display: flex;
  flex: auto;
  position: relative;
  direction: ltr;
  padding-left: 6px;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-responsive {
  backface-visibility: hidden;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tablist-container {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tablist-overflow {
  overflow: visible;
  display: flex;
  flex-wrap: nowrap;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton-container {
  min-width: 35.38px;
  min-height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tablist {
  list-style: none;
  margin: 0;
  padding: 2px;
  display: flex;
  position: relative;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
  display: flex;
  padding: 5px;
  /* padding-right: 5px; */
  position: relative;
  pointer-events: visible;
  opacity: 1;
  font-size: var(--font-label-size);
  font-family: inherit;
  order: unset;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
  pointer-events: none;
  opacity: 0.7;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-icon {
  padding: 0em 0.4em;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {
  position: absolute;
  cursor: pointer;
  top: 55%;
  height: auto;
  width: 1em;
  transform: translateY(-50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  line-height: 1;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  display: inline-flex;
  text-align: left;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  padding-top: 0.6em;
  font-weight: 500;
  outline: none;
  font-size: inherit;
  font-family: inherit;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton {
  flex: 1;
  justify-content: center;
  width: 100%;
  padding: 0px;
  margin: 0px;
  flex-basis: 100%;
  height: 100%;
  align-items: center;
  background-color: transparent;
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
  padding: 0px;
  max-width: 10px;
  max-height: 50px;
  display: flex
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton::before {
  content: "" !important;
}

.rc-dyn-tabs-showmorebutton svg {
  display: block !important;
  width: 20px;
  height: 20px;
  fill: var(--font-color);
}

.rc-dyn-tabs-tablist-view .rc-dyn-tabs-popper {
  position: fixed;
  background: var(--dockview-popper);
  /* border: 1px solid lightgray; */
  padding: 0px;
  z-index: 2;
  overflow-y: auto;
  height: auto;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
  flex-direction: column;
  float: left;
  flex: none;
  height: 100%;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-tablist-container,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-tablist-overflow,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-tablist {
  flex-direction: column;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper {
  height: auto;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
  flex-direction: column;
  float: right;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist-container,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist-overflow,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist {
  flex-direction: column;
}

.card.rc-dyn-tabs-tablist-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  /* border-bottom: 1px solid var(--color-border); */
  background-color: var(--color-gray-lightest);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card.rc-dyn-tabs-tablist-view::-webkit-scrollbar {
  display: none;
}

/* RTL Support */
[dir="rtl"] .card.rc-dyn-tabs-tablist-view {
  flex-direction: row-reverse;
  margin: 5px 20px 5px 0px !important;
}

[dir="rtl"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:last-child {
  margin-left: 0;
}

[dir="rtl"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-tab-close {
  margin-right: 4px;
  margin-left: 0;
}

[dir="rtl"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-tab-icon {
  margin-right: 0;
  margin-left: 4px;
}

/* LTR Support */
[dir="ltr"] .card.rc-dyn-tabs-tablist-view {
  flex-direction: row;
}

[dir="ltr"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
  margin-right: 8px;
  margin-left: 0;
}

[dir="ltr"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:last-child {
  margin-right: 0;
}

[dir="ltr"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-tab-close {
  margin-right: 0;
  margin-left: 4px;
}

[dir="ltr"] .card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-tab-icon {
  margin-right: 4px;
  margin-left: 0;
}

/* RTL Support */
[dir="rtl"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {
  left: 0.1em;
  right: auto;
}

/* LTR Support */
[dir="ltr"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {
  right: 0.1em;
  left: auto;
}

/* RTL Support */
[dir="rtl"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  justify-content: flex-end;
  text-align: right;
  padding-right: 0em;
  padding-left: 0.6em;
}

[dir="rtl"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title .rc-dyn-tabs-icon {
  margin-right: 0;
  margin-left: 0.4em;
}

/* LTR Support */
[dir="ltr"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  justify-content: flex-start;
  text-align: left;
  padding-left: 1.2em;
  padding-right: 01.2em;
}

[dir="ltr"] .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title .rc-dyn-tabs-icon {
  margin-right: 0.4em;
  margin-left: 0;
}


.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl {
  flex-direction: row-reverse;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist-container,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist-overflow,
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-tablist {
  flex-direction: row-reverse;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-title {
  flex-direction: row;
}

.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
  left: 0.4em;
  right: auto;
}

.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl {
  flex-direction: row-reverse;
}

.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl .rc-dyn-tabs-panel {
  direction: rtl;
  text-align: right;
}
.all-themes.rc-dyn-tabs-tablist-view {
  background-color: var(--color-gray-dark);
  border-style: solid;
  border-width: 0px;
  padding: 15px;
}

.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  min-width: 80px;
  min-height: 30px;
  border-color: var(--color-transparent-white);
  border-style: none;
  border-width: 0px;
  opacity: 1;
  color: var(--color-gray-darker);
}

.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
  min-width: 30px;
  border: 0px;
}

.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:after {
  transform: scale(0, 0);
  opacity: 0.2;
  transition: 0s;
}

.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-blue-border);
  border-style: none;
  border-width: 0px;
  opacity: 1;
}

.card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--color-black) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.rc-dyn-tabs-showmorebutton::before {
  content: "" !important;
}

.rc-dyn-tabs-showmorebutton svg {
  display: block !important;
}

.card.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton svg path {
  fill: var(--color-gray-dark);
}

.card.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
  border-width: 0px 1px 0px 0px;
}

.card.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-title {
  border-width: 0px 3px 0px 0px;
}

.card.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
  border-width: 0px 0px 0px 1px;
}

.card.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-title {
  border-width: 0px 0px 0px 3px;
}
/* =============================================================
   TRADES WIDGET — TradesWidget.css
   Responsive + Light/Dark theme via CSS variables
   ============================================================= */

/* ── LIGHT THEME VARIABLES ──────────────────────────────────── */
:root {
  --tw-bg: #ffffff;
  --tw-bg-subtle: #f8fafc;
  --tw-bg-muted: #f1f5f9;
  --tw-bg-sidebar: #f8fafc;
  --tw-bg-card: #ffffff;
  --tw-bg-stock: #edfaf4;
  --tw-bg-bid: #f0fdf4;
  --tw-bg-ask: #fff1f2;

  /*--tw-border: #e2e8f0;*/
  --tw-border-input: #cbd5e1;
  --tw-border-accent: #4b7bec;
  --tw-border-divider: #e8edf2;

  --tw-text-primary: #0f172a;
  --tw-text-secondary: #475569;
  --tw-text-muted: #94a3b8;
  --tw-text-label: #64748b;
  --tw-text-bid: #166534;
  --tw-text-ask: #9f1239;

  --tw-buy: #2ecc71;
  --tw-buy-hover: #27ae60;
  --tw-sell: #e74c3c;
  --tw-sell-hover: #c0392b;

  --tw-btn-icon-bg: #ffffff;
  --tw-btn-icon-border: #e2e8f0;
  --tw-btn-icon-text: #475569;
  --tw-btn-icon-hover: #f1f5f9;

  --tw-summary-label: #64748b;
  --tw-summary-value: #1e293b;
  --tw-summary-value-highlight: #0f172a;

  --tw-radius-sm: 6px;
  --tw-radius-md: 8px;
  --tw-radius-lg: 12px;
  --tw-radius-pill: 20px;

  --tw-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --tw-shadow-btn: 0 4px 6px rgba(0, 0, 0, 0.1);
  --tw-shadow-btn-active: 0 1px 3px rgba(0, 0, 0, 0.08);

  --tw-font: var(--font-family);

  /* Spacing scale */
  --tw-gap-xs: 4px;
  --tw-gap-sm: 8px;
  --tw-gap-md: 12px;
  --tw-gap-lg: 16px;
  --tw-gap-xl: 20px;

  /* Input height */
  --tw-input-h: 34px;
}

/* ── DARK THEME VARIABLES ───────────────────────────────────── */
[data-theme="dark"],
[data-theme="flat-dark"] {
  --tw-bg: #151c2c;
  --tw-bg-subtle: #1e2840;
  --tw-bg-muted: #263047;
  --tw-bg-sidebar: #1e2840;
  --tw-bg-card: #1e2840;
  --tw-bg-stock: #1a2e22;
  --tw-bg-bid: #14281a;
  --tw-bg-ask: #2d1a1a;

  --tw-border: #2d3a52;
  --tw-border-input: #394d6a;
  --tw-border-accent: #5b8ef0;
  --tw-border-divider: #2d3a52;

  --tw-text-primary: #f9fafb;
  --tw-text-secondary: #cbd5e1;
  --tw-text-muted: #94a3b8;
  --tw-text-label: #9ca3af;
  --tw-text-bid: #4ade80;
  --tw-text-ask: #f87171;

  --tw-buy: #22c55e;
  --tw-buy-hover: #16a34a;
  --tw-sell: #ef4444;
  --tw-sell-hover: #dc2626;

  --tw-btn-icon-bg: #263047;
  --tw-btn-icon-border: #2d3a52;
  --tw-btn-icon-text: #cbd5e1;
  --tw-btn-icon-hover: #2d3a52;

  --tw-summary-label: #9ca3af;
  --tw-summary-value: #f1f5f9;
  --tw-summary-value-highlight: #ffffff;

  --tw-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --tw-shadow-btn: 0 4px 8px rgba(0, 0, 0, 0.3);
  --tw-shadow-btn-active: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* =============================================================
   LAYOUT
   ============================================================= */

.tw-main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--popup-foreground-color) !important;
  font-family: var(--tw-font);
  overflow: hidden;
  box-sizing: border-box;
  backdrop-filter: blur(7.5px);
  border-radius: 10px;
}

.tw-content {
  display: flex;
  flex: 1;
  gap: var(--tw-gap-lg);
  padding: var(--tw-gap-lg);
  overflow: hidden;
  min-height: 0;
}

/* =============================================================
   FORM CONTAINER
   ============================================================= */

.tw-form-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tw-gap-sm);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border) transparent;
}

.tw-form-container::-webkit-scrollbar {
  width: 4px;
}

.tw-form-container::-webkit-scrollbar-thumb {
  background: var(--tw-border);
  border-radius: 4px;
}

.tw-form-row {
  display: flex;
  gap: var(--tw-gap-md);
  flex-wrap: wrap;
  height: auto;
  align-items: flex-end;
}

.tw-form-row > * {
  flex: 1;
  min-width: 120px;
}

.tw-soe-portfolio-row {
  flex-wrap: nowrap;
  align-items: flex-end;
}

.tw-soe-portfolio-row .tw-soe-portfolio-field {
  flex: 1 1 42%;
  max-width: 280px;
  min-width: 180px;
}

.tw-soe-portfolio-row .od-infostats-row {
  flex: 1 1 auto;
  align-items: flex-end;
  padding-bottom: 6px;
}

.tw-soe-symbol-row {
  margin-bottom: 0;
  margin-top: 0;
}

.tw-soe-symbol-row + .tw-form-row {
  margin-top: 0;
}

.tw-soe-symbol-row .tw-soe-portfolio-field {
  flex: 0 1 42%;
  max-width: 280px;
}

/* Customer mode — align Trades dialog with OrderDashboard mockup */
.tw-form-container .tw-customer-portfolio-field {
  width: 100%;
}

.tw-form-container .tw-customer-portfolio-boxes {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.tw-form-container .tw-customer-portfolio-boxes .od-portfolio-box {
  flex: 1 1 0;
  min-width: 88px;
  max-width: none;
}

.tw-form-container .od-buying-power {
  width: 100%;
}

.tw-form-row--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tw-gap-md);
  height: auto;
}

.tw-form-row--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tw-gap-sm);
  height: auto;
}

.tw-form-divider {
  border: none;
  border-top: 1px solid var(--tw-border);
  margin: var(--tw-gap-xs) 0;
}

/* =============================================================
   FORM FIELD
   ============================================================= */

.tw-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tw-field__label,
.tw-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--tw-text-label);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 1px;
}

/* =============================================================
   SUGGESTIONS LIST
   ============================================================= */

.tw-search-container {
  position: relative;
  width: 100%;
}

.tw-customer-search-wrap .customer-search-toolbar {
  width: 100%;
}

.tw-customer-search-wrap .customer-search-toolbar-wrap {
  flex: 1;
  min-width: 0;
}

.tw-customer-search-wrap .customer-search-toolbar-control.MuiButton-root,
.tw-customer-search-wrap button.customer-search-toolbar-control {
  background-color: var(--od-field-bg, var(--tw-bg-subtle)) !important;
  border-color: var(--od-select-border, var(--tw-border-input)) !important;
  color: var(--font-color-grid, var(--tw-text-primary));
}

.tw-customer-search-wrap .customer-search-toolbar-control .MuiOutlinedInput-root {
  background-color: var(--od-field-bg, var(--tw-bg-subtle)) !important;
}

.tw-customer-search-wrap .customer-search-toolbar-control .MuiOutlinedInput-notchedOutline {
  border-color: var(--tw-border-input) !important;
}

.tw-customer-search-wrap .customer-search-toolbar-control .MuiInputBase-input {
  color: var(--tw-text-primary) !important;
}

.tw-customer-search-wrap .customer-search-toolbar-control .MuiInputBase-input::placeholder {
  color: var(--tw-text-muted);
  opacity: 1;
}

.tw-suggestions-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: var(--tw-bg-card);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tw-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--tw-text-primary);
  border-bottom: 1px solid var(--tw-border-divider);
  transition: background-color 0.15s;
}

.tw-suggestion-item:hover {
  background-color: var(--tw-bg-muted);
}

.tw-suggestion-item:last-child {
  border-bottom: none;
}

.tw-suggestion-item__id {
  font-size: 10px;
  color: var(--tw-text-muted);
  font-weight: 500;
  margin-left: 8px;
}

/* MUI input overrides scoped to widget */
.tw-main .MuiOutlinedInput-root {
  background-color: var(--popup-background-color) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-md) !important;
  height: var(--tw-input-h) !important;
  font-size: 12px !important;
  font-family: var(--tw-font) !important;
}

.tw-main .MuiOutlinedInput-notchedOutline {
  border-color: var(--tw-border) !important;
}

.tw-main .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--tw-border) !important;
}

.tw-main .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--tw-border) !important;
}

.tw-main .MuiOutlinedInput-input {
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--font-color-grid, var(--tw-text-primary)) !important;
  -webkit-text-fill-color: var(--font-color-grid, var(--tw-text-primary)) !important;
}

.tw-main .MuiSelect-select {
  padding: 6px 28px 6px 10px !important;
  font-size: 12px !important;
  color: var(--font-color-grid, var(--tw-text-primary)) !important;
  -webkit-text-fill-color: var(--font-color-grid, var(--tw-text-primary)) !important;
}

.tw-main .MuiInputBase-input::placeholder,
.tw-main .MuiOutlinedInput-input::placeholder {
  color: var(--tw-text-muted) !important;
  opacity: 1;
}

/* =============================================================
   Search fields (Customer + Symbol): text + placeholder color
   ============================================================= */
.tw-main .tw-search .MuiOutlinedInput-input,
.tw-main .tw-search .MuiInputBase-input {
  color: var(--font-color-grid) !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
}

.tw-main .tw-search .MuiOutlinedInput-input::placeholder,
.tw-main .tw-search .MuiInputBase-input::placeholder {
  color: var(--font-color-grid) !important;
  opacity: 1;
}

/* Keep the search icon in the field aligned with the same color */
.tw-main .tw-search .MuiInputAdornment-root,
.tw-main .tw-search .MuiInputAdornment-root svg,
.tw-main .tw-search .MuiInputAdornment-root svg * {
  color: var(--font-color-grid) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =============================================================
   Dropdowns: input text + arrow icon color
   ============================================================= */
.tw-main .tw-dropdown .MuiSelect-select,
.tw-main .tw-dropdown .MuiInputBase-input {
  color: var(--font-color-grid) !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
}

.tw-main .tw-dropdown .MuiSelect-icon {
  color: var(--font-color-grid) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
}

/* =============================================================
   Date field icon color
   ============================================================= */
.tw-main .date-only-field-wrapper .MuiIconButton-root,
.tw-main .date-only-field-wrapper .MuiIconButton-root svg,
.tw-main .date-only-field-wrapper .MuiIconButton-root svg * {
  color: var(--border-color-global) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.tw-main .MuiInputLabel-root {
  font-size: 11px !important;
  color: var(--tw-text-muted) !important;
}

/* Dark mode: ensure all form text reads white/light on dark surfaces */
.tw-main[data-theme='dark'] .tw-field__label,
.tw-main[data-theme='dark'] .tw-field label,
[data-theme='dark'] .tw-main .tw-field__label,
[data-theme='flat-dark'] .tw-main .tw-field__label {
  color: var(--tw-text-label);
}

.tw-main[data-theme='dark'] .MuiOutlinedInput-input,
.tw-main[data-theme='dark'] .MuiInputBase-input,
.tw-main[data-theme='dark'] .MuiSelect-select,
[data-theme='dark'] .tw-main .MuiOutlinedInput-input,
[data-theme='dark'] .tw-main .MuiSelect-select {
  color: var(--font-color-grid) !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
}

.tw-main[data-theme='dark'] .tw-input--blue .MuiOutlinedInput-input,
.tw-main[data-theme='dark'] .tw-input--blue .MuiInputBase-input,
.tw-main[data-theme='dark'] .date-only-field-wrapper .MuiInputBase-input {
  color: var(--font-color-grid) !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
}

.tw-main[data-theme='dark'] .tw-summary__label,
[data-theme='dark'] .tw-main .tw-summary__label {
  color: var(--tw-summary-label);
}

.tw-main[data-theme='dark'] .tw-summary__value,
.tw-main[data-theme='dark'] .tw-summary__value--highlighted,
[data-theme='dark'] .tw-main .tw-summary__value {
  color: var(--font-color-grid) !important;
}

.tw-main[data-theme='dark'] .MuiInputAdornment-root .MuiBox-root,
.tw-main[data-theme='dark'] .MuiInputAdornment-root div {
  background-color: var(--tw-text-muted) !important;
}

.tw-input--blue .MuiOutlinedInput-notchedOutline {
  border-color: var(--tw-border-accent) !important;
}

/* =============================================================
   TradesWidget exceptions: quantity, price, date
   - transparent background
   - border uses --border-color-global
   ============================================================= */

/* Quantity + Price inputs use class tw-input--blue in TradesWidget.js */
.tw-main .tw-input--blue .MuiOutlinedInput-root {
  background-color: transparent !important;
  /* border-color: var(--border-color-global) !important; */
}

.tw-main .tw-input--blue .MuiOutlinedInput-notchedOutline,
.tw-main .tw-input--blue .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.tw-main .tw-input--blue .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-global) !important;
}

/* DateOnlyField wraps DatePicker in .date-only-field-wrapper */
.tw-main .date-only-field-wrapper .MuiOutlinedInput-root {
  background-color: transparent !important;
  border-color: var(--border-color-global) !important;
}

.tw-main .date-only-field-wrapper .MuiOutlinedInput-notchedOutline,
.tw-main .date-only-field-wrapper .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.tw-main .date-only-field-wrapper .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-global) !important;
}

/* =============================================================
   SUMMARY STRIP
   ============================================================= */

.tw-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tw-gap-md);
  flex-wrap: wrap;
}

.tw-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.tw-summary__label {
  font-size: 10px;
  color: var(--tw-summary-label);
  font-weight: 500;
  white-space: nowrap;
}

.tw-summary__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--font-color-grid) !important;
}

.tw-summary__value--highlighted {
  font-size: 16px;
  font-weight: 700;
  color: var(--font-color-grid) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================================
   FOOTER ACTIONS
   ============================================================= */

.tw-footer {
  display: flex;
  align-items: center;
  gap: var(--tw-gap-md);
  padding-top: var(--tw-gap-sm);
}

.tw-footer__icons {
  display: flex;
  gap: var(--tw-gap-sm);
  flex-shrink: 0;
}

.tw-footer__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--tw-radius-md);
  border: 1px solid var(--tw-border);
  background: var(--tw-btn-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tw-icons-color);
  transition: background 0.15s, border-color 0.15s;
}

/* Ensure MUI SVG icons inherit button color */
.tw-footer__icon-btn svg {
  fill: var(--tw-icons-color);
}

.tw-footer__icon-btn:hover {
  background: var(--tw-btn-bg-hover);
  border-color: var(--tw-border-accent);
  color: var(--tw-icons-color);
}

.tw-footer__cta {
  flex: 1;
}

.tw-cta-btn {
  width: 100%;
  height: 42px;
  border-radius: var(--tw-radius-md);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tw-shadow-btn);
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
  letter-spacing: 0.2px;
  font-family: var(--tw-font);
}

.tw-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.tw-cta-btn:active {
  transform: translateY(0);
  box-shadow: var(--tw-shadow-btn-active);
}

.tw-cta-btn--buy {
  background: var(--tw-buy);
}

.tw-cta-btn--buy:hover {
  background: var(--tw-buy-hover);
}

.tw-cta-btn--sell {
  background: var(--tw-sell);
}

.tw-cta-btn--sell:hover {
  background: var(--tw-sell-hover);
}

/* =============================================================
   SIDEBAR
   ============================================================= */

.tw-sidebar {
  width: 32%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border) transparent;
}

.tw-sidebar-header-card {
  background-color: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.tw-sidebar-card {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  padding: var(--tw-gap-sm) var(--tw-gap-md);
  overflow: hidden;
  box-shadow: var(--tw-shadow-card);
}

.tw-sidebar-card--stock {
  padding: 8px;
}

.tw-sidebar-card--stock.buy {
  background-color: var(--tw-card-green);
  border-color: var(--tw-border-green);
}

.tw-sidebar-card--stock.sell {
  background-color: var(--tw-card-red);
  border-color: var(--tw-border-red);
}

.tw-sidebar-card--ob {
  padding: 1px;
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background-color: var(--popup-background-color) !important;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  overflow: hidden;
  box-shadow: var(--tw-shadow-card);
}

.tw-sidebar-card--stats {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* =============================================================
   BUY / SELL TOGGLE
   ============================================================= */

.tw-buysell {
  display: flex;
  padding: 2px;
  background-color: var(--popup-background-color) !important;
  border-radius: 30px;
  gap: 4px;
  border: 1px solid var(--tw-border);
}

.tw-buysell__btn {
  flex: 1;
  height: 36px;
  border-radius: 30px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--font-color-grid) !important;
  transition: all 0.2s ease;
  font-family: var(--tw-font);
}

.tw-buysell__btn--buy-active {
  background: #48cf7a;
  color: #ffffff !important;
}

.tw-buysell__btn--sell-active {
  background: #9f1239;
  color: #ffffff !important;
}

/* =============================================================
   STOCK HEADER
   ============================================================= */

.tw-stock-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tw-stock-symbol {
  font-size: 16px;
  font-weight: 700;
  color: var(--font-color-grid) !important;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.tw-stock-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--font-color-grid) !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tw-stock-price-row {
  display: flex;
  align-items: center;
  gap: var(--tw-gap-sm);
  margin-top: var(--tw-gap-xs);
}

.tw-stock-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d1ecde;
  color: #166534;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.tw-stock-arrow.down {
  background-color: var(--tw-bg-ask);
  color: var(--tw-text-ask);
}

.tw-stock-price {
  font-size: 24px;
  font-weight: 600;
  color: var(--font-color-grid) !important;
  letter-spacing: -1px;
}

.tw-stock-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tw-stock-change {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.tw-stock-change.up {
  color: var(--tw-text-bid);
}

.tw-stock-change.down {
  color: var(--tw-text-ask);
}

.tw-stock-vol {
  font-size: 9px;
  color: var(--font-color-grid) !important;
  font-weight: 500;
}

/* =============================================================
   ORDER BOOK TABLE
   ============================================================= */

.tw-ob-table-wrapper {
  margin: 2px;
  height: auto;
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  overflow: hidden;
}

.tw-ob-table {
  width: 100%;
  border-collapse: collapse;
}

/* ── First Qty column (Bid Qty) ── */
.tw-ob-row:nth-child(even) .tw-ob-td--qty:first-child {
  background-color: #f8fafc;
}

.tw-ob-row:nth-child(odd) .tw-ob-td--qty:first-child {
  background-color: #ffffff;
}

/* ── Last Qty column (Ask Qty) ── */
.tw-ob-row:nth-child(even) .tw-ob-td--qty:last-child {
  background-color: #f8fafc;
}

.tw-ob-row:nth-child(odd) .tw-ob-td--qty:last-child {
  background-color: #ffffff;
}

/* ── Bid column (always green, slightly darker on even rows) ── */
.tw-ob-row:nth-child(even) .tw-ob-td--bid {
  background-color: #e6f6ee;
}

.tw-ob-row:nth-child(odd) .tw-ob-td--bid {
  background-color: #f0fdf4;
}

/* ── Ask column (always red, slightly darker on even rows) ── */
.tw-ob-row:nth-child(even) .tw-ob-td--ask {
  background-color: #fcebeb;
}

.tw-ob-row:nth-child(odd) .tw-ob-td--ask {
  background-color: #fff1f2;
}

.tw-ob-td {
  padding: 6px 4px;
  font-size: 8px;
  font-weight: 500;
  text-align: center;
  color: #1e293b;
}

.tw-ob-td--bid {
  color: #22c55e;
}

.tw-ob-td--ask {
  color: #ef4444;
}

/* =============================================================
   STATS GRID
   ============================================================= */

.tw-stats-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
}

.tw-stats-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px 8px;
}

.tw-stats-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

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

.tw-stat-label {
  font-size: 8px;
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
}

.tw-stat-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--font-color-grid) !important;
}

/* =============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================= */

/* Medium: sidebar narrows slightly */
@media (max-width: 900px) {
  .tw-sidebar {
    width: 220px;
  }

  .tw-form-row--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tw-form-row--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tw-content {
    gap: var(--tw-gap-md);
    padding: var(--tw-gap-md);
  }
}

/* Small: stack sidebar below form */
@media (max-width: 680px) {
  .tw-content {
    flex-direction: column;
    overflow-y: auto;
    padding: var(--tw-gap-sm);
    gap: var(--tw-gap-sm);
  }

  .tw-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .tw-sidebar-card {
    flex: 1;
    min-width: 140px;
  }

  .tw-sidebar-card--ob {
    min-width: 100%;
    min-height: 100px;
  }

  .tw-form-row--3 {
    grid-template-columns: 1fr;
  }

  .tw-form-row--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tw-cta-btn {
    height: 38px;
    font-size: 13px;
  }
}

/* Extra small: very tight layout */
@media (max-width: 400px) {
  :root {
    --tw-input-h: 30px;
    --tw-gap-md: 8px;
    --tw-gap-lg: 10px;
  }

  .tw-form-row--4 {
    grid-template-columns: 1fr;
  }

  .tw-form-divider {
    margin: 2px 0;
  }

  .tw-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tw-gap-xs);
  }

  .tw-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
:root {
  /* Backgrounds */
  --od-bg-main: #f1f4f8;
  --od-bg-alt: #f9fafb;
  --od-bg-hover: #f3f6fa;
  --od-bg-active-blue: #eff6ff;
  --od-bg-buysell: #f3f4f6;
  --od-bg-green-light: #dcfce7;
  --od-bg-red-light: #fee2e2;
  --od-bg-yellow-light: #fef3c7;
  --od-bg-indigo-light: #e0e7ff;
  --od-bg-header-grey: #f8fafc;

  /* Borders / Dividers */
  --od-border-light: rgba(218, 218, 218, 1);
  --od-border-medium: #d1d5db;
  --od-border-grey: #e5e7eb;
  --tw-border-accent: #4b7bec;

  /* Custom Border Tokens (Light) */
  --od-topnav-border: rgba(218, 218, 218, 1);
  --od-panel-border: rgba(226, 232, 240, 1);
  --od-select-border: rgba(203, 212, 221, 1);
  --od-pagination-border: rgba(218, 218, 218, 1);
  --od-clear-link-color: rgba(0, 62, 126, 1);

  /* Matching TradesWidget.css */

  /* Text Colors */
  --od-text-dark: #111827;
  --od-text-muted: #737373;
  --od-text-light: #9ca3af;
  --od-text-grey: #64748b;

  /* Accents */
  --od-accent: #2563eb;
  --od-accent-dark: #1d4ed8;

  /* Status Colors */
  --od-green: #16a34a;
  --od-green-dark: #15803d;
  --od-green-text: #166534;
  --od-emerald: #10b981;

  --od-red: #ef4444;
  --od-red-dark: #b91c1c;
  --od-red-text: #991b1b;
  --od-red-alt: #dc2626;

  --od-yellow-text: #92400e;
  --od-indigo-text: #3730a3;
}

[data-theme='dark'],
[data-theme='flat-dark'] {
  --od-bg-panel: #1a1a1a;
  --od-bg-alt: #262626;
  --od-text-main: #e5e7eb;
  --od-text-dark: #f9fafb;
  --od-text-muted: #9ca3af;
  --od-topnav-border: rgb(78 78 78);
  --od-panel-border: rgba(72, 79, 88, 1);
  --od-select-border: rgba(55, 60, 65, 1);
  --od-pagination-border: rgba(55, 60, 65, 1);
  --od-clear-link-color: rgba(255, 255, 255, 1);
}

/* ── Root ────────────────────────────────────────────────────── */
.od-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  background: var(--popup-foreground-color);
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Top Navigation Strip ────────────────────────────────────── */
.od-topnav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px;
  /*border-bottom: 1px solid var(--od-border-light);*/
}

.od-topnav__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--od-text-muted);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  transition:
    background 0.15s,
    color 0.15s;
}

.od-topnav__tab:hover {
  background: rgba(255, 255, 255, 0.15);
}

.od-topnav__tab--active {
  color: var(--tab-active-color);
  font-weight: 600;
}

.od-topnav__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Body: 2-column grid ─────────────────────────────────────── */
.od-body {
  flex: 1;
  display: grid;
  grid-template-columns: 550px 1fr;
  gap: 20px;
  padding: 12px;
  padding-top: 15px !important;
  overflow: hidden;
  min-height: 0;
  background-color: var(--popup-background-color) !important;
}

.od-body--full {
  grid-template-columns: 1fr !important;
}

/* ── Panels ────────────────────────────────────────────────────── */
.od-panel {
  background: var(--popup-foreground-color) !important;
  border-radius: 20px;
  border: 1px solid var(--od-panel-border);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.od-panel--full {
  flex: 1;
  height: 100%;
}

.od-panel--left {
  padding: 10px 18px;
  padding-top: 15px !important;
  gap: 10px;
  overflow-y: auto;
}

.od-row-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 10%;
}

.od-row-wrap > .od-field {
  flex: 1;
  min-width: 0;
}

.od-row-wrap > .od-infostats-row {
  flex-shrink: 0;
  margin-bottom: 2px;
  /* Visual alignment with input box baseline */
}

.od-panel--center {
  gap: 0;
  overflow: hidden;
}

.od-panel--right {
  padding: 0;
  overflow: hidden;
}

/* ── Panel Title Row ─────────────────────────────────────────── */
.od-panel__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 3px;
}

.od-panel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--font-color-grid);
  font-family: var(--font-family);
}

/* ── BUY / SELL Toggle ───────────────────────────────────────── */
.od-buysell {
  background: var(--od-buysell-bg-color);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.od-buysell__btn {
  padding: 4px 27px;
  border: none;
  border-radius: 5px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--od-text-light);
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.15s;
}

.od-buysell__btn--active-buy {
  background: var(--od-bg-panel);
  color: var(--od-green);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.od-buysell__btn--active-sell {
  background: var(--od-bg-panel);
  color: var(--od-red);
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
}

/* ── Customer portfolio boxes (trading accounts) ─────────────── */
.od-portfolio-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.od-portfolio-boxes__empty {
  font-size: 12px;
  color: var(--od-text-muted);
  padding: 6px 0;
}

.od-portfolio-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 88px;
  max-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--od-border-medium);
  border-radius: 8px;
  background: var(--popup-foreground-color, #fff);
  color: var(--od-text-muted);
  cursor: pointer;
  justify-content: center;
  font-family: var(--font-family);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  align-items: center;
}

.od-portfolio-box:hover {
  border-color: var(--od-accent);
}

.od-portfolio-box--active {
  border-color: #003d7a;
  color: #003d7a;
  box-shadow: 0 0 0 1px #003d7a;
}

.od-portfolio-box__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: left;
}

.od-portfolio-box__badge {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* ── Buying power card (customer order entry) ────────────────── */
.od-buying-power {
  margin-top: 10px;
  padding: 14px 12px 12px;
  border-radius: 10px;
  background: #eef5fb;
  border: 1px solid #d7e6f5;
}

.od-buying-power__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.od-buying-power__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--od-text-muted);
  font-family: var(--font-family);
}

.od-buying-power__value {
  font-size: 22px;
  font-weight: 700;
  color: #003d7a;
  font-family: var(--font-family);
  letter-spacing: -0.02em;
}

.od-buying-power__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.od-buying-power__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.od-buying-power__metric-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--od-text-muted);
  font-family: var(--font-family);
}

.od-buying-power__metric-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--od-text-dark);
  font-family: var(--font-family);
}

.od-buying-power__metric-value--cash {
  color: #003d7a;
}

.od-buying-power__metric-value--up {
  color: var(--od-green);
}

.od-buying-power__metric-value--down {
  color: var(--od-red);
}

[data-theme='dark'] .od-buying-power,
[data-theme='flat-dark'] .od-buying-power {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

[data-theme='dark'] .od-buying-power__value,
[data-theme='flat-dark'] .od-buying-power__value,
[data-theme='dark'] .od-buying-power__metric-value--cash,
[data-theme='flat-dark'] .od-buying-power__metric-value--cash {
  color: #93c5fd;
}

[data-theme='dark'] .od-portfolio-box--active,
[data-theme='flat-dark'] .od-portfolio-box--active {
  border-color: #60a5fa;
  color: #93c5fd;
  box-shadow: 0 0 0 1px #60a5fa;
}

[data-theme='dark'] .od-buying-power__metric,
[data-theme='flat-dark'] .od-buying-power__metric {
  background: var(--od-bg-alt, #262626);
  border-color: var(--od-panel-border);
}

[data-theme='dark'] .od-portfolio-box,
[data-theme='flat-dark'] .od-portfolio-box {
  background: var(--od-bg-alt, #262626);
}

/* ── InfoStat with arrow ─────────────────────────────────────── */
.od-infostats-row {
  display: flex;
  gap: 18px;
}

.od-infostat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.od-infostat__label {
  color: var(--od-text-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.od-infostat__value {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--font-color-grid);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.od-infostat__arrow {
  color: var(--od-emerald);
  font-size: 11px;
}

.od-infostat__value-plain {
  color: var(--font-color-grid);
  font-size: 12px;
  font-weight: 500;
}

/* ── Form Field ──────────────────────────────────────────────── */
.od-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.od-field--full {
  width: 100%;
}

.od-field__label {
  color: var(--od-text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ── Grid Layouts ────────────────────────────────────────────── */
.od-grid {
  display: grid;
  gap: 15px;
}

.od-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  height: 10%;
}

.od-grid--2col.uneven {
  grid-template-columns: 2fr 3fr;
}

.od-grid--3col {
  grid-template-columns: 3fr 5fr 4fr;
  height: 10%;
}

.od-grid--4col {
  grid-template-columns: repeat(4, 1fr);
  height: 10%;
}

.od-input,
.od-dropdown {
  width: 100%;
  min-width: 0;
}

.od-input.date-only-field-wrapper {
  width: 100%;
}

.od-input .MuiFormControl-root,
.od-dropdown .MuiFormControl-root {
  width: 100%;
  min-width: 0;
}

/* ── Search / Input / Dropdown shared overrides ──────────────── */
.od-search .MuiOutlinedInput-root,
.od-input .MuiOutlinedInput-root,
.od-dropdown .MuiOutlinedInput-root {
  min-height: var(--filter-heights) !important;
  background: var(--od-field-bg);
  border-radius: 6px !important;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.od-search .MuiOutlinedInput-notchedOutline,
.od-dropdown .MuiOutlinedInput-notchedOutline {
  border-color: var(--od-select-border) !important;
}

.od-input--blue .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color-global) !important;
}

.od-search .MuiInputBase-input,
.od-input .MuiInputBase-input,
.od-input .MuiOutlinedInput-input,
.od-dropdown .MuiInputBase-input,
.od-dropdown .MuiSelect-select {
  color: var(--font-color-grid) !important;
  -webkit-text-fill-color: var(--font-color-grid) !important;
  font-size: 12px;
  font-weight: 100;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* Search icon color (Customer/Symbol SearchComponent uses InputAdornment icon) */
.od-search {
  color: var(--od-text-main);
}

/* Force SearchComponent SVG icon to inherit od-search color.
   Needed because some SVGs have hardcoded fill/stroke on <path>. */
.od-search .MuiInputAdornment-root,
.od-search .MuiInputAdornment-root svg {
  color: var(--od-text-main) !important;
}

.od-search .MuiInputAdornment-root svg,
.od-search .MuiInputAdornment-root svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Ensure Datepicker text fits in narrow column */
.od-input.date-only-field-wrapper .MuiOutlinedInput-root {
  padding-right: 15px !important;
  padding-left: 5px !important;
}

.od-input.date-only-field-wrapper .MuiOutlinedInput-input {
  padding: 0 4px !important;
  font-size: 11px !important;
  text-overflow: clip;
  /* Prefer seeing mm/dd over ellipsis if squeezed */
}

.od-input.date-only-field-wrapper .MuiInputAdornment-root {
  margin-left: 0;
  margin-right: 2px;
}

.od-input.date-only-field-wrapper .MuiIconButton-root {
  padding: 2px;
}

.od-input--accent .MuiOutlinedInput-notchedOutline {
  border-color: var(--od-accent);
}

.od-input .MuiIconButton-root {
  color: var(--od-accent);
}

/* ── Dividers ─────────────────────────────────────────────────── */
.od-divider {
  border: none;
  border-top: 1px solid var(--od-border-divider);
  margin: 0;
  flex-shrink: 0;
}

.od-main-divider {
  border: none;
  border-top: 1px solid var(--od-border-divider);
  /*padding: 0px 10px;*/
  margin: 0px 12px;
  background-color: var(--popup-background-color) !important;
  flex-shrink: 0;
}

/* ── Summary strip ───────────────────────────────────────────── */
.od-summary {
  display: flex;
  gap: 4px;
  padding: 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.od-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.od-summary__item--taxes {
  flex: 0.3;
}

.od-summary__label {
  color: var(--od-text-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.od-summary__value {
  color: var(--font-color-grid);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.od-summary__value--bold {
  font-weight: 700;
  font-size: 13px;
  color: var(--font-color-grid);
}

.od-dashed-line {
  width: 60px;
  height: 0;
  border-top: 1px dashed var(--dashed-line-color);
  margin: 13px 25px 13px 8px;
}

/* ── CTA Button ──────────────────────────────────────────────── */
.od-cta-btn {
  flex-shrink: 0;
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  letter-spacing: 0.2px;
  transition:
    opacity 0.18s,
    box-shadow 0.18s;
  margin-top: auto;
}

.od-cta-btn:hover {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.od-cta-btn--buy {
  background: linear-gradient(135deg, var(--od-green-dark) 0%, var(--od-green) 100%);
}

.od-cta-btn--sell {
  background: linear-gradient(135deg, var(--od-red-dark) 0%, var(--od-red) 100%);
}

/* ══════════════════════════════════════════════════════════════
   MAIN COLUMN (RIGHT SIDE) — Holdings + Blotter + Cash
   ══════════════════════════════════════════════════════════════ */
.od-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  min-height: 0;
}

.od-top-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  flex-shrink: 0;
  height: 300px;
}

.od-equity-cash-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.od-equity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 6px 20px 10px;
  flex-shrink: 0;
}

.od-equity-label {
  font-size: 22px;
  color: var(--od-text-muted);
  font-weight: 500;
  font-family: var(--font-family);
}

.od-equity-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  color: var(--od-green);
  font-family: var(--font-family);
  letter-spacing: -0.3px;
  font-weight: 500;
  line-height: 34px;
  text-transform: capitalize;
}

.od-metric-pill {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.od-metric-pill--up {
  background: var(--od-bg-green-light);
  color: var(--od-green);
}

.od-metric-pill--down {
  background: var(--od-bg-red-light);
  color: var(--od-red-alt);
}

.od-header-divider {
  width: 1px;
  height: 34px;
  background-color: var(--od-border-divider);
  margin: 0 20px;
}

.od-holdings-total-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.od-holdings-total-label {
  font-size: 10px;
  color: var(--od-text-light);
  font-weight: 500;
}

.od-holdings-total-val-box {
  display: flex;
  align-items: center;
  gap: 4px;
}

.od-metric-val {
  font-weight: 600;
  font-size: 12px;
}

.od-metric-val--up {
  color: var(--od-green);
}

.od-metric-val--down {
  color: var(--od-red-alt);
}

.od-holdings,
.od-blotter,
.od-cash {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.od-holdings {
  flex: 1;
}

.od-blotter {
  flex: 1;
  /* Panel width (dock / flexlayout), not viewport — drives filter toolbar wrap */
  container-type: inline-size;
  container-name: od-blotter;
  min-height: 0;
}

.od-blotter > .od-blotter-header-full {
  flex: 0 0 auto;
}

.od-holdings-grid .ag-theme-balham,
.od-blotter-grid .ag-theme-balham,
.od-holdings-grid .ag-root-wrapper,
.od-blotter-grid .ag-root-wrapper {
  border-radius: 0 !important;
}

/* ── Section header ─────────────────────────────────────────── */
.od-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 25px 14px 16px;
  flex-shrink: 0;
}

.od-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  letter-spacing: -0.4px;
}

.od-view-all-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--border-color-global);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 0;
  text-decoration: underline;
  transition: opacity 0.15s;
}

.od-view-all-btn:hover {
  opacity: 0.7;
}

/* ── Blotter controls ────────────────────────────────────────── */
.od-blotter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.od-filter-label {
  font-size: 13px;
  color: var(--od-text-muted);
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-family);
  line-height: 1.5;
  letter-spacing: 0px;
}

.od-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 60px;
}

.od-search-icon {
  position: absolute;
  left: 8px;
  color: var(--od-text-muted, var(--od-text-main));
  pointer-events: none;
  width: 13px;
  height: 13px;
}

.od-search-input {
  padding: 5px 10px 5px 28px;
  border: 1px solid var(--od-select-border, var(--od-border-medium));
  border-radius: 6px;
  font-size: 12px;
  color: var(--font-color-grid, var(--od-text-main));
  background: var(--popup-foreground-color) !important;
  outline: none;
  width: 180px;
  transition: border-color 0.15s;
  font-family: var(--font-family);
}

.od-search-input::placeholder {
  color: var(--od-text-muted, #94a3b8);
  opacity: 1;
}

.od-search-input:focus {
  border-color: var(--od-accent);
}

.od-filter-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--od-border-medium);
  border-radius: 6px;
  background: var(--od-field-bg);
  cursor: pointer;
  color: var(--od-text-muted);
  transition:
    background 0.15s,
    border-color 0.15s;
}

.od-filter-icon-btn:hover {
  background: var(--od-border-grey);
  border-color: var(--od-text-light);
}

/* ── Data grid scrollable ─────────────────────────────────────── */
.od-main-col .od-blotter {
  flex: 1;
  min-height: 220px;
}

.od-main-col .od-blotter-grid {
  min-height: 160px;
}

.od-holdings-grid,
.od-blotter-grid {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.od-blotter-grid .ag-root-wrapper,
.od-blotter-grid .ag-body-viewport,
.od-blotter-grid .ag-center-cols-viewport {
  overflow-x: auto;
}

.od-blotter-grid .ag-header-cell-label,
.od-blotter-grid .ag-cell,
.od-blotter-grid .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.od-holdings-grid {
  padding-bottom: 4px;
}

.od-blotter-grid {
  min-height: 0;
}

/* Order blotter row context menu */
.od-blotter-context-menu__paper {
  min-width: 220px;
  border-radius: 10px !important;
  border: 1px solid var(--od-panel-border, #e2e8f0);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 6px 0 !important;
  background-color: var(--background-dropdown-menu) !important;
}

.od-blotter-context-menu__list {
  padding: 0 !important;
}

.od-blotter-context-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--font-color, #1e293b) !important;
}

.od-blotter-context-menu__item:hover {
  background: var(--od-bg-hover, rgba(37, 99, 235, 0.06)) !important;
}

.od-blotter-context-menu__item.Mui-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.od-blotter-context-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #2563eb;
}

.od-blotter-context-menu__label {
  flex: 1;
  white-space: nowrap;
}

.od-blotter-context-menu__divider {
  margin: 6px 0px !important;
  border-color: #e0e0e0 !important;
}

/* ── Table ────────────────────────────────────────────────────── */
.od-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 400px;
}

.od-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--od-text-muted);
  text-transform: capitalize;
  white-space: nowrap;
  background: var(--od-bg-header-grey);
  position: sticky;
  top: 0;
  z-index: 1;
}

.od-th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.od-th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.od-th--right {
  text-align: right;
}

.od-td {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--od-text-main);
  font-weight: 500;
  white-space: nowrap;
}

.od-td--right {
  text-align: right;
}

.od-td--bg-green {
  background: var(--order-grid-bg-green) !important;
  color: var(--font-color-grid) !important;
  font-weight: 600;
}

.od-td--bg-red {
  background: var(--order-grid-bg-red) !important;
  color: var(--font-color-grid) !important;
  font-weight: 600;
}

.od-grid-header-grey {
  background-color: var(--ag-header-container-bg) !important;
  color: var(--od-text-grey) !important;
  font-weight: 600 !important;
}

.od-text-center .ag-header-cell-label {
  justify-content: center !important;
  font-weight: 600 !important;
}

/* AG-Grid header background for Holdings + Order Blotter */
.od-holdings-grid .ag-header,
.od-holdings-grid .ag-header-viewport,
.od-holdings-grid .ag-header-container,
.od-blotter-grid .ag-header,
.od-blotter-grid .ag-header-viewport,
.od-blotter-grid .ag-header-container {
  background-color: var(--ag-header-container-bg) !important;
}

.od-tr:hover {
  background: var(--od-bg-alt);
}

/* ── Symbol link ──────────────────────────────────────────────── */
.od-symbol-link {
  font-weight: 600;
  font-size: 11px;
  color: var(--od-accent);
}

.od-symbol-marker {
  color: var(--od-accent);
  margin-right: 6px;
  font-weight: 700;
}

.od-symbol-link--up,
.od-symbol-link--down {
  /* In the image, the symbol text is blue, but the icon before it is blue or gray. 
     The mock just shows a blue '+' or blue symbol text '9460' */
  color: var(--od-accent);
}

/* ── Side badge ───────────────────────────────────────────────── */
.od-side-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.od-side-badge--buy {
  color: var(--od-green);
  background: transparent;
}

.od-side-badge--sell {
  color: var(--od-red-alt);
  background: transparent;
}

/* ── Status badge (order blotter pill) ─────────────────────────── */
.od-status-cell-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.od-blotter-grid .ag-cell .od-status-badge {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  height: 22px;
  width: 100%;
}

.od-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding: 2px 10px; */
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: 1.35;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 100%;
}

/* New / queued / sent to broker — blue */
.od-status-badge--new,
.od-status-badge--new-broker,
.od-status-badge--pending,
.od-status-badge--queued,
.od-status-badge--open {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

/* Amend — amber */
.od-status-badge--amend {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #d97706;
}

/* Partial fill — indigo */
.od-status-badge--partial {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4f46e5;
}

/* Filled / complete — green */
.od-status-badge--filled,
.od-status-badge--complete,
.od-status-badge--completed {
  background: #ecfdf5;
  border-color: #10b981;
  color: #059669;
}

/* Cancelled / rejected — red */
.od-status-badge--cancelled,
.od-status-badge--canceled,
.od-status-badge--rejected {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

/* Expired / inactive — slate */
.od-status-badge--expired,
.od-status-badge--failed,
.od-status-badge--default {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #64748b;
}

/* ── Action text ──────────────────────────────────────────────── */
.od-action-text {
  font-size: 12px;
  font-weight: 600;
}

.od-action-text--cancel {
  color: var(--od-red-alt);
}

.od-action-text--complete {
  color: var(--od-green);
}

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL — Cash Statement
   ══════════════════════════════════════════════════════════════ */

.od-cash {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 14px;
}

.od-cash__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.od-cash__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--font-color-grid);
  font-family: var(--font-family);
}

.od-cash__detail-link {
  font-size: 11px;
  color: var(--border-color-global);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  margin-top: 2px;
  margin-left: 30px;
  transition: opacity 0.15s;
  text-decoration: underline;
}

.od-cash__detail-link:hover {
  opacity: 0.7;
}

/* ── Cash rows ───────────────────────────────────────────────── */
.od-cash__rows {
  display: flex;
  flex-direction: column;
  gap: 17px;
  flex-shrink: 0;
}

.od-cash__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.od-cash__row--total {
  padding-top: 2px;
}

.od-cash__row-label {
  font-size: 13px;
  color: var(--od-text-light);
  font-weight: 500;
}

.od-cash__row-label--bold {
  color: var(--font-color-grid);
  font-weight: 500;
}

.od-cash__row-value {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-family: var(--font-family);
}

.od-cash__row-value--neutral {
  color: var(--font-color-grid);
}

.od-cash__row-value--negative {
  color: var(--od-red-alt);
}

.od-cash__row-value--positive {
  color: var(--border-color-global);
}

.od-cash__divider {
  border: none;
  border-top: 1px solid var(--od-border-divider);
  margin: 2px 0;
}

/* ── Equity section ──────────────────────────────────────────── */
.od-cash__equity-section {
  margin-top: 24px;
  flex-shrink: 0;
}

.od-cash__equity-label {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: var(--od-text-main);
  font-weight: 600;
}

.od-cash__equity-value {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--od-text-dark);
  letter-spacing: -0.5px;
  font-family: var(--font-family);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .od-body {
    grid-template-columns: 280px 1fr 240px;
  }
}

@media (max-width: 960px) {
  .od-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
  }

  .od-panel--left,
  .od-panel--center,
  .od-panel--right {
    height: auto;
    min-height: 300px;
  }

  .od-holdings-grid {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .od-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .od-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .od-blotter-controls {
    flex-wrap: wrap;
  }
}

/* ── Blotter Full View Header ───────────────────────────────── */
.od-blotter--full {
  background: var(--od-bg-panel);
  height: 100%;
  min-height: 0;
}

.od-blotter-header-full {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 16px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.od-blotter-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.od-blotter-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.od-blotter--full .od-blotter-tools {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.od-blotter-tools__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
  justify-content: flex-end;
  margin-left: auto;
}

.od-blotter--full .od-blotter-tools__primary {
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.od-blotter-tools__search {
  flex: 0 0 280px;
  width: 280px;
  max-width: 320px;
  min-width: 200px;
  height: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

.od-blotter-tools__search-picker {
  flex-shrink: 0;
  display: inline-flex;
  position: relative;
}

.od-blotter-tools__search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.od-blotter-tools__search .od-full-search-input,
.od-blotter-tools__search .MuiTextField-root,
.od-blotter-tools__search .MuiFormControl-root {
  width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.od-blotter-tools__search > .MuiBox-root,
.od-blotter-tools__search-input > .MuiBox-root {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

.od-blotter--full .od-blotter-tools__search {
  flex: 0 0 280px;
  width: 280px;
}

.od-blotter-tools__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
}

.od-blotter--full .od-blotter-tools__filters {
  flex: 0 1 auto;
  flex-wrap: nowrap;
}

.od-blotter-tools .od-filter-group,
.od-blotter-tools .od-filter-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
}

.od-blotter-tools__control {
  min-width: 110px !important;
  max-width: 100%;
}

.od-blotter-tools__control--side {
  min-width: 88px !important;
}

.od-blotter-tools .od-clear-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.od-blotter-tools .od-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  height: auto;
}

.od-header-actions__expanded {
  display: flex;
  align-items: center;
  gap: 8px;
}

.od-header-actions__compact {
  display: none;
  align-items: center;
}

.od-blotter-actions-menu-btn {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--od-select-border, #d1d5db) !important;
  border-radius: 8px !important;
  background: var(--popup-foreground-color, #fff) !important;
  color: var(--font-color-grid, #111827) !important;
}

.od-blotter-actions-menu-btn:hover {
  background: var(--od-border-grey, #f3f4f6) !important;
}

.od-blotter-actions-menu__paper {
  border-radius: 8px !important;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

.od-blotter-actions-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-family: var(--font-family) !important;
  color: var(--font-color-grid, #111827) !important;
}

.od-blotter-actions-menu__item svg {
  flex-shrink: 0;
  color: var(--od-text-muted, #6b7280);
}

/* Narrow dock panel: collapse New Order / CSV into ⋮ menu */
@container od-blotter (max-width: 960px) {
  .od-header-actions__expanded {
    display: none;
  }

  .od-header-actions__compact {
    display: flex;
  }

  .od-blotter-tools .od-clear-link {
    display: none;
  }
}

/* Narrow dock panel only — keep full-screen toolbar on one compact row */
@container od-blotter (max-width: 720px) {
  .od-blotter--full .od-blotter-tools,
  .od-blotter--full .od-blotter-tools__primary,
  .od-blotter--full .od-blotter-tools__filters {
    flex-wrap: wrap;
  }

  .od-blotter--full .od-blotter-tools__search {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none;
  }

}

@container od-blotter (max-width: 520px) {
  .od-blotter-header-full {
    padding: 8px 12px;
  }

  .od-blotter-tools {
    gap: 8px;
  }

  .od-blotter-tools .od-header-actions {
    width: 100%;
  }

  .od-blotter-tools .od-btn-primary,
  .od-blotter-tools .od-btn-outline {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .od-blotter--full .od-blotter-tools__search {
      flex: 1 1 100%;
      max-width: none;
      width: 100% !important;
    }
  }
}

.od-full-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
}

.od-full-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
}

.od-full-search-input {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  align-self: center !important;
}

.od-full-search-input.MuiFormControl-root,
.od-full-search-input.MuiTextField-root {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.od-full-search-input .MuiOutlinedInput-root {
  height: 36px !important;
  min-height: 36px !important;
  background: var(--popup-foreground-color) !important;
  border-radius: 8px !important;
  font-family: var(--font-family) !important;
  color: var(--font-color-grid) !important;
  padding-left: 10px !important;
  align-items: center !important;
}

.od-full-search-input .MuiInputBase-input {
  height: 36px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
}

.od-full-search-input .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--od-select-border) !important;
}

.od-full-search-input:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--od-select-border) !important;
}

.od-full-search-input.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--od-accent) !important;
  border-width: 1px !important;
}

.od-full-search-input input::placeholder {
  color: var(--od-select-border) !important;
  opacity: 1;
}

.od-full-search-input .MuiInputAdornment-root {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 4px !important;
  height: 100% !important;
  max-height: none !important;
  align-items: center !important;
  display: flex !important;
}

.od-full-search-input .MuiInputAdornment-root .MuiBox-root,
.od-full-search-input .MuiInputAdornment-root div {
  width: 15px !important;
  height: 15px !important;
  background-color: var(--od-text-muted) !important;
}

/* CustomerSearch toolbar button + text field */
.customer-search-toolbar-control.MuiButton-root,
button.customer-search-toolbar-control {
  height: 34px;
  width: 40px !important;
  padding: 0 !important;
  background-color: var(--od-field-bg, #f8fafc) !important;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--od-select-border, #cbd4dd) !important;
  border-radius: 8px;
  box-shadow: none !important;
  color: var(--font-color-grid, #334155);
  flex-shrink: 0;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.customer-search-toolbar-control.MuiButton-root:hover,
button.customer-search-toolbar-control:hover {
  background-color: var(--od-bg-hover, #f1f5f9) !important;
  border-color: var(--od-select-border, #cbd4dd) !important;
}

.customer-search-toolbar-control .MuiOutlinedInput-root {
  height: 36px !important;
  min-height: 32px !important;
  padding: 0 !important;
  padding-left: 12px !important;
  background-color: var(--od-field-bg, #f8fafc) !important;
  border-radius: 8px !important;
  box-sizing: border-box;
}

.customer-search-toolbar-control .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--od-select-border, #cbd4dd) !important;
}

.customer-search-toolbar-control .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.customer-search-toolbar-control .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--od-select-border, #cbd4dd) !important;
}

.customer-search-toolbar-control .MuiInputBase-input {
  height: 36px !important;
  padding: 0 12px !important;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--font-color-grid, #334155) !important;
}

.customer-search-toolbar-control .MuiInputBase-input::placeholder {
  color: var(--od-text-muted, #94a3b8);
  opacity: 1;
}

.customer-search-toolbar-control .MuiInputAdornment-root svg,
.customer-search-toolbar-control .MuiInputAdornment-root svg path {
  fill: var(--font-color-grid, #334155);
}

.customer-search-toolbar-control .MuiInputAdornment-root {
  margin: 0 !important;
  height: 100% !important;
  max-height: none !important;
  align-items: center !important;
}

/* Client Directory / Portfolio toolbar: match od-filter-dropdown surface */
.customer-search-toolbar-control--filter.MuiButton-root,
button.customer-search-toolbar-control--filter {
  background-color: var(--popup-foreground-color) !important;
  border-color: var(--od-select-border, #cbd4dd) !important;
}

.customer-search-toolbar-control--filter.MuiButton-root:hover,
button.customer-search-toolbar-control--filter:hover {
  background-color: var(--popup-foreground-color) !important;
}

.customer-search-toolbar-control--filter .MuiOutlinedInput-root {
  background-color: var(--popup-foreground-color) !important;
  color: var(--font-color-grid) !important;
}

.customer-search-toolbar-control--filter .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--od-select-border, #cbd4dd) !important;
}

.customer-search-toolbar-control--filter .MuiInputBase-input {
  color: var(--font-color-grid) !important;
}

.customer-search-toolbar-control--filter .MuiInputBase-input::placeholder {
  color: var(--od-text-muted, #94a3b8);
}

.customer-search-toolbar-control--filter .MuiInputAdornment-root .MuiBox-root,
.customer-search-toolbar-control--filter .MuiInputAdornment-root div {
  background-color: var(--od-text-muted) !important;
}

.customer-search-toolbar-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.customer-search-toolbar-control .customer-search-toolbar-status {
  color: var(--od-text-muted, #64748b);
}

.customer-search-column-anchor {
  display: inline-flex;
  flex-shrink: 0;
}

.customer-search-column-paper {
  min-width: 200px;
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--od-select-border, #cbd4dd);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: var(--popup-foreground-color, #fff);
}

.customer-search-column-paper__title {
  padding: 6px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--od-text-muted);
}

.customer-search-column-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-search-column-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--font-color-grid);
  cursor: pointer;
}

.customer-search-column-item:hover {
  background: var(--background-menu-item-hover, #f1f5f9);
}

.customer-search-column-item--active {
  font-weight: 600;
  color: var(--od-accent, #2563eb);
  background: var(--background-menu-item-hover, #f1f5f9);
}

.customer-search-dropdown {
  width: 615px !important;
}

.customer-search-dropdown.search-dropdown-paper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--od-select-border, #cbd4dd);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  background: var(--popup-foreground-color, #fff);
}

.customer-search-dropdown__grid {
  flex-shrink: 0;
  position: relative;
}

.customer-search-dropdown__pagination {
  flex-shrink: 0;
  border-top: 1px solid var(--od-panel-border, #e2e8f0);
}

.customer-search-dropdown__pagination .od-pagination {
  padding: 8px 12px;
  gap: 8px;
}

.customer-search-dropdown__pagination .od-pagination-btn,
.customer-search-dropdown__pagination .od-pagination-num {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.customer-search-dropdown__pagination .od-pagination-limit-label {
  font-size: 12px;
}

.customer-search-dropdown__pagination .od-pagination-limit-select {
  font-size: 12px;
  padding: 4px 24px 4px 8px;
}

/* Centering search icons for standard 26px inputs */
.od-search .MuiInputAdornment-root,
.tw-search .MuiInputAdornment-root,
.od-input .MuiInputAdornment-root,
.tw-input .MuiInputAdornment-root {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.od-search .MuiInputAdornment-root .MuiBox-root,
.od-search .MuiInputAdornment-root div,
.tw-search .MuiInputAdornment-root .MuiBox-root,
.tw-search .MuiInputAdornment-root div,
.od-input .MuiInputAdornment-root .MuiBox-root,
.od-input .MuiInputAdornment-root div,
.tw-input .MuiInputAdornment-root .MuiBox-root,
.tw-input .MuiInputAdornment-root div {
  width: 14px !important;
  height: 14px !important;
  background-color: var(--od-text-muted) !important;
}

/* Removed redundant svg styling as we use masks now */

.od-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.od-filter-date-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.od-date-preset-menu__paper {
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

.od-date-range-popover__paper {
  margin-top: 8px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
  overflow: visible !important;
}

.od-date-range-popover__content {
  padding: 16px;
  min-width: 320px;
}

.od-date-range-popover__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--font-color-grid);
  margin-bottom: 12px;
  font-family: var(--font-family);
}

.od-date-range-popover__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.od-date-range-popover__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.od-date-range-popover__field .od-filter-date-field {
  width: 100%;
}

.od-date-range-popover__field .date-only-field-wrapper .MuiOutlinedInput-root {
  height: 36px !important;
  min-height: 36px !important;
  background: var(--popup-foreground-color) !important;
  border-radius: 8px !important;
}

.od-date-range-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.od-date-range-popover__btn-cancel {
  text-transform: none !important;
  color: var(--font-color-grid) !important;
}

.od-date-range-popover__btn-apply {
  text-transform: none !important;
  background: var(--od-accent, #2563eb) !important;
}

.od-date-range-popover .MuiPickersPopper-root,
.od-date-range-popover .MuiPopover-root {
  z-index: 1500 !important;
}

.od-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.od-filter-dropdown .MuiSelect-select,
.od-account-dropdown .MuiSelect-select {
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--font-color-grid) !important;
  background: var(--popup-foreground-color) !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  font-family: var(--font-family) !important;
}

.od-filter-dropdown .MuiSelect-icon,
.od-account-dropdown .MuiSelect-icon,
.od-dropdown .MuiSelect-icon,
.tw-dropdown .MuiSelect-icon {
  top: calc(50% - 3px) !important;
  right: 12px !important;
}

.od-filter-dropdown .MuiOutlinedInput-notchedOutline,
.od-account-dropdown .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--od-select-border) !important;
  border-radius: 8px !important;
}

.od-filter-dropdown:hover .MuiOutlinedInput-notchedOutline,
.od-account-dropdown:hover .MuiOutlinedInput-notchedOutline {
  border-color: #d1d5db !important;
}

.od-filter-dropdown.Mui-focused .MuiOutlinedInput-notchedOutline,
.od-account-dropdown.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--od-accent) !important;
  border-width: 1px !important;
}

.od-select-wrapper select:focus {
  border-color: var(--od-accent);
}

.od-select-arrow {
  position: absolute;
  right: 10px;
  width: 10px;
  height: 6px;
  pointer-events: none;
  color: #6b7280;
}

.od-clear-link {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--od-clear-link-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  padding: 0 !important;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px !important;
  padding-left: 10px !important;
}

.od-clear-link:hover {
  text-decoration: underline;
}

.od-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.od-btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #003366;
  /* Dark navy matching design */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: var(--font-family);
}

.od-btn-primary:hover {
  opacity: 0.9;
}

.od-btn-outline {
  display: flex;
  align-items: center;
  background: var(--popup-foreground-color);
  color: var(--od-text-main);
  border: 1px solid var(--od-select-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-family);
}

.od-btn-outline:hover {
  background: #f9fafb;
}

/* ── Pagination ─────────────────────────────────────────────── */
.od-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--popup-foreground-color);
}

.od-pagination-spacer {
  flex: 1;
}

.od-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.od-pagination-btn,
.od-pagination-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--od-pagination-border);
  background: var(--popup-foreground-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--font-color-grid);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-family);
  padding: 0;
}

.od-pagination-btn-prev,
.od-pagination-btn-next,
.od-pagination-btn-first,
.od-pagination-btn-last {
  color: #9ca3af;
}

.od-pagination-btn--active {
  border-color: #3b82f6;
  color: #3b82f6 !important;
}

.od-pagination-btn:hover:not(:disabled),
.od-pagination-num:hover:not(.od-pagination-num--active) {
  background: #f9fafb;
  border-color: #d1d5db;
}

.od-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.od-pagination-num--active {
  background: #003366;
  color: #fff;
  border-color: #003366;
}

.od-pagination-dots {
  color: #9ca3af;
  font-size: 14px;
  padding: 0 4px;
  letter-spacing: 1px;
}

.od-pagination-limit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
}

.od-pagination-limit-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.od-pagination-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.od-pagination-limit-select {
  appearance: none;
  background: var(--popup-foreground-color);
  border: 1px solid var(--od-select-border);
  border-radius: 6px;
  padding: 4px 28px 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--font-color-grid);
  cursor: pointer;
  outline: none;
  min-width: 65px;
  transition: all 0.2s;
  font-family: var(--font-family);
}

.od-pagination-limit-select:hover {
  border-color: #d1d5db;
}

.od-pagination-select-arrow {
  position: absolute;
  right: 10px;
  width: 10px;
  height: 10px;
  color: #9ca3af;
  pointer-events: none;
}

/* ── Customer Suggestions Dropdown ──────────────────────────── */
.od-search-container {
  position: relative;
  width: 100%;
}

.od-suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  background: var(--popup-foreground-color);
  border: 1px solid var(--od-panel-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow-y: auto;
  margin-top: 4px;
}

.od-suggestion-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--font-color-grid);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.od-suggestion-item:hover {
  background: var(--od-bg-hover);
}

.od-suggestion-item__id {
  font-size: 10px;
  color: var(--od-text-muted);
}

.od-row-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

/* Customer Detail Grid styling */
/* Customer Detail styling */
.cd-detail-container {
  background: var(--popup-foreground-color);
  margin: 8px;
  padding: 2px 16px;
  border-radius: 8px;
  border: 1px solid var(--od-panel-border);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}

.cd-profile-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.cd-profile-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 200px;
}

.cd-profile-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--od-bg-hover, rgba(0, 0, 0, 0.06));
  flex-shrink: 0;
}

.cd-profile-search-icon img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.cd-profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 40px;
  flex: 1 1 480px;
  justify-content: flex-end;
}

.cd-meta-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  flex-direction: column;
}

.cd-meta-label {
  color: #7c8a98;
  font-weight: 600;
  font-size: 14px;
}

.cd-meta-label::after {
  content: ':';
}

.cd-meta-value {
  color: var(--font-color);
  font-weight: 400;
  font-size: 1rem;
}

.cd-meta-value--emphasis {
  font-weight: 700;
  font-size: 13px;
}

.cd-section-card {
  background: var(--cd-content-bg, var(--popup-foreground-color));
  border: 1px solid var(--cd-content-border, var(--od-panel-border));
  border-radius: 8px;
  padding: 10px 12px 12px;
  overflow: hidden;
}

.cd-section-card .cd-section-title {
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-global);
  font-size: 14px;
  font-weight: 700;
}

.cd-section-card .customer-detail-grid {
  margin: 0;
}

.cd-cell-enabled {
  color: #16a34a;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.cd-cell-disabled {
  color: #dc2626;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.cd-empty {
  padding: 24px;
  text-align: center;
  color: var(--od-text-muted);
  font-size: 14px;
}

.cd-empty--error {
  color: #dc2626;
}

/* Execution Detail dialog */
.ed-detail-container {
  background: var(--popup-foreground-color);
  margin: 8px;
  padding: 12px 16px 16px;
  border-radius: 8px;
  border: 1px solid var(--od-panel-border);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}

.ed-summary-card,
.ed-section-card {
  background: var(--cd-content-bg, var(--popup-foreground-color));
  border: 1px solid var(--cd-content-border, var(--od-panel-border));
  border-radius: 8px;
  padding: 12px 16px;
}

.ed-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

.ed-summary-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-summary-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ed-summary-label {
  font-size: 12px;
  color: var(--od-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.ed-summary-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--font-color);
  text-align: right;
  flex: 1;
  min-width: 0;
}

.ed-empty {
  padding: 24px;
  text-align: center;
  color: var(--od-text-muted);
  font-size: 14px;
}

.ed-empty--error {
  color: #dc2626;
}

.customer-detail-grid.cd-cash-grid .ag-row {
  cursor: pointer;
}

.customer-detail-grid.cd-cash-grid .ag-row.ag-row-selected {
  background-color: var(--cd-cash-row-selected-bg, rgba(37, 99, 235, 0.12)) !important;
}

.customer-detail-grid.cd-cash-grid .ag-row.ag-row-selected .ag-cell {
  font-weight: 600;
}

.customer-list {
  /* margin-bottom: 24px; */
  background-color: var(--cd-content-bg);
  padding: 8px;
  border: 1px solid var(--cd-content-border);
  border-radius: 8px;
  /* height removed to let it grow with content or be managed by parent */
}

.cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-bottom: 16px; */
  padding: 8px 12px;
  flex-wrap: wrap;
  gap: 16px;
}

.cd-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cd-header-customer-no {
  color: var(--od-text-muted);
  font-size: 13px;
  margin-top: 4px;
}

.cd-header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.cd-header-actions .od-btn-outline,
.cd-header-actions .od-btn-primary {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.cd-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cd-header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--table-header-bg, #f3f4f6);
  border: 1px solid var(--border-color-global, #e5e7eb);
  color: var(--font-color, #374151);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cd-header-icon-btn:hover {
  background: var(--od-bg-hover, #e5e7eb);
  transform: scale(1.05);
}

.cd-customer-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--font-color);
  margin: 0;
  font-family: 'Poppins', var(--font-family, sans-serif);
  letter-spacing: -0.3px;
}

.cd-header-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cd-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-meta-item--inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.cd-meta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--od-text-muted, #6b7280);
}

.cd-meta-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--font-color, #111827);
}

.cd-meta-val--bold {
  font-weight: 700;
}

.cd-meta-val--highlight {
  font-size: 16px;
  font-weight: 800;
  color: var(--font-color, #111827);
}

.cd-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  margin-left: 5px;
  border-bottom: 1px solid var(--border-color-global);
  padding-bottom: 6px;
  margin-top: 8px;
}

.cd-section-title.without-border-bottom {
  margin-top: 0;
  border-bottom: none;
}

.cd-exchange-mappings-container {
  background-color: var(--cd-content-bg);
  padding: 8px;
  border: 1px solid var(--cd-content-border);
  border-radius: 8px;
  margin-top: 8px;
}

.cd-exchange-mappings {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cd-exchange-card {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 8px;
  border-right: 1px solid var(--border-color-global);
}

.cd-exchange-card:last-child {
  border-right: none;
}

.cd-exchange-header {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--font-color);
}

.cd-mapping-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  gap: 6px;
}

.cd-mapping-label {
  color: var(--od-text-muted);
}

.cd-mapping-value {
  font-weight: 600;
  color: var(--font-color);
  text-align: right;
}

.cd-mapping-value.bold {
  font-weight: 700;
}

.cd-mapping-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color-global);
}

.cd-status-enabled {
  color: #22c55e;
  font-weight: 700;
}

.cd-status-disabled {
  color: #ef4444;
  font-weight: 700;
}

.cd-tier-value {
  color: #ef4444;
  font-weight: 700;
}

.cd-tier-value-alt {
  color: #f59e0b;
  font-weight: 700;
}

.customer-detail-grid {
  border-radius: 8px;
}

.customer-detail-grid .ag-root-wrapper {
  border: none !important;
  border-radius: 8px;
}

.customer-detail-grid .ag-header {
  background-color: var(--table-header-bg, rgba(0, 0, 0, 0.04)) !important;
}

.customer-detail-grid .ag-header-cell-text {
  color: var(--od-text-muted) !important;
  font-weight: 600 !important;
}

/* .customer-detail-grid .ag-row {
  border-bottom: 1px solid var(--border-color-global) !important;
} */

.customer-detail-grid .ag-row:last-child {
  border-bottom: none !important;
}

.customer-detail-grid .ag-cell {
  border-right: none !important;
  font-size: 12px;
}

.customer-detail-grid .ag-header-cell {
  border-right: none !important;
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Portfolio dashboard (mock layout) ───────────────────────── */
.pf-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
  /* background: var(--od-page-bg, #f0f2f5); */
}

.pf-dashboard__toolbar {
  flex-shrink: 0;
  margin: -16px -16px 0;
  padding: 16px 20px;
  background: var(--popup-foreground-color, #fff);
  border-bottom: 1px solid var(--od-panel-border, #e2e8f0);
  border-radius: 0;
}

.pf-dashboard__toolbar .od-blotter-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pf-toolbar {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
  flex-shrink: 0;
  height: 40px !important;
}

.pf-trading-account-dropdown {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd4dd !important;
  background-color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--font-color-grid) !important;
  box-shadow: none !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-toolbar__search {
  position: relative;
  flex: 1;
  max-width: 420px;
}

.pf-suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
}

.pf-toolbar__account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pf-toolbar__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--font-color-grid);
  white-space: nowrap;
}

.pf-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  flex-shrink: 0;
}

.pf-summary-card {
  position: relative;
  background: var(--popup-foreground-color);
  border: 1px solid var(--od-panel-border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 88px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.pf-summary-card__accent {
  height: 4px;
  width: 100%;
}

.pf-summary-card--equity .pf-summary-card__accent {
  background: #2563eb;
}

.pf-summary-card--cash .pf-summary-card__accent {
  background: #0d5c63;
}

.pf-summary-card--pnl .pf-summary-card__accent {
  background: #f59e0b;
}

.pf-summary-card--buying-power .pf-summary-card__accent {
  background: #2563eb;
}

.pf-summary-card--market-value .pf-summary-card__accent {
  background: #0d5c63;
}

.pf-summary-card--gl .pf-summary-card__accent {
  background: #f59e0b;
}

.pf-dashboard--customer .pf-main {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
  align-items: stretch;
}

.pf-dashboard--customer .pf-main__holdings {
  height: 100%;
}

.pf-dashboard--customer .pf-main__holdings .pf-holdings-panel {
  height: 100%;
}

.pf-dashboard--customer .pf-main__sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pf-customer-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  width: 100%;
  flex: 1;
  height: 100%;
}

.pf-dashboard--customer .pf-customer-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pf-dashboard--customer .pf-customer-panel--cash {
  flex: 2;
}

.pf-dashboard--customer .pf-customer-panel--margin {
  flex: 3;
}

.pf-dashboard--customer .pf-customer-panel__rows {
  flex: 1;
}

.pf-dashboard--customer .pf-customer-panel--cash .pf-customer-panel__rows {
  flex: 0 1 auto;
}

.pf-dashboard--customer .pf-summary-row {
  gap: 16px;
}

.pf-dashboard--customer .pf-summary-card {
  min-height: 96px;
  border-radius: 12px;
}

.pf-dashboard--customer .pf-summary-card__body {
  padding: 16px 18px 18px;
  gap: 8px;
}

.pf-dashboard--customer .pf-summary-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--od-text-muted, #64748b);
}

.pf-dashboard--customer .pf-summary-card__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.pf-dashboard--customer .pf-summary-card__pct {
  font-size: 16px;
  font-weight: 600;
}

.pf-dashboard--customer .pf-section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.pf-customer-panel {
  background: var(--popup-foreground-color, #fff);
  border: 1px solid var(--od-panel-border, #e2e8f0);
  border-radius: 16px;
  padding: 16px 14px 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.pf-customer-panel__card-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--od-panel-border, #e2e8f0);
}

.pf-customer-panel__card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pf-customer-panel__card-header-total {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.pf-customer-panel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.2px;
  color: var(--font-color-grid, #0f172a);
}

.pf-customer-panel__total {
  font-size: 26px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--font-color-grid, #0f172a);
  white-space: nowrap;
}

.pf-customer-panel__link {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.pf-customer-panel__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-customer-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.pf-customer-panel__row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--od-text-muted, #64748b);
}

.pf-customer-panel__row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--font-color-grid, #0f172a);
}

.pf-summary-card__body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.pf-summary-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--od-text-muted);
}

.pf-summary-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--font-color-grid);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.3px;
}

.pf-summary-card__pnl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.pf-summary-card__pct {
  font-size: 14px;
  font-weight: 600;
}

.pf-summary-card__watermark {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 56px;
  height: 56px;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

.pf-summary-card__watermark--bank {
  background: radial-gradient(circle at 30% 30%, #2563eb 0%, transparent 70%);
  border-radius: 8px;
}

.pf-summary-card__watermark--wallet {
  background: radial-gradient(circle at 40% 40%, #0d5c63 0%, transparent 70%);
  border-radius: 50%;
}

.pf-summary-card__watermark--growth {
  background: radial-gradient(circle at 50% 50%, #f59e0b 0%, transparent 70%);
}

.pf-main {
  display: grid;
  /* Match .pf-summary-row (3 equal columns, 16px gap): holdings = equity + cash width */
  grid-template-columns: calc(2 * (100% - 32px) / 3 + 16px) minmax(0, calc((100% - 32px) / 3));
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.pf-main__holdings {
  min-height: 0;
  min-width: 0;
  display: flex;
  width: 100%;
}

.pf-main__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  min-width: 0;
}

.pf-main__sidebar .pf-sector-panel,
.pf-perf-panel {
  background: var(--popup-foreground-color);
  border: 1px solid var(--od-panel-border);
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 14px 12px;
  gap: 10px;
}

.pf-perf-panel {
  flex: 1;
  min-height: 0;
}

.pf-perf-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.pf-perf-col__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--od-text-muted);
  text-align: center;
}

.pf-perf-col__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-perf-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--card-background-login);
  border-radius: 6px;
  border: 1px solid var(--od-border-grey);
}

.pf-perf-cell__symbol {
  font-size: 12px;
  font-weight: 600;
  color: var(--font-color-grid);
}

.pf-perf-cell__pct {
  font-size: 12px;
  font-weight: 600;
}

.pf-sector-panel {
  flex: 0 0 auto;
}

.pf-main__sidebar .pf-perf-panel {
  flex: 1;
  min-height: 0;
}

/* Legacy 3-column root (unused) */
.pf-root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Shared panel card ───────────────────────────────────────── */
.pf-holdings-panel,
.pf-chart-panel,
.pf-news-panel,
.pf-topsymbols-panel,
.pf-sector-panel,
.pf-perf-panel {
  background: var(--popup-foreground-color);
  border: 1px solid var(--od-panel-border);
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Section title ───────────────────────────────────────────── */
.pf-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--font-color-grid);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.2px;
}

/* ── Holdings panel ──────────────────────────────────────────── */
.pf-holdings-panel {
  padding: 16px 14px 12px;
  gap: 10px;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.pf-holdings-grid-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pf-holdings-grid-wrap .ag-root-wrapper {
  flex: 1;
  min-height: 0;
}

.pf-holdings-total-row {
  font-weight: 700 !important;
  background: var(--card-background-login, #f8fafc) !important;
}

.pf-holdings-total-row .ag-cell {
  font-weight: 700;
  border-top: 1px solid var(--od-panel-border);
}

.pf-holdings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.pf-holdings-empty {
  color: var(--od-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
}

.pf-holding-row {
  background: var(--card-background-login);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--od-border-grey);
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pf-holding-row:hover {
  border-color: var(--od-accent, #2563eb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pf-holding-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.pf-holding-symbol {
  font-size: 18px;
  font-weight: 700;
  color: var(--font-color-grid);
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
}

.pf-holding-name {
  font-size: 11px;
  color: var(--od-text-muted);
  font-weight: 400;
}

.pf-holding-stats {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 32px;
}

.pf-holding-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-holding-stat__label {
  font-size: 11px;
  color: var(--od-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.pf-holding-stat__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color-grid);
  white-space: nowrap;
  line-height: 1.2;
}

.pf-color--green {
  color: var(--od-green) !important;
}

.pf-color--red {
  color: var(--od-red) !important;
}

/* ── Chart panel ─────────────────────────────────────────────── */
.pf-chart-panel {
  padding: 18px 20px 12px;
  gap: 8px;
}

.pf-chart-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.pf-chart-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf-chart-arrow {
  font-size: 18px;
}

.pf-chart-total {
  font-size: 32px;
  font-weight: 800;
  color: var(--font-color-grid);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.8px;
  line-height: 1;
}

.pf-chart-sub-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-chart-daily {
  font-size: 14px;
  font-weight: 500;
  color: var(--od-text-muted);
}

.pf-chart-pct {
  font-size: 14px;
  font-weight: 700;
}

/* Transparent chart area — the SVG renders lines/area only */
.pf-chart-area {
  flex: 1;
  min-height: 100px;
  max-height: 160px;
  overflow: hidden;
  /* No background, no border — purely transparent */
  background: transparent;
}

/* ── Period selector ─────────────────────────────────────────── */
.pf-chart-periods {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.pf-period-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--od-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition:
    background 0.15s,
    color 0.15s;
}

.pf-period-btn:hover {
  background: var(--od-bg-hover);
  color: var(--font-color-grid);
}

.pf-period-btn--active {
  background: var(--od-accent, #2563eb);
  color: #fff !important;
  font-weight: 600;
}

/* ── News panel ──────────────────────────────────────────────── */
.pf-news-panel {
  padding: 16px 14px 12px;
  gap: 12px;
}

.pf-news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.pf-news-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--card-background-login);
  border-radius: 2px;
  padding: 10px 12px;
  border: 1px solid var(--od-border-grey);
  border-left: 5px solid var(--od-accent);
  transition: border-color 0.15s;
}

.pf-news-item:hover {
  border-color: var(--od-accent);
}

.pf-news-icon-wrap {
  margin-top: 2px;
  flex-shrink: 0;
}

.pf-news-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pf-news-code-headline {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.pf-news-code {
  font-size: 11px;
  font-weight: 700;
  color: var(--od-accent);
  white-space: nowrap;
}

.pf-news-headline {
  font-size: 11px;
  font-weight: 500;
  color: var(--font-color-grid);
  line-height: 1.4;
}

.pf-news-time {
  font-size: 10px;
  color: var(--od-text-muted);
  font-weight: 400;
}

/* ── Top Symbols panel ───────────────────────────────────────── */
.pf-topsymbols-panel {
  padding: 6px 6px 6px;
  gap: 10px;
}

.pf-topsymbols-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin: 5px;
}

.pf-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.pf-icon-btn:hover {
  background: var(--od-bg-hover);
}

.pf-ts-grid-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}

.pf-ts-grid-container .ag-root-wrapper {
  border: none !important;
}

/* ── Sector allocation panel ─────────────────────────────────── */
.pf-sector-panel {
  padding: 16px 14px 14px;
  gap: 12px;
}

.pf-sector-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pf-sector-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
  margin-left: 20px;
}

.pf-sector-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-sector-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-sector-legend-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--font-color-grid);
}

/* ── Shared colour utilities ─────────────────────────────────── */
.pf-color--green {
  color: var(--od-green, #16a34a) !important;
}

.pf-color--red {
  color: var(--od-red-alt, #dc2626) !important;
}

.pf-color--red-arrow {
  color: var(--od-red-alt, #dc2626);
}

.pf-color--down-arrow {
  color: var(--od-green, #16a34a);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pf-row--top,
  .pf-row--bottom {
    grid-template-columns: 240px 1fr 220px;
  }
}

@media (max-width: 960px) {
  .pf-summary-row {
    grid-template-columns: 1fr;
  }

  .pf-main {
    grid-template-columns: 1fr;
  }

  .pf-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-toolbar__search {
    max-width: none;
  }
}

@media (max-width: 860px) {
  .pf-row--top,
  .pf-row--bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .pf-row-spacer {
    display: none;
  }
}

/* ── Custom Scrollbar (Thin & Hover) ─────────────────────────── */
/* 
   Matches the style in ProGrid.css: thin, rounded, and visible only on hover.
   Applied to all scrollable containers within the Order Dashboard.
*/

.pf-holdings-list::-webkit-scrollbar,
.pf-news-list::-webkit-scrollbar,
.od-suggestions-list::-webkit-scrollbar,
.od-panel--left::-webkit-scrollbar,
.cd-exchange-mappings-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

.pf-holdings-list::-webkit-scrollbar-thumb,
.pf-news-list::-webkit-scrollbar-thumb,
.od-suggestions-list::-webkit-scrollbar-thumb,
.od-panel--left::-webkit-scrollbar-thumb,
.cd-exchange-mappings-container::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.pf-holdings-list:hover::-webkit-scrollbar-thumb,
.pf-news-list:hover::-webkit-scrollbar-thumb,
.od-suggestions-list:hover::-webkit-scrollbar-thumb,
.od-panel--left:hover::-webkit-scrollbar-thumb,
.cd-exchange-mappings-container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}

.pf-holdings-list::-webkit-scrollbar-thumb:hover,
.pf-news-list::-webkit-scrollbar-thumb:hover,
.od-suggestions-list::-webkit-scrollbar-thumb:hover,
.od-panel--left::-webkit-scrollbar-thumb:hover,
.cd-exchange-mappings-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Firefox */
.pf-holdings-list,
.pf-news-list,
.od-suggestions-list,
.od-panel--left,
.cd-exchange-mappings-container {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.pf-holdings-list:hover,
.pf-news-list:hover,
.od-suggestions-list:hover,
.od-panel--left:hover,
.cd-exchange-mappings-container:hover {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Dark theme: cash available row + order blotter "View All" */
[data-theme='dark'] .od-cash__row-value--positive,
[data-theme='flat-dark'] .od-cash__row-value--positive {
  color: var(--font-color-grid) !important;
}

[data-theme='dark'] .od-view-all-btn,
[data-theme='flat-dark'] .od-view-all-btn {
  color: var(--font-color-grid) !important;
}

[data-theme='dark'] .od-view-all-btn:hover,
[data-theme='flat-dark'] .od-view-all-btn:hover {
  opacity: 0.85;
}

/* Dark theme support */
[data-theme='dark'] .pf-holdings-list:hover::-webkit-scrollbar-thumb,
[data-theme='flat-dark'] .pf-holdings-list:hover::-webkit-scrollbar-thumb,
[data-theme='dark'] .pf-news-list:hover::-webkit-scrollbar-thumb,
[data-theme='flat-dark'] .pf-news-list:hover::-webkit-scrollbar-thumb,
[data-theme='dark'] .od-suggestions-list:hover::-webkit-scrollbar-thumb,
[data-theme='flat-dark'] .od-suggestions-list:hover::-webkit-scrollbar-thumb,
[data-theme='dark'] .od-panel--left:hover::-webkit-scrollbar-thumb,
[data-theme='flat-dark'] .od-panel--left:hover::-webkit-scrollbar-thumb,
[data-theme='dark'] .cd-exchange-mappings-container:hover::-webkit-scrollbar-thumb,
[data-theme='flat-dark'] .cd-exchange-mappings-container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

[data-theme='dark'] .pf-holdings-list::-webkit-scrollbar-thumb:hover,
[data-theme='flat-dark'] .pf-holdings-list::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] .pf-news-list::-webkit-scrollbar-thumb:hover,
[data-theme='flat-dark'] .pf-news-list::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] .od-suggestions-list::-webkit-scrollbar-thumb:hover,
[data-theme='flat-dark'] .od-suggestions-list::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] .od-panel--left::-webkit-scrollbar-thumb:hover,
[data-theme='flat-dark'] .od-panel--left::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] .cd-exchange-mappings-container::-webkit-scrollbar-thumb:hover,
[data-theme='flat-dark'] .cd-exchange-mappings-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

[data-theme='dark'] .pf-holdings-list:hover,
[data-theme='flat-dark'] .pf-holdings-list:hover,
[data-theme='dark'] .pf-news-list:hover,
[data-theme='flat-dark'] .pf-news-list:hover,
[data-theme='dark'] .od-suggestions-list:hover,
[data-theme='flat-dark'] .od-suggestions-list:hover,
[data-theme='dark'] .od-panel--left:hover,
[data-theme='flat-dark'] .od-panel--left:hover,
[data-theme='dark'] .cd-exchange-mappings-container:hover,
[data-theme='flat-dark'] .cd-exchange-mappings-container:hover {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

[data-theme='dark'] .od-blotter-context-menu__list,
[data-theme='flat-dark'] .od-blotter-context-menu__list,
[data-theme='dark'] .od-blotter-context-menu__list svg,
[data-theme='flat-dark'] .od-blotter-context-menu__list svg {
  background-color: var(--popup-foreground-color) !important;
  color: var(--font-color-grid) !important;
  fill: var(--font-color-grid) !important;
  stroke: var(--font-color-grid) !important;
}
[data-theme='dark'] .od-blotter-context-menu__list svg,
[data-theme='flat-dark'] .od-blotter-context-menu__list svg {
  background-color: var(--popup-foreground-color) !important;
  color: var(--font-color-grid) !important;
  fill: var(--font-color-grid) !important;
  stroke: var(--font-color-grid) !important;
}

/* Buying Power / Holdings context dialogs */
.bp-dialog-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
  padding: 16px 20px 20px;
  box-sizing: border-box;
  background: var(--popup-foreground-color, #fff);
}

.bp-dialog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bp-dialog-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bp-dialog-customer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--od-panel-border, #cfd8e3);
  flex-shrink: 0;
}

.bp-dialog-customer__icon img {
  width: 14px;
  height: 14px;
  opacity: 0.75;
}

.bp-dialog-customer__name {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--font-color-grid, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-dialog-account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bp-dialog-account__label {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--od-text-muted, #6b7280);
  white-space: nowrap;
}

.bp-dialog-account__dropdown {
  min-width: 180px;
}

.bp-dialog-card {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--cd-content-bg, #f3f5f8);
  border: 1px solid var(--cd-content-border, var(--od-panel-border, #e5e7eb));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bp-dialog-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.bp-dialog-row__label {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--od-text-muted, #6b7280);
}

.bp-dialog-row__value {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--font-color-grid, #111827);
  text-align: right;
}

.bp-dialog-status {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--od-red-alt, #c62828);
  padding: 0 2px;
}

.ch-holdings-dialog__grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ch-holdings-dialog__grid .pf-holdings-panel,
.ch-holdings-dialog__grid .pf-holdings-grid-wrap,
.ch-holdings-dialog__grid .od-blotter-grid {
  flex: 1;
  min-height: 280px;
}

/* Short Ticket — compact form + stock card / summary sidebar */

.tw-main--short-ticket {
  min-height: 0;
  height: 100%;
}

.tw-main--short-ticket .tw-content {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  height: 100%;
  padding: 12px 16px 16px;
}

.tw-main--short-ticket .tw-form-container {
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}

.tw-main--short-ticket .tw-short-ticket-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.tw-main--short-ticket .tw-short-ticket-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: start;
  flex: 1;
  min-height: 0;
}

.tw-main--short-ticket .tw-short-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tw-main--short-ticket .tw-form-row,
.tw-main--short-ticket .tw-form-row--3,
.tw-main--short-ticket .tw-form-row--4,
.tw-main--short-ticket .tw-form-row--5 {
  display: grid;
  gap: 12px;
  align-items: start;
  width: 100%;
}

/* Customer + Symbol */
.tw-main--short-ticket .tw-form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Segmented Buy/Sell — grey track, raised white active (green/red text) */
.tw-main--short-ticket .tw-short-ticket-side .tw-buysell {
  width: 100%;
  padding: 3px;
  gap: 0;
  border-radius: 10px;
  border: none;
  background-color: #e8eaed !important;
}

.tw-main--short-ticket .tw-short-ticket-side .tw-buysell__btn {
  height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #9aa0a6 !important;
  background: transparent;
  box-shadow: none;
}

.tw-main--short-ticket .tw-short-ticket-side .tw-buysell__btn--buy-active {
  background: #ffffff;
  color: #34a853 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25);
}

.tw-main--short-ticket .tw-short-ticket-side .tw-buysell__btn--sell-active {
  background: #ffffff;
  color: #d93025 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25);
}

/* Footer CTA under stock card — no utility icons */
.tw-main--short-ticket .tw-short-ticket-side .tw-footer {
  gap: 0;
  width: 100%;
  padding-top: 0;
}

.tw-main--short-ticket .tw-short-ticket-side .tw-footer--cta-only {
  display: block;
}

.tw-main--short-ticket .tw-short-ticket-side .tw-footer__cta {
  flex: none;
  width: 100%;
}

.tw-main--short-ticket .tw-short-ticket-side .tw-cta-btn {
  height: 40px;
  font-size: 13px;
}

.tw-main--short-ticket .tw-form-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw-main--short-ticket .tw-form-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tw-main--short-ticket .tw-form-row--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tw-main--short-ticket .tw-field {
  min-width: 0;
  width: 100%;
}

/* Keep Order Type / Qty / Price / Good Till / Date on one baseline */
.tw-main--short-ticket .tw-field > .MuiBox-root,
.tw-main--short-ticket .tw-field > .MuiFormControl-root,
.tw-main--short-ticket .tw-field > .date-only-field-wrapper,
.tw-main--short-ticket .tw-field > .tw-search-container,
.tw-main--short-ticket .tw-field > .tw-search {
  width: 100% !important;
  max-width: none;
  margin: 0;
}

.tw-main--short-ticket .date-only-field-wrapper {
  width: 100% !important;
}

.tw-main--short-ticket .MuiOutlinedInput-root,
.tw-main--short-ticket .date-only-field-wrapper .MuiOutlinedInput-root {
  height: var(--tw-input-h) !important;
  min-height: var(--tw-input-h) !important;
  box-sizing: border-box;
}

.tw-main--short-ticket .MuiFormControl-root {
  margin: 0 !important;
}

.tw-main--short-ticket .tw-short-ticket-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 240px;
  max-width: 240px;
  min-width: 0;
}

.tw-main--short-ticket .tw-sidebar {
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 10px;
}

.tw-main--short-ticket .tw-sidebar--quote-only {
  position: sticky;
  top: 0;
}

.tw-main--short-ticket .tw-sidebar-card--stock {
  margin: 0;
}

/* Detail row + Buy button — same baseline, compact */
.tw-main--short-ticket .tw-short-ticket-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin-top: 0;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-summary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-summary__item {
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-summary__label {
  white-space: nowrap;
  line-height: 1.2;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-summary__value {
  text-align: left;
  line-height: 1.2;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-footer {
  gap: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: center;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-footer--cta-only {
  display: block;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-footer__cta {
  flex: none;
  width: 100%;
}

.tw-main--short-ticket .tw-short-ticket-bottom .tw-cta-btn {
  height: 40px;
  font-size: 13px;
}

@media (max-width: 960px) {
  .tw-main--short-ticket .tw-short-ticket-body,
  .tw-main--short-ticket .tw-short-ticket-bottom {
    grid-template-columns: 1fr;
  }

  .tw-main--short-ticket .tw-short-ticket-side {
    width: 100%;
    max-width: none;
  }

  .tw-main--short-ticket .tw-sidebar {
    width: 100%;
    max-width: none;
  }

  .tw-main--short-ticket .tw-form-row--4,
  .tw-main--short-ticket .tw-form-row--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tw-main--short-ticket .tw-short-ticket-bottom .tw-summary {
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

/* Order confirmation dialog — shared by OrderDashboard & TradesWidget */

/* ── Theme tokens (light default) ───────────────────────────── */
.order-confirm {
  --oc-header-bg: #ffffff;
  --oc-header-text: #001f3f;
  --oc-body-bg: #ffffff;
  --oc-text-primary: #0f172a;
  --oc-text-muted: #64748b;
  --oc-border: #e2e8f0;
  --oc-summary-bg: #f5f7f9;
  --oc-net-text: #001f3f;
  --oc-icon-bg: #f1f5f9;
  --oc-icon-color: #64748b;
  --oc-cancel-bg: #ffffff;
  --oc-cancel-text: #0f172a;
  --oc-cancel-border: #cbd5e1;
}

.order-confirm[data-theme='dark'] {
  --oc-header-bg: var(--popup-foreground-color, #2a2a2a);
  --oc-header-text: #f9fafb;
  --oc-body-bg: var(--popup-foreground-color, #2a2a2a);
  --oc-text-primary: #f9fafb;
  --oc-text-muted: #9ca3af;
  --oc-border: var(--od-border-divider, rgba(72, 79, 88, 1));
  --oc-summary-bg: rgba(255, 255, 255, 0.06);
  --oc-net-text: #f9fafb;
  --oc-icon-bg: rgba(255, 255, 255, 0.08);
  --oc-icon-color: #9ca3af;
  --oc-cancel-bg: transparent;
  --oc-cancel-text: #f9fafb;
  --oc-cancel-border: var(--od-select-border, #484f58);
}

/* Explicit white values — do not use --font-color-grid (often black in app themes) */
.order-confirm[data-theme='dark'] .order-confirm__account-name,
.order-confirm[data-theme='dark'] .order-confirm__value,
.order-confirm[data-theme='dark'] .order-confirm__summary-value,
.order-confirm[data-theme='dark'] .order-confirm__net-label,
.order-confirm[data-theme='dark'] .order-confirm__net-value,
.order-confirm[data-theme='dark'] .order-confirm__btn-cancel {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
}

.order-confirm[data-theme='dark'] .order-confirm__label,
.order-confirm[data-theme='dark'] .order-confirm__summary-label,
.order-confirm[data-theme='dark'] .order-confirm__disclaimer,
.order-confirm[data-theme='dark'] .order-confirm__disclaimer-icon {
  color: #9ca3af !important;
}

.order-confirm[data-theme='dark'] .order-confirm__account-icon {
  color: #9ca3af !important;
}

/* Dialog shell */
.order-confirm-dialog-content--light {
  background: #ffffff !important;
  color: #0f172a;
}

.order-confirm-dialog-content--dark {
  background: var(--popup-foreground-color, #2a2a2a) !important;
  color: #f9fafb !important;
}

/* Header — light: white bar + navy title; dark: panel bg + white title */
.order-confirm-dialog-header--light.draggable-header,
.draggable-header.order-confirm-dialog-header--light {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #001f3f !important;
}

.order-confirm-dialog-header--light .MuiTypography-root,
.order-confirm-dialog-header--light .dialog-header-title {
  color: #001f3f !important;
}

.order-confirm-dialog-header--dark.draggable-header,
.draggable-header.order-confirm-dialog-header--dark {
  background: var(--popup-foreground-color, #2a2a2a) !important;
  background-color: var(--popup-foreground-color, #2a2a2a) !important;
  color: #f9fafb !important;
}

.order-confirm-dialog-header--dark .MuiTypography-root,
.order-confirm-dialog-header--dark .dialog-header-title {
  color: #f9fafb !important;
}

.order-confirm-dialog-header .MuiTypography-root,
.order-confirm-dialog-header {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.order-confirm {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 20px 20px;
  font-family: var(--font-family, 'Inter', sans-serif);
  overflow-y: auto;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  min-height: 0;
  background: var(--oc-body-bg);
  color: var(--oc-text-primary);
}

.order-confirm__error {
  margin-bottom: 12px !important;
}

.order-confirm__account {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
}

.order-confirm__account-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--oc-icon-bg);
  color: var(--oc-icon-color);
}

.order-confirm__account-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.order-confirm__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oc-text-muted);
  line-height: 1.3;
}

.order-confirm__account-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--oc-text-primary);
  line-height: 1.35;
}

.order-confirm__divider {
  border: none;
  border-top: 1px solid var(--oc-border);
  margin: 0 0 16px;
}

.order-confirm__details {
  margin-bottom: 16px;
}

.order-confirm__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.order-confirm__detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.order-confirm__detail--full {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.order-confirm__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--oc-text-primary);
  line-height: 1.35;
}

.order-confirm__summary {
  background: var(--oc-summary-bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.order-confirm__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
}

.order-confirm__summary-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--oc-text-muted);
}

.order-confirm__summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--oc-text-primary);
  text-align: right;
}

.order-confirm__summary-divider {
  border: none;
  border-top: 1px solid var(--oc-border);
  margin: 10px 0 8px;
}

.order-confirm__summary-row--net {
  padding-top: 2px;
}

.order-confirm__net-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oc-net-text);
}

.order-confirm__net-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--oc-net-text);
  letter-spacing: -0.02em;
}

.order-confirm__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--oc-text-muted);
  font-weight: 400;
}

.order-confirm__disclaimer-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px !important;
  color: var(--oc-text-muted);
}

.order-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--oc-body-bg, #ffffff);
  padding-top: 12px;
}

.order-confirm__btn-cancel {
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--oc-cancel-border);
  background: var(--oc-cancel-bg);
  color: var(--oc-cancel-text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.order-confirm__btn-cancel:hover:not(:disabled) {
  background: var(--oc-summary-bg);
  border-color: var(--oc-text-muted);
}

.order-confirm__btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.order-confirm__btn-submit {
  height: 42px;
  border-radius: 8px;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}

.order-confirm__btn-submit:hover:not(:disabled) {
  filter: brightness(0.92);
}

.order-confirm__btn-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.order-confirm__btn-submit--buy {
  background: #064016;
}

.order-confirm__btn-submit--sell {
  background: #b22222;
}

.order-confirm__btn-submit--amend {
  background: #003e7e;
}

.order-confirm__btn-submit--cancel-mode {
  background: #b22222;
}

/* App-level dark theme fallback */
[data-theme='dark'] .order-confirm:not([data-theme]),
[data-theme='flat-dark'] .order-confirm:not([data-theme]) {
  --oc-text-primary: #f9fafb;
  --oc-net-text: #f9fafb;
  --oc-cancel-text: #f9fafb;
}

[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__account-name,
[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__value,
[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__summary-value,
[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__net-label,
[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__net-value,
[data-theme='dark'] .order-confirm:not([data-theme]) .order-confirm__btn-cancel,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__account-name,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__value,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__summary-value,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__net-label,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__net-value,
[data-theme='flat-dark'] .order-confirm:not([data-theme]) .order-confirm__btn-cancel {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
}

.highlight-green {
  background-color: var(--color-green-bright);
  transition: background-color 0.5s ease-out;
}

.highlight-red {
  background-color: var(--color-transparent-red);
  transition: background-color 0.5s ease-out;
}

.highlight-green::before {
  content: "▲ ";
  color: var(--color-green);
  font-weight: bold;
}

/* Red for negative change with down arrow */
.highlight-red::before {
  content: "▼ ";
  color: var(--color-red);
  font-weight: bold;
}

.even-row {
  background-color: var(--color-panel-green);
}

.odd-row {
  background-color: var(--color-panel-green);
} 

.darkModeCol {
  background-color: transparent;
}


.pinned-row-style {
  background-color: var(--color-panel);
  /* Light gray background */
  font-weight: bold !important;
  color: var(--color-black) !important;
  /* Black text */
}
.pinned-row-style-bid {
  background-color: var(--color-panel) !important;
  /* Light gray background */
  font-weight: bold !important;
  color: var(--color-green) !important;
  /* Black text */
}
.pinned-row-style-offer {
  background-color: var(--color-panel) !important;
  /* Light gray background */
  font-weight: bold !important;
  color: var(--color-red) !important;
  /* Black text */
}

.header-center .ag-header-cell-label {
  text-align: center !important;
  justify-content: center !important; 
}
.header-right .ag-header-cell-label {
  text-align: right !important;
  justify-content: right !important; 
}

/* .flash-positive {
    animation: flash-green 1s ease-out;
}

.flash-negative {
    animation: flash-red 1s ease-out;
}

@keyframes flash-green {
    0% {
        background-color: rgba(0, 255, 0, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes flash-red {
    0% {
        background-color: rgba(255, 0, 0, 0.2);
    }
    100% {
        background-color: transparent;
    }
} */


/* Hover strip above grid; revealed row sits in document flow (grid shifts down) */
.widget-search-hover-zone {
  flex: 0 0 auto;
  width: 100%;
  min-height: 12px;
  max-height: 12px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: default;
  transition: max-height 0.25s ease;
}

.widget-search-hover-zone.is-open {
  max-height: none;
  min-height: 35px;
  overflow: visible;
}

/* Keep search row from clipping the symbol dropdown while it is open */
.widget-search-hover-zone.is-open:has([data-dropdown-open="true"]),
.widget-search-hover-zone:has([data-dropdown-open="true"]),
.widget-search-hover-zone.is-open:has([data-search-open="true"]),
.widget-search-hover-zone:has([data-search-open="true"]) {
  max-height: none;
  overflow: visible;
}

.widget-search-reveal:has([data-dropdown-open="true"]) {
  max-height: none;
  overflow: visible;
}

.widget-search-hover-zone.is-open .widget-search-reveal:has([data-dropdown-open="true"]) {
  max-height: none;
}

/* Shared reveal row: search + prices inline (SearchPriceHeader flex row) */
.widget-search-reveal {
  width: 100%;
  max-width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}

.widget-search-hover-zone.is-open .widget-search-reveal {
  max-height: none;
  min-height: 40px;
  opacity: 1;
  overflow: visible;
}

/* Dialog / normal view: search + price header always fully visible (no hover strip) */
.widget-search-hover-zone--pinned {
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.widget-search-hover-zone--pinned .widget-search-reveal {
  max-height: none;
  min-height: 40px;
  opacity: 1;
  overflow: visible;
}

.widget-search-hover-zone > .depth-by-order-search-wrapper,
.widget-search-hover-zone > .depth-by-price-search-wrapper,
.widget-search-hover-zone > .summary-search-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.depth-by-order-search-wrapper.show:has([data-search-open="true"]),
.depth-by-order-search-wrapper.show:has([data-dropdown-open="true"]),
.depth-by-price-search-wrapper.show:has([data-search-open="true"]),
.depth-by-price-search-wrapper.show:has([data-dropdown-open="true"]),
.summary-search-wrapper.show:has([data-search-open="true"]),
.summary-search-wrapper.show:has([data-dropdown-open="true"]) {
  max-height: none;
  overflow: visible;
}

.widget-search-reveal .search-price-header-container,
.depth-by-order-search-wrapper .search-price-header-container,
.depth-by-price-search-wrapper .search-price-header-container,
.summary-search-wrapper .search-price-header-container {
  width: 100%;
  flex-wrap: nowrap;
}

.widget-search-reveal .search-price-header-search,
.depth-by-order-search-wrapper .search-price-header-search,
.depth-by-price-search-wrapper .search-price-header-search {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.widget-search-reveal .search-price-header-price-container,
.depth-by-order-search-wrapper .search-price-header-price-container,
.depth-by-price-search-wrapper .search-price-header-price-container {
  flex: 0 0 auto;
  margin-left: 8px;
}

:root {
  --dq-bg: #fff;
  --dq-text: #222;
  --dq-label: #444;
  --dq-section-title-bg: #f3f3f3;
  --dq-section-title-text: #222;
}

/* Icon Tab Bar Styles */
.icon-tab-bar-container {
  display: flex;
  /* background: var(--font-color-card); */
  border-radius: 20px;
  /* padding: 4px; */
  /* margin: 16px; */
  gap: 0px;
}

.icon-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  /* transition: all 0.2s ease; */
  min-width: 60px;
  position: relative;
  flex-direction: column;
}

.icon-tab-item:hover {
  background: rgba(25, 118, 210, 0.1);
}

.icon-tab-item.selected {
  background: var(--color-primary-bg-new-dashboard);
  color: white !important;
}

.icon-tab-item.selected svg {
  fill: white !important;
  width: 16px !important;
  height: 16px !important;
}

.icon-tab-item.selected img {
  fill: var(--font-color-grid) !important;
}

.icon-tab-icon-detail-quote {
  width: 20px !important;
  height: 20px !important;
}

.icon-tab-label {
  font-size: var(--font-label-size);
  margin-top: 4px;
  font-weight: 500;
  color: var(--font-color-grid);
  text-align: center;
}

.icon-tab-item.selected .icon-tab-label {
  color: #fff;
}

 .icon-tab-bar-container svg {
  fill: var(--font-color-grid) !important;
} 

/* Card Styles */
.detail-quote-wrapper .detail-quote-card {
  height: 100%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background:var(--popup-foreground-color) !important;
}

.detail-quote-card-content {
  padding: 16px !important;
}

/* Card Headers */
.quote-info-header {
  margin-bottom: 16px;
  font-family: var(--font-family);
  font-weight: 600;
  color: #0070E4;
  font-size: var(--font-label-size) !important;
}

.cash-flow-header {
  margin-bottom: 16px;
  font-family: var(--font-family);
  font-weight: 600;
  color: #459552;
  font-size: var(--font-label-size) !important;
}

.performance-header {
  margin-bottom: 16px;
  font-weight: bold;
  color: #ed6c02;
  font-size: var(--font-label-size) !important;
}

/* Data Row Styles */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  /* border-bottom: 1px solid #f0f0f0; */
}

.data-row:last-child {
  border-bottom: none;
}

.data-label {
  font-weight: 400 !important;
  color: #787878 ;
  font-size: var(--font-label-size) !important;
}

.data-value {
  font-weight: 600 !important;
  font-size: var(--font-value-size) !important;
}

/* Color Classes */
.green {
  color: #2e7d32;
}

.red {
  color: #d32f2f;
}

/* Grid Layout */
.detail-quote-grid {
  padding: 16px;
}

.detail-quote-grid-item {
  margin-bottom: 16px;
}

/* Performance Grid */
.performance-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 960px) {
  .performance-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Container Styles */
.detail-quote-container {
  height: 100% !important;
  overflow: auto;
  width: 100%;
  /* background: var(--dq-bg); */
  color: var(--color-white) !important;
}

.detail-quote-section {
  padding: 0 0 18px 0;
  border-bottom: 1px solid #333;
}

.detail-quote-section:last-child {
  border-bottom: none;
}

.detail-quote-section-title {
  background: var(--dq-section-title-bg);
  font-weight: 600;
  font-size: var(--font-label-size) !important;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 8px;
  color: var(--dq-section-title-text);
}

.detail-quote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 4px;
}

.detail-quote-label {
  flex: 0 0 38%;
  color: var(--dq-label);
  font-size: var(--font-label-size) !important;
  padding: 4px 0;
  font-weight: 500;
}

.detail-quote-value {
  flex: 0 0 12%;
  color: var(--dq-text);
  font-size: var(--font-value-size) !important;
  padding: 4px 0 4px 8px;
  font-weight: 600;
  word-break: break-word;
}

.detail-quote-value.green {
  color: #1ca97c;
}

.detail-quote-value.red {
  color: #e74c3c;
}

@media (max-width: 600px) {
  .detail-quote-container {
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .detail-quote-section-title {
    font-size: var(--font-label-size) !important;
    padding: 8px 8px;
  }
  .detail-quote-row {
    padding: 0 8px;
  }
  .detail-quote-label, .detail-quote-value {
    font-size: var(--font-label-size) !important;
  }
  
  .icon-tab-item {
    padding: 6px 8px;
    min-width: 50px;
  }
  
  .detail-quote-grid {
    padding: 8px;
  }
}

#depthByOrderGrid .ag-icon-menu-alt{
    display: none !important; 
}

.depth-by-order-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.depth-by-order-search-wrapper {
    width: 100%;
    transition: opacity 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.depth-by-order-search-wrapper.show {
    opacity: 1;
    visibility: visible;
    max-height: 48px;
    margin-bottom: 4px;
    overflow: visible;
}

.depth-by-order-search-wrapper.hide {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.depth-by-order-grid-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#depthByPriceGrid .ag-icon-menu-alt{
    display: none !important; 
}

.depth-by-price-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.depth-by-price-search-wrapper {
    width: 100%;
    transition: opacity 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.depth-by-price-search-wrapper.show {
    opacity: 1;
    visibility: visible;
    max-height: 48px;
    margin-bottom: 4px;
    overflow: visible;
}

.depth-by-price-search-wrapper.hide {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.depth-by-price-grid-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.depth-by-price-total-row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0px 40px; 
    background-color: var(--colors-white);
    border-radius: 5px;
}

.total-qty{
    font-size: var(--font-label-size) !important;
    color: var(--font-color) !important;
}

.total-value{
    font-size: var(--font-value-size) !important;
}

.bid{
    color: #3da938 !important;
}

.offer{
    color: var(--color-red) !important;
}

/* Portfolio-main replicated classes, local to alerts */
.alert-manager-main{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
}

.alert-manager-top-controls{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.alert-manager-header-dropdown{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.alert-manager-header-title-text{
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: var(--font-size-small) !important;
}

/*.alert-add-button-container{
    padding-bottom: 0 !important;
}*/

.alert-manager-header-title-icon{
    background: var(--button-bg-color) !important;
    border-radius: 10px !important;
    width: 40px;
    height: 40px;
    min-width: 0 !important;
    padding: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.alert-manager-header-title-icon .MuiButton-startIcon{
    margin: 0 !important;
}

.create-new-watchlist-button-container.alert-add-button-container{
    padding-bottom: 0 !important;
}

.alert-manager-header-title-icon:hover:not(.Mui-disabled){
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
  border-radius: 8px !important;
}

.alert-manager-header-title-icon:focus,
.alert-manager-header-title-icon:focus-visible,
.alert-manager-header-title-icon:active{
  border-radius: 8px !important;
}

.alert-manager-body-panel{
    border-radius: 10px;
    background: var(--popup-foreground-color);
    backdrop-filter: blur(7.5px);
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.alert-manager-empty-state{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.alert-manager-container{
    width: 100%;
    height: 100%;
}

.alert-manager-grid-panel{
    padding: 0 !important;
}

.alert-manager-list-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
}

.alert-manager-detail-panel{
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-manager-detail-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color-inactive);
    padding: 10px 12px;
}

.alert-manager-detail-label{
    color: rgba(106, 106, 106, 1) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    font-weight: 500 !important;
    line-height: 12px !important;
}

.alert-manager-detail-value{
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    text-align: right;
}


.alert-container-list {
    border-radius: 10px;
    background: var(--popup-foreground-color);
    backdrop-filter: blur(7.5px);
    height: 100%;
    width: 30%;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;

}

.alert-container-content {
    border-radius: 10px;
    background: var(--popup-foreground-color);
    backdrop-filter: blur(7.5px);
    height: 100%;
    width: 76%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.alert-container-divider {
    flex-shrink: 0;
    width: 100%;
    height: 0;
    margin: 0;
    border: none;
    border-top: 1px solid var(--portfolio-border-divider);
}

/* Left side list */
.alert-container-list-toolbar {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding: 20px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.alert-container-list-header-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.alert-container-list-header-title-text {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-label) !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-transform: capitalize;
}

.alert-container-list-header-title-icon {
    background: var(--button-bg-color) !important;
    border-radius: 8px !important;
    width: 40px;
    height: 40px;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.alert-container-list-header-title-icon:hover:not(.Mui-disabled){
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
  border-radius: 8px !important;
}

.alert-container-list-header-title-icon:focus,
.alert-container-list-header-title-icon:focus-visible,
.alert-container-list-header-title-icon:active{
  border-radius: 8px !important;
}

.alert-container-list-header-search-input {
    border-radius: 8px;
    border: 1px solid var(--border-color-medium-grey) !important;
    background: var(--detail-quote-label-color) !important;
    backdrop-filter: blur(10px);
    width: 100%;
}

.alert-container-list-header-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.alert-list-empty-text{
    color: rgba(106, 106, 106, 1) !important;
    text-align: center;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-label) !important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    text-transform: capitalize;
}

.alert-container-show-label {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family);
    font-size: var(--font-size-label) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Filter dropdown should stretch in header */
.alert-container-filter-dropdown {
    flex: 1;
    min-width: 0;
}

.alert-container-list-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 15px;
    box-sizing: border-box;
}

.alert-container-list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    border-radius: 8px;
    color: var(--font-color-grid);
    font-family: var(--font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.alert-container-list-item:hover {
    background: var(--color-gray-light);
}

.alert-container-list-item.selected {
    background: var(--color-primary-bg-new-dashboard);
    color: white !important;
}

.alert-container-list-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.alert-container-list-item-symbol {
    font-weight: 400 !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.alert-container-list-item-condition {
    font-size: 12px !important;
    opacity: 0.8 !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

.alert-container-list-item.selected .alert-container-list-item-symbol,
.alert-container-list-item.selected .alert-container-list-item-condition {
    color: white !important;
}

.alert-container-list-item-delete {
    margin-left: 8px !important;
    padding: 4px;
}

.alert-container-list-item-delete .icon {
    filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.alert-container-list-item-delete.selected-menu-icon .icon {
    filter: none;
}

.delete-icon-svg{
    fill: red;
    width: 16px;
    height: 16px;
}

.delete-icon-svg.selected{
    fill: white;
}

.alert-container-list-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px 30px;
    color: var(--color-gray-medium);
    font-family: var(--font-family);
    font-size: var(--font-size-label);
}

/* Right side content */
.alert-container-content-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.alert-container-content-header-title-text{
    font-style: normal !important;
    line-height: 18px !important;
    text-transform: capitalize;
}

.alert-container-content-header-title-description{
    color: rgba(106, 106, 106, 1) !important;
    font-size: var(--font-size-small) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 12px !important;
}
.alert-container-content-section-header {
    padding: 20px 30px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.alert-container-content-section-body {
    flex: 1;
    min-height: 0;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
}

.alert-container-content-header-title {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-label-size-new-dashboard) !important;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alert-container-content-body {
    height: 90%;
}

.alert-container-content-body.empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--color-gray-medium);
    font-family: var(--font-family);
    font-size: var(--font-size-label);
}

.alert-container-content-body-header {
    color: var(--font-color-grid) !important;
    font-size: var(--font-item-size-label) !important;
    font-weight: 400 !important;
    text-align: center;
    font-family: var(--font-family) !important;
    font-style: normal !important;
    line-height: 16px !important; /* 100% */
    text-transform: capitalize !important;
}

.alert-container-content-body-description {
    color: rgba(106, 106, 106, 1) !important;
    text-align: center;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 14px !important;
    text-transform: lowercase;
}

.create-alert-middle-panel{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    
}
.create-alert-label {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

/* ===== Create Alert (New layout) ===== */
.create-alert-root{
    border-radius: 10px;
    background: var(--popup-foreground-color);
    backdrop-filter: blur(7.5px);
    height: 100%;
    width: 100% ;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.create-alert-root--embedded{
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.create-alert-section-header{
    padding: 25px 30px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
}

.create-alert-title-wrap{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-alert-title{
    font-family: var(--font-family) !important;
    font-size: var(--font-size-label) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-transform: capitalize !important;
    color: var(--font-color-grid) !important;
}

.create-alert-description{
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    text-transform: none !important;
    color: var(--font-color-grid) !important;
}

.create-alert-header-actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.create-alert-header-action-button{
    min-width: 81px !important;
    height: 42px;
    border-radius: 8px;
    background: var(--button-bg-color);
    color: white !important;
    text-align: right;
    text-transform: none !important;
    padding: 14px 15px;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 14px !important;
}

.create-alert-header-action-button:hover:not(.Mui-disabled){
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

.create-alert-header-action-button.secondary{
    background: var(--button-bg-color-secondary) !important;
    color: var(--font-color-grid) !important;
    border: 1px solid var(--border-color-inactive) !important;
}

.create-alert-section-divider{
    flex-shrink: 0;
    width: 100%;
    height: 0;
    margin: 0;
    border: none;
    border-top: 1px solid var(--portfolio-border-divider);
}

.create-alert-section-body{
    flex: 1;
    min-height: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    box-sizing: border-box;
    gap: 25px;
}

.create-alert-section-body--embedded{
    height: 100%;
}

:root{
    --create-alert-col-gap: 24px;
    --create-alert-field-width: 200px;
}

/* Row gaps */
/* .create-alert-row--1{ margin-bottom: 24px; }
.create-alert-row--2{ margin-bottom: 24px; }
.create-alert-row--3{ margin-bottom: 32px; } */

/* Row 1: search + prices */
.create-alert-row--1{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 25px;
}

.create-alert-row-1-search-field{
    width: var(--create-alert-field-width);
    min-width: var(--create-alert-field-width);
}

.create-alert-symbol-search{
    width: 100%;
}

.create-alert-price-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.create-alert-price-main{
    font-family: var(--font-family) !important;
    font-size: var(--font-size-title) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    background: transparent !important;
    text-decoration: underline;
}

.create-alert-price-main.positive{
    color: var(--color-buy-text) !important;
}

.create-alert-price-main.negative{
    color: var(--color-sell) !important;
}

.create-alert-price-main.neutral{
    color: var(--font-color-grid) !important;
}

.create-alert-price-secondary{
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 12px !important;
    color: var(--font-color-grid) !important;
}

/* Row 2 */
.create-alert-row--2{
    display: grid;
    grid-template-columns: repeat(3, var(--create-alert-field-width));
    gap: 24px;
    align-items: end;
}

.create-alert-row--2 > *,
.create-alert-row--3 > *{
    width: var(--create-alert-field-width);
    min-width: var(--create-alert-field-width);
    max-width: var(--create-alert-field-width);
}

.create-alert-field{
    width: var(--create-alert-field-width);
}

.create-alert-field .MuiFormControl-root,
.create-alert-row-1-search-field .MuiFormControl-root,
.create-alert-row-1-search-field .MuiInputBase-root{
    width: 100% !important;
}

/* Row 3 */
.create-alert-row--3{
    display: flex;
    align-items: end;
    gap: 24px;
}

.create-alert-row--3 > *{
    flex: 0 0 var(--create-alert-field-width);
    max-width: var(--create-alert-field-width);
}

.create-alert-date-field-wrap{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: var(--create-alert-field-width);
}

.create-alert-date-field-label{
    font-family: var(--font-family) !important;
    font-size: var(--ag-cell-value) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--ag-cell-value) !important;
    color: var(--font-color-grid) !important;
}

.create-alert-date-field{
    width: 100% !important;
}

.create-alert-date-field .MuiOutlinedInput-root{
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
}

.create-alert-date-field .MuiOutlinedInput-root fieldset{
    border-color: var(--border-color-inactive) !important;
}

.create-alert-date-field .MuiOutlinedInput-root:hover fieldset,
.create-alert-date-field .MuiOutlinedInput-root.Mui-focused fieldset{
    border-color: var(--border-color-global) !important;
}

.create-alert-date-field .date-only-field-icon,
.create-alert-date-field .MuiIconButton-root .MuiSvgIcon-root{
    width: 14px !important;
    height: 14px !important;
}

/* Row 4 — delivery settings (commented out)
.create-alert-row--4{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
}

.create-alert-section-label{
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 14px !important;
}

.create-alert-delivery-left-column{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.create-alert-delivery-group{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.create-alert-delivery-group-body{
    display: flex;
    flex-direction: column;
}

.create-alert-delivery-right-column{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 34px;
}

.create-alert-checkbox-label{
    margin: 0 !important;
    gap: 10px;
    align-items: center;
}

.create-alert-checkbox-label .MuiFormControlLabel-label{
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-item-label-size) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 14px !important;
}

.create-alert-checkbox-label .MuiCheckbox-root{
    padding: 0 !important;
}

.create-alert-email-field-wrap{
    width: var(--create-alert-field-width);
    height: 40px;
    visibility: hidden;
}

.create-alert-email-field-wrap.is-visible{
    visibility: visible;
}

.create-alert-email-field{
    width: 100%;
}

.create-alert-email-field .MuiOutlinedInput-root{
    height: 40px !important;
    min-height: 40px !important;
}
*/

.add-icon-svg{
    fill: white !important;
    width: 18px;
    height: 18px;
}

[data-theme='flat-dark'] .create-alert-root .create-new-watchlist-button-cancel{
    border: 1px solid var(--border-color-global) !important;
}
.detail-quote-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
}

.detail-quote-card {
  background-color: var(--color-white, #ffffff);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* border: 1px solid #e0e0e0; */
  transition: all 0.3s ease;
  cursor: pointer;
}

.overview-detail-quote-card {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 20px;
}

/* .detail-quote-card:hover {
  box-shadow: 0 4px 12px rgba(0, 112, 228, 0.15);
  border-color: #0070E4;
  background-color: #f8f9ff;
  transform: translateY(-2px);
} */

.detail-quote-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.detail-quote-header {
  color:var(--detail-quote-header-color) !important;
  font-weight: 600 !important;
  font-size: var(--font-label-size) !important;
  margin: 0 !important;
  /* margin-bottom: 05px !important; */
  /* border-bottom: 2px solid #1976d2; */
  /* padding-bottom: 8px; */
}

.detail-quote-arrow-icon {
  font-size: var(--font-value-size) !important;
  color: var(--detail-quote-header-color);
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

.detail-quote-arrow-icon.expanded {
  transform: rotate(0deg);
}

.detail-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-quote-column {
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
}

.detail-quote-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  /* border-bottom: 1px solid #f0f0f0; */
}

.detail-quote-data-label {
  color: var(--detail-quote-label-color)!important;
  font-weight: 400;
  font-size: 11px !important;
  flex: 1;
}

.detail-quote-data-value {
  color:var(--detail-quote-value-color) !important;
  font-weight: 600;
  font-size: var(--font-value-size);
  text-align: right;
  flex: 1;
  font-family: var(--font-family);
}

/* Color Classes */
.detail-quote-data-value.green {
  color:#3da938 !important;
}

.detail-quote-data-value.red {
  color:var(--market-index-red) !important;
}

.detail-quote-data-value.blue {
  color: #2196f3 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .detail-quote-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .detail-quote-data-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .detail-quote-data-value {
    text-align: left;
  }
}
/* KSE Detail Quote Styles */
.detail-quote-kse {
    padding: 0px 10px;
    color: var(--font-color) !important;
    font-family: var(--font-family) !important;
    background: transparent;
    position: relative;
    min-height: 100%;
}

/* Header Section */
.kse-header {
    display: flex;
    /* justify-content: space-between; */
    align-items: flex-start;
    /* margin-bottom: 24px; */
    padding-bottom: 5px;
    /* padding: 10px; */
    gap: 15px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
}

.stock-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 5px !important;
    align-items: flex-start;
    justify-content: center;
}

.symbol-section {
    color: var(--font-color) !important;
font-family: var(--font-family);
font-size: 34px;
font-style: normal;
font-weight: 700;
/* line-height: 40px; 100% */
display: flex;
align-items: center;
gap: 12px;
}

.trend-icon {
    font-size: 16px;
    font-weight: bold;
}

.trend-icon.up {
    color: #1EFF00;
}

.trend-icon.down {
    color: #FF0000;
}

.symbol-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.symbol {
    color: var(--font-color) !important;
    font-family: var(--font-family) !important;
        font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    /* line-height: 40px !important; 100% */
}

.code {
    color: var(--font-color) !important;
    font-family: var(--font-family) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    /* line-height: 24px !important; 100% */
}

.company-name {
    color: var(--font-color) !important;
font-family: var(--font-family) !important;
font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* width: 200px; */
    /* line-height: 20px !important; 100% */
}

.price-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.current-price {
    color: #4C7F58 !important;
text-align: right !important;
font-family: var(--font-family) !important;
font-size: 18px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 40px !important; /*100%*/
}

.price-change {
    /* color: #A31621; */
text-align: right !important;
font-family: var(--font-family) !important;
font-size: 18px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 24px !important; /*100%*/
}

.price-change.up {
    color: var(--market-index-green) !important;
}

.price-change.down {
    color: #A31621;
}

/* Data Section */
.detail-quote-kse .kse-data-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 20px;
    /* padding: 0 65px; */
    align-items: start;
    width: 80%;
    position: relative;
    z-index: 2;
    background: transparent;
}

.vertical-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    width: 1px;
}

.vertical-line-svg {
    height: 100%;
    min-height: 200px;
    width: auto;
}

.data-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 30px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

.data-row:last-child {
    border-bottom: none;
}

/* .data-label { */
    /* color: #FFF !important; */
/* font-family: var(--font-family) !important; */
/* font-size: 16px !important; */
/* font-style: normal !important; */
/* font-weight: 400 !important; */
/* line-height: 16px !important; 100% */
/* } */
/* .data-value { */
    /* color: #FFF !important; */
/* text-align: right !important; */
/* font-family: var(--font-family) !important; */
/* font-size: 16px !important; */
/* font-style: normal !important; */
/* font-weight: 700 !important; */
/* line-height: 16px !important; 100% */
/* } */
.data-label-kse {
    color: var(--font-color) !important;
    font-family: var(--font-family) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 16px !important; /* 100% */
}
.data-value-kse {
    color: var(--font-color) !important;
    text-align: right !important;
    font-family: var(--font-family) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important; /* 100% */
}

.data-value.green {
    color: #4C7F58;
}

.data-value.red {
    color: #A31621;
}

.trend-icon-small {
    font-size: 12px;
    font-weight: bold;
}

.trend-icon-small.up {
    color: #4C7F58;
}

.trend-icon-small.down {
    color: #A31621;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kse-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .price-section {
        align-items: flex-start;
    }
    
    .kse-data-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .data-column {
        gap: 8px;
    }
    
    .symbol {
        font-size: 20px;
    }
    
    .current-price {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .detail-quote-kse {
        padding: 16px;
    }
    
    .symbol {
        font-size: 18px;
    }
    
    .current-price {
        font-size: 20px;
    }
    
    .data-label,
    .data-value,
    .data-label-kse,
    .data-value-kse {
        font-size: 12px;
    }
}

/* Dark theme adjustments */
.detail-quote-kse.dark {
    background: rgba(0, 0, 0, 0.1);
}

.detail-quote-kse.dark .data-row {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}


/* Area Chart Wrapper - scoped only to detail-quote-kse component */
.detail-quote-kse .kse-area-chart-wrapper {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.detail-quote-kse .kse-area-chart-wrapper svg {
    pointer-events: none;
}

/* Force placeholder stylings for dropdown */

/* Common dropdown styles */
:root {
    --dropdown-min-width: 40px;
    --dropdown-max-width: 500px;
    --dropdown-menu-max-height: 250px;
    --dropdown-item-padding: 8px 16px;
}

/* .MuiPopover-root { z-index: 1900 !important; } */

/* Base styles for all dropdowns */
.MuiSelect-select {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
    line-height: normal !important;
}

/* --- Styling for the Dropdown Trigger (Visible Part) --- */
.cards-exchange-dropdown .MuiSelect-select {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 500;
    padding-right: 02px !important;
    /* Space for the dropdown icon */
    padding-left: 0;
    /* line-height: 0px !important; */
    min-width: auto;
    max-width: var(--dropdown-max-width);
}

.cards--index-exchange-dropdown .MuiSelect-select {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 300;
    /* padding-right: 02px !important; */
    /* Space for the dropdown icon */
    padding-left: 0;
    /* line-height: 0px !important; */
    min-width: auto;
    max-width: 150px;
    padding-right: 0px !important;

}

.cards--index-exchange-dropdown svg{
    height: 10px !important;
    width: 10px !important;
    fill: var(--font-color) !important;
}

/* Styles for the dropdown arrow icon */
.cards-exchange-dropdown .MuiSelect-icon {
    color: var(--icon-dropdown-arrow);
    padding: 5px;

}

/* --- Styling for the Dropdown Menu and Its Items --- */

/* This class targets the dropdown menu's paper container */
.custom-dropdown-menu .MuiPaper-root {
    background-color: var(--background-dropdown-menu) !important;
    border-radius: 12px;
    margin-top: -10px;
    margin-left: 50px;
    box-shadow: 0 4px 12px var(--shadow-dropdown);
    min-width: auto !important;
    max-width: var(--dropdown-max-width) !important;
    max-height: var(--dropdown-menu-max-height) !important;
}

.MuiMenu-list {
    background-color: var(--background-dropdown-menu) !important;
    color: var(--font-color-grid) !important;
    /* max-width: 220px !important; */
}

.MuiMenu-list svg {
    fill: var(--font-color-grid);
}

.Menu-UnLink {
    stroke: black;
    fill: none !important;
    height: 16px;
    width: 16px;
}

/* Hover and selected states for menu items */
.custom-dropdown-menu .MuiMenuItem-root:hover {
    background-color: var(--menu-item-hover) !important;
}

.custom-dropdown-menu .MuiMenuItem-root.Mui-selected {
    background-color: var(--background-menu-item-selected) !important;
    color: var(--font-color-card) !important;
}

.custom-dropdown-menu .MuiMenuItem-root.Mui-selected:hover {
    background-color: var(--background-menu-item-hover) !important;
}

/* ============================================================
 * FormatOptions-only dropdown label + border color
 * Scope: only dropdowns inside FormatOptions tab
 * ============================================================ */
.grid-setting-dropdown .MuiInputLabel-root {
    color: var(--font-color-grid) !important;
}

.grid-setting-dropdown .MuiInputLabel-root.Mui-focused {
    color: var(--font-color-grid) !important;
}

.grid-setting-dropdown .MuiOutlinedInput-notchedOutline {
    border-color: var(--font-color-grid) !important;
}

.grid-setting-dropdown:hover .MuiOutlinedInput-notchedOutline {
    border-color: var(--font-color-grid) !important;
}

.grid-setting-dropdown .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--font-color-grid) !important;
}

/* ============================================================
 * FormatOptions + FontColorFormatting dropdown menu items
 * Scope via Menu Paper className (portal-safe)
 * ============================================================ */
.format-options-dropdown-menu .MuiMenuItem-root {
    color: var(--font-color-grid) !important;
}

.format-options-dropdown-menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: var(--menu-item-hover) !important;
}

.font-color-formatting-dropdown-menu .MuiMenuItem-root {
    color: var(--font-color-grid) !important;
}

.font-color-formatting-dropdown-menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: var(--menu-item-hover) !important;
}

.cards-index-dropdown-menu .MuiMenuItem-root {
    font-family: var(--font-family);
    font-size: 11px;
    padding: var(--dropdown-item-padding);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    font-weight: 300;
    justify-content: left;
    min-height: 15px;
    color: var(--text-secondary);
    /* border-bottom: 1px solid var(--border-menu-item); */
    padding: 8px 16px;
}

/* General styles for all menu items */
.custom-dropdown-menu .MuiMenuItem-root {
    font-family: var(--font-family);
    font-size: 15px;
    padding: var(--dropdown-item-padding);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    font-weight: 400;
    justify-content: left;
    min-height: 15px;
    color: var(--text-secondary);
    /* border-bottom: 1px solid var(--border-menu-item); */
    padding: 8px 16px;
}

/* Style for the currently selected item */
.custom-dropdown-menu .MuiMenuItem-root.Mui-selected {
    background-color: var(--background-menu-item-selected);
    font-weight: 500;
}

/* Hover style for non-selected items for better UX */
.custom-dropdown-menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: var(--background-menu-item-hover);
}

.watchlist-dropdown-container {
    box-shadow: none !important;
    background: transparent;
    background-color: var(--watchlist-dropdown-bg) !important;
    border-radius: var(--border-radius);
    min-height: var(--filter-heights);
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.watchlist-dropdown-container .watchlist-select {
    border-radius: var(--border-radius);
    min-height: var(--filter-heights);
    border: 1px solid var(--border-color-inactive) !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  /* FormControl inside Select (if present) */
  .watchlist-dropdown-container .MuiFormControl-root {
    width: 100%;
    margin: 0;
  }
  /* The “input” surface */
  .watchlist-dropdown-container .MuiOutlinedInput-root {
    border-radius: var(--border-radius);
    height: var(--filter-heights);
  }
  /* Text inside the closed select */
  .watchlist-dropdown-container .MuiSelect-select {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    font-weight: 100;
    padding: 0px 90px 0px 16px !important;
    height: var(--filter-heights) !important;
    line-height: var(--filter-heights) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Remove MUI outline border (keep your container border intact) */
  .watchlist-dropdown-container .MuiOutlinedInput-notchedOutline {
    border: none !important;
  }
  /* Down arrow */
  .watchlist-dropdown-container .MuiSelect-icon {
    fill: var(--font-color-grid) !important;
    width: 8px !important;
    height: 8px !important;
    right: 16px !important;
    top: var(--dropdown-icon-top) !important;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
  }
  .watchlist-dropdown-container .MuiSelect-iconOpen {
    transform: translateY(-50%) rotate(180deg) !important;
  }
  .watchlist-dropdown-container:hover .watchlist-select {
    border-color: var(--border-color-global) !important;
  }
  /* when dropdown is opened/focused */
  .watchlist-dropdown-container.watchlist-dropdown--active .watchlist-select {
    border-color: var(--border-color-global) !important;
  }

/* --- Symbol search dropdown (SearchComponent) --- */
.symbol-search-dropdown {
  box-shadow: none !important;
  background: transparent !important;
  border-radius: var(--border-radius);
  min-height: var(--filter-heights);
  width: auto !important;
  min-width: 180px !important;
  --symbol-search-dropdown-border: var(--font-color-grid);
  --symbol-search-dropdown-border-active: var(--font-color-grid);
}

.symbol-search-dropdown .MuiFormControl-root {
  width: 100%;
  margin: 0;
}

.symbol-search-dropdown .MuiOutlinedInput-root {
  border-radius: var(--border-radius);
  background: transparent !important;
  height: var(--filter-heights);
  border: 1px solid var(--symbol-search-dropdown-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.symbol-search-dropdown .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.symbol-search-dropdown .MuiSelect-select,
.symbol-search-dropdown .dropdown-placeholder {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  font-weight: 100;
  padding: 0 32px 0 16px !important;
  height: var(--filter-heights) !important;
  line-height: var(--filter-heights) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.symbol-search-dropdown .MuiSelect-icon,
.symbol-search-dropdown .MuiSelect-iconOpen {
  color: var(--font-color-grid) !important;
  fill: var(--font-color-grid) !important;
  width: 10px !important;
  height: 6px !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
  background-color: var(--font-color-grid) !important;
}

.symbol-search-dropdown .MuiSelect-iconOpen {
  transform: translateY(-50%) rotate(180deg);
}

.search-filter-row .watchlist-dropdown-label {
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: var(--font-label-size);
  font-weight: 400;
  white-space: nowrap;
}

/* Dark themes: black border default, white on highlight */
[data-theme='dark'] .symbol-search-dropdown,
[data-theme='flat-dark'] .symbol-search-dropdown {
  --symbol-search-dropdown-border: var(--font-color-grid);
  --symbol-search-dropdown-border-active: var(--font-color-grid);
}

/* ============================================================
 * EditableDropDownWithAdd — "Add" row styling (global)
 * Used by CustomWatch + PortfolioSimulator
 * ============================================================ */
.watchlist-add-subheader{
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--border-color-inactive);
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.watchlist-add-menu-icon-button{
    width: 25px !important;
    height: 25px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
    background: var(--button-bg-color) !important;
    padding: 6px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.watchlist-add-menu-icon-button:hover{
    transform: translateY(-3px);
    border-radius: 6px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
    background: var(--button-bg-color) !important;
}

.watchlist-add-menu-button-icon{
    width: var(--button-icon-width) !important;
    height: var(--button-icon-height) !important;
    fill: white !important;
}

.watchlist-add-menu-text{
    font-family: var(--font-family) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--font-color-grid) !important;
    line-height: 12px !important;
}

  /* ButtonDropdown as watchlist control — same tokens/sizes as .watchlist-select + .MuiSelect-select */
.watchlist-dropdown-container.MuiButton-root {
    box-shadow: none !important;
    background-color: var(--watchlist-dropdown-bg) !important;
    border-radius: var(--border-radius) !important;
    min-height: var(--filter-heights) !important;
    height: var(--filter-heights) !important;
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color-inactive) !important;
    /* mirrors padding: 0 120.47px 0 16px on .MuiSelect-select — right side for chevron */
    padding: 0 32px 0 16px !important;
    text-transform: none !important;
    justify-content: space-between;
    color: var(--font-color-grid) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-label-size) !important;
    font-weight: 100 !important;
    line-height: 32px !important;
  }
  
  .watchlist-dropdown-container.MuiButton-root .MuiTypography-root {
    color: var(--button-text-color) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-label-size) !important;
    font-weight: 100 !important;
    line-height: 32px !important;
  }
  
  .watchlist-dropdown-container.MuiButton-root .MuiButton-endIcon {
    position: absolute;
    right: 13px;
    top: 53%;
    margin: 0 !important;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
  }
  
  .watchlist-dropdown-container.MuiButton-root .MuiButton-endIcon svg {
    width: 8px !important;
    height: 8px !important;
    fill: var(--button-text-color) !important;
  }
  
  .watchlist-dropdown-container.MuiButton-root:hover {
    border-color: var(--border-color-global) !important;
    background-color: var(--watchlist-dropdown-bg) !important;
  }

  .watchlist-dropdown-container.MuiButton-root.Mui-focusVisible,
  .watchlist-dropdown-container.MuiButton-root:focus-visible {
    border-color: var(--border-color-global) !important;
  }

  .watchlist-dropdown-container.MuiButton-root[aria-expanded='true']{
    border-color: var(--border-color-global) !important;
    background-color: var(--watchlist-dropdown-bg) !important;
  }
  
  /* Optional: rotate chevron when menu open — add class from JS or use aria-expanded if you wire it */
  .watchlist-dropdown-container.MuiButton-root[aria-expanded='true'] .MuiButton-endIcon {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* Inner flex box from ButtonDropdown: allow ellipsis like .MuiSelect-select */
  .watchlist-dropdown-container.MuiButton-root .MuiBox-root {
    min-width: 0;
    align-items: flex-start !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

/* --- STYLES FOR THE BLUE CHIP DROPDOWN --- */

/* 1. Styling the visible blue button (Trigger) */
.filter-chip-dropdown {
    /* background-image: linear-gradient(to right, rgba(0, 62, 126, 1), rgba(0, 112, 228, 1)); */
    border-radius: 12px;
    /* justify-content: space-between; */
    /* align-items: center; */
    height: var(--filter-heights) !important;
    width: fit-content !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}

.filter-chip-dropdown .MuiSelect-select {
    color: var(--color-white) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-label-size) !important;
    font-weight: 400;
    padding-right: 8px !important;
}

.filter-chip-dropdown .MuiSelect-icon {
    color: var(--color-white);
    right: 10px;

}

.filter-chip-dropdown:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: darkgray;
}

.custom-tab-header-root {
    direction: ltr;
}

.tab-header-dropdown {
    background: transparent !important;
    box-shadow: none !important;
    min-width: auto !important;
    padding: 0 0 1px 7px !important;
}

[dir="rtl"] .tab-header-dropdown {
    padding: 0 7px 1px 0 !important;
}

/* Remove hover background */
.tab-header-dropdown:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove active background */
.tab-header-dropdown:active {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove focus background */
.tab-header-dropdown:focus {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove MUI focus-visible blue state */
.tab-header-dropdown.Mui-focusVisible {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove ripple container highlight */
.tab-header-dropdown .MuiTouchRipple-root {
    display: none !important;
}

/* --- */

/* 2. Styling the dropdown paper (Menu) to match the button width */
.chip-dropdown-menu .MuiPaper-root {
    background-color: var(--color-white) !important;
    border-radius: var(--border-radius);
    height: auto;
    min-width: 80px;
    width: auto !important;
    /* Matches the width of the filter-chip-dropdown button */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Adds a small space between the button and the menu */
    /* NOTE: We do NOT set a min-width here. This allows the paper
       to automatically match the width of the filter-chip-dropdown button. */
}

/* Styling for the items inside the new menu */
.chip-dropdown-menu .MuiMenuItem-root {
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    font-weight: 400;
    justify-content: left;
    color: #222222;
    padding: 10px 16px;
}

.chip-dropdown-menu .MuiMenuItem-root.Mui-selected {
    background-color: #f0f0f0;
    font-weight: 500;
}

.chip-dropdown-menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: #f5f5f5;
}


/* Styles for the FormControl wrapper */
.status-filter-dropdown {
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    /* Removed transition for border-color as we'll use outline for focus */
}

.status-filter-dropdown.Mui-focused {
    /* Use outline for focus effect */
    outline: 2px solid var(--color-blue);
    /* Adjust thickness as needed */
    outline-offset: 2px;
    /* Adds space between the element and the outline */
    border-color: transparent;
    /* Optional: Make original border transparent on focus */
}


/* Target the Select component inside FormControl */
.status-filter-dropdown .MuiSelect-select {
    color: #333;
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    font-weight: 500;
    padding: 8px 32px 8px 16px;
}

/* Dropdown arrow icon */
.status-filter-dropdown .MuiSelect-icon {
    fill: #000;
    padding: 4px;
}

/* Styles for the dropdown menu */
.status-filter-menu .MuiPaper-root {
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    margin-top: 8px;
}

/* Menu items */
.status-filter-menu .MuiMenuItem-root {
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    font-weight: 400;
    color: #202124;
    padding: 12px 20px;
    min-height: auto;
}

/* Selected menu item */
.status-filter-menu .MuiMenuItem-root.Mui-selected {
    background-color: #e8f0fe;
    font-weight: 500;
    color: #1967d2;
}

/* Hover state for non-selected items */
.status-filter-menu .MuiMenuItem-root:hover:not(.Mui-selected) {
    background-color: #f5f5f5;
}


/* --- Styling for the Dropdown Trigger (Visible Part) --- */
.Dropdown {
    background: var(--watchlist-dropdown-bg) !important;
    border-radius: var(--border-radius);
    min-height: var(--filter-heights);
    width: auto !important;
    min-width: unset !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* box-shadow: 0 4px 12px var(--shadow-dropdown); */
}

/* Style for the FormControl */
.Dropdown .MuiFormControl-root {
    width: 100%;
    margin: 0;
}

/* Style for the Select component container */
.Dropdown .MuiOutlinedInput-root {
    border-radius: var(--border-radius);
    background: var(--watchlist-dropdown-bg) !important;
    height: var(--filter-heights);
    border: 1px solid var(--border-color-inactive) !important;
}

.Dropdown .MuiOutlinedInput-root:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-dropdown);
    /* Enhanced shadow */
    border-color: var(--border-color-global) !important;
}

.Dropdown .MuiOutlinedInput-root.Mui-focused {
    /* Focus outline */
    outline-offset: 2px;
    border-color: var(--border-color-global) !important;
}

/* Styling for the select element inside anomaly dropdown */
.Dropdown .MuiSelect-select {
    color: var(--font-color-grid) !important;
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    font-weight: 100;
    padding: 0px 32px 0px 16px !important;
    height: var(--filter-heights) !important;
    min-height: unset !important;
    line-height: var(--dropdown-line-height) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Remove outline border */
.Dropdown .MuiOutlinedInput-notchedOutline {
    border: none !important;
}

/* Icon styling within the dropdown button */
.Dropdown .MuiSelect-icon {
    fill: var(--font-color-grid) !important;
    width: 10px !important;
    height: 10px !important;
    right: 8px !important;
    top: 52% !important;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

/* Rotate icon when dropdown is open */
.Dropdown .MuiSelect-iconOpen {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* --- Styling for the Dropdown Menu and Its Items --- */

.Dropdown-Menu .MuiPaper-root {
    background-color: var(--background-dropdown-menu);
    border-radius: 12px;
    max-height: 300px;
    min-width: 170px !important;
    width: auto !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    margin-top: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    z-index: 1900 !important;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.Dropdown-Menu .MuiPaper-root::-webkit-scrollbar {
    display: none;
}

/* General styles for all menu items */
.Dropdown-Menu .MuiMenuItem-root {
    font-family: var(--font-family) !important;
    font-size: 13px;
    font-weight: 400;
    /* min-height: 36px; */
    /* padding: 0px 10px; */
    display: flex;
    align-items: center;
    /* color: var(--font-color-card) !important; */
    /* transition: background-color 0.15s ease; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* line-height: 1.5; */
    /* border-bottom: 1px solid var(--border-menu-item); */
    color: var(--font-color-grid);
    height: var(--filter-heights);
    /* padding: 0px */
}

/* Container for menu items text */
.Dropdown-Menu .MuiMenuItem-root>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    /* color: var(--font-color-grid); */
}

.Dropdown-Menu .MuiMenuItem-root.Mui-selected {
    background-color: rgba(25, 118, 210, 0.08) !important;
    color: var(--font-color-grid);
    font-weight: 500;
}

.Dropdown-Menu .MuiMenuItem-root.Mui-selected:hover {
    background-color: rgba(25, 118, 210, 0.12) !important;
}

.Dropdown-Menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: var(--menu-item-hover) !important;
    /* color: var(--color-blue); */
    /* color: purple;/ */
}

.Dropdown-Menu .MuiMenuItem-root:focus,
.Dropdown-Menu .MuiMenuItem-root:focus-visible,
.Dropdown-Menu .MuiMenuItem-root.Mui-focusVisible,
.Dropdown-Menu .MuiMenuItem-root.Mui-selected:focus,
.Dropdown-Menu .MuiMenuItem-root.Mui-selected:focus-visible,
.Dropdown-Menu .MuiMenuItem-root.Mui-selected.Mui-focusVisible {
    outline: none !important;
    background-color: transparent !important;
}

/* Add divider between items */
/* .Dropdown-Menu .MuiMenuItem-root:not(:last-child) {
    border-bottom: 1px solid var(--border-menu-item);
} */

.dropdown-menu {
    z-index: 1900 !important;
    position: fixed !important;
}

/* Auto-size Paper width and hide scrollbar for ButtonDropdown menus */
.dropdown-menu .MuiPaper-root {
    width: auto !important;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    /* Firefox */
    /* -ms-overflow-style: none; */
    /* IE/Edge */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

/* Hide scrollbar for Chrome/Safari */
.dropdown-menu .MuiPaper-root::-webkit-scrollbar {
    /* display: none; */
    width: 6px;
}

.dropdown-menu .MuiPaper-root::-webkit-scrollbar-track {
    border-radius: 12px;
    background: transparent;
}

.dropdown-menu .MuiPaper-root::-webkit-scrollbar-thumb {
    border-radius: 12px;
}

/* Clean menu item styling for ButtonDropdown */
.dropdown-menu .MuiMenuItem-root {
    font-size: 13px !important;
    font-weight: 400 !important;
    min-height: 36px;
    padding: 6px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu-item:hover {
    background-color: var(--menu-item-hover) !important;
}

/* .dropdown-menu-item.Mui-selected {
    background: var(--color-primary-bg-new-dashboard);
    color: var(--color-white);
} */

.Textfield .MuiSelect-select {
    height: 15px,
}

/* --- Styling for the Multiselect Trigger (Visible Part) --- */
.multiselect {
    background: var(--color-white);
    border-radius: var(--border-radius);
    min-height: var(--filter-heights);
    width: auto !important;
    min-width: 120px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px var(--shadow-dropdown);
    border: 1px solid var(--primary-border-color) !important;
}

/* Style for the FormControl */
.multiselect .MuiFormControl-root {
    width: 100%;
    margin: 0;
}

/* Style for the Select component container */
.multiselect .MuiOutlinedInput-root {
    border-radius: 12px;
    background: transparent;
    height: 40px;
}

.multiselect:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-dropdown);
    /* Enhanced shadow */
}

.multiselect.Mui-focused {
    outline: 2px solid var(--color-black);
    /* Focus outline */
    outline-offset: 2px;
    border-color: var(--color-white);
}

/* Styling for the select element inside multiselect */
.multiselect .MuiSelect-select {
    color: var(--color-black) !important;
    font-family: var(--font-family);
    font-size: var(--font-label-size);
    /* Adjusted text size */
    font-weight: 100;
    padding: 0px 32px 0px 16px !important;
    height: var(--filter-heights) !important;
    min-height: unset !important;
    line-height: 29px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Remove outline border */
.multiselect .MuiOutlinedInput-notchedOutline {
    border: none !important;
}

/* Icon styling within the dropdown button */
.multiselect .MuiSelect-icon {
    fill: var(--color-black) !important;
    width: 20px !important;
    height: 20px !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

/* Rotate icon when dropdown is open */
.multiselect .MuiSelect-iconOpen {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* --- Styling for the Multiselect Menu and Its Items --- */
.multiselect-menu {
    margin-top: 2px !important;
    margin-left: 32px !important;
}

.multiselect-menu .MuiPaper-root {
    background-color: var(--background-dropdown-menu) !important;
    border-radius: 12px !important;
    max-height: 300px !important;
    width: auto !important;
    min-width: auto !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    margin-top: 2px;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Vertical scrollbar */
.multiselect-menu .MuiPaper-root::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    /* Height for horizontal scrollbar */
}

.multiselect-menu .MuiPaper-root::-webkit-scrollbar-track {
    background: transparent;
}

.multiselect-menu .MuiPaper-root::-webkit-scrollbar-thumb {
    background-color: var(--color-black);
    border-radius: 3px;
}

/* Horizontal scrollbar */
.multiselect-menu .MuiPaper-root::-webkit-scrollbar-thumb:horizontal {
    background-color: var(--color-black);
    border-radius: 3px;
}

/* Corner where scrollbars meet */
.multiselect-menu .MuiPaper-root::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- UPDATED: General styles for all menu items to match picture --- */
.multiselect-menu .MuiMenuItem-root {
    font-family: var(--font-family) !important;
    font-size: 12px !important;
    /* Clean, readable font size */
    font-weight: 300 !important;
    /* Standard font weight */
    min-height: 24px !important;
    /* Taller rows for a more spacious feel */
    min-width: max-content !important;
    padding: 0px 0px !important;
    /* Increased padding for better vertical alignment */
    display: flex !important;
    align-items: center !important;
    color: var(--font-color-grid) !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 0 !important;
    /* Standard line height for readability */
    /* border-bottom: 1px solid var(--border-menu-item) !important; */
    /* This creates the divider line */
}

.MuiListItemText-primary {
    color: var(--font-color-grid) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    min-height: 24px !important;
    /* min-width: max-content !important; */
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    width: auto !important;
    max-width: 250px !important;
}

/* Container for menu items text */
.multiselect-menu .MuiMenuItem-root>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding: 5px 9px 5px 9px;
}

.multiselect-menu .MuiMenuItem-root.Mui-selected {
    background-color: transparent !important;
    color: var(--font-color-card) !important;
    font-weight: 500;
}

.multiselect-menu .MuiMenuItem-root:not(.Mui-selected):hover {
    background-color: var(--background-menu-item-hover) !important;
    color: var(--font-color-card) !important;
}

.multiselect-menu .MuiMenuItem-root:focus,
.multiselect-menu .MuiMenuItem-root:focus-visible,
.multiselect-menu .MuiMenuItem-root.Mui-focusVisible,
.multiselect-menu .MuiMenuItem-root.Mui-selected:focus,
.multiselect-menu .MuiMenuItem-root.Mui-selected:focus-visible,
.multiselect-menu .MuiMenuItem-root.Mui-selected.Mui-focusVisible {
    outline: none !important;
    background-color: transparent !important;
}

/* Add divider between items */


.create-portfolio-dropdown .MuiInputBase-root {
    border-radius: 8px !important;
    height: 38px !important;
    font-size: var(--font-item-label-size) !important;
    line-height: 14px !important;
    font-family: var(--font-family) !important;
    /* border-color: blue !important; */

}

.create-portfolio-dropdown .MuiOutlinedInput-notchedOutline {
    border-color: var(--color-blue-border) !important;
}

.create-portfolio-dropdown .MuiSelect-select {
    color: var(--font-color-grid) !important;
}

.create-portfolio-dropdown .MuiSelect-icon {
    fill: var(--font-color-grid) !important;
}

.create-alert-dropdown {
    width: 100%;
}

.create-alert-dropdown .MuiInputBase-root,
.create-alert-dropdown .MuiOutlinedInput-root {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
}

.create-alert-dropdown .MuiOutlinedInput-notchedOutline {
    border-color: var(--border-color-inactive) !important;
}

.create-alert-dropdown .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline,
.create-alert-dropdown .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.create-alert-dropdown .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.create-alert-dropdown .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--border-color-global) !important;
}

.create-alert-dropdown .MuiSelect-select {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 32px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    font-size: 10px !important;
    line-height: 10px !important;
}

.create-alert-dropdown .MuiSelect-icon {
    fill: var(--font-color-grid) !important;
}

.create-alert-dropdown .dropdown-placeholder {
    font-size: 10px !important;
    line-height: 10px !important;
}

.create-portfolio-dropdown .MuiFormLabel-root {
    left: 10px !important;
    right: auto !important;
    top: 2px !important;
    color: var(--font-color-grid) !important;
}

[dir="rtl"] .create-portfolio-dropdown .MuiFormLabel-root {
    left: auto !important;
    right: 52px !important;
}

.add-index-dropdown {
    width: 100%;
}

.add-index-dropdown .MuiInputBase-root,
.add-index-dropdown .MuiOutlinedInput-root {
    border-radius: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    background: var(--watchlist-dropdown-bg) !important;
    box-sizing: border-box;
}

.add-index-dropdown .MuiOutlinedInput-notchedOutline {
    border-color: var(--color-blue-border) !important;
}

.add-index-dropdown .MuiSelect-select {
    color: var(--font-color-grid) !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    padding: 0 32px 0 12px !important;
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: var(--font-size-small) !important;
    line-height: var(--font-size-small) !important;
}

.add-index-dropdown .MuiSelect-icon {
    fill: var(--font-color-grid) !important;
}

.grid-setting-dropdown .MuiInputBase-root {
    border-radius: var(--border-radius) !important;
    height: var(--filter-heights) !important;
    font-size: var(--font-value-size) !important;
    color: var(--font-color-grid) !important;
    /* border-color: blue !important; */

}

.Dropdown.alert {
    width: 120px !important;
}

/* Formula Builder button filter dropdown */
.button-filter-dropdown {
  width: 100%;
}

.button-filter-dropdown-trigger.MuiButton-root {
  width: 100%;
  justify-content: space-between;
  text-transform: none !important;
  border-radius: 8px !important;
}

.formula-builder-filter-dropdown .button-filter-dropdown-trigger.MuiButton-root {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
}

.button-filter-dropdown-trigger .MuiButton-endIcon svg {
  width: 8px;
  height: 8px;
  fill: var(--font-color-grid);
}

.button-filter-dropdown-trigger-text {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  text-transform: none !important;
}

.formula-builder-filter-dropdown .button-filter-dropdown-trigger-text {
  color: white !important;
  font-weight: 500 !important;
}

.button-filter-dropdown-menu-paper {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
}

.button-filter-dropdown-menu-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 15px !important;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
}

.button-filter-dropdown-search {
  margin-bottom: 16px !important;
  width: 100% !important;
  display: block;
}

.button-filter-dropdown-options-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 5px;
  row-gap: 10px;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.button-filter-dropdown-option.MuiButton-root {
  background: var(--portfolio-symbol-row-search-bg-color) !important;
  padding: 6px 4px !important;
  border-radius: 8px !important;
  text-transform: none !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.button-filter-dropdown-option-text {
  color: var(--font-color-grid) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-small) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  text-transform: capitalize !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}
.big-trades-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.big-trades-grid {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.corporate-calendar-root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.corporate-calendar-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--news-background-color);
  border-radius: 10px;
  gap: 12px;
}

.corporate-calendar-header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.corporate-calendar-header-search {
  width: 220px;
  min-width: 180px;
}

.corporate-calendar-print {
  margin-inline-start: auto;
  flex: 0 0 40px;
  width: 40px;
}

.corporate-calendar-print-icon,
.corporate-calendar-print-icon path {
  color: #fff !important;
  fill: #fff !important;
}

.corporate-calendar-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.corporate-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.corporate-calendar-item {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-left: 2px solid var(--border-color-global);
  background: var(--popup-background-color);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
}

[dir="rtl"] .corporate-calendar-item {
  border-left: none;
  border-right: 2px solid var(--border-color-global);
}

.corporate-calendar-item-clickable {
  cursor: pointer;
}

.corporate-calendar-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.corporate-calendar-item-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: var(--font-color-grid);
}

.corporate-calendar-item-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.corporate-calendar-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.corporate-calendar-symbol {
  font-family: var(--font-family);
  font-weight: 600;
  font-style: normal;
  font-size: var(--font-size-small);
  line-height: var(--font-size-label);
  color: var(--border-color-global);
  flex-shrink: 0;
}

.corporate-calendar-description,
.corporate-calendar-title {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-small);
  line-height: var(--font-size-label);
  color: var(--font-color-grid, inherit);
  flex: 1;
  min-width: 0;
}

.corporate-calendar-dates {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: var(--ag-cell-value);
  line-height: var(--ag-cell-value);
  color: var(--search-text-color);
}

.corporate-calendar-empty,
.corporate-calendar-error {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
  margin-top: 16px;
  color: var(--font-color-grid, inherit);
}

.corporate-calendar-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

.corporate-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.corporate-calendar-nav-arrow {
  color: var(--font-color-grid) !important;
}

.corporate-calendar-nav-arrow.Mui-disabled {
  opacity: 0.35;
}

.corporate-calendar-nav-label {
  min-width: 220px;
  border: none;
  background: transparent;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: var(--font-size-label);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.corporate-calendar-nav-label:hover,
.corporate-calendar-nav-label.is-open {
  background: var(--popup-background-color);
}

.corporate-calendar-split {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: 12px;
  /* Keep pane order controlled by class, not document dir. */
  direction: ltr;
}

.corporate-calendar-split.is-rtl {
  flex-direction: row-reverse;
}

.corporate-calendar-split-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.corporate-calendar-split-pane--table {
  flex: 4 1 0;
}

.corporate-calendar-split-pane--calendar {
  flex: 6 1 0;
}

.corporate-calendar-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.corporate-calendar-months.is-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.corporate-calendar-split-pane .corporate-calendar-nav-label {
  min-width: 0;
}

.corporate-calendar-mini {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--popup-background-color);
}

.corporate-calendar-mini-title {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--font-color-grid);
  margin-bottom: 6px;
  text-align: center;
}

.corporate-calendar-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.corporate-calendar-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 10px;
  color: var(--search-text-color);
}

.corporate-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: 11px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 30%;
}

.corporate-calendar-day.is-empty {
  cursor: default;
}

.corporate-calendar-day.is-today:not(.has-event) {
  box-shadow: inset 0 0 0 1px var(--border-color-global);
}

.corporate-calendar-day.has-event {
  background: var(--border-color-global);
  color: var(--color-white, #fff);
}

.corporate-calendar-day.is-clickable {
  cursor: pointer;
}

.corporate-calendar-day.is-clickable:hover {
  opacity: 0.88;
}

.corporate-calendar-picker {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 8px 0;
}

.corporate-calendar-picker-year {
  align-self: center;
  border: none;
  background: transparent;
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.corporate-calendar-picker-year:hover:not(.is-static) {
  background: var(--popup-background-color);
}

.corporate-calendar-picker-year.is-static {
  cursor: default;
}

.corporate-calendar-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.corporate-calendar-picker-grid--years {
  grid-template-rows: none;
  grid-auto-rows: calc((100% - 20px) / 3);
  overflow-y: auto;
}

.corporate-calendar-picker-cell {
  border: none;
  border-radius: 10px;
  background: var(--popup-background-color);
  color: var(--font-color-grid);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  cursor: pointer;
}

.corporate-calendar-picker-cell.is-selected,
.corporate-calendar-picker-cell:hover {
  background: var(--border-color-global);
  color: var(--color-white, #fff);
}

.volume-watcher-root{
  width: 100%;
  height: 100%;
  /* padding: 5px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.volume-watcher-header{
  background: transparent;
  /* padding-top: 4px; */
  flex-shrink: 0;
}

.volume-watcher-header-row{
  display: flex;
  gap: 05px;
  width: 100%;
  align-items: flex-end;
}

.volume-watcher-control{
  flex: 1 1 0;
  min-width: 0;
}

.volume-watcher-control--search-button{
  flex: 0 0 40px;
  width: 40px;
}

.volume-watcher-search-button{
  width: 40px !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px !important;
}

.volume-watcher-label{
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: var(--font-size-small) !important;
  line-height: var(--font-size-small) !important;
}

/* Trigger field: same base as custom watch name field, only height/width controlled here */
/*.volume-watcher-trigger .create-alert-text-input-search .MuiOutlinedInput-root{
  height: 40px !important;
  min-height: 40px !important;
}

/* Dropdowns height */
/*.volume-watcher-dropdown .MuiOutlinedInput-root{
  height: 40px !important;
  min-height: 40px !important;
}*/

.volume-watcher-body{
  /* margin-top: 20px; */
  flex: 1;
  min-height: 0;
  display: flex;
}

.volume-watcher-grid{
  flex: 1;
  min-height: 0;
  /* border-radius: 10px; */
  overflow: hidden;
}

.volume-watcher-grid .ag-root-wrapper{
  /* border-radius: 10px !important; */
}

.volume-watcher-trigger-input .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline{
  top: -7px !important;
}

.performance-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* background: var(--performance-map-bg, var(--color-bg-paper, #12161c)); */
}

.performance-map-header {
  flex-shrink: 0;
  background: transparent;
}

.performance-map-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  align-items: flex-end;
  padding: 4px 6px 6px;
  box-sizing: border-box;
}

.performance-map-control {
  flex: 1 1 120px;
  min-width: 110px;
}

.performance-map-label {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: var(--font-size-small) !important;
  line-height: var(--font-size-small) !important;
}

.performance-map-body {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.performance-map-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.performance-map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.performance-map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  max-width: min(240px, calc(100% - 16px));
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--performance-map-tooltip-bg, rgba(16, 20, 24, 0.92));
  color: var(--performance-map-tooltip-fg, #f5f7fa);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-line;
  box-shadow: none;
}