/* =========================================================
   DATATABLES CORE — GLASS / NEON (LOCKED + SAFE)
   ---------------------------------------------------------
   OWNERSHIP:
   • Styles ONLY DataTables chrome for #trade-log
   • Wrapper, pagination, info, filter UI
   ---------------------------------------------------------
   HARD RULES:
   ❌ MUST NOT style table rows or cells visually
   ❌ MUST NOT change display model (no flex on td/tr)
   ❌ MUST NOT clip tooltips (::after must escape)
   ❌ MUST NOT enable Responsive / child rows
   ---------------------------------------------------------
   log.css / log_glass.css own:
   • Row visuals
   • Cell padding
   • Hover states
   • Tooltips
   ========================================================= */

/* ---------------------------------------------------------
   Root Variables (DT-only accents)
   ---------------------------------------------------------
   NOTE:
   • Uses RGB tuples for easy alpha blending
   • Does NOT override global theme tokens
--------------------------------------------------------- */
:root{
  --dt-accent: 99,102,241;
  --dt-text: 226,232,240;
  --dt-muted: 148,163,184;
}

/* ---------------------------------------------------------
   HARD LAYOUT LOCK (CRITICAL)
   ---------------------------------------------------------
   Why:
   • DT wrappers love to inject margins/widths
   • Tooltips require predictable stacking
--------------------------------------------------------- */
#trade-log_wrapper,
#trade-log_wrapper.dataTables_wrapper{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;

  display:block !important;
  position:relative !important;

  /* Tooltips / overlays rely on this */
  z-index:1;
}

/* Prevent DT child wrappers from drifting horizontally */
#trade-log_wrapper > *,
#trade-log_wrapper.dataTables_wrapper > *{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ---------------------------------------------------------
   TABLE BASE (DT COMPATIBILITY ONLY)
   ---------------------------------------------------------
   ⚠️ IMPORTANT:
   • DO NOT set row backgrounds here
   • DO NOT change padding or borders
   • log.css owns table visuals
--------------------------------------------------------- */
#trade-log.dataTable{
  width:100% !important;
  margin:0 !important;

  background:transparent !important;
  color:rgb(var(--dt-text));
  font-size:.72rem;

  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* ---------------------------------------------------------
   HEADER (DT-only stability)
   ---------------------------------------------------------
   log.css owns:
   • sticky behavior
   • background
   • typography
--------------------------------------------------------- */
#trade-log.dataTable thead th{
  position:sticky;
  top:0;
  z-index:2;
  white-space:nowrap;
}

/* ---------------------------------------------------------
   SORTING INDICATORS (SCOPED & SAFE)
   ---------------------------------------------------------
   RULES:
   • Only apply to columns DT marks sortable
   • Must not shift header height
   • Pointer-events disabled on arrows
--------------------------------------------------------- */
#trade-log.dataTable thead th.sorting,
#trade-log.dataTable thead th.sorting_asc,
#trade-log.dataTable thead th.sorting_desc{
  cursor:pointer;
  padding-right:22px !important;
  position:relative;
}

#trade-log.dataTable thead th.sorting::after{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:.55rem;
  opacity:.4;
  content:"⇅";
  pointer-events:none;
}

#trade-log.dataTable thead th.sorting_asc::after{
  content:"▲";
  opacity:.85;
  color:rgb(var(--dt-accent));
}

#trade-log.dataTable thead th.sorting_desc::after{
  content:"▼";
  opacity:.85;
  color:rgb(var(--dt-accent));
}

/* ---------------------------------------------------------
   BODY CELLS (STRUCTURAL ONLY)
   ---------------------------------------------------------
   DO NOT:
   • Set background colors
   • Override padding
   • Override hover
--------------------------------------------------------- */
#trade-log.dataTable tbody tr{
  background:transparent !important;
}

#trade-log.dataTable tbody td{
  vertical-align:middle;
}

