/* =========================================================

   GETICK TRADES — Dashboard CSS (scoped)

   Put in: /assets/dashboard.css

   IMPORTANT: everything is scoped under .gt-trades

   ========================================================= */



/* =========================

   Theme vars + base wrapper

   ========================= */

.gt-trades{

  --bg0: #06070a;

  --bg1: #0b0b10;

  --card: rgba(0,0,0,.28);

  --card2: rgba(0,0,0,.22);

  --stroke: rgba(255,255,255,.10);

  --muted: rgba(255,255,255,.70);

  --muted2: rgba(255,255,255,.55);

  --brand: #2ecc71;

  --brand-soft: rgba(46,204,113,.16);



  min-height: 100vh;

  background: var(--bg0);

  color: rgba(255,255,255,.88);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;

}



/* ---------- Topbar (match Getick UI vibe) ---------- */

.gt-trades .gt-topbar{

  position: sticky;

  top: 0;

  z-index: 50;



  display: flex;

  align-items: center;

  justify-content: space-between;



  height: 72px;

  padding: 0 18px;



  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.22));

  border-bottom: 1px solid var(--stroke);

  backdrop-filter: blur(10px);

}



.gt-trades .gt-topbar-left{

  display: inline-flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

}



.gt-trades .gt-topbar-titlewrap{

  display: flex;

  flex-direction: column;

  line-height: 1.05;

  min-width: 0;

}



.gt-trades .gt-topbar-title{

  font-weight: 900;

  letter-spacing: .6px;

  font-size: 16px;

  white-space: nowrap;

}



.gt-trades .gt-topbar-subtitle{

  margin-top: 2px;

  font-size: 12px;

  color: var(--muted2);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 60vw;

}



.gt-trades .gt-topbar-right{

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



/* Brand logo (safe defaults) */

.gt-trades .brand-logo{

  display: inline-flex;

  align-items: baseline;

  font-weight: 900;

  letter-spacing: .2px;

  user-select: none;

}

.gt-trades .brand-get{ color: rgba(255,255,255,.88); }

.gt-trades .brand-i{ color: var(--brand); margin: 0 1px; }

.gt-trades .brand-ck{ color: rgba(255,255,255,.88); }



/* Topbar buttons */

.gt-trades .gt-topbar-btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;



  height: 38px;

  padding: 0 12px;



  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(0,0,0,.26);



  color: rgba(255,255,255,.88);

  text-decoration: none;

  font-weight: 800;

  font-size: 12px;

}

.gt-trades .gt-topbar-btn:hover{

  border-color: rgba(255,255,255,.22);

  background: rgba(255,255,255,.06);

}



.gt-trades .gt-topbar-link{

  color: var(--muted);

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  padding: 8px 10px;

  border-radius: 12px;

}

.gt-trades .gt-topbar-link:hover{

  background: rgba(255,255,255,.06);

  color: rgba(255,255,255,.88);

}



/* ---------- Page spacing ---------- */

.gt-trades .gt-page{

  padding: 14px 14px 18px 14px;

}



/* ---------- Cards / panels ---------- */

.gt-trades .page{ padding: 0; } /* your dark_layout already uses .page */

.gt-trades .header,

.gt-trades .control,

.gt-trades .kpi-card,

.gt-trades .panel,

.gt-trades .tzcal-weekday,

.gt-trades .tzcal-weekcard{

  background: var(--card);

  border: 1px solid var(--stroke);

  border-radius: 16px;

}



/* Header block inside content */

.gt-trades .header{

  padding: 14px 14px 10px 14px;

  margin-bottom: 12px;

}

.gt-trades .header-title{

  font-size: 18px;

  font-weight: 900;

}

.gt-trades .header-subtitle{

  font-size: 12px;

  color: var(--muted2);

  margin-top: 4px;

}



/* Controls */

.gt-trades .controls{

  display: grid;

  grid-template-columns: repeat(6, minmax(140px, 1fr));

  gap: 10px;

  margin-bottom: 12px;

}

@media (max-width: 1200px){

  .gt-trades .controls{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }

}



.gt-trades .control{ padding: 10px; min-width: 0; }

.gt-trades .control *{ box-sizing: border-box; }



.gt-trades .control-label{

  font-size: 12px;

  color: var(--muted2);

  margin-bottom: 6px;

}



.gt-trades .num-input{

  width: 100%;

  max-width: 100% !important;

  display: block;



  background: rgba(0,0,0,.18);

  color: rgba(255,255,255,.88);

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 12px;

  padding: 9px 10px;



  transition: box-shadow .15s ease, border-color .15s ease;

}

.gt-trades .num-input:hover,

.gt-trades .num-input:focus{

  border-color: rgba(46,204,113,.60) !important;

  box-shadow: 0 0 0 3px rgba(46,204,113,.12) !important;

  outline: none !important;

}



/* remove up/down arrows on number inputs */

.gt-trades input[type="number"]::-webkit-outer-spin-button,

.gt-trades input[type="number"]::-webkit-inner-spin-button{

  -webkit-appearance: none;

  margin: 0;

}

.gt-trades input[type="number"]{

  -moz-appearance: textfield; /* Firefox */

}



