/* =================================================
   Liquidity Pool — compact SPOT-like UI
   ================================================= */
.lp-wrap{
  --bg:#0b1321; --bg-2:#0d111b; --border:#1b2639;
  --text:#dcdcdc; --muted:#9aa3b2;
  --accent:#C5B707; --accent-2:#f9b707;
  --ok:#3cd07a; --err:#ff6b6b;

  --radius:.4rem;
  --fs:.875rem; --fs-sm:.75rem; --fs-xs:.65rem;
  --chart-h:340px;

  color:var(--text);
  font-size:var(--fs);
}
.lp-wrap .container-fluid{ overflow-x:hidden; }

/* =====================
   Cards / headings
   ===================== */
.lp-wrap .gv-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius)!important;
}
.lp-wrap .gv-card > .card-body{ padding:1rem; }
.lp-wrap h6{ font-weight:600; font-size:var(--fs-sm); margin-bottom:.5rem; }

/* ===========================
   Stats bar
   =========================== */
#statsBar{
  display:grid; grid-template-columns:1fr repeat(7,auto);
  gap:.5rem .8rem; align-items:center;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:.6rem .75rem; line-height:1.15;
}
#statsBar .pair{ display:flex; align-items:center; gap:.4rem; font-weight:700; letter-spacing:.15px; font-size:.9rem; }
.kv-inline{ display:flex; gap:.35rem; align-items:baseline; }
.kv-inline .k{ color:var(--muted); font-weight:500; font-size:var(--fs-sm); }
.kv-inline .v{ font-weight:700; font-variant-numeric:tabular-nums; }

/* =================
   Coin chip
   ================= */
.lp-wrap .gv-coin{
  width:14px; height:14px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#0a0f1c; color:#e5e7eb; font-weight:800; font-size:9px;
  border:1px solid var(--border); overflow:hidden;
}
.lp-wrap .gv-coin img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =================
   Chart
   ================= */
.chart-wrap{ display:flex; flex-direction:column; }
.chart-body{
  position:relative;
  height:var(--chart-h);
  background:#000411;
  border-radius:var(--radius);
  overflow:hidden;
}
#tvChart{ position:relative; width:100%; height:100%; }
.chart-footer{
  border-top:1px solid var(--border);
  padding:.5rem .75rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  line-height:1;
}
.meta-bar{ color:var(--muted); font-size:var(--fs-sm); }
.nodata{
  position:absolute; left:8px; top:6px;
  background:rgba(0,8,17,.85);
  color:#e0e6ed; padding:2px 6px; border-radius:4px; font-size:.72rem; font-weight:500;
}

/* Timeframes */
.tf-btns .btn{
  background:transparent; border:1px solid #1B2639; border-radius:0; color:#fff;
  font-weight:500; padding:6px 14px; min-width:48px; font-size:var(--fs-sm);
}
.tf-btns .btn:first-child{ border-radius:6px 0 0 6px; }
.tf-btns .btn:last-child{ border-radius:0 6px 6px 0; }
.tf-btns .btn:hover{ background:#1A2A44; }
.tf-btns .btn.active{ background:#1A2A44; border-color:#1A2A44; }

/* =================================================
   Right column
   ================================================= */

/* Pool picker */
.pool-picker{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column;
  height:auto; max-height:none;
}
.pool-picker .head{
  padding:.5rem .75rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:var(--fs-sm);
}
.pool-picker .list{
  overflow:auto;
  max-height:220px;
  padding-top:.25rem;
}
@media (min-width:1200px){
  .pool-picker .list{ max-height:calc(var(--chart-h) - 44px); }
}

#poolMenu .pool-item{
  padding:.15rem .55rem;
  font-size:var(--fs-xs);
  background:var(--bg-2); color:var(--text);
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .2s ease; border-radius:0!important;
}
#poolMenu .pool-item:hover{ background:#2b2b1b; }
#poolMenu .pool-item.active{
  background:#2b2b1b!important; color:var(--accent)!important; font-weight:600;
  border-left:4px solid var(--accent); padding-left:8px;
}
#poolMenu .pool-item .left{ display:flex; align-items:center; gap:.4rem; }
#poolMenu .pool-item .sym{ font-weight:700; font-size:.72rem !important; }
#poolMenu .pool-item .tvl, #poolMenu .pool-item .price{ font-size:.55rem !important; }