/* ---------------------------------------------------------
   HOVER — DEFER TO log.css
   ---------------------------------------------------------
   Why:
   • DT hover previously masked custom row hover
   • Caused tooltip z-index / clipping bugs
--------------------------------------------------------- */
#trade-log.dataTable tbody tr:hover td{
  background:inherit !important;
}

/* ---------------------------------------------------------
   TOOLTIP SAFETY (CRITICAL)
   ---------------------------------------------------------
   DataTables wrappers can clip ::after tooltips.
   This ensures:
   • Tooltips escape rows
   • z-index stacks correctly above hover
--------------------------------------------------------- */
#trade-log td.has-tooltip{
  overflow:visible !important;
  position:relative;   /* anchor for ::after */
  z-index:50;
}

#trade-log tbody tr:hover td.has-tooltip{
  z-index:75;
}

/* ---------------------------------------------------------
   PAGINATION (DT CHROME ONLY)
--------------------------------------------------------- */
#trade-log_wrapper .dataTables_paginate{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:12px;
}

#trade-log_wrapper .paginate_button{
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(var(--dt-accent),.35);

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.9),
      rgba(2,6,23,.9)
    );

  color:rgb(var(--dt-text)) !important;
  font-size:.65rem;
  font-weight:700;
  cursor:pointer;

  outline:none;
}

#trade-log_wrapper .paginate_button:hover{
  border-color:rgba(var(--dt-accent),.55);
}

#trade-log_wrapper .paginate_button.current{
  border-color:#10b981;
  color:#6ee7b7 !important;
  box-shadow:0 0 16px rgba(16,185,129,.55);
}

#trade-log_wrapper .paginate_button.disabled{
  opacity:.4;
  cursor:default;
}

/* ---------------------------------------------------------
   INFO TEXT
--------------------------------------------------------- */
#trade-log_wrapper .dataTables_info{
  text-align:left;
  color:rgb(var(--dt-muted));
  font-size:.65rem;
  margin-bottom:6px;
}

/* ---------------------------------------------------------
   OPTIONAL: hide "Show N entries"
   ---------------------------------------------------------
   Safe to enable if length menu unused
--------------------------------------------------------- */
/*
#trade-log_wrapper .dataTables_length{
  display:none !important;
}
*/

/* ---------------------------------------------------------
   HARD KILL: RESPONSIVE / CHILD ROWS
   ---------------------------------------------------------
   Belt + suspenders:
   Even if plugin loads, nothing renders
--------------------------------------------------------- */
#trade-log_wrapper tr.child,
#trade-log_wrapper tr.child td,
#trade-log_wrapper .dtr-details,
#trade-log_wrapper .dtr-data,
#trade-log_wrapper .dtr-title,
#trade-log_wrapper td.dtr-control,
#trade-log_wrapper th.dtr-control{
  display:none !important;
}

/* ---------------------------------------------------------
   KILL LEGACY NO-FOOTER BORDERS
--------------------------------------------------------- */
#trade-log.dataTable.no-footer,
#trade-log_wrapper.dataTables_wrapper.no-footer{
  border:none !important;
}

/* ---------------------------------------------------------
   SMALL DT CHROME INPUT SAFETY
   ---------------------------------------------------------
   Does NOT touch table cells
--------------------------------------------------------- */
#trade-log_wrapper .dataTables_filter,
#trade-log_wrapper .dataTables_length{
  color:rgb(var(--dt-muted));
  font-size:.65rem;
}

#trade-log_wrapper .dataTables_filter input,
#trade-log_wrapper .dataTables_length select{
  background:rgba(15,23,42,.55);
  border:1px solid rgba(var(--dt-accent),.25);
  border-radius:10px;
  padding:.35rem .55rem;
  color:rgb(var(--dt-text));
  outline:none;
}

#trade-log_wrapper .dataTables_filter input:focus,
#trade-log_wrapper .dataTables_length select:focus{
  border-color:rgba(var(--dt-accent),.55);
}