/* Apply / Reset buttons */

.gt-trades .btn{

  border: 1px solid rgba(46,204,113,.35) !important;

  background: rgba(46,204,113,.12) !important;

  color: rgba(255,255,255,.92) !important;



  border-radius: 14px !important;

  padding: 10px 12px;

  cursor: pointer;

  height: 44px;

  align-self: end;



  font-weight: 900 !important;

  letter-spacing: .2px;



  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .05s ease;

}

.gt-trades .btn:hover{

  background: rgba(46,204,113,.18) !important;

  border-color: rgba(46,204,113,.65) !important;

  box-shadow: 0 0 0 3px rgba(46,204,113,.12), 0 12px 28px rgba(46,204,113,.10);

}

.gt-trades .btn:active{ transform: translateY(1px); }



/* KPI row */

.gt-trades .kpi-row{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 1200px){

  .gt-trades .kpi-row{ grid-template-columns: repeat(3, 1fr); }

}

.gt-trades .kpi-card{ padding: 12px; min-height: 78px; }

.gt-trades .kpi-title{ font-size: 12px; color: var(--muted2); }

.gt-trades .kpi-value{ font-size: 20px; font-weight: 900; margin-top: 6px; }

.gt-trades .kpi-subtitle{ font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; }



/* Grid panels */

.gt-trades .grid{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}

@media (max-width: 1200px){

  .gt-trades .grid{ grid-template-columns: 1fr; }

  .gt-trades .panel-wide{ grid-column: auto; }

}

.gt-trades .panel{ padding: 10px; min-height: 420px; }

.gt-trades .panel-wide{ grid-column: span 2; min-height: 620px; }



.gt-trades .panel-title{

  font-size: 13px;

  font-weight: 900;

  margin: 6px 0 10px 2px;

  color: var(--brand) !important;

  letter-spacing: .2px;

}



/* Prevent Plotly panels from collapsing during re-render */

.gt-trades .panel .js-plotly-plot,

.gt-trades .panel .plot-container{

  min-height: 280px;

}



/* ---------- Dropdowns (react-select) ---------- */

.gt-trades .Select-control,

.gt-trades .Select-control *{

  background-color: rgba(0,0,0,.18) !important;

  color: rgba(255,255,255,.88) !important;

  border-color: rgba(255,255,255,.14) !important;

}



.gt-trades .Select-control{

  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;

}

.gt-trades .Select-control:hover,

.gt-trades .Select.is-focused > .Select-control{

  border-color: rgba(46,204,113,.60) !important;

  box-shadow: 0 0 0 3px rgba(46,204,113,.12) !important;

}



.gt-trades .Select-menu-outer{

  background-color: #0b0b10 !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow: none !important;



  max-height: 260px;

  overflow-y: auto !important;



  scrollbar-width: thin; /* Firefox */

  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.35); /* Firefox */

}

.gt-trades .Select-menu-outer::-webkit-scrollbar{ width: 10px; }

.gt-trades .Select-menu-outer::-webkit-scrollbar-track{

  background: rgba(0,0,0,.35);

  border-radius: 999px;

}

.gt-trades .Select-menu-outer::-webkit-scrollbar-thumb{

  background: rgba(255,255,255,.16);

  border-radius: 999px;

  border: 2px solid rgba(0,0,0,0);

}

.gt-trades .Select-menu-outer::-webkit-scrollbar-thumb:hover{

  background: rgba(46,204,113,.35);

}



.gt-trades .Select-option{

  background-color: #0b0b10 !important;

  color: rgba(255,255,255,.80) !important;

}

.gt-trades .Select-option.is-focused{

  background-color: rgba(255,255,255,.06) !important;

  color: rgba(255,255,255,.92) !important;

}

.gt-trades .Select-option.is-selected{

  background-color: rgba(46,204,113,.18) !important;

  color: rgba(255,255,255,.92) !important;

}



/* Ensure Dropdown + DatePicker not exceed container */

.gt-trades .control .Select,

.gt-trades .control .DateRangePicker,

.gt-trades .control .DateRangePickerInput{

  width: 100% !important;

  max-width: 100% !important;

}



/* ---------- DatePicker (react-dates) ---------- */

.gt-trades .DateRangePicker,

.gt-trades .DateRangePickerInput,

.gt-trades .DateInput,

.gt-trades .DateInput_input{

  background-color: rgba(0,0,0,.18) !important;

  color: rgba(255,255,255,.88) !important;

}



/* Input box border (kill white border) */

.gt-trades .DateRangePickerInput{

  background: rgba(0,0,0,.18) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  border-radius: 12px !important;

}

.gt-trades .DateInput_input{

  background: transparent !important;

  border: 0 !important;

  color: rgba(255,255,255,.88) !important;

  font-size: 12px !important;

  padding: 8px 10px !important;

  height: 38px !important;

}

.gt-trades .DateInput_input__focused{

  border: 0 !important;

  box-shadow: none !important;

}

.gt-trades .DateRangePickerInput_arrow{

  opacity: .7;

  transform: scale(.9);

}



/* Popup */

.gt-trades .DateRangePicker_picker,

.gt-trades .DayPicker,

.gt-trades .DayPicker__withBorder{

  background-color: #0b0b10 !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow: none !important;

}

