/* ================================================================
   filter.css  — LCNI Stock Filter Module
   Sticky pattern hoàn toàn theo watchlist.css:
   • Scroll container: .lcni-table-scroll.lcni-table-wrapper — overflow:auto
   • Sticky header: <table class="... has-sticky-header"> + thead th { sticky }
   • Sticky col: .is-sticky-col { position:sticky; left:... }
   • KHÔNG dùng :first-child selector — dùng class .is-sticky-col
   • Không override lcni-ui-table.css — extend thêm bằng class riêng
   ================================================================ */

/* ── Wrapper/container ─────────────────────────────────────────── */
.lcni-app .lcni-stock-filter,
.lcni-filter-wrapper { display:block; overflow:visible; height:auto; }

/* ── Filter panel UI ───────────────────────────────────────────── */
.lcni-app .lcni-stock-filter .lcni-filter-toolbar { display:flex; justify-content:flex-end; gap:8px; margin-bottom:0; }
.lcni-app .lcni-stock-filter .lcni-filter-panel,
.lcni-app .lcni-stock-filter .lcni-column-pop { padding:10px; margin-bottom:10px; border:1px solid #ddd; background:#fff; }
.lcni-app .lcni-stock-filter .lcni-filter-panel.is-collapsed .lcni-filter-panel-body,
.lcni-app .lcni-stock-filter .lcni-filter-panel.is-collapsed .lcni-filter-panel-actions { display:none; }
.lcni-app .lcni-stock-filter .lcni-filter-panel.is-collapsed { margin:0; padding:0; border:0; }

.lcni-app .lcni-stock-filter .lcni-filter-criteria-grid { display:grid; grid-template-columns:35% 65%; gap:12px; align-items:stretch; height:100%; min-height:0; }
.lcni-app .lcni-stock-filter .lcni-filter-criteria-tabs { display:flex; flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:6px; max-height:320px; overflow:auto; }
.lcni-app .lcni-stock-filter .lcni-filter-tab { display:inline-flex; align-items:center; gap:8px; width:auto; max-width:100%; text-align:left; white-space:nowrap; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:var(--lcni-panel-label-color,#111827); font-size:var(--lcni-panel-label-size,13px); cursor:pointer; }
.lcni-app .lcni-stock-filter .lcni-filter-tab.is-active { border-color:#3b82f6; background:#eff6ff; }
.lcni-app .lcni-stock-filter .lcni-filter-tab.is-locked { border-style:dashed; }
.lcni-app .lcni-stock-filter .lcni-filter-tab-check { visibility:hidden; color:#16a34a; font-weight:700; }
.lcni-app .lcni-stock-filter .lcni-filter-tab-check.is-visible { visibility:visible; }
.lcni-app .lcni-stock-filter .lcni-filter-tab-check.is-locked { visibility:visible; color:#f59e0b; }
.lcni-app .lcni-stock-filter .lcni-filter-criteria-values { min-height:220px; display:flex; flex-direction:column; }
.lcni-app .lcni-stock-filter .lcni-filter-value-panel { display:none; }
.lcni-app .lcni-stock-filter .lcni-filter-value-panel.is-active { display:block; }
.lcni-app .lcni-stock-filter .lcni-filter-value-panel strong { display:block; margin-bottom:8px; color:var(--lcni-panel-label-color,#111827); font-size:var(--lcni-panel-label-size,13px); }
.lcni-app .lcni-stock-filter .lcni-filter-upgrade-note { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid #fcd34d; border-radius:8px; background:#fffbeb; color:#92400e; font-size:var(--lcni-panel-value-size,13px); line-height:1.45; }
.lcni-app .lcni-stock-filter .lcni-filter-upgrade-note i { margin-top:2px; }
.lcni-app .lcni-stock-filter .lcni-filter-upgrade-note span { flex:1; }
.lcni-app .lcni-stock-filter .lcni-filter-upgrade-btn { border:1px solid #d97706; background:#f59e0b; color:#fff; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.lcni-app .lcni-stock-filter .lcni-filter-upgrade-btn:hover { background:#d97706; }
.lcni-app .lcni-stock-filter .lcni-filter-check-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:4px; color:var(--lcni-panel-value-color,#374151); font-size:var(--lcni-panel-value-size,13px); max-height:280px; overflow:auto; }
.lcni-app .lcni-stock-filter .lcni-filter-range-wrap { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lcni-app .lcni-stock-filter .lcni-filter-range-wrap input { width:100%; color:var(--lcni-panel-value-color,#374151); font-size:var(--lcni-panel-value-size,13px); }
.lcni-app .lcni-stock-filter .lcni-filter-range-dual { gap:10px; }
.lcni-app .lcni-stock-filter .lcni-filter-range-track { position:relative; height:26px; }
.lcni-app .lcni-stock-filter .lcni-filter-range-track::before { content:""; position:absolute; left:0; right:0; top:11px; height:4px; border-radius:999px; background:#e5e7eb; }
.lcni-app .lcni-stock-filter .lcni-filter-range-fill { position:absolute; top:11px; height:4px; border-radius:999px; background:#3b82f6; left:0; width:100%; }
.lcni-app .lcni-stock-filter .lcni-filter-range-track input[type="range"] { position:absolute; left:0; top:0; width:100%; height:26px; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; }
.lcni-app .lcni-stock-filter .lcni-filter-range-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#2563eb; border:2px solid #fff; box-shadow:0 0 0 1px #2563eb; pointer-events:auto; cursor:pointer; }
.lcni-app .lcni-stock-filter .lcni-filter-range-track input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#2563eb; border:2px solid #fff; box-shadow:0 0 0 1px #2563eb; pointer-events:auto; cursor:pointer; }
.lcni-app .lcni-stock-filter .lcni-filter-range-values { display:flex; justify-content:space-between; color:var(--lcni-panel-value-color,#374151); font-size:var(--lcni-panel-value-size,13px); }
.lcni-app .lcni-stock-filter .lcni-filter-panel-actions { margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lcni-app .lcni-stock-filter .lcni-saved-filter-label { font-size:var(--lcni-panel-label-size,13px); color:var(--lcni-panel-label-color,#111827); }
.lcni-app .lcni-stock-filter .lcni-filter-panel-actions select { min-width:190px; height:36px; margin-right:0; font-size:var(--lcni-panel-value-size,13px); border:1px solid #d1d5db; border-radius:8px; padding:0 10px; }
.lcni-app .lcni-stock-filter .lcni-filter-panel-actions .lcni-select-saved-filter { background:var(--lcni-saved-filter-bg,#fff); color:var(--lcni-saved-filter-color,#111827); border-color:var(--lcni-saved-filter-border,#d1d5db); }
.lcni-app .lcni-stock-filter .lcni-filter-panel-actions .lcni-select-template-filter { background:var(--lcni-template-filter-bg,#fff); color:var(--lcni-template-filter-color,#111827); border-color:var(--lcni-template-filter-border,#d1d5db); }

.lcni-app .lcni-stock-filter .lcni-column-pop { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.lcni-app .lcni-stock-filter .lcni-column-option { display:flex; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; background:#fff; }
.lcni-app .lcni-stock-filter .lcni-column-option span { flex:1; }

/* ═══════════════════════════════════════════════════════════════
   TABLE SCROLL CONTAINER
   Theo watchlist: overflow:auto, position:relative.
   Override max-height của lcni-ui-table.css (70vh) thành 100vh-based.
   ═══════════════════════════════════════════════════════════════ */
.lcni-app .lcni-stock-filter .lcni-table-scroll {
  /* Watchlist pattern: overflow:auto + max-height
     - overflow:auto (không tách X/Y) → tạo scroll context 2D đúng chuẩn
     - max-height → vertical scroll trong container → sticky top hoạt động
     - horizontal scroll tự có khi table rộng hơn container → sticky left hoạt động
     CSS spec: overflow:auto hợp lệ, không bị browser convert như overflow-x:auto+overflow-y:visible */
  max-height: calc(100vh - 180px) !important;
  overflow: auto !important;
  /* KHÔNG dùng -webkit-overflow-scrolling:touch — tạo isolated GPU layer trên iOS Safari
     → position:sticky bị nuốt vào layer, sticky col/header mất tác dụng
     Dùng 'auto' để browser xử lý momentum scroll hiện đại */
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  isolation: auto !important;
  scroll-behavior: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE BASE — align với watchlist
   lcni-ui-table.css đặt width:100% min-width:720px — override thêm
   ═══════════════════════════════════════════════════════════════ */
.lcni-app .lcni-stock-filter .lcni-table {
  /* width:max-content cần cho bảng nhiều cột scroll ngang */
  width: max-content !important;
  min-width: 100%;
  /* border-collapse:separate đã được set bởi lcni-ui-table.css — OK */
}

/* ── Cell base ─────────────────────────────────────────────────── */
.lcni-app .lcni-stock-filter .lcni-table th {
  font-weight: 400;
  background: var(--lcni-table-header-bg, #f3f4f6);
  color: var(--lcni-table-header-color, #111827);
  font-size: var(--lcni-table-header-size, 12px);
  border-bottom: var(--lcni-row-divider-width, 1px) solid var(--lcni-row-divider-color, #e5e7eb);
  height: var(--lcni-table-header-height, 42px);
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}
.lcni-app .lcni-stock-filter .lcni-table td {
  background: var(--lcni-table-value-bg, #fff);
  color: var(--lcni-table-value-color, #111827);
  font-size: var(--lcni-table-value-size, 13px);
  border-bottom: var(--lcni-row-divider-width, 1px) solid var(--lcni-row-divider-color, #e5e7eb);
  white-space: nowrap;
  word-break: keep-all;
  height: var(--lcni-table-row-height, 36px);
  padding-left: 5px;
  padding-right: 5px;
}
.lcni-app .lcni-stock-filter .lcni-table tr:hover td { background: var(--lcni-row-hover-bg, #eef2ff); }
.lcni-app .lcni-stock-filter .lcni-table tbody tr { cursor: pointer; }
.lcni-app .lcni-stock-filter .lcni-table .lcni-cell-number { text-align: right; }
.lcni-app .lcni-stock-filter .lcni-table .lcni-cell-text { text-align: left; }

/* ═══════════════════════════════════════════════════════════════
   STICKY HEADER — theo watchlist: has-sticky-header class on <table>
   
   Watchlist pattern:
     JS toggle: table.classList.toggle('has-sticky-header', stickyHeader)
     CSS:  .lcni-table.has-sticky-header thead th { position:sticky; top:0 }
   
   Filter hiện tại: dùng lcni-disable-sticky-header class trên HOST,
   còn thead th luôn có position:sticky từ lcni-ui-table.css.
   
   Fix: thêm has-sticky-header pattern đồng thời giữ backward compat.
   ═══════════════════════════════════════════════════════════════ */

/* Sticky header — bật khi KHÔNG có lcni-disable-sticky-header (default) */
.lcni-app .lcni-stock-filter:not(.lcni-disable-sticky-header) .lcni-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--lcni-table-header-bg, #f3f4f6);
  /* box-shadow thay cho border-bottom khi sticky (border bị ẩn khi scroll) */
  box-shadow: inset 0 -1px 0 var(--lcni-row-divider-color, #e5e7eb);
}

/* Tắt sticky header khi admin set sticky_header_rows=0 */
.lcni-app .lcni-stock-filter.lcni-disable-sticky-header .lcni-table thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY COLUMN — theo watchlist: .is-sticky-col class
   
   Watchlist pattern:
     JS: th/td class="is-sticky-col lcni-sticky-col"
     CSS: .is-sticky-col { position:sticky; left:0; z-index:3 }
   
   Z-index hierarchy (match watchlist):
     thead th (sticky header)   = 20
     td.is-sticky-col           = 15   (dưới header)
     th.is-sticky-col (corner)  = 25   (cao nhất — giao điểm header+col)
   ═══════════════════════════════════════════════════════════════ */

/* Sticky column — dữ liệu
   left:0 !important là CSS fallback bắt buộc.
   JS applyStickyColumnOffsets sẽ override bằng inline style với giá trị chính xác.
   Không có left → left:auto → position:sticky không hoạt động (browser không biết offset). */
/* thead stacking context
   KHÔNG set position:relative + z-index ở đây — sẽ tạo stacking context mới,
   khiến th.is-sticky-col (z-index:25) chỉ có hiệu lực bên trong thead,
   còn thead tổng thể (z-index:10) có thể bị td.is-sticky-col của tbody đè lên khi scroll.
   Sticky header th đã có position:sticky + z-index:20 từ rule bên dưới — đủ rồi. */

.lcni-app .lcni-stock-filter .lcni-table .is-sticky-col {
  position: -webkit-sticky !important;
  position: sticky !important;
  left: 0 !important;  /* fallback, JS override với giá trị đúng cho multi-col */
  z-index: 15 !important;
  background: var(--lcni-table-value-bg, #fff);
  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.07);
}

/* Sticky column header — giao điểm, z-index cao nhất */
.lcni-app .lcni-stock-filter .lcni-table th.is-sticky-col {
  z-index: 25 !important;
  background: var(--lcni-table-header-bg, #f3f4f6);
  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1),
              inset 0 -1px 0 var(--lcni-row-divider-color, #e5e7eb);
  /* Auto-width: header sticky chỉ rộng bằng text */
  width: 1%;
  white-space: nowrap;
}
/* Sticky td auto-width */
.lcni-app .lcni-stock-filter .lcni-table td.is-sticky-col {
  width: 1%;
  white-space: nowrap;
}

/* Hover state — giữ background sticky col khi row hover */
.lcni-app .lcni-stock-filter .lcni-table tr:hover td.is-sticky-col {
  background: var(--lcni-row-hover-bg, #eef2ff);
}

/* ── Symbol cell layout ────────────────────────────────────────
   td symbol dùng flex: symbol text bên trái, button + bên phải.
   width: fit-content đảm bảo cột chỉ rộng bằng nội dung.
   min-width nhỏ — chỉ cần đủ cho 3-4 ký tự mã CK.       ── */
.lcni-app .lcni-stock-filter .lcni-table td[data-cell-field="symbol"] {
  white-space: nowrap;
  padding-right: 4px;
}
/* Symbol text: không wrap, flex-grow để chiếm không gian */
.lcni-app .lcni-stock-filter .lcni-table td[data-cell-field="symbol"] span {
  font-weight: 600;
  margin-right: 2px;
}
/* Watchlist add button — appearance từ Button Style Config (Nhóm nút trong bảng).
   Chỉ giữ layout tối thiểu để fit vào symbol cell, không override color/size/opacity. */
.lcni-app .lcni-stock-filter .lcni-table .lcni-btn-btn_add_filter_row {
  vertical-align: middle;
  flex-shrink: 0;
}
/* Header th sticky corner — must be above non-sticky header cells */
.lcni-app .lcni-stock-filter .lcni-table th.is-sticky-col {
  z-index: 25 !important;
}

/* Tắt sticky col khi admin set sticky_column_count=0
   Override cả lcni-ui-table.css :first-child sticky rules */
.lcni-app .lcni-stock-filter.lcni-no-sticky-col .lcni-table th,
.lcni-app .lcni-stock-filter.lcni-no-sticky-col .lcni-table td {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* ── Override lcni-ui-table.css :first-child rules cho filter ──
   lcni-ui-table.css dùng th:first-child (DOM) thay vì .is-sticky-col (class)
   → conflict khi admin muốn tắt sticky.
   Giải pháp: để :first-child rules từ lcni-ui-table.css hoạt động bình thường
   khi stickyCount ≥ 1 (first col đã có .is-sticky-col class → đồng nhất).
   Chỉ override khi stickyCount = 0 → lcni-no-sticky-col class xử lý ở trên. ── */

/* ── Summary ───────────────────────────────────────────────────── */
.lcni-app .lcni-stock-filter .lcni-filter-summary { font-size:12px; color:#374151; }
.lcni-app .lcni-stock-filter .lcni-filter-summary-desktop { display:block; margin-top:auto; padding-top:10px; align-items:center; }
.lcni-app .lcni-stock-filter .lcni-filter-summary-mobile { display:none; margin:8px 0; }

/* ── Misc UI ────────────────────────────────────────────────────── */
.lcni-filter-toast { position:fixed; right:16px; bottom:16px; z-index:9999; padding:8px 12px; border-radius:8px; background:#111827; color:#fff; }
.lcni-filter-modal-backdrop { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); }
.lcni-filter-modal { min-width:320px; max-width:520px; padding:16px; border-radius:10px; background:#fff; }
.lcni-filter-modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lcni-filter-watchlist-options { display:grid; gap:6px; max-height:260px; overflow:auto; }
.lcni-app .lcni-stock-filter [data-column-pop][hidden] { display:none !important; }
.lcni-filter-cell-hint { position:fixed; z-index:10001; padding:4px 8px; border-radius:6px; background:rgba(17,24,39,.92); color:#fff; font-size:11px; pointer-events:none; transform:translate(12px,-14px); max-width:220px; line-height:1.35; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (max-width: 767px)
   Tuân thủ watchlist mobile pattern:
   • .lcni-stock-filter: flex column, overflow-y:clip
   • .lcni-table-scroll: flex:1, overflow:auto (scroll container cho sticky)
   • Sticky header và sticky col hoạt động bên trong .lcni-table-scroll
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container mobile ── */
  /* .lcni-app: clip ngang tại viewport — giống .lcni-watchlist { max-width:100vw; overflow-x:hidden }
     Bảng không tràn ra ngoài trang; .lcni-table-scroll bên trong scroll ngang độc lập.
     overflow-x:hidden KHÔNG phá sticky vì scroll context nằm trong .lcni-table-scroll
     (overflow:hidden không tạo scroll context — chỉ overflow:auto/scroll mới tạo).     */
  .lcni-app {
    max-width:  100vw    !important;
    overflow-x: hidden   !important;
    overflow-y: visible  !important;
    max-height: none     !important;
    contain:    none     !important;
    transform:  none     !important;
    box-sizing: border-box;
  }

  /* .lcni-stock-filter + .lcni-filter-wrapper: overflow:visible
     → KHÔNG tạo scroll context mới
     → sticky col/header bên trong .lcni-table-scroll hoạt động đúng  */
  .lcni-app .lcni-stock-filter,
  .lcni-filter-wrapper {
    overflow:   visible  !important;
    max-height: none     !important;
    contain:    none     !important;
    transform:  none     !important;
    width:      100%     !important;
    box-sizing: border-box;
  }

  /* Scroll container CHỈ NÊN là .lcni-table-scroll
     dvh = dynamic viewport height — tính thanh địa chỉ iOS/Android    */
  .lcni-app .lcni-stock-filter .lcni-table-scroll {
    width: 100%;
    /* max-height thay cho height cứng — không cắt khi bàn phím ảo bật  */
    max-height: calc(100dvh - 160px) !important;
    height: auto !important;
    overflow: auto !important;
    /* KHÔNG dùng -webkit-overflow-scrolling:touch — tạo isolated GPU layer
       trên iOS → position:sticky bị nuốt vào layer, sticky col mất tác dụng */
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    /* will-change:auto tránh tạo compositing layer không cần thiết         */
    will-change: auto !important;
    transform: none !important;
    contain: none !important;
    isolation: auto !important;
  }

  /* Đảm bảo table không bị giới hạn */
  .lcni-app .lcni-stock-filter .lcni-table {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
  }

  /* ── Toolbar ── */
  .lcni-app .lcni-stock-filter .lcni-filter-toolbar {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    right: 8px;
    z-index: 200;
    display: flex;
    gap: 4px;
    padding-top: 6px;
    background: transparent;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-toolbar .lcni-btn {
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    min-width: 40px;
    min-height: 40px;
    border-radius: 8px;
  }

  /* ── Summary mobile ── */
  .lcni-app .lcni-stock-filter .lcni-filter-summary-mobile {
    display: block;
    flex: 0 0 auto;
    padding: 6px 12px 4px;
    font-size: 12px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    margin-top: calc(env(safe-area-inset-top, 0px) + 44px);
  }
  .lcni-app .lcni-stock-filter .lcni-filter-summary-desktop { display: none; }

  /* ── Panel: fixed bottom sheet ── */
  .lcni-app .lcni-stock-filter .lcni-filter-panel,
  .lcni-app .lcni-stock-filter .lcni-column-pop {
    position: fixed;
    left: 0; right: 0;
    top: env(safe-area-inset-top, 0px);
    height: 90svh;
    overflow: hidden;
    z-index: 100;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-top: 6px;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 6px;
    flex: 0 0 auto;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel.is-collapsed { display: none; }

  .lcni-app .lcni-stock-filter .lcni-filter-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 0;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-criteria-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-criteria-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    max-height: none;
    overflow: visible;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-tab { padding: 6px 10px; font-size: 12px; }
  .lcni-app .lcni-stock-filter .lcni-filter-criteria-values { min-height: 120px; }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fff;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions .lcni-saved-filter-label { display: none; }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions select {
    flex: 1 1 130px; min-width: 0; height: 32px; font-size: 12px;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions .lcni-btn {
    flex: 0 0 auto; white-space: nowrap; font-size: 12px;
    margin: 0;
  }

  /* Mobile parity với watchlist/industry monitor:
     ép cột đủ rộng để bảng KHÔNG tự co vừa viewport,
     từ đó luôn có scroll ngang và sticky cột hoạt động ổn định. */
  .lcni-app .lcni-stock-filter .lcni-table th,
  .lcni-app .lcni-stock-filter .lcni-table td {
    min-width: 0;
  }
  /* Date column cần rộng hơn để không bị nén */
  .lcni-app .lcni-stock-filter .lcni-table td[data-cell-field="trade_date"],
  .lcni-app .lcni-stock-filter .lcni-table th[data-sort-key="trade_date"],
  .lcni-app .lcni-stock-filter .lcni-table td[data-cell-field="date"],
  .lcni-app .lcni-stock-filter .lcni-table th[data-sort-key="date"] {
    min-width: 0;
  }
  .lcni-app .lcni-stock-filter .lcni-table th.is-sticky-col,
  .lcni-app .lcni-stock-filter .lcni-table td.is-sticky-col {
    min-width: max-content; /* tránh collapse cột sticky trên mobile Safari/Chrome */
    width: auto;
    white-space: nowrap;   /* không wrap → td luôn fit text */
  }

  /* ── Sticky header mobile: has-sticky-header trên table ── */
  .lcni-app .lcni-stock-filter .lcni-table.has-sticky-header thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--lcni-table-header-bg, #f3f4f6);
    box-shadow: inset 0 -1px 0 var(--lcni-row-divider-color, #e5e7eb);
  }

  /* ── Sticky col — mobile ── */
  .lcni-app .lcni-stock-filter .lcni-table .is-sticky-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;  /* CSS fallback bắt buộc, JS override nếu cần */
    z-index: 15 !important;
    background: var(--lcni-table-value-bg, #fff);
    box-shadow: 2px 0 4px -1px rgba(0,0,0,0.07);
  }
  /* Góc giao nhau header+col — phải cao hơn cả sticky header (20) và sticky col (15)
     z-index:25 nhất quán với desktop; KHÔNG dùng 30 (không cần thiết, dễ conflict) */
  .lcni-app .lcni-stock-filter .lcni-table th.is-sticky-col,
  .lcni-app .lcni-stock-filter .lcni-table.has-sticky-header thead th.is-sticky-col {
    z-index: 25 !important;
    background: var(--lcni-table-header-bg, #f3f4f6);
    box-shadow: 2px 0 4px -1px rgba(0,0,0,0.1),
                inset 0 -1px 0 var(--lcni-row-divider-color, #e5e7eb);
  }
  .lcni-app .lcni-stock-filter .lcni-table tr:hover td.is-sticky-col {
    background: var(--lcni-row-hover-bg, #eef2ff);
  }

  /* ── Button text hide on small screens ── */
  .lcni-btn-btn_apply_filter span,
  .lcni-btn-btn_save_filter span,
  .lcni-btn-btn_filter_reload span,
  .lcni-btn-btn_filter_delete span,
  .lcni-btn-btn_filter_save span,
  .lcni-btn-btn_filter_clear span { display: none; }

  /* ── Actions chip layout ── */
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions {
    flex-direction: row   !important;
    flex-wrap:      wrap  !important;
    align-items:    center !important;
    gap:            6px   !important;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions select {
    flex: 1 1 120px !important; width: auto !important;
    max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box;
  }
  .lcni-app .lcni-stock-filter .lcni-filter-panel-actions .lcni-btn {
    flex: 0 0 auto !important; width: auto !important;
    max-width: none !important; white-space: nowrap !important;
    padding: 7px 10px !important; font-size: 12px !important;
    justify-content: center;
  }
}