/*
 * เมนูกรอง+เรียงคอลัมน์แบบลอย — คู่กับ lib/col_filter.php + assets/col-filter.js (ใช้ที่ tb_stocklist.php,
 * view_dividend_screener.php) ต้องมี assets/site-theme.css โหลดก่อน + .sortable/.arrow ของหัวตารางเอง
 * (assets/data-table.css ให้มาแล้วถ้าใช้ .data-table-card) — ไฟล์นี้ให้แค่ตัวเมนูลอย ไม่ยุ่งกับสไตล์ th/table
 *
 * ประเภทตัวกรอง (data-filter ของ th): text / number (ช่วง min-max) / bool (data-bool-yes/-no กำหนดข้อความ
 * 2 ตัวเลือก) / checkbox (เลือกได้หลายอัน enumerate ค่าจริงในตารางให้เอง)
 */

.col-menu-btn {
    background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 14px;
    padding: 4px 6px; margin-left: 3px; border-radius: 4px; vertical-align: middle; line-height: 1;
}
.col-menu-btn:hover { color: var(--accent); background: var(--autocomplete-hover-bg); }
th.has-filter .col-menu-btn { color: var(--accent); }
.clear-filters-btn {
    margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: var(--font-main);
}
.clear-filters-btn:hover { border-color: var(--accent); color: var(--accent); }
.count-note { font-size: 14px; color: var(--text-muted); margin-left: 10px; }

/* เมนู filter+sort ลอย — กล่องเดียวใช้ร่วมกันทุกคอลัมน์ สลับเนื้อหาตาม data-filter ของ th ที่คลิก */
.col-filter-menu {
    position: fixed; width: 220px; background: var(--card-bg); border: 1px solid var(--border-strong);
    border-radius: 10px; box-shadow: 0 12px 36px var(--shadow); z-index: 1000; display: none;
    padding: 12px; font-family: var(--font-main); font-size: 13px;
}
.col-filter-menu.show { display: block; }
.cfm-title { font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.cfm-sort-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cfm-sort-btn {
    text-align: left; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-secondary); cursor: pointer; font-size: 13px; font-family: var(--font-main);
}
.cfm-sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.cfm-filter-number, .cfm-filter-text, .cfm-filter-bool, .cfm-filter-checkbox { display: none; margin-bottom: 10px; }
.cfm-filter-number.show, .cfm-filter-text.show, .cfm-filter-bool.show, .cfm-filter-checkbox.show { display: block; }
.cfm-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cfm-row label { width: 44px; color: var(--text-muted); flex-shrink: 0; }
.cfm-row input, .cfm-filter-text input {
    flex: 1; width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-primary); font-family: var(--font-main); font-size: 13px;
}
.cfm-row input:focus, .cfm-filter-text input:focus { outline: none; border-color: var(--accent); }
.cfm-filter-bool label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text-secondary); cursor: pointer; }

/* checkbox — ค้นหา + เลือกทั้งหมด/ไม่เลือกเลย + ลิสต์ scroll ได้ (สูงสุด 220px) */
.cfm-checkbox-search {
    width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-primary); font-family: var(--font-main); font-size: 13px;
    margin-bottom: 6px; box-sizing: border-box;
}
.cfm-checkbox-search:focus { outline: none; border-color: var(--accent); }
.cfm-checkbox-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.cfm-checkbox-actions button {
    flex: 1; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: var(--font-main);
}
.cfm-checkbox-actions button:hover { border-color: var(--accent); color: var(--accent); }
.cfm-checkbox-list { max-height: 220px; overflow-y: auto; }
.cfm-checkbox-item {
    display: flex; align-items: center; gap: 6px; padding: 3px 2px; color: var(--text-secondary);
    cursor: pointer; font-size: 13px;
}
.cfm-checkbox-item input { flex-shrink: 0; }

.cfm-actions { display: flex; justify-content: space-between; gap: 8px; }
.cfm-actions button { flex: 1; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; font-family: var(--font-main); }
.cfm-clear { background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); }
.cfm-clear:hover { border-color: var(--accent); }
.cfm-apply { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 700; }
.cfm-apply:hover { background: var(--accent-hover); }