.gt-trades .CalendarMonth,

.gt-trades .CalendarMonthGrid{

  background: #0b0b10 !important;

  color: rgba(255,255,255,.90) !important;

}

.gt-trades .CalendarMonth_caption{

  color: rgba(255,255,255,.90) !important;

  font-weight: 800 !important;

}

.gt-trades .DayPicker_weekHeader,

.gt-trades .DayPicker_weekHeader_li{

  color: rgba(255,255,255,.75) !important;

}

.gt-trades .CalendarDay,

.gt-trades .CalendarDay__default{

  background: #0b0b10 !important;

  color: rgba(255,255,255,.80) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

}

.gt-trades .CalendarDay__hovered_span,

.gt-trades .CalendarDay__hovered_span:hover{

  background: rgba(255,255,255,.06) !important;

  color: rgba(255,255,255,.92) !important;

}

.gt-trades .CalendarDay__selected,

.gt-trades .CalendarDay__selected:hover,

.gt-trades .CalendarDay__selected_span,

.gt-trades .CalendarDay__selected_span:hover{

  background: rgba(46,204,113,.22) !important;

  color: rgba(255,255,255,.92) !important;

  border: 1px solid rgba(46,204,113,.55) !important;

}

.gt-trades .CalendarDay__outside{

  color: rgba(255,255,255,.30) !important;

}



/* Nav arrows dark */

.gt-trades .DayPickerNavigation_button{

  background: rgba(0,0,0,.25) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

}

.gt-trades .DayPickerNavigation_svg__horizontal{

  fill: rgba(255,255,255,.75) !important;

}



/* remove help / question mark icon */

.gt-trades .DayPickerKeyboardShortcuts_show,

.gt-trades .DayPickerKeyboardShortcuts_buttonReset{

  display: none !important;

}



/* ---------- TradeZilla calendar (HTML/CSS) ---------- */

.gt-trades .tzcal-wrap{ width: 100%; }



.gt-trades .tzcal-top{

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;



  padding: 10px 10px 14px 10px;

  border-bottom: 1px solid rgba(255,255,255,.10);

  margin-bottom: 10px;



  flex-wrap: nowrap;

  position: relative;

  z-index: 20;

}



.gt-trades .tzcal-top-left{

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex-wrap: nowrap;

}



.gt-trades .tzcal-top-right{

  display: flex;

  align-items: center;

  gap: 10px;

  justify-content: flex-end;

  flex-wrap: nowrap;

}



.gt-trades .tzcal-navbtn{

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(0,0,0,.18);

  color: rgba(255,255,255,.82);



  border-radius: 12px;



  width: auto !important;

  min-width: 40px;

  height: 36px;

  padding: 0 12px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  pointer-events: auto !important;

  position: relative;

  z-index: 30;

}

.gt-trades .tzcal-navbtn:hover{ background: rgba(255,255,255,.06); }



.gt-trades .tzcal-title{

  font-size: 16px;

  font-weight: 900;

  color: rgba(255,255,255,.92) !important;

  white-space: nowrap;

  line-height: 1;

  padding: 0 6px;

}



.gt-trades .tzcal-pill{

  background: rgba(46,204,113,.12);

  color: rgba(210,255,235,.92);

  border: 1px solid rgba(46,204,113,.28);

  padding: 6px 10px;

  border-radius: 999px;

  font-weight: 700;

}

.gt-trades .tzcal-pill.neg{

  background: rgba(255,82,82,.10);

  color: rgba(255,200,200,.90);

  border: 1px solid rgba(255,82,82,.25);

}



.gt-trades .tzcal-body{

  display: flex;

  flex-direction: column;

  gap: 10px;

}



/* header row: 7 weekdays + 1 week column */

.gt-trades .tzcal-weekdays{

  display: grid;

  grid-template-columns: repeat(7, 1fr) 260px;

  gap: 10px;

  margin-bottom: 0;

}



