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

   TABLES — UnusualWhales style (global)

   Put in: /assets/tables.css

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



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

   MARKET TABLE — UnusualWhales-style (Bootstrap-safe)

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

.market-table{

  font-family: inherit;

  font-size: 12px;

  line-height: 1.2;



  /* Bootstrap variables (CRITICAL) */

  --bs-table-bg: rgba(0,0,0,.14);

  --bs-table-hover-bg: rgba(255,255,255,.050);

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



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

}



.market-table thead th{

  font-size: 11px;

  letter-spacing: .35px;

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

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

  padding: 10px 10px;

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

}



.market-table td{

  padding: 9px 10px;

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

  border-top: 0 !important;

  border-bottom: 0 !important;

}



.market-table tbody tr{

  border: 0 !important;

}



.market-table tbody tr:hover td{

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

}



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

   UW table inside cards: remove padding + match radius

   Use wrapper .uw-table-wrap in CardBody

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

.uw-table-wrap{

  padding: 0 !important;

}



.uw-table-wrap .market-table{

  margin-bottom: 0 !important;

  border-radius: 14px;

  overflow: hidden;

}



/* Optional: in tight card bodies */

.uw-table-tight{

  padding: 0 !important;

}



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

   UW TABLE — semantic colors

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



.market-table .uw-pos{

  color: #00e676 !important;

  font-weight: 800;

}



.market-table .uw-neg{

  color: #ff5252 !important;

  font-weight: 800;

}



.market-table .uw-dim{

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

}



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

   UW TABLE — header tuning

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



.market-table thead th{

  background: rgba(30, 30, 30, 0.85);   /* lighter than dark grey */

  color: #64b5f6;                       /* Getick blue */

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

}





/* Optional row highlight (like your old .highlight) */

.market-table tr.uw-highlight td{

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

}



/* Optional “arrow-highlight” equivalent (border emphasis) */

.market-table tr.uw-outline td{

  box-shadow: inset 0 0 0 2px rgba(255,82,82,.85);

}



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

   UW DARK HEADER — AG GRID (Calls / Puts tables)

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



.txe-grid .ag-header {

  background-color: rgba(8, 8, 8, 0.94) !important; /* same as UW tables */

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

}



.txe-grid .ag-header-cell {

  background-color: rgba(8, 8, 8, 0.94) !important;

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

  font-size: 11px;

  letter-spacing: .35px;

  text-transform: none;

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

}



/* subtle separation line like UW */

.txe-grid .ag-header-row {

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

}



/* kill AG Grid blue focus / hover */

.txe-grid .ag-header-cell:hover,

.txe-grid .ag-header-cell:focus {

  background-color: rgba(10, 10, 10, 0.96) !important;

}

/* darker header (less blue, more UW dark) */

.market-table thead th{

  background: rgba(10, 12, 16, 0.92) !important;

  color: rgba(150, 200, 255, 0.75) !important; /* keep vibe but not neon */

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

}



/* option table row highlights */

.opt-table tbody tr.opt-atm td{

  background: rgba(100,181,246,.18) !important;   /* blue glow */

  box-shadow: inset 0 0 0 1px rgba(100,181,246,.35);

}

/* Only highlight the number itself (NOT the whole row) */

.opt-num-maxoi{

  color: #00e676 !important;

  font-weight: 900 !important;

  text-shadow: 0 0 10px rgba(255,193,7,.22);

}



.opt-num-maxvol{

  color: #ffc107 !important;

  font-weight: 900 !important;

  text-shadow: 0 0 10px rgba(255,193,7,.22);

}



/* Strike coloring (if you use _strike_cell) */

.opt-strike-maxoi{

  color: #00e676 !important;

  font-weight: 900 !important;

}



.opt-strike-maxvol{

  color: #ffc107 !important;

  font-weight: 900 !important;

}



.opt-strike-atm{

  color: rgba(150, 200, 255, 0.95) !important;

  font-weight: 900 !important;

}



/* Sticky header (must beat your later overrides) */

.opt-table.uw-sticky-head thead th{

  position: sticky !important;

  top: 0;

  z-index: 50;

  background: rgba(10, 12, 16, 0.98) !important;

  backdrop-filter: blur(6px);

}

/* avoid weird collapse issues */

.opt-table{

  border-collapse: separate !important;

  border-spacing: 0;

}



/* darker/nicer scrollbar for the scroll wrapper */

.opt-table-wrap{

  position: relative;

  overflow-y: auto;

  overflow-x: auto;

  scrollbar-width: thin; /* Firefox */

  scrollbar-color: rgba(255,255,255,.20) rgba(255,255,255,.06);

}



.opt-table-wrap::-webkit-scrollbar{

  width: 10px;

  height: 10px;

}

.opt-table-wrap::-webkit-scrollbar-track{

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

  border-radius: 10px;

}

.opt-table-wrap::-webkit-scrollbar-thumb{

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

  border-radius: 10px;

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

}

.opt-table-wrap::-webkit-scrollbar-thumb:hover{

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

}

.txe-card .card-body hr { border-color: rgba(255,255,255,.10); }





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

   FORCE OVERRIDE — UW TABLE HEADER (kill Bootstrap blue)

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



table.market-table > thead > tr > th,

.table.market-table > thead > tr > th,

.market-table.table > thead > tr > th {

  background-color: rgba(12, 12, 12, 0.92) !important; /* 🔥 darker */

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

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

}