/* =================================================
   Tables (equal columns & numeric alignment)
   ================================================= */
.table-eq{
  table-layout:fixed !important;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table-eq thead th,
.table-eq tbody td{
  padding:.45rem .65rem !important;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums; 
}
.table-eq thead th{
  background:var(--bg) !important;
  color:var(--text);
  border-bottom:1px solid var(--border) !important;
}
.table-eq tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.table-eq tbody tr:hover{ background:rgba(255,255,255,.05); }


.history-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column;
}
.history-head{ padding:.75rem .75rem 0 .75rem; }
.history-body{
  flex:1 1 auto;
  overflow:auto;
  padding:.75rem;
  scrollbar-width:thin; scrollbar-color:#2a354a transparent;
}
.history-body::-webkit-scrollbar{ width:6px; }
.history-body::-webkit-scrollbar-thumb{ background:#2a354a; border-radius:8px; }

#lpHistory{
  width:100%; table-layout:fixed;
  border-collapse:separate !important;
  border-spacing:0;
  font-size:11px;
}
#lpHistory th, #lpHistory td{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:.25rem .35rem;
  font-variant-numeric:tabular-nums;
}
#lpHistory thead{
  position:sticky; top:0; z-index:3;
}
#lpHistory thead th{
  position:sticky; top:0; z-index:4;
  background:var(--bg)!important; color:var(--text);
  border-bottom:1px solid var(--border);
  font-weight:600;
  box-shadow:inset 0 -1px 0 var(--border);
}
#lpHistory tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
#lpHistory tbody tr:hover{ background:rgba(255,255,255,.05); }
#lpHistory .price-cell{ font-variant-numeric:tabular-nums; }
.pi-pos{ color:var(--ok); font-weight:700; }
.pi-neg{ color:var(--err); font-weight:700; }

/* =================================================
   Forms
   ================================================= */
.lp-wrap .form-label{ color:var(--muted); font-weight:600; font-size:var(--fs-sm); margin-bottom:.2rem; }
.lp-wrap .form-control,
.lp-wrap .form-select{
  display:block; width:100%; padding:.375rem .75rem;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:var(--fs);
}
.lp-wrap .form-control:focus{
  border-color:#28503E; outline:0;
  box-shadow:0 0 0 .1rem rgba(40,80,62,.5); background:var(--bg);
}
.lp-wrap .btn-claim{
  background:var(--accent-2)!important; border-color:var(--accent-2)!important; color:#0b0f1a!important;
  font-weight:700; border-radius:.35rem; padding:.45rem .75rem; font-size:.8rem;
}
.lp-wrap .btn-claim:hover{
  background:#f7a727!important; border-color:#f7a727!important;
  box-shadow:0 0 0 .1rem rgba(249,183,7,.25);
}

