/* =========================================================
   LIVE TRACKER — Getick
   Put in: /assets/live_tracker.css
   ========================================================= */

.lt-page{
  min-height:100vh;
  background: transparent !important;
  color:rgba(255,255,255,.92);
}

.lt-shell{
  max-width:1680px;
  margin:0 auto;
  padding:22px 20px 40px 20px;
}

/* =========================
   Header
   ========================= */
.lt-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,22,31,.92), rgba(10,13,19,.88));
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.32);
}

.lt-brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.lt-brand-mark{
  width:16px;
  height:46px;
  border-radius:999px;
  background:linear-gradient(180deg, #2ecc71 0%, #00bcd4 100%);
  box-shadow:0 0 20px rgba(0,188,212,.22);
}

.lt-title{
  font-size:40px;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1;
  color:#f7fbff;
}

.lt-subtitle{
  margin-top:4px;
  font-size:14px;
  color:rgba(255,255,255,.62);
}

.lt-status-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.lt-pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.lt-pill-live{
  color:#7ef29c;
  border-color:rgba(46,204,113,.22);
  background:rgba(46,204,113,.10);
}

.lt-pill-ok{
  color:#9cf7b3;
  border-color:rgba(46,204,113,.22);
  background:rgba(46,204,113,.08);
}

.lt-pill-warn{
  color:#ffd98d;
  border-color:rgba(255,193,7,.18);
  background:rgba(255,193,7,.08);
}

.lt-pill-muted{
  opacity:.55;
}

/* =========================
   Control strip
   ========================= */
.lt-controls{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.lt-mode-toggle{
  display:flex;
  gap:8px;
}

.lt-mode-btn{
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:700;
}

.lt-mode-btn.active{
  color:#ffffff;
  background:rgba(46,204,113,.12);
  border-color:rgba(46,204,113,.20);
}

.lt-mode-btn.disabled{
  opacity:.55;
}

.lt-timeline{
  position:relative;
  flex:1;
  height:20px;
}

.lt-timeline-bar{
  position:absolute;
  left:0;
  right:0;
  top:9px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.14), rgba(255,255,255,.08));
}

.lt-timeline-thumb{
  position:absolute;
  right:22%;
  top:1px;
  width:14px;
  height:18px;
  border-radius:8px;
  background:linear-gradient(180deg, #88f7a3 0%, #2ecc71 100%);
  box-shadow:0 0 16px rgba(46,204,113,.35);
}

/* =========================
   Summary cards
   ========================= */
.lt-summary-row{
  margin-bottom:18px;
}

.lt-summary-card{
  height:100%;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(16,21,30,.88), rgba(10,13,19,.88)) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

.lt-card-title{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.58);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.lt-card-value{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
}

.lt-card-value.up{
  color:#8af7a3;
}

.lt-card-value.down{
  color:#ff7b7b;
}

.lt-card-value.flat{
  color:#f1f5f9;
}

/* =========================
   Sections
   ========================= */
.lt-section-title{
  margin:18px 0 12px 2px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
  letter-spacing:.10em;
}

.lt-panel{
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at top left, rgba(0,188,212,.04), transparent 28%),
    linear-gradient(180deg, rgba(16,21,30,.92), rgba(8,11,17,.92)) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  overflow:hidden;
}

.lt-panel-header{
  background:rgba(255,255,255,.02) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  padding:14px 16px !important;
}

.lt-panel-title{
  font-size:17px;
  font-weight:800;
  color:#f8fbff;
  line-height:1.15;
}

.lt-panel-subtitle{
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.lt-panel-body{
  padding:14px 14px 10px 14px !important;
}

.lt-regime{
  margin-bottom:12px;
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
}

.lt-regime.pos{
  color:#7ef29c;
}

.lt-regime.neg{
  color:#ff6b6b;
}

/* =========================
   Heatmap ladder
   ========================= */
.lt-ladder-wrap{
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
}

.lt-ladder-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin:0;
}

.lt-ladder-th,
.lt-ladder-td{
  border-bottom:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.06);
  padding:6px 10px;
  line-height:1.1;
}

.lt-ladder-th:last-child,
.lt-ladder-td:last-child{
  border-right:0;
}

