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

   VOL / OI — Option Screener (Getick Dark)

   File: assets/vol_oi.css

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



.vol-oi{

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

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

  --blue: #64b5f6;

  --green: #2ecc71;

  --red: #ff5252;



  padding: 10px;

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

}



/* Header */

.vol-oi-head{

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 10px;

}



.vol-oi-title{

  font-weight: 800;

  letter-spacing: .12em;

}



.vol-oi-sub{

  font-size: 12px;

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

}



.vol-oi-controls{

  display: flex;

  gap: 8px;

}



/* Cards */

.vol-oi-card{

  background: var(--bg);

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

  border-radius: 14px;

  margin-top: 10px;

  overflow: hidden;

}



.vol-oi-card-h{

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

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

  font-weight: 700;

}



.vol-oi-card-b{

  padding: 10px;

}



/* Table */

.vol-oi-table-wrap{

  max-height: 560px;

  overflow: auto;

}



.vol-oi-table{

  width: 100%;

  border-collapse: collapse;

  font-size: 12px;

}



.vol-oi-table th{

  position: sticky;

  top: 0;

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

  color: var(--blue);

  padding: 8px;

  text-align: center;

}



.vol-oi-table td{

  padding: 8px;

  text-align: center;

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

}



.vol-oi-table tr:hover td{

  background: rgba(100,181,246,.18);

}



/* Pills */

.vol-oi-pill{

  padding: 4px 10px;

  border-radius: 999px;

  font-weight: 800;

}



.vol-oi-call{

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

  color: var(--green);

}



.vol-oi-put{

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

  color: var(--red);

}



.pos{ color: var(--green); font-weight: 700; }

.neg{ color: var(--red); font-weight: 700; }

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

   VOL/OI — pills

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

.vol-oi-wrap .vol-oi-pill{

  display:inline-block;

  min-width:56px;

  text-align:center;

  padding:2px 8px;

  border-radius:999px;

  font-weight:900;

  font-size:11px;

  letter-spacing:.3px;

  line-height:18px;

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

}



.vol-oi-wrap .vol-oi-call{

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

  color: rgba(46,204,113,.95);

  box-shadow:

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

}



.vol-oi-wrap .vol-oi-put{

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

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

  box-shadow:

    inset 0 0 0 1px rgba(255,82,82,.35);

}

/* Underlying column: left align header + body */

.vol-oi .vol-oi-table thead th.vol-oi-left,

.vol-oi .vol-oi-table tbody td.vol-oi-left{

  text-align: left !important;

}



/* Stronger underlying font + link styling */

.vol-oi .vol-oi-underlying-link{

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

}



.vol-oi .vol-oi-underlying{

  font-weight: 900;

  letter-spacing: .2px;

}



.vol-oi .vol-oi-underlying-link:hover .vol-oi-underlying{

  color: #64b5f6;               /* same “info blue” vibe */

  text-decoration: underline;

  text-underline-offset: 3px;

}



/* Vol/OI ratio light blue */

.vol-oi .vol-oi-voloi{

  color: #64b5f6;

  font-weight: 800;

}

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

   VOL/OI — table tweaks

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



.vol-oi-wrap .market-table thead th:first-child,

.vol-oi-wrap .market-table tbody td:first-child{

  text-align: left !important;

}



/* stronger bold ticker + keep it clickable */

.vol-oi-underlying-link{

  font-weight: 900;

  letter-spacing: .2px;

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

}



.vol-oi-underlying-link:hover{

  color: rgba(100,181,246,.95);

}

.vol-oi-wrap .market-table tbody td:last-child{

  color: rgba(100,181,246,.95) !important; /* light blue */

  font-weight: 700;

}

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

   VOL / OI — Stage2 Input Glow

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



.vol-oi-wrap .scr2-input{

  background: rgba(10, 12, 15, 0.85);

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

  border-radius: 10px;

  color: #e9fdf5;

  font-weight: 500;

  padding: 8px 12px;



  box-shadow:

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

    0 0 12px rgba(46,204,113,.08);



  transition: all .18s ease;

}