/* Toggle buttons */
.lp-wrap .btn-outline-light{
  background:transparent; border:1px solid #1B2639; border-radius:0; color:#fff; font-weight:500;
  padding:6px 14px; min-width:48px; font-size:var(--fs-sm);
}
.lp-wrap .btn-outline-light:hover{ background:#1A2A44; border-color:#1A2A44; }
.lp-wrap .btn-outline-light.active,
.lp-wrap .btn-outline-light[aria-pressed="true"]{
  background:#1A2A44!important; border-color:#1A2A44!important; color:#fff!important;
}
.lp-wrap .btn-group .btn + .btn{ border-left-color:#1B2639; }

/* Toast */
.toast-polx{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(18,24,34,.96); color:#fff;
  border-radius:8px; padding:.75rem 1rem; margin-top:.5rem;
  min-width:280px; max-width:360px;
  box-shadow:0 4px 12px rgba(0,0,0,.3); font-size:.9rem;
}

/* Helpers */
.badge{ font-weight:700; letter-spacing:.15px; font-size:11px; }
.d-none{ display:none!important; }
.lp-wrap .row.g-3{ align-items:flex-start!important; }

/* =================
   Responsive
   ================= */
@media (max-width:1400px){ .lp-wrap{ --chart-h:320px; } }
@media (max-width:992px){
  #statsBar{ grid-template-columns:1fr; row-gap:.35rem; }
  .pool-picker .list{ max-height:none; }
}
@media (max-width:576px){
  .lp-wrap{ --chart-h:300px; }
  #poolMenu .pool-item{ padding:.25rem .5rem; }
  #lpHistory{ font-size:10px; }
  #lpHistory th, #lpHistory td{ padding:.22rem .3rem; }
}

.lp-wrap .tt-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
  margin-left:6px;
  border:0; padding:0; background:transparent;
  color:var(--muted);
  cursor:hand; line-height:1; vertical-align:middle;
}
.lp-wrap .tt-icon:hover,
.lp-wrap .tt-icon:focus{ color:#e5e7eb; outline:none; }
.lp-wrap .tt-icon svg{ width:100%; height:100%; display:block; }

#statsBar .kv-inline .k{ display:inline-flex; align-items:center; }
.lp-wrap #statsBar{
  --fs: .82rem;
  --fs-sm: .72rem;
  gap:.35rem .6rem;
}
.lp-wrap #statsBar .pair{ font-size:.66rem; }
.lp-wrap #statsBar .kv-inline .v{ font-size: var(--fs); }
.lp-wrap #statsBar .kv-inline .k{ font-size: var(--fs-sm); }


.lp-wrap #lpHistory td.pi-pos{ color:#3cd07a !important; font-weight:700; }
.lp-wrap #lpHistory td.pi-neg{ color:#ff6b6b !important; font-weight:700; }

/* Toast progress bar animation */
.toast-polx { position: relative; background: #1a1f2c; color: #fff; padding: 8px 12px; margin-top: 6px; border-radius: 6px; display: flex; gap: 8px; align-items: center; font-size: 0.85rem; box-shadow: 0 2px 6px rgba(0,0,0,0.4); overflow: hidden; }
.toast-bar { position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: #3cd07a; }
.toast-bar.anim-run { animation: barShrink 3s linear forwards; }
@keyframes barShrink {
  0% { width: 100%; background-color: #3cd07a; }
  50%{ width: 50%;  background-color: #ff7a18; }
  100%{ width: 0%;   background-color: #ff5555; }
}


.nav.nav-tabs .nav-link { color: #f5c33b !important; border-color: transparent !important; background: transparent !important; }
.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link {
  color: #0b0f1a !important;
  background-color: #f5c33b !important;
  border-color: #f5c33b !important;
  font-weight: 700;
}
.nav.nav-tabs .nav-link:not(.active):hover,
.nav.nav-tabs .nav-link:not(.active):focus {
  color: #ffe082 !important;
  background: rgba(245, 195, 59, 0.12) !important;
  border-color: transparent !important;
}

.lp-wrap .tab-pane .table thead th,
.lp-wrap .tab-pane .table tbody td {
  text-align: left !important;   
}
#lpHistoryHead th,
#lpHistoryHead td {
  text-align: left !important;  
}


.history-card #lpHistoryHead th,
.history-card #lpHistoryHead td,
.history-card #lpHistory th,
.history-card #lpHistory td,
.history-card #lpHistoryHead .text-end,
.history-card #lpHistory .text-end {
  text-align: left !important;
}

#statsBar {
  display: flex;
  flex-wrap: wrap;          
  align-items: center;     
  gap: 8px;                
  text-align: left !important;
}


#statsBar .pair,
#statsBar .kv-inline {
  display: flex;
  align-items: center;
  gap: 4px;               
  margin: 0;               
  padding: 0;              
}

#poolTabs {
  display:flex; flex-wrap:wrap; gap:.3rem;
  list-style:none; margin:0; padding:0;
}
#poolTabs .nav-link{
  font-size:.75rem;
  padding:.35rem .75rem;
  color:#ccc;
  background:#101a2a;
  border:none;
  border-radius:.35rem;
  transition:background .2s,color .2s;
}
#poolTabs .nav-link:hover,
#poolTabs .nav-link.active{
  background:#1a2a44!important;
  color:#fff!important;
  font-weight:600;
}