.lt-ladder-th{
  background:rgba(255,255,255,.025);
  color:#f1f5f9;
  font-size:13px;
  font-weight:800;
}

.lt-ladder-th-left{
  text-align:left;
}

.lt-ladder-th-right{
  text-align:left;
}

.lt-ladder-strike{
  width:38%;
  background:#050608;
  color:#f8fbff;
  font-size:14px;
  font-weight:800;
  text-align:left;
}

.lt-ladder-strike-atm{
  background:#bfbfbf;
  color:#000;
}

.lt-ladder-gex{
  width:62%;
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-align:left;
  text-shadow:0 1px 0 rgba(0,0,0,.32);
}

.lt-ladder-gex-king{
    border:2px solid #ffd84d;
    box-shadow:0 0 0 1px rgba(255,216,77,.25) inset;
    font-weight:600;
}

.lt-ladder-gex-iking{
  outline:1px solid rgba(0,188,212,.40);
  box-shadow:inset 0 0 0 999px rgba(0,188,212,.08);
}

.lt-panel-footer{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:12px 4px 0 4px;
}

.lt-mini-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.lt-mini-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.45);
}

.lt-mini-value{
  font-size:13px;
  font-weight:800;
  color:#f8fbff;
}

/* =========================
   Flow
   ========================= */
.lt-flow-panel .card-body{
  padding:8px 8px 0 8px !important;
}

.lt-graph{
  height:360px;
}

/* =========================
   Empty / footer
   ========================= */
.lt-empty{
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.55);
  font-size:15px;
  font-weight:700;
}

.lt-footer-line{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:700;
  text-align:center;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1200px){
  .lt-title{
    font-size:34px;
  }
}

@media (max-width: 992px){
  .lt-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .lt-status-line{
    justify-content:flex-start;
  }

  .lt-card-value{
    font-size:24px;
  }
}

@media (max-width: 768px){
  .lt-shell{
    padding:16px 12px 28px 12px;
  }

  .lt-title{
    font-size:28px;
  }

  .lt-controls{
    flex-direction:column;
    align-items:stretch;
  }

  .lt-timeline{
    width:100%;
  }
}
/* ===== PRO controls ===== */

.lt-controls-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 14px 0 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,16,24,.72), rgba(7,10,16,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  flex-wrap: wrap;
}

.lt-mode-toggle-pro,
.lt-playback-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.lt-mode-btn-pro,
.lt-small-btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}

.lt-small-btn-primary{
  background: linear-gradient(180deg, rgba(23,214,164,.18), rgba(23,214,164,.08)) !important;
  border-color: rgba(23,214,164,.35) !important;
}

.lt-mode-btn-pro:hover,
.lt-small-btn:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.lt-speed-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 190px;
}

.lt-speed-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.lt-speed-dd{
  min-width: 110px;
}

.lt-speed-dd .Select-control,
.lt-speed-dd .select__control,
.lt-speed-dd .Select-menu-outer{
  background: rgba(10,13,20,.92) !important;
}

.lt-slider-block{
  margin: 10px 0 18px 0;
  padding: 12px 14px 10px 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7,11,18,.58), rgba(7,11,18,.42));
}

.lt-slider-caption{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}

.lt-timeline-slider{
  padding: 4px 2px 0 2px;
}