.gt-trades .tzcal-weekday{

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(0,0,0,.22);

  border-radius: 14px;

  padding: 10px 12px;

  color: rgba(255,255,255,.82);

  font-weight: 700;

  text-align: center;



  min-height: 92px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.gt-trades .tzcal-weekday-weekcol{ opacity: 0.0; }



/* week rows container */

.gt-trades .tzcal-rows{

  display: flex;

  flex-direction: column;

  gap: 12px;

}



/* each week: 7 day cells + 1 week card */

.gt-trades .tzcal-weekrow{

  display: grid;

  grid-template-columns: repeat(7, 1fr) 260px;

  gap: 10px;



  height: auto;

  min-height: 140px;



  align-items: stretch;

}



.gt-trades .tzcal-cell{

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(0,0,0,.18);

  border-radius: 16px;



  height: 100%;

  min-height: 140px;



  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.gt-trades .tzcal-cell-empty{

  background: rgba(0,0,0,.14);

  opacity: 0.55;

}



.gt-trades .tzcal-daynum{

  position: absolute;

  top: 10px;

  right: 12px;

  font-size: 13px;

  font-weight: 800;

  color: rgba(255,255,255,.85);

}



.gt-trades .tzcal-pnl{

  font-size: 22px;

  font-weight: 900;

  letter-spacing: 0.2px;

  color: rgba(255,255,255,.92);

}



.gt-trades .tzcal-pos{

  background: rgba(46,204,113,.10);

  border-color: rgba(46,204,113,.25);

}

.gt-trades .tzcal-neg{

  background: rgba(255,82,82,.10);

  border-color: rgba(255,82,82,.25);

}

.gt-trades .tzcal-zero{ background: rgba(0,0,0,.18); }



.gt-trades .tzcal-weekcard{

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(0,0,0,.18);

  border-radius: 16px;

  padding: 12px;

}

.gt-trades .tzcal-weekcard-title{

  font-size: 14px;

  font-weight: 800;

  color: rgba(255,255,255,.78);

  margin-bottom: 8px;

}

.gt-trades .tzcal-weekcard-value{

  font-size: 22px;

  font-weight: 900;

  color: #a8ffd6;

  margin-bottom: 8px;

}

.gt-trades .tzcal-weekcard-value.neg{ color: #ffb4b4; }

.gt-trades .tzcal-weekcard-sub{

  display: inline-block;

  font-size: 12px;

  padding: 6px 10px;

  background: rgba(20,26,43,.85);

  border: 1px solid rgba(43,54,96,.85);

  color: #c7d2ff;

  border-radius: 999px;

  font-weight: 800;

}



/* Calendar header/nav must be clickable and above plots */

.gt-trades .cal-header,

.gt-trades .cal-nav{

  position: relative;

  z-index: 50;

}

.gt-trades .cal-nav button,

.gt-trades .cal-nav .btn,

.gt-trades .cal-prev,

.gt-trades .cal-next{

  pointer-events: auto !important;

  z-index: 60;

  position: relative;

}

.gt-trades .js-plotly-plot,

.gt-trades .plotly,

.gt-trades .graph-card{

  z-index: 1;

}



/* ---------- AG Grid (scoped) ---------- */

.gt-trades .ag-theme-alpine-dark{

  --ag-background-color: rgba(0,0,0,.18);

  --ag-foreground-color: rgba(255,255,255,.88);

  --ag-header-background-color: rgba(0,0,0,.28);

  --ag-header-foreground-color: rgba(255,255,255,.90);

  --ag-border-color: rgba(255,255,255,.08);

  --ag-row-border-color: rgba(255,255,255,.05);

  --ag-odd-row-background-color: rgba(255,255,255,.015);

  --ag-row-hover-color: rgba(46,204,113,.08);

  --ag-selected-row-background-color: rgba(46,204,113,.10);

  --ag-font-size: 12px;



  --ag-header-height: 38px;

  --ag-row-height: 34px;

}



/* Header text */

.gt-trades .ag-header-cell-text{

  font-weight: 900;

  letter-spacing: .2px;

}



/* Header bottom line */

.gt-trades .ag-header{

  border-bottom: 1px solid rgba(255,255,255,.08) !important;

}



/* PnL coloring */

.gt-trades .ag-theme-alpine-dark .pnl-pos{

  color: #2ecc71 !important;

  font-weight: 900 !important;

}

.gt-trades .ag-theme-alpine-dark .pnl-neg{

  color: #ff5252 !important;

  font-weight: 900 !important;

}



/* Trade Id: white + green glow on hover */

.gt-trades .ag-theme-alpine-dark .trade-id-cell{

  color: rgba(255,255,255,.92) !important;

  font-weight: 800;

  cursor: pointer;

  transition: text-shadow .18s ease, color .18s ease;

}

.gt-trades .ag-theme-alpine-dark .trade-id-cell:hover{

  color: #2ecc71 !important;

  text-shadow:

    0 0 10px rgba(46,204,113,.55),

    0 0 18px rgba(46,204,113,.35);

}



/* Force header label left (if you use .hdr-left on colDef) */

.ag-theme-alpine-dark .hdr-left .ag-header-cell-label{

  justify-content: flex-start !important;

  text-align: left !important;

}



/* Pagination — Minimal (keep only Page X of Y + arrows) */

.gt-trades .ag-theme-alpine-dark .ag-paging-page-size{ display: none !important; }

.gt-trades .ag-theme-alpine-dark .ag-paging-row-summary-panel{ display: none !important; }



.gt-trades .ag-theme-alpine-dark .ag-paging-page-summary-panel{

  display: inline-flex !important;

  font-weight: 800;

  letter-spacing: .3px;

  color: rgba(255,255,255,.75);

}



.gt-trades .ag-theme-alpine-dark .ag-paging-panel{

  background: transparent;

  border-top: 1px solid rgba(255,255,255,.08);

  padding: 10px 12px;

  font-size: 12px;

  color: rgba(255,255,255,.75);



  justify-content: flex-end;

  gap: 14px;

}



/* paging buttons: custom arrows */

.gt-trades .ag-theme-alpine-dark .ag-paging-button{

  border: none !important;

  background: transparent !important;

  padding: 0 8px;

}

.gt-trades .ag-theme-alpine-dark .ag-paging-button .ag-icon{ display: none; }



.gt-trades .ag-theme-alpine-dark .ag-paging-button::before{

  content: '';

  display: inline-block;

  width: 0;

  height: 0;

  border-top: 7px solid transparent;

  border-bottom: 7px solid transparent;

  opacity: .7;

  transition: opacity .15s ease;

}

.gt-trades .ag-theme-alpine-dark .ag-paging-button[aria-label="First Page"]::before,

.gt-trades .ag-theme-alpine-dark .ag-paging-button[aria-label="Previous Page"]::before{

  border-right: 12px solid rgba(255,255,255,.45);

}

.gt-trades .ag-theme-alpine-dark .ag-paging-button[aria-label="Last Page"]::before,

.gt-trades .ag-theme-alpine-dark .ag-paging-button[aria-label="Next Page"]::before{

  border-left: 12px solid rgba(255,255,255,.45);

}

.gt-trades .ag-theme-alpine-dark .ag-paging-button:hover::before{ opacity: 1; }

.gt-trades .ag-theme-alpine-dark .ag-paging-button[disabled]::before{ opacity: .25; }



/* Sort icons — tiny triangle above header label */

.gt-trades .ag-theme-alpine-dark .ag-header-cell-label{

  position: relative;

  padding-top: 10px;

}

.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-header-icon{

  position: absolute;

  top: 0px;

  left: 50%;

  transform: translateX(-50%);

  margin: 0;

  padding: 0;

  background: none !important;

  border: 0 !important;

  box-shadow: none !important;

}

.gt-trades .ag-theme-alpine-dark .ag-icon{ color: transparent !important; }



.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-header-icon::before{

  content: "";

  display: block;

  width: 0;

  height: 0;

  opacity: .9;

}

.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-icon-asc::before{

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-bottom: 5px solid rgba(255,255,255,.9);

}

.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-icon-desc::before{

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 5px solid rgba(255,255,255,.9);

}

.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-icon-none::before{

  content: none;

}



/* =========================================================

   TRADE MODAL — GLOBAL (dbc.Modal is portaled to <body>)

   SINGLE SOURCE OF TRUTH

   ========================================================= */



/* Keep modal above anything */

.modal,

.modal-backdrop{

  z-index: 20000 !important;

}

.modal.show{ display: block !important; }

.modal-backdrop.show{ opacity: .72 !important; }



/* ✅ ONLY CHANGE REQUESTED: make modal wider */

.gt-trade-modal-dialog.modal-dialog{

  max-width: 98vw !important;

  width: 98vw !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



/* ultra-wide screens: cap so it doesn't go infinite */

@media (min-width: 1600px){

  .gt-trade-modal-dialog.modal-dialog{

    max-width: 1600px !important;

    width: 1600px !important;

  }

}



/* mobile: full-bleed */

@media (max-width: 700px){

  .gt-trade-modal-dialog.modal-dialog{

    max-width: 100vw !important;

    width: 100vw !important;

    margin: 0 !important;

  }

}



/* Modal content (content_class_name="gt-trade-modal") */

.gt-trade-modal.modal-content{

  height: 92vh !important;

  max-height: 92vh !important;



  display: flex !important;

  flex-direction: column !important;



  background:

    radial-gradient(900px 520px at 20% -10%, rgba(46,204,113,.06), transparent 55%),

    linear-gradient(180deg, #0b0d12 0%, #07080c 100%) !important;



  border: 1px solid rgba(255,255,255,.10) !important;

  border-radius: 16px !important;

  overflow: hidden !important;



  color: rgba(255,255,255,.92) !important;

  font-family: inherit !important;



  box-shadow:

    0 0 0 1px rgba(46,204,113,.08),

    0 24px 80px rgba(0,0,0,.70),

    inset 0 1px 0 rgba(255,255,255,.04) !important;

}



/* Header */

.gt-trade-modal .modal-header{

  flex: 0 0 auto;

  background: rgba(0,0,0,.20) !important;

  border-bottom: 1px solid rgba(255,255,255,.08) !important;

  padding: 14px 16px !important;

}

.gt-trade-modal .modal-title{

  color: #2ecc71 !important;

  font-weight: 900 !important;

  letter-spacing: .3px !important;

  font-size: 26px !important;

}

.gt-trade-modal .btn-close{

  filter: invert(1);

  opacity: .85;

}

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



/* Body (flex fill) */

.gt-trade-modal .modal-body{

  flex: 1 1 auto;

  min-height: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  background: transparent !important;

}



/* =========================================================

   INTERNAL MODAL LAYOUT (tz-trade-* classes)

   ========================================================= */



.gt-trade-modal .tz-trade-body{

  flex: 1 1 auto;

  min-height: 0 !important;

  display: flex !important;

  gap: 14px;

  align-items: stretch;

  padding: 10px;

}



/* left panel */

.gt-trade-modal .tz-trade-left{

  flex: 0 0 340px;

  width: 340px;

  min-height: 0 !important;

  overflow: auto;



  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)) !important;

  border-right: 1px solid rgba(255,255,255,.06) !important;

  border-radius: 14px;

  padding: 12px;

}



/* right panel */

.gt-trade-modal .tz-trade-right{

  flex: 1 1 auto;

  min-width: 0 !important;

  min-height: 0 !important;

  display: flex !important;

  align-items: stretch;

  border-radius: 14px;

}



/* big chart fills right side */

.gt-trade-modal .tz-trade-chart{

  flex: 1 1 auto;

  min-width: 0 !important;

  min-height: 0 !important;

  width: 100% !important;

  height: 100% !important;



  background: rgba(0,0,0,.25);

  border-radius: 14px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.08);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

}



/* Dash/Plotly wrappers must fill */

.gt-trade-modal .tz-trade-chart .dash-loading,

.gt-trade-modal .tz-trade-chart .dash-loading > div,

.gt-trade-modal .tz-trade-chart .dash-graph,

.gt-trade-modal .tz-trade-chart .dash-graph > div,

.gt-trade-modal .tz-trade-chart .js-plotly-plot,

.gt-trade-modal .tz-trade-chart .plot-container,

.gt-trade-modal .tz-trade-chart .svg-container{

  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

}



/* Left section titles + dividers (SUMMARY / PNL / CONTRACT) */

.gt-trade-modal .tz-left-card-title{

  display: flex;

  align-items: center;



  font-size: 12px;

  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;



  color: rgba(255,255,255,.86);



  padding: 8px 12px;

  margin: 0 0 10px 0;



  border-radius: 12px;

  background: rgba(255,255,255,.05);

  border: 1px solid rgba(255,255,255,.12);

}



.gt-trade-modal .tz-left-card + .tz-left-card{

  margin-top: 14px;

  padding-top: 14px;

  position: relative;

}

.gt-trade-modal .tz-left-card + .tz-left-card::before{

  content: "";

  position: absolute;

  left: 6px;

  right: 6px;

  top: 0;

  height: 1px;

  border-radius: 999px;

  background: linear-gradient(

    90deg,

    transparent 0%,

    rgba(255,255,255,.12) 20%,

    rgba(255,255,255,.06) 50%,

    rgba(255,255,255,.12) 80%,

    transparent 100%

  );

  opacity: .9;

}



/* Responsive: stack left/right */

@media (max-width: 1100px){

  .gt-trade-modal .tz-trade-body{ flex-direction: column; }

  .gt-trade-modal .tz-trade-left{

    width: 100%;

    flex: 0 0 auto;

    border-right: 0 !important;

  }

}

/* =========================================================

   FINAL OVERRIDES (MUST BE LAST)

   - Topbar formatting (gx-*)

   - Remove AG Grid sorting arrows/icons

   - Modal label formatting (key/value)

   - Wider modal

   ========================================================= */





/* =========================

   1) TOPBAR (gx-*) styling

   ========================= */

.gt-trades .gx-topbar{

  position: sticky;

  top: 0;

  z-index: 50;



  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;



  height: 72px;

  padding: 0 18px;



  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.22));

  border-bottom: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(10px);

}