#poolMenu .pool-item{
  padding:.03rem .6rem;
  font-size:.65rem;
  background:#0d111b;
  color:#dcdcdc;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid #1b2639; border-bottom:1px solid #1b2639;
  transition:background .2s; cursor:pointer; border-radius:0!important;
}
#poolMenu .pool-item:hover  { background:#2b2b1b; }
#poolMenu .pool-item.active{
  background:#2b2b1b!important; color:#C5B707!important;
  font-weight:600; border-left:4px solid #C5B707; padding-left:8px;
}
#poolMenu .pool-item .left{ display:flex; align-items:center; gap:.4rem }
#poolMenu .pool-item .muted{ color:#aaa!important }
#poolMenu .gv-coin{ width:16px; height:16px; border-radius:50%; background:#1b2639;
  display:grid; place-items:center; font-size:.6rem; overflow:hidden }
#poolMenu .gv-coin img{ width:16px; height:16px; display:block }

.pool-picker .head{
  border-bottom: 0 !important;
  padding-bottom: .35rem; 
}


#poolTabs{
  margin: .25rem .5rem 0 .5rem !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}


#poolTabs .nav-link{
  font-size:.75rem;
  padding:.25rem .55rem;
  color:#ccc;
  background:#101a2a;
  border:1px solid #1b2639;
  border-radius:.35rem .35rem 0 0;
  margin-right:.10rem;
}
#poolTabs .nav-link.active{
  background:#1a2a44 !important;
  color:#fff !important;
  border-color:#1a2a44 !important;
}


#poolTabs + #poolMenu{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


#poolMenu .pool-item:first-child{
  border-top: 0 !important;
}

.pi-pos { color:#3cd07a !important; font-weight:600; }
.pi-neg { color:#ff5555 !important; font-weight:600; }


#lpHistory td.pi-pos, #lpHistory td.pi-neg,
#tblTradeHist td.pi-pos, #tblTradeHist td.pi-neg {
  color: inherit; 
}

.liq-deposit td {
  color: #3cd07a !important;
  font-weight: 500;
}


.liq-withdraw td {
  color: #ff5555 !important;
  font-weight: 500;
}
#lpApp .row.g-3.mt-2 > [class*="col-"] { display: flex; }
  #lpApp .row.g-3.mt-2 > [class*="col-"] > .gv-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

 
  #lpApp .gv-card .btn-claim { margin-top: auto; }


  
  #lpApp .calc-box{
    --line-h: 22px;
    --lines: 4; 
    line-height: var(--line-h);
    min-height: calc(var(--line-h) * var(--lines) + 8px);
    display: block;
    font-size: 12px;
  }
  #lpApp .calc-box .row-line{
    display:flex; justify-content:space-between; gap:8px;
    white-space:nowrap;
  }
  #lpApp .calc-box .row-line > span,
  #lpApp .calc-box .row-line > strong{
    overflow:hidden; text-overflow:ellipsis;
  }
  
  #lpApp #swHint{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:22px;
  }

 
  @media (min-width:1200px){
    #lpApp .row.g-3.mt-2{ align-items:stretch; }
    #lpApp .row.g-3.mt-2 > [class*="col-"]{ display:flex; }
    #lpApp .row.g-3.mt-2 > [class*="col-"] > .gv-card{
      display:flex; flex-direction:column; width:100%;
    }
    #lpApp #formAddBox, #lpApp #formWithdrawBox,
    #lpApp .col-12.col-xl-5 > .gv-card{ display:flex; flex-direction:column; flex:1 1 auto; }
    #lpApp #btnAdd, #lpApp #btnWithdraw, #lpApp #btnSwap{ margin-top:auto; }
  }
  
    #posPnlCols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
  }
 
  @media (max-width: 1199.98px){
    #posPnlCols{ grid-template-columns: 1fr; }
  }
  
  #posPnlCols .flex-fill{ min-width: 0; }
  
 
.pool-picker .head{
  padding-left: 0 !important;     
  padding-right: 0 !important;
  gap: 0 !important;             
}

#poolTabs{
  margin: 0 !important;         
  padding: 0 !important;        
  justify-content: flex-start;   
}

#poolTabs .nav-link{
  margin: 0 .05rem 0 0 !important;        
  border-radius: .35rem .35rem 0 0 !important;
}

#poolTabs .nav-link:first-child{
  margin-left: 0 !important;      
}


#poolTabs + #poolMenu{
  margin-top: 0 !important;
  padding-top: 0 !important;
}