/* hover */

.vol-oi-wrap .scr2-input:hover{

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

  box-shadow:

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

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

}



/* focus = real Getick glow */

.vol-oi-wrap .scr2-input:focus{

  background: rgba(8, 10, 12, 0.95);

  border-color: #2ecc71;

  color: #ffffff;

  outline: none;



  box-shadow:

    inset 0 0 0 1px rgba(46,204,113,.45),

    0 0 0 2px rgba(46,204,113,.25),

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

}



/* remove ugly number spinners (Chrome) */

.vol-oi-wrap input[type=number]::-webkit-inner-spin-button,

.vol-oi-wrap input[type=number]::-webkit-outer-spin-button{

  -webkit-appearance: none;

  margin: 0;

}

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

   VOL / OI — Match Stage2 Font

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



.vol-oi-wrap .scr2-input{

  font-family: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;

  font-size: 13.5px;        /* matches Stage2 */

  font-weight: 500;

  letter-spacing: .2px;

  line-height: 1.2;

}

.vol-oi-pill{

  display:inline-block;

  padding: 4px 10px;

  border-radius: 999px;

  font-weight: 700;

  letter-spacing: .2px;

  font-size: 12px;

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

}



.vol-oi-pill-green{

  color: #bfffd6;

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

  box-shadow: 0 0 0 1px rgba(46,204,113,.25), 0 0 18px rgba(46,204,113,.10);

}



.vol-oi-pill-amber{

  color: #ffe7b0;

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

  box-shadow: 0 0 0 1px rgba(255,179,0,.22), 0 0 18px rgba(255,179,0,.08);

}



.vol-oi-pill-gray{

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

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

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

}

.vol-oi-pill{

  display: inline-block;

  padding: 2px 8px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .3px;

  text-transform: uppercase;

}



.vol-oi-pill-green { background: rgba(46,204,113,.18); color: #2ecc71; }

.vol-oi-pill-red   { background: rgba(255,82,82,.18); color: #ff5252; }

.vol-oi-pill-amber { background: rgba(255,193,7,.18); color: #ffc107; }

.vol-oi-pill-blue  { background: rgba(52,152,219,.18); color: #3498db; }

.vol-oi-pill-gray  { background: rgba(180,180,180,.15); color: #bbb; }

.vol-oi-pill-blue{

  background: rgba(52,152,219,.18);

  color: #6ec6ff;   /* light blue */

}



.vol-oi-pill-purple{

  background: rgba(155,89,182,.20);

  color: #c77dff;   /* purple */

}

/* Tooltip wrapper */

.voloi-tooltip .tooltip-inner{

  background: rgba(12,14,18,.96);

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

  border-radius: 12px;

  padding: 10px 12px;

  box-shadow: 0 16px 40px rgba(0,0,0,.55);

  min-width: 260px;

}



/* Title + sub */

.voloi-tip-title{

  font-weight: 800;

  font-size: 13px;

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

  margin-bottom: 2px;

}

.voloi-tip-sub{

  font-size: 12px;

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

  margin-bottom: 8px;

}



/* List rows */

.voloi-tip-list{

  display: grid;

  gap: 6px;

}

.voloi-tip-row{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 7px 10px;

  border-radius: 10px;

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

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

}

.voloi-tip-left{

  font-size: 12px;

  font-weight: 700;

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

}

.voloi-tip-right{

  font-size: 12px;

  font-weight: 800;

  color: rgba(46,204,113,.95); /* getick green */

}



/* Optional: arrow match */

.voloi-tooltip.bs-tooltip-top .tooltip-arrow::before{

  border-top-color: rgba(12,14,18,.96);

}

/* Optional */

.scr2-btn-ghost{

  padding: 6px 10px;

  border-radius: 10px;

  font-weight: 600;

  opacity: .95;

}