/* rc-slider / dash slider */
.lt-timeline-slider .rc-slider-rail{
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.lt-timeline-slider .rc-slider-track{
  height: 8px;
  background: linear-gradient(90deg, rgba(34,197,94,.55), rgba(56,189,248,.72));
  border-radius: 999px;
}

.lt-timeline-slider .rc-slider-handle{
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border: 2px solid rgba(122,255,196,.95);
  background: #0c1118;
  box-shadow: 0 0 0 6px rgba(34,197,94,.10), 0 0 18px rgba(34,197,94,.22);
}

.lt-timeline-slider .rc-slider-mark-text{
  color: rgba(255,255,255,.54);
  font-size: 11px;
}

.lt-pill-playback{
  background: rgba(96,165,250,.12);
  color: #93c5fd;
  border: 1px solid rgba(147,197,253,.20);
}

/* optional: summary cards slightly more premium */
.lt-summary-card{
  height: 100%;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: linear-gradient(180deg, rgba(10,13,20,.84), rgba(8,10,16,.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

/* better empty state */
.lt-empty{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  text-align: center;
  padding: 28px 12px;
}


.page-no-spinner .dash-spinner,
.page-no-spinner .dash-loading,
.page-no-spinner [data-dash-is-loading="true"]::before,
.page-no-spinner [data-dash-is-loading="true"]::after {
  display: none !important;
  content: none !important;
}

.page-no-spinner ._dash-loading,
.page-no-spinner .dash-loading-container {
  display: none !important;
}
body.lt-no-spinner ._dash-loading-callback,
body.lt-no-spinner ._dash-loading-callback::after {
  display: none !important;
  content: none !important;
}

body.lt-no-spinner [data-dash-is-loading="true"]::before,
body.lt-no-spinner [data-dash-is-loading="true"]::after {
  display: none !important;
  content: none !important;
}
.lt-mode-toggle-pro{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.lt-day-dd{
  min-width: 150px;
  width: 150px;
}

.lt-day-dd .Select-control,
.lt-day-dd .select__control,
.lt-day-dd .Select-menu-outer,
.lt-day-dd .select__menu{
  background: rgba(10,16,28,.92);
  border-color: rgba(255,255,255,.10);
  color: #e8edf5;
}
/* slider disabled fix */
.lt-timeline-slider .rc-slider-disabled .rc-slider-handle {
    border: 2px solid #1f9e89 !important;
    background: #0b1220 !important;
    box-shadow: none !important;
}

.lt-timeline-slider .rc-slider-disabled .rc-slider-track {
    background: linear-gradient(90deg,#35b779,#6ece58) !important;
    opacity: 0.7;
}

.lt-timeline-slider .rc-slider-disabled .rc-slider-rail {
    opacity: 0.35;
}
.lt-ladder-wrap{
  max-height: 980px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
  border-radius: 12px;
}

.lt-ladder-wrap::-webkit-scrollbar{
  width: 8px;
}

.lt-ladder-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.20);
  border-radius: 999px;
}

.lt-ladder-wrap::-webkit-scrollbar-track{
  background: transparent;
}
.lt-layer-label{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d7e3f4;
}

.lt-layer-dd .Select-control,
.lt-layer-dd .Select-menu-outer,
.lt-layer-dd .Select-menu,
.lt-layer-dd .VirtualizedSelectOption{
    background: #07101d !important;
    color: #dbe7f5 !important;
    border-color: rgba(255,255,255,0.10) !important;
    font-size: 13px !important;
}

.lt-layer-dd .Select-placeholder,
.lt-layer-dd .Select-value-label,
.lt-layer-dd .Select-input > input{
    color: #dbe7f5 !important;
    font-size: 13px !important;
}

.lt-layer-dd .Select-arrow{
    border-top-color: #b8c7da !important;
}

/* =========================================================
   LIVE TRACKER FLOW — UNIQUE ISOLATED WRAPPERS
   ========================================================= */

.lt-flow-panel-unique{
  overflow: hidden !important;
  background: #0b0f16 !important;
}

.lt-flow-panel-unique .card-body{
  overflow: hidden !important;
  background: #0b0f16 !important;
  padding: 12px !important;
}

#lt-flow-spx-wrap-unique,
#lt-flow-spy-wrap-unique{
  width: 100% !important;
  overflow: hidden !important;
  background: #0b0f16 !important;
}

#lt-flow-spx-wrap-unique .lt-flow-graph-unique,
#lt-flow-spy-wrap-unique .lt-flow-graph-unique{
  width: 100% !important;
  background: #0b0f16 !important;
}

#lt-flow-spx-wrap-unique .js-plotly-plot,
#lt-flow-spy-wrap-unique .js-plotly-plot{
  width: 100% !important;
  background: #0b0f16 !important;
}

#lt-flow-spx-wrap-unique .plot-container,
#lt-flow-spy-wrap-unique .plot-container{
  width: 100% !important;
  background: #0b0f16 !important;
}

#lt-flow-spx-wrap-unique .svg-container,
#lt-flow-spy-wrap-unique .svg-container{
  width: 100% !important;
  background: #0b0f16 !important;
}

#lt-flow-spx-wrap-unique .main-svg,
#lt-flow-spy-wrap-unique .main-svg{
  overflow: hidden !important;
}