.gt-trades .gx-topbar-left{

  display: inline-flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

}



.gt-trades .gx-brand-wrap{

  display: inline-flex;

  align-items: baseline;

  gap: 0;

  font-weight: 900;

  letter-spacing: .2px;

  font-size: 18px;

  line-height: 1;

  user-select: none;

}

.gt-trades .gx-brand{ color: rgba(255,255,255,.92); }

.gt-trades .gx-brand-i{ color: #2ecc71; margin: 0 1px; }



.gt-trades .gx-topbar-title{

  font-weight: 900;

  letter-spacing: .4px;

  font-size: 13px;

  color: rgba(255,255,255,.88);

  text-transform: uppercase;

  white-space: nowrap;

}



.gt-trades .gx-topbar-subtitle{

  margin-top: 2px;

  font-size: 12px;

  color: rgba(255,255,255,.55);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 60vw;

}



.gt-trades .gx-topbar-right{

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



/* Buttons (same Getick vibe) */

.gt-trades .gx-btn{

  display: inline-flex;

  align-items: center;

  gap: 8px;



  height: 38px;

  padding: 0 12px;



  border-radius: 12px;

  font-weight: 800;

  font-size: 12px;

  text-decoration: none;

  user-select: none;

  white-space: nowrap;

}



.gt-trades .gx-btn-ghost{

  border: 1px solid rgba(46,204,113,.35);

  background: rgba(46,204,113,.10);

  color: rgba(255,255,255,.92);

}

.gt-trades .gx-btn-ghost:hover{

  background: rgba(46,204,113,.18);

  border-color: rgba(46,204,113,.65);

  box-shadow: 0 0 0 3px rgba(46,204,113,.12), 0 10px 26px rgba(46,204,113,.10);

}





/* =======================================

   2) AG GRID: remove sorting arrows/icons

   ======================================= */



/* Hide ALL sort icons + indicator containers */

.gt-trades .ag-theme-alpine-dark .ag-header-icon,

.gt-trades .ag-theme-alpine-dark .ag-sort-indicator-container,

.gt-trades .ag-theme-alpine-dark .ag-sort-order,

.gt-trades .ag-theme-alpine-dark .ag-icon{

  display: none !important;

}



/* Undo any "triangle above label" spacing */

.gt-trades .ag-theme-alpine-dark .ag-header-cell-label{

  padding-top: 0 !important;

}



/* Also remove room reserved by the icon wrapper */

.gt-trades .ag-theme-alpine-dark .ag-header-cell .ag-header-cell-label{

  justify-content: flex-start;

}





/* ==========================================

   3) MODAL: widen dialog (more than before)

   ========================================== */



/* dbc.Modal is portaled to <body>, so GLOBAL selector */

.gt-trade-modal-dialog.modal-dialog{

  max-width: 99vw !important;

  width: 99vw !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



/* cap on ultra-wide screens (so it doesn't become insane) */

@media (min-width: 1600px){

  .gt-trade-modal-dialog.modal-dialog{

    max-width: 1750px !important;

    width: 1750px !important;

  }

}



/* mobile full bleed */

@media (max-width: 700px){

  .gt-trade-modal-dialog.modal-dialog{

    max-width: 100vw !important;

    width: 100vw !important;

    margin: 0 !important;

  }

}





/* ==========================================

   4) MODAL: label formatting (key/value rows)

   ========================================== */



/* This formats the left side “labels” consistently */

.gt-trade-modal .tz-kv .tz-row{

  display: grid !important;

  grid-template-columns: 120px 1fr !important;  /* label column fixed */

  gap: 10px !important;

  align-items: baseline !important;



  padding: 6px 0 !important;

  border-bottom: 1px solid rgba(255,255,255,.06) !important;

}



.gt-trade-modal .tz-kv .tz-row:last-child{

  border-bottom: 0 !important;

}



.gt-trade-modal .tz-kv .tz-k{

  color: rgba(255,255,255,.55) !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  letter-spacing: .02em !important;

  text-transform: none !important;

}



.gt-trade-modal .tz-kv .tz-v{

  color: rgba(255,255,255,.92) !important;

  font-size: 12px !important;

  font-weight: 900 !important;

  text-align: right !important;

  min-width: 0 !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

}



/* Positive/negative accents (keep your palette) */

.gt-trade-modal .tz-kv .tz-v.tz-pos{ color: #2ecc71 !important; }

.gt-trade-modal .tz-kv .tz-v.tz-neg{ color: #ff5252 !important; }



/* If you show ids / symbols, mono + slightly muted */

.gt-trade-modal .tz-kv .tz-v.mono,

.gt-trade-modal .tz-kv .tz-v.tz-mono{

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;

  font-weight: 800 !important;

  color: rgba(255,255,255,.78) !important;

}

/* =========================================================

   DASH 1.16 — Trade modal (wider) + QMOMO-like header

   ========================================================= */



/* Make the dialog wider (Bootstrap modal-dialog) */

.gt-trade-modal-dialog .modal-dialog{

  width: 96vw !important;

  max-width: 96vw !important;

  margin: 18px auto !important;

}



/* ultrawide cap */

@media (min-width: 1600px){

  .gt-trade-modal-dialog .modal-dialog{

    width: 1750px !important;

    max-width: 1750px !important;

  }

}

@media (min-width: 2100px){

  .gt-trade-modal-dialog .modal-dialog{

    width: 2000px !important;

    max-width: 2000px !important;

  }

}



/* Content shell */

.gt-trade-modal{

  border: 1px solid rgba(255,255,255,.10) !important;

  border-radius: 18px !important;

  background: linear-gradient(180deg, rgba(14,15,20,.96), rgba(8,8,12,.96)) !important;

  box-shadow: 0 24px 90px rgba(0,0,0,.55) !important;

  overflow: hidden !important;

}



/* Header like qmomo */

.gt-trade-modal .gt-modal-header,

.gt-trade-modal .modal-header{

  padding: 14px 16px !important;

  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18)) !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;

  backdrop-filter: blur(10px) !important;

}



.gt-trade-modal .gt-modal-title,

.gt-trade-modal .modal-title{

  font-weight: 900 !important;

  letter-spacing: .35px !important;

  font-size: 14px !important;

  color: rgba(255,255,255,.92) !important;

  text-transform: uppercase !important;



  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 78vw !important;

}



/* Close button (Bootstrap btn-close) — glow green like qmomo */

.gt-trade-modal .btn-close{

  opacity: 1 !important;

  width: 34px !important;

  height: 34px !important;

  border-radius: 12px !important;



  background-color: rgba(46,204,113,.10) !important;

  border: 1px solid rgba(46,204,113,.30) !important;

  box-shadow: none !important;

  filter: none !important;

}



.gt-trade-modal .btn-close:hover{

  background-color: rgba(46,204,113,.18) !important;

  border-color: rgba(46,204,113,.60) !important;

  box-shadow: 0 0 0 3px rgba(46,204,113,.12) !important;

}



/* Body padding */

.gt-trade-modal .gt-modal-body,

.gt-trade-modal .modal-body{

  padding: 14px 14px 16px 14px !important;

}

/* =========================================================

   TRADE MODAL — HEADER (Getick style)

   ========================================================= */



/* Header container */

.gt-trade-modal .tz-trade-header{

  display: flex;

  align-items: center;

  justify-content: space-between;



  padding: 14px 18px;

  gap: 12px;



  background: linear-gradient(

    180deg,

    rgba(0,0,0,.45),

    rgba(0,0,0,.25)

  );



  border-bottom: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(10px);

}



/* Title — Getick green */

.gt-trade-modal .tz-trade-title{

  font-size: 15px;

  font-weight: 900;

  letter-spacing: .4px;

  text-transform: uppercase;



  color: #2ecc71;



  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: calc(100% - 60px); /* leave room for X */

}



/* Close (X) button */

.gt-trade-modal .tz-trade-x{

  flex: 0 0 auto;



  width: 34px;

  height: 34px;



  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.18);

  background: rgba(0,0,0,.35);



  color: rgba(255,255,255,.55);

  font-size: 16px;

  font-weight: 900;

  line-height: 1;



  cursor: pointer;

  transition:

    color .15s ease,

    background .15s ease,

    border-color .15s ease;

}



/* Hover: subtle, not green */

.gt-trade-modal .tz-trade-x:hover{

  background: rgba(255,255,255,.06);

  color: rgba(255,255,255,.85);

  border-color: rgba(255,255,255,.35);

}



/* Active */

.gt-trade-modal .tz-trade-x:active{

  transform: translateY(1px);

}

//* ===== CALENDAR TOP BAR — FORCE FONT SIZE ===== */

.gt-trades .tzcal-top .tzcal-title{

  font-size: 14px !important;

  font-weight: 900 !important;

}



.gt-trades .tzcal-top .tzcal-navbtn{

  font-size: 14px !important;

  font-weight: 800 !important;

}



/* ===== DAYS PILL — BLUE like week "days" ===== */

.gt-trades .tzcal-pill.tzcal-pill-days{

  background: rgba(20,26,43,.85) !important;

  border: 1px solid rgba(43,54,96,.85) !important;

  color: #c7d2ff !important;



  padding: 8px 14px !important;

  font-size: 13px !important;

  font-weight: 900 !important;

}



/* (optional) ensure pnl pill stays as your green/red style */

.gt-trades .tzcal-pill.tzcal-pill-pnl{

  font-size: 13px !important;

  font-weight: 900 !important;

  padding: 8px 14px !important;

}

/* =========================================================

   CALENDAR TOP BAR — FORCE FONT SIZE (REAL FIX)

   ========================================================= */



/* 1) Month label: "January 2026" */

.gt-trades .tzcal-top .tzcal-title,

.gt-trades .tzcal-top .tzcal-title *{

  font-size: 16px !important;

  font-weight: 900 !important;

}



/* 2) Navigation buttons: arrows + "This month" */

.gt-trades .tzcal-top button,

.gt-trades .tzcal-top .tzcal-navbtn,

.gt-trades .tzcal-top .tzcal-navbtn *{

  font-size: 15px !important;

  font-weight: 800 !important;

}



/* 3) Force ANY span/div inside top bar (last safety net) */

.gt-trades .tzcal-top span,

.gt-trades .tzcal-top div{

  font-size: 15px !important;

}



/* 4) Pills (monthly stats) */

.gt-trades .tzcal-top .tzcal-pill{

  font-size: 14px !important;

  font-weight: 900 !important;

}



/* Days pill slightly bigger */

.gt-trades .tzcal-top .tzcal-pill-days{

  font-size: 15px !important;

}

/* ===============================

   TOP BAR — MONTHLY PNL PROMINENT

   =============================== */



/* Base monthly PnL pill */

.gt-trades .tzcal-pill.tzcal-pill-pnl{

  font-size: 18px !important;        /* 🔥 más grande */

  font-weight: 900 !important;

  padding: 10px 16px !important;     /* más “botón” */

  border-radius: 999px !important;

  letter-spacing: .3px;



  background: linear-gradient(

    180deg,

    rgba(46,204,113,.22),

    rgba(46,204,113,.12)

  ) !important;



  border: 1px solid rgba(46,204,113,.45) !important;



  color: #dfffee !important;



  box-shadow:

    0 0 0 1px rgba(46,204,113,.20),

    0 6px 18px rgba(46,204,113,.18),

    inset 0 1px 0 rgba(255,255,255,.12) !important;

}



/* Negative monthly PnL — same importance, red */

.gt-trades .tzcal-pill.tzcal-pill-pnl.neg{

  background: linear-gradient(

    180deg,

    rgba(255,82,82,.22),

    rgba(255,82,82,.12)

  ) !important;



  border: 1px solid rgba(255,82,82,.45) !important;

  color: #ffe3e3 !important;



  box-shadow:

    0 0 0 1px rgba(255,82,82,.20),

    0 6px 18px rgba(255,82,82,.18),

    inset 0 1px 0 rgba(255,255,255,.10) !important;

}



/* Days pill — secondary (keep smaller) */

.gt-trades .tzcal-pill.tzcal-pill-days{

  font-size: 14px !important;

  padding: 7px 12px !important;

  font-weight: 800 !important;

  opacity: .95;

}

/* Contenedor de 2 panels lado a lado */

.gt-trades .panel-row-2{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



/* panel-wide debe ocupar todo el grid padre */

.gt-trades .panel-wide{

  grid-column: 1 / -1;

}



/* Mobile fallback */

@media (max-width: 980px){

  .gt-trades .panel-row-2{

    grid-template-columns: 1fr;

  }

}

grid-column: 1 / -1;